Device Dashboard for Dummies

Sorry. Realized after the fact that this is not just a water/temp sensor but a security sensor. So it needs an arm/bypass switch and i also managed to get the last tripped in there without compromising the temperature reading. Updated and somewhat more complicated method attached.

function _drawTempLeak( device ) { var html = ""; var armed = parseInt(MultiBox.getStatus( device, 'urn:micasaverde-com:serviceId:SecuritySensor1', 'Armed' )); html += _createOnOffButton( armed,"altui-onoffbtn-"+device.altuiid, _T("Bypass,Arm"), "pull-right" ); html += _drawTempSensor(device); var lasttrip = MultiBox.getStatus( device, 'urn:micasaverde-com:serviceId:SecuritySensor1', 'LastTrip' ); if (lasttrip != null) { var lasttripdate = _toIso(new Date(lasttrip*1000),' '); html+= "<div class='altui-lasttrip-text text-muted'>{0} {1} </div>".format( timeGlyph,lasttripdate ); } html += "<script type='text/javascript'>"; html += " $('div#altui-onoffbtn-{0}').on('click touchend', function() { ALTUI_PluginDisplays.toggleArmed('{0}','div#altui-onoffbtn-{0}'); } );".format(device.altuiid); html += "</script>"; return html; }

[quote=“dklinkman, post:21, topic:188672”]Sorry. Realized after the fact that this is not just a water/temp sensor but a security sensor. So it needs an arm/bypass switch and i also managed to get the last tripped in there without compromising the temperature reading. Updated and somewhat more complicated method attached.

function _drawTempLeak( device ) { var html = ""; var armed = parseInt(MultiBox.getStatus( device, 'urn:micasaverde-com:serviceId:SecuritySensor1', 'Armed' )); html += _createOnOffButton( armed,"altui-onoffbtn-"+device.altuiid, _T("Bypass,Arm"), "pull-right" ); html += _drawTempSensor(device); var lasttrip = MultiBox.getStatus( device, 'urn:micasaverde-com:serviceId:SecuritySensor1', 'LastTrip' ); if (lasttrip != null) { var lasttripdate = _toIso(new Date(lasttrip*1000),' '); html+= "<div class='altui-lasttrip-text text-muted'>{0} {1} </div>".format( timeGlyph,lasttripdate ); } html += "<script type='text/javascript'>"; html += " $('div#altui-onoffbtn-{0}').on('click touchend', function() { ALTUI_PluginDisplays.toggleArmed('{0}','div#altui-onoffbtn-{0}'); } );".format(device.altuiid); html += "</script>"; return html; }[/quote]
thanks ! should we have a tripped indicator like the motion sensor with it too ?

thanks ! should we have a tripped indicator like the motion sensor with it too ?

I suppose it should. I tried putting a small tripped indicator below the date/time but it looked silly so I took it out.

Maybe to the right of the date/time if that can work. It’s not like it’s going to appear all that often

amg0, here’s yet another dashboard. This time for the beloved multi string container. This one’s a little busy. You can fill in the missing parts I hope.

"urn:schemas-upnp-org:device:VContainer:1":{"DeviceDrawFunc":"ALTUI_PluginDisplays.drawMultiString","ScriptFile":"J_ALTUI_plugins.js"},

classes for ‘_getStyle’

style += ".altui-multistring-text-div { margin-top: 2px; height: 48px; overflow: hidden; }" style += ".altui-multistring-text-some { font-size: 11px; }"; style += ".altui-multistring-text-all { font-size: 7px; }"; style += ".altui-multistring-text-1, .altui-multistring-text-2 { }";

And the method:

// return the html string inside the .panel-body of the .altui-device#id panel function _drawMultiString( device ) { var html = ""; html += "<div class='btn-group pull-right'>"; html += " <button id='altui-allbtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,_T("All")); html += " <button id='altui-morebtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,_T("More")); html += "</div>"; html += "<div class='altui-multistring-text-div'>"; for (var v = 1; v <= 5 ; v++) { var label = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "VariableName" + v ); var value = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "Variable" + v ); var style = "class='altui-multistring-text-some altui-multistring-text-1 text-muted'"; if (v > 3) { style = "class='altui-multistring-text-some altui-multistring-text-2 text-muted' style='display: none;'"; } if (label != null && value != null) { html += $(" <div " + style + "></div>").text(label + ": " + value).wrap( "<div></div>" ).parent().html() } } html += "</div>"; html += "<script type='text/javascript'>"; html += " $('button#altui-allbtn-{0}').on('click', function() { $('.altui-multistring-text-some').removeClass('altui-multistring-text-some').addClass('altui-multistring-text-all').show(); $('#altui-morebtn-{0}').html('Less'); });".format(device.altuiid); html += " $('button#altui-morebtn-{0}').on('click', function() { var ml = $(this).html(); if (ml == 'Less') { $('.altui-multistring-text-all').removeClass('altui-multistring-text-all').addClass('altui-multistring-text-some'); $('.altui-multistring-text-2').hide(); $('#altui-morebtn-{0}').html('More'); } else { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); } });".format(device.altuiid); html += "</script>"; return html; }

Basically the MultiString plugin supports 5 labels and variables and the dashboard initially displays the first 3. If they are not too wordy they should display ok. The buttons can display all 5 with reduced font, or can toggle between the first 3, or last 2. An altui refresh which happens occasionally will reset the presentation. But that’s life.

Thanks!!! --David

[quote=“dklinkman, post:24, topic:188672”]amg0, here’s yet another dashboard. This time for the beloved multi string container. This one’s a little busy. You can fill in the missing parts I hope.

"urn:schemas-upnp-org:device:VContainer:1":{"DeviceDrawFunc":"ALTUI_PluginDisplays.drawMultiString","ScriptFile":"J_ALTUI_plugins.js"},

classes for ‘_getStyle’

style += ".altui-multistring-text-div { margin-top: 2px; height: 48px; overflow: hidden; }" style += ".altui-multistring-text-some { font-size: 11px; }"; style += ".altui-multistring-text-all { font-size: 7px; }"; style += ".altui-multistring-text-1, .altui-multistring-text-2 { }";

And the method:

// return the html string inside the .panel-body of the .altui-device#id panel function _drawMultiString( device ) { var html = ""; html += "<div class='btn-group pull-right'>"; html += " <button id='altui-allbtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,_T("All")); html += " <button id='altui-morebtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,_T("More")); html += "</div>"; html += "<div class='altui-multistring-text-div'>"; for (var v = 1; v <= 5 ; v++) { var label = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "VariableName" + v ); var value = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "Variable" + v ); var style = "class='altui-multistring-text-some altui-multistring-text-1 text-muted'"; if (v > 3) { style = "class='altui-multistring-text-some altui-multistring-text-2 text-muted' style='display: none;'"; } if (label != null && value != null) { html += $(" <div " + style + "></div>").text(label + ": " + value).wrap( "<div></div>" ).parent().html() } } html += "</div>"; html += "<script type='text/javascript'>"; html += " $('button#altui-allbtn-{0}').on('click', function() { $('.altui-multistring-text-some').removeClass('altui-multistring-text-some').addClass('altui-multistring-text-all').show(); $('#altui-morebtn-{0}').html('Less'); });".format(device.altuiid); html += " $('button#altui-morebtn-{0}').on('click', function() { var ml = $(this).html(); if (ml == 'Less') { $('.altui-multistring-text-all').removeClass('altui-multistring-text-all').addClass('altui-multistring-text-some'); $('.altui-multistring-text-2').hide(); $('#altui-morebtn-{0}').html('More'); } else { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); } });".format(device.altuiid); html += "</script>"; return html; }

Basically the MultiString plugin supports 5 labels and variables and the dashboard initially displays the first 3. If they are not too wordy they should display ok. The buttons can display all 5 with reduced font, or can toggle between the first 3, or last 2. An altui refresh which happens occasionally will reset the presentation. But that’s life.

