Domoticz

Open source Home Automation System
https://forum.domoticz.com/

Dashticz - General Discussions

https://forum.domoticz.com/viewtopic.php?t=16526

Page 7 of 184

Re: New Dashboard Design

Posted: Friday 24 March 2017 22:38
by robgeerts
I can fix this in the upcoming days!

Re: New Dashboard Design

Posted: Friday 24 March 2017 22:57
by HansieNL
My Toon Thermostat setpoint is still seen as on/off switch. Should this one work ok already?

Re: New Dashboard Design

Posted: Friday 24 March 2017 23:02
by madrian
Anybody experiencing problem with limit of the Wunderground API?
Hello, Your wunderground API key exceeded its allotted usage today by making 12 calls within a minute but the limit is 10.

Re: New Dashboard Design

Posted: Friday 24 March 2017 23:06
by HansieNL
I had the same a few days ago when I was editing and refreshing the page.
Did you refresh the page more than 10 times within a minute?

Re: New Dashboard Design

Posted: Saturday 25 March 2017 11:22
by gjaa
I've changed the collor of bulb_on in to a smooth yellow bulb
Schermafbeelding 2017-03-25 om 11.15.11.png
Schermafbeelding 2017-03-25 om 11.15.11.png (68.68 KiB) Viewed 2348 times
Is there a possibility to ad some more images (switch, tv, door-contact etc.)

Re: New Dashboard Design

Posted: Saturday 25 March 2017 17:34
by madrian
HansieNL:

Maybe, while testing I often reload page. :)
gjaa wrote:I've changed the collor of bulb_on in to a smooth yellow bulb
Is there a possibility to ad some more images (switch, tv, door-contact etc.)
Yeah, it is quite easy:

in main.js before:

Code: Select all

