Convert APPs to dashboard widgets

On XT branch recent upgrades got to touch support, and best usage on mobile devices.

Part of the changes here preparation of Dashboard to support simple development of new widgets without need to change core files. Dashboard supports now unlimited configuration options, custom background color and width/height auto scale to screen size.

A good candidate for 'widgetify' are the new APPs modules and i invite any one to work with me and Trystan to convert them to new visualization plugin modules that can be used to create custom dash boards with them.

For example on the apps module there is much unnecessary code. A new UI for configurations of each app was created and it's not needed.

With the available framework of dashboard editor, to create a new one, just need to create one or two files with the names below (bold part must be named the same):

  • Modules/app_module/widget/app-name/app-name_render.js
  • Modules/app_module/widget/app-name/app-name_widget.php

Define a few variables in app-name_render.js, use the php file for processed stuff if required and the new widget and its configuration will be autommaticaly available to use and edit via dashboard editor. It's configs are saved on the dashboard itself so no new db tables are required.

Required js files are included by the framework as needed.
All API access to feed data is made by json using the existent feed/feed.js functions.

Take a look at \Modules\vis\widget\* files in XT branch for a good example or a simple one at \Modules\dashboard\widget\dial\dial_render.js.

Also i don't recommend passing API keys on the url, if you want anonymous access, set dashboard as public and published on the dashboard list and set the used feeds to public also and it will work.

Take a look of a simple Demo here.

Let us know if you want to be part of this project.

TrystanLea's picture

Re: Convert APPs to dashboard widgets

Hello Chaveiro, Thanks a lot for your work on the extended branch, Il take a look at your new developments and see how much I can merge in to v8.5 too, the touch support sounds great! I like the idea of making the app module graphics available in the dashboards module as widgets too alongside ongoing development of the apps module, the long term idea with the apps module is to allow for the coding of apps that really focus on particular applications well with ability to add in much more complex functionality that would be difficult to implement in the dashboard editor such as a heating controller app or app with notifications/rewards/achievements, or calculations such as percentage of demand supplied directly etc.

Its great to have your contribution on the XT module because it helps me to look at different ways of doing things, we can try different things without having to agree on a single approach, there will be more innovation this way and then convergence on the best features hopefully. Its great to see emoncms taken in different directions like this

chaveiro's picture

Re: Convert APPs to dashboard widgets

Thanks for the recognition. The work i've done was only possible because the EmonCMS is a great project and was cleverly organized from the beginning. I saw that in meantime some parts of the code loose it modularity, functions here replicated, or some features got done fast with less care to the original design patterns. I fixed that occurrences when founded.

This XT branch is nothing more than a reviewed baseline for the future developments.

The apps widgets in dashboard approach is to allow quick development of new complex graphical modules without the need to code custom UI configuration screens as its offered by the dash editor.
If an app requires complex logic you can focus the code effort on the api logic side instead of having to code a configuration UI every time.

Any new module that comes can include many new widgets that will be usable from the dashboard editor for displaying at the user preferences.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.