Thanks!!! --David[/quote]

thank you. I integrated as is for now.

ALTUI has an object for persistent settings.

to read from it

var value = MyLocalStorage.getSettings('MYSETTINGSNAME');

to save into it

MyLocalStorage.setSettings("MYSETTINGSNAME",value);

Here’s another update for the MultiSwitch dashboard that incorporates your suggestions regarding localized strings and using the object persistence.

So the device will always show a default view when first displayed or when altui is reloaded or refreshed in the browser. If any other view is selected it will persist through presentation updates, like after a variable is changed. The javascript is a little crazy but it seems to work well.

// return the html string inside the .panel-body of the .altui-device#id panel function _drawMultiString( device ) { var html = ""; var sAll = _T("All"); var sMore = _T("More"); var sLess = _T("Less"); if ($('button#altui-morebtn-'+device.altuiid).html() == undefined) { var initstate = {}; initstate['devicestate'] = 0; MyLocalStorage.setSettings("MULTISTRINGUISTATE"+device.altuiid, initstate); } var state = MyLocalStorage.getSettings("MULTISTRINGUISTATE"+device.altuiid); var display = state != null ? state['devicestate'] : 0; html += "<div class='btn-group pull-right'>"; html += " <button id='altui-allbtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,sAll); html += " <button id='altui-morebtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,(display != 2 ? sMore : sLess)); html += "</div>"; html += "<div class='altui-multistring-text-div'>"; for (var v = 1; v <= 5 ; v++) { var label = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "VariableName" + v ); var value = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "Variable" + v ); var style = ""; if (v <= 3) { style = "class='" + (display != 2 ? "altui-multistring-text-some" : "altui-multistring-text-all") + " altui-multistring-text-1 text-muted'"; } else { style = "class='" + (display != 2 ? "altui-multistring-text-some" : "altui-multistring-text-all") + " altui-multistring-text-2 text-muted'"; if (display != 2) { style += " style='display: none;'"; } } if (label != null && value != null) { html += $(" <div " + style + "></div>").text(label + ": " + value).wrap( "<div></div>" ).parent().html(); } } html += "</div>"; html += "<script type='text/javascript'>"; html += " var state = MyLocalStorage.getSettings('MULTISTRINGUISTATE{0}');".format(device.altuiid); html += " if (state['devicestate'] == 1) { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); }"; html += " $('button#altui-allbtn-{0}').on('click', function() { $('.altui-multistring-text-some').removeClass('altui-multistring-text-some').addClass('altui-multistring-text-all').show(); $('#altui-morebtn-{0}').html('{1}'); state['devicestate'] = 2; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); });".format(device.altuiid,sLess); html += " $('button#altui-morebtn-{0}').on('click', function() { if ($(this).html() == '{1}') { $('.altui-multistring-text-all').removeClass('altui-multistring-text-all').addClass('altui-multistring-text-some'); $('.altui-multistring-text-2').hide(); $('#altui-morebtn-{0}').html('{2}'); state['devicestate'] = 0; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); } else { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); state['devicestate'] = state['devicestate'] == 0 ? 1 : 0; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); } });".format(device.altuiid,sLess,sMore); html += "</script>"; return html; }

Thanks!!! --David

[quote=“dklinkman, post:26, topic:188672”]Here’s another update for the MultiSwitch dashboard that incorporates your suggestions regarding localized strings and using the object persistence.

So the device will always show a default view when first displayed or when altui is reloaded or refreshed in the browser. If any other view is selected it will persist through presentation updates, like after a variable is changed. The javascript is a little crazy but it seems to work well.

