We have moved at community.getvera.com

Author Topic: Device Dashboard for Dummies  (Read 9970 times)

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Device Dashboard for Dummies
« on: September 03, 2015, 08:34:54 pm »
amg0, Thanks for adding the dashboard for the VSwitch.  I use that one a lot.

I've tried deciphering where and how the dashboards are created in the code.  Not much success.  I'm more of a classic coder--Java, C++, etc.  I can do some lua and javascript is no big deal.  But the key to it all I believe is how to use the libraries and tools.

If you're willing I'd love it if you could show where and how you added the dashboard for the VSwitch.  Kind of a adding a device dashboard for dummies if you will.

I have a custom device of my own that I would like to add two dashboard switches and a few status variables.  I think I can find where to start, but I don't know how to finish

Thanks!!    --David
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #1 on: September 04, 2015, 12:57:40 am »
amg0, Thanks for adding the dashboard for the VSwitch.  I use that one a lot.

I've tried deciphering where and how the dashboards are created in the code.  Not much success.  I'm more of a classic coder--Java, C++, etc.  I can do some lua and javascript is no big deal.  But the key to it all I believe is how to use the libraries and tools.

If you're willing I'd love it if you could show where and how you added the dashboard for the VSwitch.  Kind of a adding a device dashboard for dummies if you will.

I have a custom device of my own that I would like to add two dashboard switches and a few status variables.  I think I can find where to start, but I don't know how to finish

Thanks!!    --David

Yes,I ll post something later but for now these could be useful to start
http://forum.micasaverde.com/index.php/topic,33307.0.html
http://www.touteladomotique.com/index.php?option=com_content&view=article&id=1445:altuin-user-interface-alternative-pour-vera-extensions&catid=5:domotique&Itemid=89#.VekipMSviK0
J_altui_plugins.js or j_altui_iphone.js are example of device dashboard and control panel plugins
Plugins are declared in the config variable of altUI device or in l_altui.lua code for the default config. I do force config to be reset to default whenever Lua code version increases so it could be good you give me your config and module and code once done, up to you.


Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #2 on: September 04, 2015, 05:57:06 pm »
I have attached a tutorial document in English into the msg1 of the plugin development thread here
http://forum.micasaverde.com/index.php/topic,33307.msg244107.html#msg244107

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #3 on: September 06, 2015, 04:05:23 pm »
Very, very helpful.  Thanks for doing that.  From the document I was able to (finally) understand how the dashboards are declared, and see how they are implemented.  I was able to add a dashboard to my own plugin which is basically the old ping sensor rewritten and extended somewhat.  I attached the result.  Now I have about 8 more to make for devices that I use that don't currently have one.  I'll share those once I'm done.

Thanks!!!   --David
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #4 on: September 06, 2015, 04:28:35 pm »
Very, very helpful.  Thanks for doing that.  From the document I was able to (finally) understand how the dashboards are declared, and see how they are implemented.  I was able to add a dashboard to my own plugin which is basically the old ping sensor rewritten and extended somewhat.  I attached the result.  Now I have about 8 more to make for devices that I use that don't currently have one.  I'll share those once I'm done.

Thanks!!!   --David

looks great !

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #5 on: September 06, 2015, 05:35:26 pm »
This appears to work well for the GCal device since it is really just another sensor.  Easy since it just uses the existing motion sensor implementation.

PluginConfig variable:

"urn:schemas-utz-com:device:GCal:1": {"DeviceDrawFunc": "ALTUI_PluginDisplays.drawGCal","ScriptFile": "J_ALTUI_plugins.js"}

mapping in J_ALTUI_plugins.js

drawGCal       : _drawGCal,

method in J_ALTUI_plugins.js

function _drawGCal( device ) {
    return _drawMotion( device );
}

Edit:  I just noticed the dashboard image doesn't have the last tripped date/time.  That's only because this particular device has never been tripped!
« Last Edit: September 06, 2015, 05:52:47 pm by dklinkman »
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #6 on: September 07, 2015, 11:26:58 am »
This appears to work well for the GCal device since it is really just another sensor.  Easy since it just uses the existing motion sensor implementation.

PluginConfig variable:

"urn:schemas-utz-com:device:GCal:1": {"DeviceDrawFunc": "ALTUI_PluginDisplays.drawGCal","ScriptFile": "J_ALTUI_plugins.js"}

mapping in J_ALTUI_plugins.js

drawGCal       : _drawGCal,

method in J_ALTUI_plugins.js

function _drawGCal( device ) {
    return _drawMotion( device );
}

Edit:  I just noticed the dashboard image doesn't have the last tripped date/time.  That's only because this particular device has never been tripped!

ok thank you very much ! saves me time ... included in next version

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #7 on: September 07, 2015, 04:09:52 pm »
Sweet!  I was able to get my sensor device type to dynamically register with altui using @reneboer's pattern.

Now your [very welcome and] frequent altui updates won't overwrite my dashboard  :-)