else {
var switchHTML = '<div class="col-md-4 mb no-pr" data-light="'+data.result[r]['idx']+'" onclick="switchDevice(this);">';
add this block of code:

Code: Select all

else if (data.result[r]['Name']=='Radio'){
									var switchHTML = '<div class="col-md-4 mb no-pr" data-light="'+data.result[r]['idx']+'" onclick="switchDevice(this);">';
											switchHTML+='<div class="transbg"> ';
												switchHTML+='<div class="col-md-4 no-padding">';
													if(data.result[r]['Status']=='Off') switchHTML+='<img src="img/radio_off.png" class="off icon" />';
													else switchHTML+='<img src="img/radio_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">KI</span>';
													else switchHTML+='<span class="state">BE</span>';
												switchHTML+='</div>';
											switchHTML+='</div>';
										switchHTML+='</div>';
									$('#switches').append(switchHTML);
								}
Result:
Screen-Shot-2017-03-25-17-38-29.png
Screen-Shot-2017-03-25-17-38-29.png (38.75 KiB) Viewed 2323 times
To convert font-awesome icons to png I found this website: http://fa2png.io. Just change color to any what you prefer and size to 57px, leave margin on 0.

Re: New Dashboard Design

Posted: Saturday 25 March 2017 23:06
by robgeerts
hpapagaj wrote:HansieNL:
Screen-Shot-2017-03-25-17-38-29.png
Thanks, I've added this to Gitlab for the radio-button, as set in CONFIG.JS

Code: Select all

buttons.radio = {image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}

gjaa wrote:I've changed the collor of bulb_on in to a smooth yellow bulb
Added this to Gitlab, you can now simply change the following line:

Code: Select all

var buttonimg = 'bulb';
into

Code: Select all

var buttonimg = 'bulbyellow';

Re: New Dashboard Design

Posted: Saturday 25 March 2017 23:14
by robgeerts
gjaa wrote:Thanks, it's working

Another question

How can I add my solarpanels?

I entered ...../json.htm?type=devices and catched the devices (see atcached file)
I added it to Gitlab, you can download the latest version (or only main.js) or add the following code to main.js:

Code: Select all

else if(data.result[r]['HardwareType']=='PVOutput (Input)'){
	$('.block'+data.result[r]['idx']).remove();
	var switchHTML = '<div class="col-md-4 mb no-pr" data-light="'+data.result[r]['idx']+'">';
			switchHTML+='<div class="transbg"> ';
				switchHTML+='<div class="col-md-4 no-padding">';
					switchHTML+='<em class="fa fa-sun-o"></em>';
				switchHTML+='</div>';
				switchHTML+='<div class="col-md-8 no-padding">';
					switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
					switchHTML+='<span class="state">'+data.result[r]['CounterToday']+'</span>';
				switchHTML+='</div>';
			switchHTML+='</div>';
		switchHTML+='</div>';
	$('#switches').append(switchHTML);
}

Re: New Dashboard Design

Posted: Sunday 26 March 2017 3:13
by HansieNL
Thanks a lot @hpapagaj
I did change some of my switches... Notebook PC, Desktop PC, Mede8er player, Venz M9 LibreELEC player, Sleep and Home.
Only my Toon thermostate setpoint (Thermostaatinstelling) is still recognized as on/off switch???
Image

Maybe it's possible to have custom switches, icons and descriptions via the CONFIG.js as variables?
What I mean is like...
Switch Name,Icon On,Icon Of,Message On,Message Off
Sleep,sleep_on.png,sleep_off.png,Awake,Zzz
Home,home_on.png,home_off.png,At Home,Away

And in main.js it should be picked up as custom switch.
I can't realize this myself, maybe someone can?

Re: New Dashboard Design

Posted: Sunday 26 March 2017 15:46
by gjaa
robgeerts wrote:
gjaa wrote:Thanks, it's working

Another question

How can I add my solarpanels?

I entered ...../json.htm?type=devices and catched the devices (see atcached file)
I added it to Gitlab, you can download the latest version (or only main.js) or add the following code to main.js:

Code: Select all

else if(data.result[r]['HardwareType']=='PVOutput (Input)'){
	$('.block'+data.result[r]['idx']).remove();
	var switchHTML = '<div class="col-md-4 mb no-pr" data-light="'+data.result[r]['idx']+'">';
			switchHTML+='<div class="transbg"> ';
				switchHTML+='<div class="col-md-4 no-padding">';
					switchHTML+='<em class="fa fa-sun-o"></em>';
				switchHTML+='</div>';
				switchHTML+='<div class="col-md-8 no-padding">';
					switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
					switchHTML+='<span class="state">'+data.result[r]['CounterToday']+'</span>';
				switchHTML+='</div>';
			switchHTML+='</div>';
		switchHTML+='</div>';
	$('#switches').append(switchHTML);
}
Very nice, thanks
Schermafbeelding 2017-03-26 om 15.45.12.png
Schermafbeelding 2017-03-26 om 15.45.12.png (123.71 KiB) Viewed 2249 times
But how can I place them under the weather forecast

Re: New Dashboard Design

Posted: Sunday 26 March 2017 17:21
by robgeerts
Try changing #switches to .buttons (or #buttons), cannot check right now unfortunately...

Re: New Dashboard Design

Posted: Sunday 26 March 2017 23:05
by gjaa
robgeerts wrote:Try changing #switches to .buttons (or #buttons), cannot check right now unfortunately...
When I change to #buttons or .buttons pv-output dissapears, but when I change it to #sliders it appears under the sliders, that's better than between the lights
Schermafbeelding 2017-03-26 om 23.02.15.png
Schermafbeelding 2017-03-26 om 23.02.15.png (329.87 KiB) Viewed 2204 times

Re: New Dashboard Design

Posted: Monday 27 March 2017 7:58
by robgeerts
Ok, if you want there's a title option you can set wich appears beneath those sliders... Take a look at config.js

Re: New Dashboard Design

Posted: Monday 27 March 2017 8:38
by madrian
HansieNL wrote:Thanks a lot @hpapagaj
And in main.js it should be picked up as custom switch.
I can't realize this myself, maybe someone can?
I don't think that it is possible at this state via config.js (but it would be good), I think everything is hardcoded.

If you post us domoticz/json.htm?type=devices I think we can help with the thermostat setpoint.

Re: New Dashboard Design

Posted: Monday 27 March 2017 17:45
by HansieNL
This is for the Toon Thermostat:

{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "19.0",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 7,
"HardwareName" : "Toon Thermostaat",
"HardwareType" : "Toon Thermostat",
"HardwareTypeVal" : 34,
"HaveTimeout" : false,
"ID" : "0000001",
"LastUpdate" : "2017-03-27 17:36:55",
"Name" : "Thermostaatinstelling",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"SetPoint" : "19.0",
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "SetPoint",
"Timers" : "false",
"Type" : "Thermostat",
"TypeImg" : "override_mini",
"Unit" : 0,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "35"
},

Re: New Dashboard Design

Posted: Monday 27 March 2017 19:17
by EdwinK
HansieNL wrote:This is for the Toon Thermostat:
O yeah, wanted to do that.

Re: New Dashboard Design

Posted: Monday 27 March 2017 19:28
by Dynamic
How can I activate a scene? My 'favorite' scenes are visible, but when I click them, nothing happens. Or is it designed for groups only?

Edit: I found something. When you activate a scene/group, it does:
/json.htm?type=command&param=switchlight&idx=1&switchcmd=On&level=0&passcode=

But it should be:
/json.htm?type=command&param=switchscene&idx=1&switchcmd=On&passcode=

How can I fix this?

Edit 2: got it. In main.js you have to change this line:
else if(data.result[r]['Type']=='Group'){
info:
else if(data.result[r]['Type']=='Scene'){

Re: New Dashboard Design

Posted: Monday 27 March 2017 19:48
by gjaa
robgeerts wrote:Ok, if you want there's a title option you can set wich appears beneath those sliders... Take a look at config.js
But is it possible to get the solarpanels under the weather forecast?

Re: New Dashboard Design

Posted: Monday 27 March 2017 22:34
by robgeerts
Naamloos-2.jpg
Naamloos-2.jpg (44.13 KiB) Viewed 2055 times
Download the latest version from Gitlab, OR edit the code manually:

In index.html, BEFORE:

Code: Select all

<div class="row containstraffic mb">
Add this:

Code: Select all

<div class="row containssolarpanels mb">
      <div id="solarpanels"></div>
</div>
And in main.js:
Change the elseif-statement you've added earlier into this:

Code: Select all

else if(data.result[r]['HardwareType']=='PVOutput (Input)'){
	$('.block'+data.result[r]['idx']).remove();

	if($('.solar').length==0) var classn='no-padding';
	else var classn='no-pr';

	var switchHTML = '<div class="col-md-4 solar '+classn+' 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="fa fa-sun-o"></em>';
				switchHTML+='</div>';
				switchHTML+='<div class="col-md-8 no-padding">';
					switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
					switchHTML+='<span class="state">'+data.result[r]['CounterToday']+'</span>';
				switchHTML+='</div>';
			switchHTML+='</div>';
		switchHTML+='</div>';
	$('#solarpanels').append(switchHTML);
}
AND ADD BEFORE:

Code: Select all

for(r in data.result){
Add this:

Code: Select all

$('.solar').remove();

Re: New Dashboard Design

Posted: Tuesday 28 March 2017 7:16
by gjaa
Download the latest version from Gitlab, OR edit the code manually:

In index.html, BEFORE:

Code: Select all

<div class="row containstraffic mb">
Add this:

Code: Select all

<div class="row containssolarpanels mb">
      <div id="solarpanels"></div>
</div>
And in main.js:
Change the elseif-statement you've added earlier into this:

Code: Select all

else if(data.result[r]['HardwareType']=='PVOutput (Input)'){
	$('.block'+data.result[r]['idx']).remove();

	if($('.solar').length==0) var classn='no-padding';
	else var classn='no-pr';

	var switchHTML = '<div class="col-md-4 solar '+classn+' 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="fa fa-sun-o"></em>';
				switchHTML+='</div>';
				switchHTML+='<div class="col-md-8 no-padding">';
					switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
					switchHTML+='<span class="state">'+data.result[r]['CounterToday']+'</span>';
				switchHTML+='</div>';
			switchHTML+='</div>';
		switchHTML+='</div>';
	$('#solarpanels').append(switchHTML);
}
AND ADD BEFORE:

Code: Select all

for(r in data.result){
Add this:

Code: Select all

$('.solar').remove();
[/quote]

Thanks
Schermafbeelding 2017-03-28 om 07.14.29.png
Schermafbeelding 2017-03-28 om 07.14.29.png (288.55 KiB) Viewed 2032 times
All times are UTC+02:00
Page 7 of 184

Powered by phpBB® Forum Software © phpBB Limited