// return the html string inside the .panel-body of the .altui-device#id panel function _drawMultiString( device ) { var html = ""; var sAll = _T("All"); var sMore = _T("More"); var sLess = _T("Less"); if ($('button#altui-morebtn-'+device.altuiid).html() == undefined) { var initstate = {}; initstate['devicestate'] = 0; MyLocalStorage.setSettings("MULTISTRINGUISTATE"+device.altuiid, initstate); } var state = MyLocalStorage.getSettings("MULTISTRINGUISTATE"+device.altuiid); var display = state != null ? state['devicestate'] : 0; html += "<div class='btn-group pull-right'>"; html += " <button id='altui-allbtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,sAll); html += " <button id='altui-morebtn-{0}' type='button' class='altui-window-btn btn btn-default btn-xs'>{1}</button>".format( device.altuiid,(display != 2 ? sMore : sLess)); html += "</div>"; html += "<div class='altui-multistring-text-div'>"; for (var v = 1; v <= 5 ; v++) { var label = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "VariableName" + v ); var value = MultiBox.getStatus( device, 'urn:upnp-org:serviceId:VContainer1', "Variable" + v ); var style = ""; if (v <= 3) { style = "class='" + (display != 2 ? "altui-multistring-text-some" : "altui-multistring-text-all") + " altui-multistring-text-1 text-muted'"; } else { style = "class='" + (display != 2 ? "altui-multistring-text-some" : "altui-multistring-text-all") + " altui-multistring-text-2 text-muted'"; if (display != 2) { style += " style='display: none;'"; } } if (label != null && value != null) { html += $(" <div " + style + "></div>").text(label + ": " + value).wrap( "<div></div>" ).parent().html(); } } html += "</div>"; html += "<script type='text/javascript'>"; html += " var state = MyLocalStorage.getSettings('MULTISTRINGUISTATE{0}');".format(device.altuiid); html += " if (state['devicestate'] == 1) { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); }"; html += " $('button#altui-allbtn-{0}').on('click', function() { $('.altui-multistring-text-some').removeClass('altui-multistring-text-some').addClass('altui-multistring-text-all').show(); $('#altui-morebtn-{0}').html('{1}'); state['devicestate'] = 2; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); });".format(device.altuiid,sLess); html += " $('button#altui-morebtn-{0}').on('click', function() { if ($(this).html() == '{1}') { $('.altui-multistring-text-all').removeClass('altui-multistring-text-all').addClass('altui-multistring-text-some'); $('.altui-multistring-text-2').hide(); $('#altui-morebtn-{0}').html('{2}'); state['devicestate'] = 0; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); } else { $('.altui-multistring-text-1').toggle(); $('.altui-multistring-text-2').toggle(); state['devicestate'] = state['devicestate'] == 0 ? 1 : 0; MyLocalStorage.setSettings('MULTISTRINGUISTATE{0}', state); } });".format(device.altuiid,sLess,sMore); html += "</script>"; return html; }

Thanks!!! --David[/quote]
ok integrated for next release

Here’s a little/simple one for a change. For the UPnP Proxy device. All it does really is display the status text.

"urn:schemas-futzle-com:device:UPnPProxy:1":{"DeviceDrawFunc":"ALTUI_PluginDisplays.drawPnPProxy","ScriptFile":"J_ALTUI_plugins.js"},
style += ".altui-upnpproxy-text { font-size: 11px; margin-left: 2px; margin-top: 22px; }";

// return the html string inside the .panel-body of the .altui-device#id panel function _drawPnPProxy( device ) { var html = ""; var status = MultiBox.getStatus( device, 'urn:futzle-com:serviceId:UPnPProxy1', 'StatusText' ); if (status != null) { html += "<div class='altui-upnpproxy-text text-muted'>Status: {0}</div>".format(status); } return html; }

Thanks!!! --David

Hey amg0, Here’s another dashboard for you. I think the last one I might do for awhile, since I have covered everything I install and use that you haven’t already done. 7 buttons on the dashboard. Plus a countdown timer. This time for the Program Logic Timer Switch device. And it’s a busy one. But it seems to work well enough.

param:

"urn:schemas-rts-services-com:device:ProgramLogicTS:1":{"ScriptFile":"J_ALTUI_plugins.js","DeviceDrawFunc":"ALTUI_PluginDisplays.drawProgLogicTimerSwitch"},

mapping:

drawProgLogicTimerSwitch: _drawProgLogicTimerSwitch,

styles:

style += ".altui-plts-btn-div { margin-top: 4px; height: 48px; overflow:hidden; } .altui-plts-btn { width: 50px; font-size: 11px; line-height: 1.5; } .altui-plts-btn-on { color: white; background-color: #006C44; } .altui-plts-btn-on:hover, .altui-plts-btn-on:focus, .altui-plts-btn-on:active, .altui-plts-btn-on:active:focus, .altui-plts-btn-on.active:focus { color: white; background-color: #006C44; outline: 0 none; box-shadow: none; } .altui-plts-time-text-div { float: left; margin-left: 6px; margin-top: 5px; font-size: 9px; overflow: hidden; }";

the method

function _drawProgLogicTimerSwitch( device ) { var html = ""; var onoff = MultiBox.getStatus(device, 'urn:rts-services-com:serviceId:ProgramLogicTS', 'Status'); var armed = MultiBox.getStatus(device, 'urn:rts-services-com:serviceId:ProgramLogicTS', 'Armed'); var state = MultiBox.getStatus(device, 'urn:rts-services-com:serviceId:ProgramLogicTS', 'State'); var rtime = MultiBox.getStatus(device, 'urn:rts-services-com:serviceId:ProgramLogicTS', 'TimeRemaining'); html += "<div class='pull-right altui-plts-btn-div'>"; html += " <div class='btn-group'>"; html += " <button id='altui-armbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs {2}'>{1}</button>".format(device.altuiid, _T("Arm"), armed==1?'altui-plts-btn-on':''); html += " <button id='altui-bypassbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs {2}'>{1}</button>".format(device.altuiid, _T("Bypass"), armed==0?'altui-plts-btn-on':''); html += " <button id='altui-triggerbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs'>{1}</button>".format(device.altuiid, _T("Trigger")); html += " <button id='altui-restartbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs'>{1}</button>".format(device.altuiid, _T("Restart")); html += " </div><br>"; html += " <div class='btn-group'>"; html += " <button id='altui-onbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs {2}'>{1}</button>".format(device.altuiid, _T("On"), onoff==1?'altui-plts-btn-on':''); html += " <button id='altui-offbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs {2}'>{1}</button>".format(device.altuiid, _T("Off"), onoff==0?'altui-plts-btn-on':''); html += " <button id='altui-resetbtn-{0}' type='button' class='altui-plts-btn btn btn-default btn-xs {2}'>{1}</button>".format(device.altuiid, _T("Reset"), state==0?'altui-plts-btn-on':''); if (state == 3 && rtime != null) { var h = '00'; var m = '00'; var s = '00'; var hms = rtime.split(':'); if ( hms.length == 3) { h = hms[0]; m = hms[1]; s = hms[2] } else if ( hms.length == 2) { m = hms[0]; s = hms[1] } else { s = hms[0] } html += "<div id='altui-plts-rtime' class='altui-plts-time-text-div text-muted'>" + "{0}:{1}:{2}".format(h,m,s) + "</div>"; } html += " </div>"; html += "</div>"; html += "<script type='text/javascript'>"; html += " function resizepltbtn() { var w = $('div.altui-device-body').width(); w=w<250?(w-50)/4:50; $('button.altui-plts-btn').css('width', w); $('#altui-plts-rtime').css('width', w-8).css('overflow', 'hidden'); }; resizepltbtn();"; html += " $(window).resize(function(){ resizepltbtn(); });" html += " $('button#altui-restartbtn-{0}').on('click', function() { var device = MultiBox.getDeviceByAltuiID('{0}'); var state = MultiBox.getStatus(device, 'urn:rts-services-com:serviceId:ProgramLogicTS', 'State'); if (state==3) { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetState',{'newStateValue':'2'}); $('button#altui-restartbtn-{0}').addClass('altui-plts-btn-on'); } });".format(device.altuiid); html += " $('button#altui-triggerbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetState',{'newStateValue':'1'}); $('button#altui-triggerbtn-{0}').addClass('altui-plts-btn-on'); });".format(device.altuiid); html += " $('button#altui-bypassbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetArmed',{'newArmedValue':'0'}); $('button#altui-bypassbtn-{0}').addClass('altui-plts-btn-on'); $('button#altui-armbtn-{0}').removeClass('altui-plts-btn-on'); });".format(device.altuiid); html += " $('button#altui-armbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetArmed',{'newArmedValue':'1'}); $('button#altui-armbtn-{0}').addClass('altui-plts-btn-on'); $('button#altui-bypassbtn-{0}').removeClass('altui-plts-btn-on'); });".format(device.altuiid); html += " $('button#altui-resetbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetState',{'newStateValue':'0'}); $('button#altui-resetbtn-{0}').addClass('altui-plts-btn-on'); });".format(device.altuiid); html += " $('button#altui-offbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetTarget',{'newTargetValue':'0'}); $('button#altui-offbtn-{0}').addClass('altui-plts-btn-on'); $('button#altui-onbtn-{0}').removeClass('altui-plts-btn-on'); });".format(device.altuiid); html += " $('button#altui-onbtn-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}','urn:rts-services-com:serviceId:ProgramLogicTS','SetTarget',{'newTargetValue':'1'}); $('button#altui-onbtn-{0}').addClass('altui-plts-btn-on'); $('button#altui-offbtn-{0}').removeClass('altui-plts-btn-on'); });".format(device.altuiid); html += "</script>"; return html; }

Enjoy. Thanks!!! --David

Thought I have ago. This is for the Arduino MySensors plugin:

"urn:schemas-arduino-cc:device:arduino:1": { "DeviceDrawFunc": "ALTUI_PluginDisplays.drawMySensors", "ScriptFile": "J_ALTUI_plugins.js" },

drawMySensors : _drawMySensors,

[code] function _drawMySensors( device) {
var including = MultiBox.getStatus(device, ‘urn:upnp-arduino-cc:serviceId:arduino1’, ‘InclusionMode’);

    var html = "";
    html += "<div class='text-muted'>Press Start to include"

    html += "<div class='pull-right'>";
    html += ("<button id ='altui-arduino-include-start-{0}' type='button' class='altui-window-btn btn btn-default btn-sm {1}'>"+_T("Start")+"</button>").format(device.altuiid, (including==1) ? 'active' : '' );
    html += ("<button id ='altui-arduino-include-stop-{0}'  type='button' class='altui-window-btn btn btn-default btn-sm {1}'>"+_T("Stop") +"</button>").format(device.altuiid, (including==0) ? 'active' : '' );
    html += "</div></div>";

    html += "<script type='text/javascript'>";
    html += "$('button#altui-arduino-include-start-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:upnp-arduino-cc:serviceId:arduino1', 'StartInclusion', {}); } );".format(device.altuiid);
    html += "$('button#altui-arduino-include-stop-{0}').on ('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:upnp-arduino-cc:serviceId:arduino1', 'StopInclusion',  {}); } );".format(device.altuiid);
    html += "</script>";

    return html;
};[/code]

Feel free to rehash this, if needed, as I’m not really too sure of the syntax of all of this stuff but is seems to work.

[quote=“a-lurker, post:30, topic:188672”]Thought I have ago. This is for the Arduino MySensors plugin:

"urn:schemas-arduino-cc:device:arduino:1": { "DeviceDrawFunc": "ALTUI_PluginDisplays.drawMySensors", "ScriptFile": "J_ALTUI_plugins.js" },

drawMySensors : _drawMySensors,