--David
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #8 on: September 07, 2015, 09:01:14 pm »
amg0 Here's another one for you.  This is a dashboard for the Combination Switch.  Another device I use a lot.

PluginConfig variable:

Code: [Select]
{"urn:schemas-futzle-com:device:CombinationSwitch:1": {"DeviceDrawFunc": "ALTUI_PluginDisplays.drawCombinationSwitch","ScriptFile": "J_ALTUI_plugins.js"}
Object Mapping:

Code: [Select]
drawCombinationSwitch : _drawCombinationSwitch,
JS Method:

Code: [Select]
    function _drawCombinationSwitch( device ) {
        var html = "";
       
        var poke = 0;
        html += _createOnOffButton( poke,"altui-pokebtn-"+device.altuiid, _T("Poke,Poke") , "pull-right" );

        var label = MultiBox.getStatus( device, 'urn:futzle-com:serviceId:CombinationSwitch1', 'Label' );
        if (label != null) {
            html += "<div class='altui-temperature'><br>Watched Items: {0}</div>".format(label);
        }

        html += "<script type='text/javascript'>";
        html += " $('div#altui-pokebtn-{0}').on('click touchend', function() { MultiBox.runActionByAltuiID('{0}', 'urn:futzle-com:serviceId:CombinationSwitch1', 'Trigger', {}); } );".format(device.altuiid);
        html += "</script>";

        return html;
    };

But I need your help a little bit with this one.  The "poke" button should be a momentary type, literally a pushbutton, not a toggle or an on/off type.  I used your on/off button only because I don't know how to create a different one.  The button works.  If you click it the javascript runs and the device gets "poked" as it should.  But the button has no feedback or animation.  For what it's worth the button under UI7 doesn't animate either.

In any case the dashboard works just fine.  I couldn't find an example of 'just a button' in any of your works.  At least nothing that fits the motif.  The thermostat device had some interesting code that I want to study some more.  Nice work there.

Thanks!!!    --David
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #9 on: September 07, 2015, 10:40:14 pm »
amg0, Here's one more.  This time for the DayTime plugin which I also use.  This one loosely follows your VSwitch pattern.

This one simply displays a Night/Day toggle switch on the dashboard.  This device allows you to temporarily force night and day states via the toggle switch.  Which is handy when testing a scene, for example.

PluginConfig:
Code: [Select]
"urn:schemas-rts-services-com:device:DayTime:1": {"DeviceDrawFunc": "ALTUI_PluginDisplays.drawDayTime","ScriptFile": "J_ALTUI_plugins.js"}
Object Mapping:
Code: [Select]
drawDayTime    : _drawDayTime,
An Object Mapping of a new method - hopefully you know where this goes:
Code: [Select]
    toggleDayTimeButton : function (altuiid,htmlid) {
ALTUI_PluginDisplays.toggleButton(altuiid, htmlid, 'urn:rts-services-com:serviceId:DayTime', 'Status', function(id,newval) {
            MultiBox.runActionByAltuiID( altuiid, 'urn:rts-services-com:serviceId:DayTime', 'SetTarget', {newTargetValue:newval} );
        });
    },

And the new dashboard method:
Code: [Select]
    function _drawDayTime( device ) {
var html = "";
       
var status = parseInt(MultiBox.getStatus( device, 'urn:rts-services-com:serviceId:DayTime', 'Status' ));
html += _createOnOffButton( status,"altui-onoffbtn-"+device.altuiid, _T("Night,Day") , "pull-right");

html += "<script type='text/javascript'>";
html += " $('div#altui-onoffbtn-{0}').on('click touchend', function() { ALTUI_PluginDisplays.toggleDayTimeButton('{0}','div#altui-onoffbtn-{0}'); } );".format(device.altuiid);
html += "</script>";
return html;
    }
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #10 on: September 08, 2015, 02:02:58 am »
fantastic, thx !
I added it in the next revision ( not yet published ) but the source code is here
http://code.mios.com/trac/mios_alternate_ui/browser

regarding the poke button, would not a simple push button work ? we have example in infoviewer dashboard for instance of a classic push button for instance

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #11 on: September 08, 2015, 08:45:19 am »
Quote
regarding the poke button, would not a simple push button work ? we have example in infoviewer dashboard for instance of a classic push button for instance
I suppose it would!  When scanning for examples unfortunately I'm only looking at devices I have.  But I'll check out Infoviewer.

Thanks!
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #12 on: September 08, 2015, 12:34:39 pm »
amg0, That worked well.  Classic pushbutton it is.  I also toned down the text label.  Here's the updated method.
Code: [Select]
    function _drawCombinationSwitch( device ) {
        var html = "";
       
        html += ("<button id='altui-pokebtn-{0}' type='button' class='pull-right altui-window-btn btn btn-default btn-sm '>{1}</button>" .format( device.altuiid,_T("Poke") )) ;

        var label = MultiBox.getStatus( device, 'urn:futzle-com:serviceId:CombinationSwitch1', 'Label' );
        if (label != null) {
            html += "<div class='altui-vswitch-text text-muted'><br>Watched Items: {0}</div>".format(label);
        }

        html += "<script type='text/javascript'>";
        html += " $('button#altui-pokebtn-{0}').on('click', function() { console.log('clicked'); MultiBox.runActionByAltuiID('{0}', 'urn:futzle-com:serviceId:CombinationSwitch1', 'Trigger', {}); } );".format(device.altuiid);
        html += "</script>";

        return html;
    };
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #13 on: September 08, 2015, 04:03:55 pm »
amg0, That worked well.  Classic pushbutton it is.  I also toned down the text label.  Here's the updated method.
Code: [Select]
    function _drawCombinationSwitch( device ) {
        var html = "";
       
        html += ("<button id='altui-pokebtn-{0}' type='button' class='pull-right altui-window-btn btn btn-default btn-sm '>{1}</button>" .format( device.altuiid,_T("Poke") )) ;

        var label = MultiBox.getStatus( device, 'urn:futzle-com:serviceId:CombinationSwitch1', 'Label' );
        if (label != null) {
            html += "<div class='altui-vswitch-text text-muted'><br>Watched Items: {0}</div>".format(label);
        }

        html += "<script type='text/javascript'>";
        html += " $('button#altui-pokebtn-{0}').on('click', function() { console.log('clicked'); MultiBox.runActionByAltuiID('{0}', 'urn:futzle-com:serviceId:CombinationSwitch1', 'Trigger', {}); } );".format(device.altuiid);
        html += "</script>";

        return html;
    };

thx, integrated and published in v0.70.667

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #14 on: September 08, 2015, 10:30:47 pm »
Awesome.  Thank you.  Here's yet another one.  A dashboard for the Sonos plugin this time.  Implementation is a little more complicated.  The presentation lags a bit but that's just the updating of the UI I think.  But it's functional.

PluginConfig:
Code: [Select]
"urn:schemas-micasaverde-com:device:Sonos:1":{"DeviceDrawFunc":"ALTUI_PluginDisplays.drawSonos","ScriptFile":"J_ALTUI_plugins.js"}
Object Mapping:
Code: [Select]
drawSonos      : _drawSonos,
Dashboard Method:
Code: [Select]
    function _drawSonos( device ) {
        var html = "";
        var status = MultiBox.getStatus(device, 'urn:upnp-org:serviceId:AVTransport', 'TransportState'); // may return: PLAYING, PAUSED_PLAYBACK, STOPPED
        var title = MultiBox.getStatus(device, 'urn:upnp-org:serviceId:AVTransport', 'CurrentTitle'); // could also get CurrentAlbum, CurrentArtist, CurrentStatus
        var playstatus = ""; var playtitle = ""; var playbtn = "Play"; var stopbtn = "Stop"; var playbtnstyle = ""; var stopbtnstyle = "";
        if (title != null) {
            if (status == "PLAYING") {
                playstatus = "Playing..."; playtitle = title; playbtn = "Pause";
            } else {
                if (status == "PAUSED_PLAYBACK") {
                    playstatus = "<br>Paused...<br>Press Play to continue";
                } else if (status == "STOPPED") {
                    playstatus = "<br>Stopped";
                } else {
                    playstatus = "";
                }
            }
        }       
        html += "<button id='altui-Stopbtn-{0}' type='button' class='pull-right altui-window-btn btn btn-default btn-sm {1}'>{2}</button>" .format(device.altuiid, stopbtnstyle, _T(stopbtn)) ;
        html += "<button id='altui-{2}btn-{0}' type='button' class='pull-right altui-window-btn btn btn-default btn-sm {1}'>{2}</button>" .format(device.altuiid, playbtnstyle, _T(playbtn)) ;
        if (title != null) {
            html += "<div class='altui-vswitch-text text-muted' style='height: 50px; overflow: hidden'>{0}<br>{1}</div>".format(playstatus, playtitle);
        }
        html += "<script type='text/javascript'>";
        html += " $('button#altui-Playbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:micasaverde-com:serviceId:MediaNavigation1', 'Play', {}); } );".format(device.altuiid);
        html += " $('button#altui-Pausebtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:micasaverde-com:serviceId:MediaNavigation1', 'Pause', {}); } );".format(device.altuiid);
        html += " $('button#altui-Stopbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:micasaverde-com:serviceId:MediaNavigation1', 'Stop', {}); } );".format(device.altuiid);
        html += "</script>";
        return html;
    }

This simple dashboard doesn't even begin to scratch the functionality of the control panel tabs which are all fully functional under altui.  But it's something.

I played with colors for the buttons but backed that off because the UI refresh seemed to interfere with it.  I might need to figure out how to use the spinner like you do with the onoff button.  More code to study.

One question for you.  I tend to reuse CSS classes from other dashboards rather than define new ones.  Is that ok or maybe a no-no?  I know you've put a lot of work into CSS and skinning.

Only 4 more device types to 'dashboard' on my short list!!

Thanks!!!    --David
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup