Page 8 of 184
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 15:39
by Dynamic
I'm getting pretty far with my own dashboard. An old iPad will be mounted to the wall next week to facilitate this awesome dashboard.
I've got a couple of devices that I would like to activate from the dashboard (switch command should be on/off or push). I will need this to controll my Sonos speakers. What is the easiest way to create a manual button and assign it to an on/off or push-switch?
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 18:57
by koowee
Hi,
This dashboard is great!
I have some problems when I try to add Netatmo CO2 sensor, I get result "undefind". Is there something wrong on my code or do you need to add support to this kind of device?
Code: Select all
if(data.result[r]['idx']==199){
$('.insideco').html(data.result[r]['Air Quality']+' ppm');
$('.insideco').parents('.hideinit').show();
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "1060 ppm",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 13,
"HardwareName" : "Netatmo",
"HardwareType" : "Netatmo",
"HardwareTypeVal" : 54,
"HaveTimeout" : false,
"ID" : "0079",
"LastUpdate" : "2017-03-28 19:42:01",
"Name" : "Living room CO2",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"Quality" : "Fair",
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "Voltcraft CO-20",
"Timers" : "false",
"Type" : "Air Quality",
"TypeImg" : "air",
"Unit" : 165,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "199"
},
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 19:40
by EdwinK
Not sure if it's possible, but ..
I would like to control my Logitech Media Server (on Synology). Play/stop volume up/down, and on/off. Maybe even a playlist. It doesn't need to play on the site, iv'e got a Raspberry for that.
Just in case:
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "The Beatles - Sgt. Pepper's Lonely Hearts Club Band (1967)",
"Description" : "",
"Favorite" : 0,
"HardwareID" : 22,
"HardwareName" : "LMS",
"HardwareType" : "Logitech Media Server",
"HardwareTypeVal" : 60,
"HaveDimmer" : true,
"HaveGroupCmd" : true,
"HaveTimeout" : false,
"ID" : "000002E",
"Image" : "Light",
"IsSubDevice" : false,
"LastUpdate" : "2017-03-28 19:34:59",
"Level" : 0,
"LevelInt" : 0,
"MaxDimLevel" : 15,
"Name" : "Huiskamer",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : "-",
"Status" : "Playing",
"StrParam1" : "",
"StrParam2" : "",
"SubType" : "AC",
"SwitchType" : "Media Player",
"SwitchTypeVal" : 17,
"Timers" : "false",
"Type" : "Lighting 2",
"TypeImg" : "LogitechMediaServer",
"Unit" : 1,
"Used" : 1,
"UsedByCamera" : false,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "102"
}
],
"status" : "OK",
"title" : "Devices"
}
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 20:40
by robgeerts
koowee wrote:Hi,
This dashboard is great!
I have some problems when I try to add Netatmo CO2 sensor, I get result "undefind". Is there something wrong on my code or do you need to add support to this kind of device?
Code: Select all
if(data.result[r]['idx']==199){
$('.insideco').html(data.result[r]['Air Quality']+' ppm');
$('.insideco').parents('.hideinit').show();
Code: Select all
$('.insideco').html(data.result[r]['Air Quality']+' ppm');
NEEDS TO BE:
Code: Select all
$('.insideco').html(data.result[r]['Data']);
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 20:42
by robgeerts
EdKo66 wrote:
"Data" : "The Beatles - Sgt. Pepper's Lonely Hearts Club Band (1967)",
Nice choice!
EdKo66 wrote:
I would like to control my Logitech Media Server (on Synology). Play/stop volume up/down, and on/off. Maybe even a playlist. It doesn't need to play on the site, iv'e got a Raspberry for that.
In this case, you need to know wich commands it uses.
When you open your existing webpage of the Media Server (assuming there's one), you can check (f12, network tab) wich urls it calls when you click on a button.
Could you retrieve these?
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 20:46
by koowee
robgeerts wrote:koowee wrote:
...
Code: Select all
$('.insideco').html(data.result[r]['Air Quality']+' ppm');
NEEDS TO BE:
Code: Select all
$('.insideco').html(data.result[r]['Data']);
Thanks!
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 20:46
by robgeerts
Dynamic wrote:I'm getting pretty far with my own dashboard. An old iPad will be mounted to the wall next week to facilitate this awesome dashboard.
I've got a couple of devices that I would like to activate from the dashboard (switch command should be on/off or push). I will need this to controll my Sonos speakers. What is the easiest way to create a manual button and assign it to an on/off or push-switch?
Well, you could copy the next code from main.js and change this to fit your needs.
Code: Select all
else if(data.result[r]['Type']=='Group'){
var switchHTML = '<div class="col-md-4 mb no-pr" data-light="'+data.result[r]['idx']+'" onclick="switchGroup(this);">';
switchHTML+='<div class="transbg"> ';
switchHTML+='<div class="col-md-4 no-padding">';
if(data.result[r]['Status']=='Off') switchHTML+='<img src="img/'+buttonimg+'_off.png" class="off icon" />';
else switchHTML+='<img src="img/'+buttonimg+'_on.png" class="on icon" />';
switchHTML+='</div>';
switchHTML+='<div class="col-md-8 no-padding">';
switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
if(data.result[r]['Status']=='Off') switchHTML+='<span class="state">UIT</span>';
else switchHTML+='<span class="state">AAN</span>';
switchHTML+='</div>';
switchHTML+='</div>';
switchHTML+='</div>';
$('#groups').append(switchHTML);
}
You can also post your json-output if you want us to help you, take a look at this post:
http://domoticz.com/forum/viewtopic.php ... 60#p124168
Re: New Dashboard Design
Posted: Tuesday 28 March 2017 20:56
by EdwinK
robgeerts wrote:
Could you retrieve these?
I've got this in jsonrpc.js
Code: Select all
{"result":{"lastscan":"1489419015","version":"7.9.0","uuid":"66e16fd3-bf2f-4e86-9793-efec66a38a6d","info total albums":199,"info total artists":580,"info total genres":33,"info total songs":2510,"info total duration":523574.062000001,"player count":1,"players_loop":[{"playerid":"00:1d:43:10:15:92","uuid":null,"ip":"192.168.0.103:49961","name":"Huiskamer","seq_no":0,"model":"squeezelite","power":"1","isplaying":1,"displaytype":"none","canpoweroff":1,"connected":1,"isplayer":1}],"sn player count":0,"other player count":0},"params":["",["serverstatus","0","999"]],"id":1,"method":"slim.request"}
This created for every song, so I hope this might be it.
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 1:05
by Maartenkr
Hello I have a question.
Is it possible to control my Nest termostaat?
And how do I get the barometer and wind on the right see picture.

Re: New Dashboard Design
Posted: Wednesday 29 March 2017 9:25
by robgeerts
Maartenkr wrote:Hello I have a question.
Is it possible to control my Nest termostaat?
And how do I get the barometer and wind on the right see picture.

could you send me the complete output, as described here:
http://domoticz.com/forum/viewtopic.php ... 60#p124168
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 11:06
by Maartenkr
Code: Select all
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "18.4",
"Description" : "",
"Favorite" : 0,
"HardwareID" : 3,
"HardwareName" : "Nest",
"HardwareType" : "Nest Thermostat/Protect",
"HardwareTypeVal" : 52,
"HaveTimeout" : false,
"ID" : "0000001",
"LastUpdate" : "2017-03-29 11:03:38",
"Name" : "Setpoint Verwarming",
"Notifications" : "false",
"PlanID" : "2",
"PlanIDs" : [ 2 ],
"Protected" : false,
"SetPoint" : "18.4",
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "SetPoint",
"Timers" : "false",
"Type" : "Thermostat",
"TypeImg" : "override_mini",
"Unit" : 0,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "7"
This is the output of the nest thermostat
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 12:47
by EdwinK
EdKo66 wrote:robgeerts wrote:
Could you retrieve these?
I've got this in jsonrpc.js
Code: Select all
{"result":{"lastscan":"1489419015","version":"7.9.0","uuid":"66e16fd3-bf2f-4e86-9793-efec66a38a6d","info total albums":199,"info total artists":580,"info total genres":33,"info total songs":2510,"info total duration":523574.062000001,"player count":1,"players_loop":[{"playerid":"00:1d:43:10:15:92","uuid":null,"ip":"192.168.0.103:49961","name":"Huiskamer","seq_no":0,"model":"squeezelite","power":"1","isplaying":1,"displaytype":"none","canpoweroff":1,"connected":1,"isplayer":1}],"sn player count":0,"other player count":0},"params":["",["serverstatus","0","999"]],"id":1,"method":"slim.request"}
This created for every song, so I hope this might be it.
Accidently posted this in my previous post.
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 19:55
by Dynamic
Hmm, i'm not having success myself...
What I want: in the middle column I want to have 4 buttons next to each other to control my sonos speakers (stop, play, volume up, volume down).
This is the JSON-output:
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "Off",
"Description" : "",
"Favorite" : 0,
"HardwareID" : 2,
"HardwareName" : "Dummy",
"HardwareType" : "Dummy (Does nothing, use for virtual switches only)",
"HardwareTypeVal" : 15,
"HaveDimmer" : true,
"HaveGroupCmd" : true,
"HaveTimeout" : false,
"ID" : "0005000A",
"Image" : "Light",
"IsSubDevice" : false,
"LastUpdate" : "2017-03-29 19:51:03",
"Level" : 0,
"LevelActions" : "||||",
"LevelInt" : 0,
"LevelNames" : "Off|Play|Pause|Volume up|Volume down",
"LevelOffHidden" : true,
"MaxDimLevel" : 100,
"Name" : "Sonos",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"SelectorStyle" : 0,
"ShowNotifications" : true,
"SignalLevel" : 0,
"Status" : "Off",
"StrParam1" : "",
"StrParam2" : "",
"SubType" : "Selector Switch",
"SwitchType" : "Selector",
"SwitchTypeVal" : 18,
"Timers" : "false",
"Type" : "Light/Switch",
"TypeImg" : "Light",
"Unit" : 9,
"Used" : 1,
"UsedByCamera" : false,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "771"
}
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 20:37
by robgeerts
Maartenkr wrote:Hello I have a question.
Is it possible to control my Nest termostaat?
And how do I get the barometer and wind on the right see picture.
The output of your nest thermostat is only for displaying the temperature and for controlling it?
If you want the barometer and wind on the right, try this:
Find:
Code: Select all
else if(data.result[r]['Type']=='General' && data.result[r]['SubType']=='Barometer'){
Change the complete elseif-statement to:
Code: Select all
else if(data.result[r]['Type']=='General' && data.result[r]['SubType']=='Barometer'){
$('.block'+data.result[r]['idx']).remove();
var switchHTML = '<div class="col-md-12 mb block'+data.result[r]['idx']+'" data-light="'+data.result[r]['idx']+'">';
switchHTML+='<div class="transbg">';
switchHTML+='<div class="col-md-4 no-padding">';
switchHTML+='<em class="wi wi-barometer"></em>';
switchHTML+='</div>';
switchHTML+='<div class="col-md-8 no-padding">';
switchHTML+='<strong class="title">'+data.result[r]['Data']+'</strong><br />';
switchHTML+='<span>'+data.result[r]['Name']+'</span>';
switchHTML+='</div>';
switchHTML+='</div>';
switchHTML+='</div>';
$('.blocks').append(switchHTML);
}
AND FOR WIND:
Find:
Code: Select all
else if(data.result[r]['Type']=='Wind'){
And change it to:
Code: Select all
else if(data.result[r]['Type']=='Wind'){
$('.block'+data.result[r]['idx']).remove();
var switchHTML = '<div class="col-md-12 mb block'+data.result[r]['idx']+'" data-light="'+data.result[r]['idx']+'">';
switchHTML+='<div class="transbg">';
switchHTML+='<div class="col-md-4 no-padding">';
switchHTML+='<em class="wi wi-wind-direction"></em>';
switchHTML+='</div>';
switchHTML+='<div class="col-md-8 no-padding">';
switchHTML+='<strong class="title">'+data.result[r]['Gust']+'km/u, '+data.result[r]['DirectionStr']+'</strong><br />';
switchHTML+='<span>'+data.result[r]['Name']+'</span>';
switchHTML+='</div>';
switchHTML+='</div>';
switchHTML+='</div>';
$('.blocks').append(switchHTML);
}
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 20:39
by robgeerts
Dynamic wrote:
This is the JSON-output:
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
......
"Description" : "",
"Favorite" : 0,
"HardwareID" : 2,
.....
"LevelActions" : "||||",
"LevelInt" : 0,
"LevelNames" : "Off|Play|Pause|Volume up|Volume down",
"LevelOffHidden" : true,
......
"idx" : "771"
}
First, you have to enable the switch as a favorite in Domoticz.
Second, the LevelActions for each buttons are empty?
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 20:41
by Dynamic
robgeerts wrote:
First, you have to enable the switch as a favorite in Domoticz.
Second, the LevelActions for each buttons are empty?
Done!
The LevelActions are empty for the moment, because I created this device for the new dashboard. I'm going to assign actions to those buttons (it will run a Python-script).
Re: New Dashboard Design
Posted: Wednesday 29 March 2017 22:49
by robgeerts
In the meantime, I'm changing some things, take a look at this screenshot:
It seems that more people have blocks like you can see in the middle (status of devices etc.). By moving them here (they were on the right before) you can have more blocks of this type before falling of the screen

I also changed a lot in the CSS-files regarding the spaces between blocks.
I updated gitlab, If you wanna keep the old version, backup or rename your current folder and clone the latest version.
If you experience css problems, make sure you've cleared your cache.
Re: New Dashboard Design
Posted: Thursday 30 March 2017 0:02
by pvm
EdKo66 wrote:Not sure if it's possible, but ..
I would like to control my Logitech Media Server (on Synology). Play/stop volume up/down, and on/off. Maybe even a playlist. It doesn't need to play on the site, iv'e got a Raspberry for that.
This triggered me to display whats currently playing (not controlling something yet) based on Domoticz data, screenshot of the new part of the dashboard:

- MuziekSpelers.JPG (25.1 KiB) Viewed 2244 times
Updates to main.js :
Code: Select all
if(!sliding){
-------keep default code here ------
$('#LMSPlayers').html('');
for(r in data.result){
if(data.result[r]['HardwareType']=='Logitech Media Server'){
if(data.result[r]['Status']=='Playing'){
var html='<div class="transbg">';
html +='<div class="col-md-1 no-padding">';
html +='<em class="fa fa-music"></em>';
html +='</div>';
html +='<div class="col-md-11 no-padding">';
html +='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
html +='<span class="h2">'+data.result[r]['Data']+'</span>';
html +='</div>';
$('#LMSPlayers').append(html);
}
}
------ keep default code here ------
update to config.js, addition to titles part:
Code: Select all
titles.LMSPlayers = 'Muziekspelers';
and the index.html addition (I've kept the part on traffic and buttons as default and added LMSPlayers in between)
Code: Select all
<div class="row containstraffic mb">
<div class="titletraffic"><h3 class="transbg"></h3></div>
<div id="traffic"></div>
</div>
<div class="row mb">
<div class="titleLMSPlayers"><h3 class="transbg"></h3></div>
<div id="LMSPlayers"></div>
</div>
<div class="row mb" id="buttons">
Somethings wrong when using this on a small screen, the data is not displayed... I'm not an html expert, guess I've made a mistake somehere
Is it possible to add this to the repository?
edit: (improvement could be to show the playing status based on the Status field by coloring the icon green? and not hiding the titles?)
Re: New Dashboard Design
Posted: Thursday 30 March 2017 0:20
by pvm
EdKo66 / robgeerts
To control the player you need the following urls
Previous song
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Rewind
Next song
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Forward
Pause
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Pause
Play
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Play
Stop
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Stop
Volume up
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=VolumeUp
Mute
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=Mute
Volume down
Code: Select all
/json.htm?type=command¶m=lmsmediacommand&idx=XXYYZZ&action=VolumeDown
Shuffle and repeat buttons have 'strange' behaviour it switches between non shuffling, shuffle by album and shuffle, for repeat: no repeat, repeat number, repeatplaylist, that's why I did not add those urls
Sorry, do not have time today to integrate this in the dashboard... I would also have to look into adding buttons and behaviour... EdKo66, can you help?
Re: New Dashboard Design
Posted: Thursday 30 March 2017 0:36
by pvm
The slider does not work for my fibaro dimmer as its expecting a 0-100% value
Like 71%:
Code: Select all
/json.htm?type=command¶m=switchlight&idx=26&switchcmd=Set%20Level&level=71
information on this dimmer
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "Set Level: 70 %",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 6,
"HardwareName" : "Aeonlabs Z-wave stick",
"HardwareType" : "OpenZWave USB",
"HardwareTypeVal" : 21,
"HaveDimmer" : true,
"HaveGroupCmd" : true,
"HaveTimeout" : false,
"ID" : "00001301",
"Image" : "Light",
"IsSubDevice" : false,
"LastUpdate" : "2017-03-30 00:34:26",
"Level" : 70,
"LevelInt" : 70,
"MaxDimLevel" : 100,
"Name" : "Dimmer2tst",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : "-",
"Status" : "Set Level: 70 %",
"StrParam1" : "",
"StrParam2" : "",
"SubType" : "Switch",
"SwitchType" : "Dimmer",
"SwitchTypeVal" : 7,
"Timers" : "false",
"Type" : "Light/Switch",
"TypeImg" : "dimmer",
"Unit" : 1,
"Used" : 1,
"UsedByCamera" : false,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "26"
},
Do you see an option to give dim levels between 0 and 100% for this device (and 0-16 for the device for which it has been developed by you)
Based on maxdimlevel?
ah... and compliments!! Nice dashboard!