[code] function _drawMySensors( device) {
var including = MultiBox.getStatus(device, ‘urn:upnp-arduino-cc:serviceId:arduino1’, ‘InclusionMode’);

    var html = "";
    html += "<div class='text-muted'>Press Start to include"

    html += "<div class='pull-right'>";
    html += ("<button id ='altui-arduino-include-start-{0}' type='button' class='altui-window-btn btn btn-default btn-sm {1}'>"+_T("Start")+"</button>").format(device.altuiid, (including==1) ? 'active' : '' );
    html += ("<button id ='altui-arduino-include-stop-{0}'  type='button' class='altui-window-btn btn btn-default btn-sm {1}'>"+_T("Stop") +"</button>").format(device.altuiid, (including==0) ? 'active' : '' );
    html += "</div></div>";

    html += "<script type='text/javascript'>";
    html += "$('button#altui-arduino-include-start-{0}').on('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:upnp-arduino-cc:serviceId:arduino1', 'StartInclusion', {}); } );".format(device.altuiid);
    html += "$('button#altui-arduino-include-stop-{0}').on ('click', function() { MultiBox.runActionByAltuiID('{0}', 'urn:upnp-arduino-cc:serviceId:arduino1', 'StopInclusion',  {}); } );".format(device.altuiid);
    html += "</script>";

    return html;
};[/code]

Feel free to rehash this, if needed, as I’m not really too sure of the syntax of all of this stuff but is seems to work.[/quote]

Great, I have integrated it, it will be in v >= 757

l o l. I just noticed you changed the button color on the PLTS plugin. I was trying to match your button color so it wouldn’t look odd. But no matter. I know how to override that now if I want ; )

So glad my devices are back!! --David

[quote=“dklinkman, post:32, topic:188672”]l o l. I just noticed you changed the button color on the PLTS plugin. I was trying to match your button color so it wouldn’t look odd. But no matter. I know how to override that now if I want ; )

So glad my devices are back!! --David[/quote]

yes you are right. on the other hand, I aligned it to multiswitch as these 2 were really looking alike

Very good. I guess if I had multiswitch I would have noticed that!! ; )

Came across something interesting. Since you mentioned multiswitch I installed and was going to fiddle with the dashboard code a little bit. I tried to override the dashboard implementation like I have done before and it just wouldn’t work. Then I found your comment about hard coding the display direction

drawMultiswitch : _drawMultiswitch,		// warning, hardcoded display direction from UIMANAGER on this one due to changing device type

Is there any way around that? Is the changing device type still a problem? It’s ok if it is. It’s not like I ‘have’ to fiddle with the dashboard code. Just curious mostly. And still learning.

Thanks!! --David

[quote=“dklinkman, post:35, topic:188672”]Came across something interesting. Since you mentioned multiswitch I installed and was going to fiddle with the dashboard code a little bit. I tried to override the dashboard implementation like I have done before and it just wouldn’t work. Then I found your comment about hard coding the display direction

drawMultiswitch : _drawMultiswitch,		// warning, hardcoded display direction from UIMANAGER on this one due to changing device type

Is there any way around that? Is the changing device type still a problem? It’s ok if it is. It’s not like I ‘have’ to fiddle with the dashboard code. Just curious mostly. And still learning.

Thanks!! --David[/quote]

yes Mutliswitch is a problem child. the problem is that , to change button label, the plugin author (had to ? ) rename the device type so the device type of that device is not constant. All we know is that it starts with urn:schemas-dcineco-com:device:MSwitch then have numbers 0 1 2 3…

so J_ALTUI_UImanager.js hard code the use of that routine and does not rely on the LUA device configuration

