Don't look at the apps modules for examples, they are to be reformulated.
By using the widget framework it's possible for the user to create his own dashboards combining simple widget components. As a developer you can create each widget easily each one on just a JS file.
The bonus to the developer of using the widgets framework is not having to deal with the widget configuration UI every time. Give focus on the functionality instead.
Configurations are taken care by the designer framework (in designer.js) with the dashboard editor, for you.
1 - Create a folder with this structure (can have many widgets on the same module):
Modules/module_name/widget/widgetname/
2 - Add two files to the widgetname folder: (replace widgetname with the name of the widget): widgetname_render.js widgetname_widget.php <- (this is optional, useful to pass php variables to js)
It's on the widgetname_render.js that you set config options and ui draw options.
This two files get loaded automatically (if existent) when the widget is used so you don't have to deal with that also.
3 - This functions are called automatically by the framework, change widgetname to match the folder path widgetname:
widgetname_widgetlist() <- called during configuration. Add config option with addOption function.
widgetname_init() <- called one time on page load, for you to draw the widget ui.
widgetname_fastupdate() <- called about 30x per second, for UI animations.
widgetname_slowupdate() <- called every time feeds data is pooled,
4 - You can get the widget configured values with :
var feedid = $(this).attr("feedid"); // gets config feedid setting
5 - And feed details with last values updated every 5secs with:
var val = associd[feedid]['value'];
6 - Remember that it's in widgetname_render.js you will deal with all instances of the same widget on the screen, so you iterate each instance with:
$('.widgetname').each(function(index) {
var feedid = $(this).attr("feedid"); // gets config feedid setting
var val = associd[feedid]['value'];
$(this).html("Feed value is: " + val); // draw text and feed value on each widget instance on the dashboard
}
SDK: Developing graphical apps / widgets Modules
Submitted by chaveiro on Thu, 03/09/2015 - 14:52To anyone creating new apps / screens.
Create widgets!
Don't look at the apps modules for examples, they are to be reformulated.
By using the widget framework it's possible for the user to create his own dashboards combining simple widget components. As a developer you can create each widget easily each one on just a JS file.
The bonus to the developer of using the widgets framework is not having to deal with the widget configuration UI every time. Give focus on the functionality instead.
Configurations are taken care by the designer framework (in designer.js) with the dashboard editor, for you.
Lets start:
A simple good demo is the feedvalue_render.js widget at https://github.com/chaveiro/emoncms/blob/stable/Modules/dashboard/widget...
1 - Create a folder with this structure (can have many widgets on the same module):
Modules/module_name/widget/widgetname/
2 - Add two files to the widgetname folder: (replace widgetname with the name of the widget):
widgetname_render.js
widgetname_widget.php <- (this is optional, useful to pass php variables to js)
It's on the widgetname_render.js that you set config options and ui draw options.
This two files get loaded automatically (if existent) when the widget is used so you don't have to deal with that also.
3 - This functions are called automatically by the framework, change widgetname to match the folder path widgetname:
4 - You can get the widget configured values with :
var feedid = $(this).attr("feedid"); // gets config feedid setting
5 - And feed details with last values updated every 5secs with:
var val = associd[feedid]['value'];
6 - Remember that it's in widgetname_render.js you will deal with all instances of the same widget on the screen, so you iterate each instance with:
$('.widgetname').each(function(index) {
var feedid = $(this).attr("feedid"); // gets config feedid setting
var val = associd[feedid]['value'];
$(this).html("Feed value is: " + val); // draw text and feed value on each widget instance on the dashboard
}