[quote=“dklinkman, post:15, topic:188672”]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:"urn:schemas-micasaverde-com:device:Sonos:1":{"DeviceDrawFunc":"ALTUI_PluginDisplays.drawSonos","ScriptFile":"J_ALTUI_plugins.js"}
Object Mapping:drawSonos : _drawSonos,
Dashboard Method: 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[/quote]
greats, it is really good to see people contributing to improving this UI. it is really appreciated.
regarding reusing CSS classes, I think it is better not to reuse too much in case you anticipate someone may want to reskin that to something else. button is unlikely to be skinned too much but text lines could , some people may prefer bigger or smaller fonts so I would recommend not reusing classes for text lines for instance while it is probably acceptable for some of the dashboards buttons for which , some consistency accross dashboards is probably desirable. Plus creating too many unused css class is not that great either, so it is a balance.
Regarding buttons, you could take advantage of bootstrap glyphs and create really small button with just the icons inside for play pause stop fast forward etc…
see glyphTemplate in J_ALTUI_uimgr.js, you can use it this way
var myGlyph = glyphTemplate.format( name, title, color );
where
- name is the name from the examples of glyphs in https://getbootstrap.com/docs/5.3/components/accordion/ minus the prefix ‘glyphicon glyphicon-’ part. so the play glyph name to use would be “play”
- title : popup title text when hovering the mouse, also used for accessibility user interface
- color : can be ‘’ for default or one of the standard typography color of bootstrap ( text-danger, text-warning text-muted, text-info etc )
then you compose your HTML button. example
var infobutton = smallbuttonTemplate.format( plugin.altuiid, 'altui-plugin-icon altui-plugin-info-sign', glyphTemplate.format("info-sign","Information",""), "Info");
that smallbuttonTemplate is defined in J_ALTUI_uimgr.js like that:
smallbuttonTemplate = "<button id='{0}' type='button' class='{1} btn btn-default btn-sm' aria-label='tbd' title='{3}'>{2}</button>";
so you will get the jquery click event this way
$("btn.your_class#your_id").on('click',function()... )
where your_class was passed as one of the words in parameter 2 of the smallbuttonTemplate.format() ( you can pass several classes )
and your_id was passed in parameter 1 of the smallbuttonTemplate.format()
you could also have only one callback for the class, then internally switch by ID
[code]$("btn.your_class).on(‘click’,function() {
var id = $(this).prop(‘id’);
switch(id) {
case etc …
}
}
)[/code]
I attached a screen shot of potentially interesting glyphs