if (device.device_type.startsWith('urn:schemas-dcineco-com:device:MSwitch')) { devicebodyHtml+=ALTUI_PluginDisplays.drawMultiswitch(device); } else if (_devicetypesDB[ device.device_type ]!=null && _devicetypesDB[ device.device_type ].DeviceDrawFunc!=null) { //drawfunction = eval( _devicetypesDB[ device.device_type ].DeviceDrawFunc ); devicebodyHtml+= Altui_ExecuteFunctionByName(_devicetypesDB[ device.device_type ].DeviceDrawFunc, window, device); }

if you want to tweak this one, you have to make the changes in J_ALTUI_plugins.js directly ( which is ok, I can still integrate your changes later )

I was able to do everything I wanted just by tweaking the css a little. I like the green buttons, and I made the buttons and the font a little smaller. Just personal preference. And it matches the PLTS. The only thing I couldn’t do was group the buttons. But it’s fine the way it is.

–David

Some further refinement on the multi switch dashboard. Using a bit of CSS I was able to coax the buttons into what looks like button groups. Similar to what the bootstrap .btn-group class does.

Looks good , send it to me if you want I integrate it

[quote=“amg0, post:36, topic:188672”][quote=“dklinkman, post:35, topic:188672”]Came across something interesting. Since you mentioned multiswitch I installed and was going to fiddle with the dashboard code a little bit. I tried to override the dashboard implementation like I have done before and it just wouldn’t work. Then I found your comment about hard coding the display direction

drawMultiswitch : _drawMultiswitch,		// warning, hardcoded display direction from UIMANAGER on this one due to changing device type

Is there any way around that? Is the changing device type still a problem? It’s ok if it is. It’s not like I ‘have’ to fiddle with the dashboard code. Just curious mostly. And still learning.

Thanks!! --David[/quote]

yes Mutliswitch is a problem child. the problem is that , to change button label, the plugin author (had to ? ) rename the device type so the device type of that device is not constant. All we know is that it starts with urn:schemas-dcineco-com:device:MSwitch then have numbers 0 1 2 3…

so J_ALTUI_UImanager.js hard code the use of that routine and does not rely on the LUA device configuration

if (device.device_type.startsWith('urn:schemas-dcineco-com:device:MSwitch')) { devicebodyHtml+=ALTUI_PluginDisplays.drawMultiswitch(device); } else if (_devicetypesDB[ device.device_type ]!=null && _devicetypesDB[ device.device_type ].DeviceDrawFunc!=null) { //drawfunction = eval( _devicetypesDB[ device.device_type ].DeviceDrawFunc ); devicebodyHtml+= Altui_ExecuteFunctionByName(_devicetypesDB[ device.device_type ].DeviceDrawFunc, window, device); }

if you want to tweak this one, you have to make the changes in J_ALTUI_plugins.js directly ( which is ok, I can still integrate your changes later )[/quote]

I found the author’s documentation where he says the device type is changed to include the device number so the device can have a unique json file. The device type is changed the first time any of the buttons are changed. So the device type may or may not have digits added. In my case the device type ends in MSwitch203:1

Here’s a change I made to your code to deal with this.

			if (device.device_type.startsWith('urn:schemas-dcineco-com:device:MSwitch')) {
				//devicebodyHtml+=ALTUI_PluginDisplays.drawMultiswitch(device);
                		var devstr = device.device_type;
		                var pos = 38;
				while (devstr.charAt(pos) != ':') {
					devstr = devstr.substring(0, pos) + devstr.substring(pos + 1, devstr.length);
				}
				if (_devicetypesDB[ devstr ]!=null && _devicetypesDB[ devstr ].DeviceDrawFunc!=null) {
					devicebodyHtml+= Altui_ExecuteFunctionByName(_devicetypesDB[ devstr ].DeviceDrawFunc, window, device);
				}
			} else if (_devicetypesDB[ device.device_type ]!=null && _devicetypesDB[ device.device_type ].DeviceDrawFunc!=null) {
				//drawfunction = eval( _devicetypesDB[ device.device_type ].DeviceDrawFunc );
				devicebodyHtml+= Altui_ExecuteFunctionByName(_devicetypesDB[ device.device_type ].DeviceDrawFunc, window, device);
			}

All it does is strip out those added device digits so the device type string is back to normal. And then the string can be used to select the registered plugin javascript method from the table. It’s still a special case with a workaround but the draw method is no longer hard coded. :slight_smile:

Of course you will need to re-register the MSwitch device type and draw method in the PluginConfig.