We have moved at community.getvera.com

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

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: Device Dashboard for Dummies
« Reply #30 on: September 29, 2015, 02:03:35 am »
Thought I have ago. This is for the Arduino MySensors plugin:

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

Code: [Select]
drawMySensors   : _drawMySensors,

Code: [Select]
    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;
    };

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.

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

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #31 on: September 30, 2015, 06:25:26 pm »
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
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 #32 on: October 01, 2015, 07:21:40 am »
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

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

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #33 on: October 01, 2015, 03:47:14 pm »
Very good.  I guess if I had multiswitch I would have noticed that!!   ; )
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 #34 on: October 01, 2015, 07:34:28 pm »
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

Code: [Select]
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
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 #35 on: October 02, 2015, 01:45:42 am »
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

Code: [Select]
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

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

Code: [Select]
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 )

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #36 on: October 02, 2015, 06:20:59 pm »
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
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 #37 on: October 09, 2015, 07:31:42 pm »
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.
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 #38 on: October 10, 2015, 09:56:54 am »
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

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #39 on: October 10, 2015, 02:27:32 pm »
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

Code: [Select]
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

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

Code: [Select]
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 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.

Code: [Select]
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.  :-)

Of course you will need to re-register the MSwitch device type and draw method in the PluginConfig.
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 #40 on: October 11, 2015, 07:54:52 am »
great.
I will integrate it with maybe a slightly different version of the same idea
Code: [Select]
var devicetype = device.device_type;
if (device.device_type.startsWith('urn:schemas-dcineco-com:device:MSwitch')) {
// replace MSwitchxxxxx by MSwitch
var elems = device.device_type.split(':');
elems[3] = "MSwitch";
devicetype = elems.join(':');
}
if (_devicetypesDB[ devicetype ]!=null && _devicetypesDB[ devicetype ].DeviceDrawFunc!=null) {
devicebodyHtml+= Altui_ExecuteFunctionByName(_devicetypesDB[ devicetype ].DeviceDrawFunc, window, device);
}
else {
devicebodyHtml+= _defaultDeviceDraw(device);
}

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: Device Dashboard for Dummies
« Reply #41 on: October 11, 2015, 08:20:11 pm »
I was wanting to find a more elegant solution vs my brute force approach.  You found it.  Thanks for the integration
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup