Page 6 of 184

Re: New Dashboard Design

Posted: Wednesday 22 March 2017 17:36
by robgeerts
You can zip the files and send them via PM?

Re: RE: Re: New Dashboard Design

Posted: Wednesday 22 March 2017 18:54
by stlaha2007
robgeerts wrote:You can zip the files and send them via PM?
I will zip them and send through PM. Don't expect them before friday.

Need to clean up and add more buildin documentation.

Spare time is running out at the moment.

Re: New Dashboard Design

Posted: Wednesday 22 March 2017 19:20
by robgeerts
No problem, i'm just glad you (and others in this topic) like the dashboard!

Re: New Dashboard Design

Posted: Wednesday 22 March 2017 20:25
by gjaa
If you look at the code, it only applies to Toon Thermostat values.

I have commented that line out and it shows my temperature now:

Code: Select all

//         if(data.result[r]['HardwareType']=='Toon Thermostat'){
                     if(data.result[r]['Type']=='P1 Smart Meter' && data.result[r]['SubType']=='Energy'){
                        $('.energy').html(data.result[r]['Usage']);
                        $('.energytoday').html(data.result[r]['CounterToday']);
                        $('.energytoday').parents('.hideinit').show();
                        $('.energy').parents('.hideinit').show();
                     }
                     if(data.result[r]['Type']=='P1 Smart Meter' && data.result[r]['SubType']=='Gas'){
                        $('.gas').html(number_format(data.result[r]['CounterToday'],2,',','.')+' m3');
                        $('.gas').parents('.hideinit').show();
                     }
                     if(data.result[r]['Type']=='Temp' && data.result[r]['idx']=='19'){
                        $('.tempinside').html(data.result[r]['Temp']+'°C');
                        $('.tempinside').parents('.hideinit').show();
                     }
                  
// }

I knew is was Toon, so I changed Toon to P1 Smart Meter USB
But with your solution its working, thanks

Re: New Dashboard Design

Posted: Thursday 23 March 2017 19:01
by madrian
This dashboard is so far the best.

I combined temp+humidity+barometer:
Screen-Shot-2017-03-23-19-00-01.png
Screen-Shot-2017-03-23-19-00-01.png (99.5 KiB) Viewed 2452 times

Re: RE: Re: New Dashboard Design

Posted: Thursday 23 March 2017 19:24
by stlaha2007
hpapagaj wrote:This dashboard is so far the best.

I combined temp+humidity+barometer:
Screen-Shot-2017-03-23-19-00-01.png
Nice combo... Can you share the code how you solved this?
As i can't see if the icons are smaller or equally sized as the others...

And i also have a few sensors which i would like to combine in one box...

Re: New Dashboard Design

Posted: Thursday 23 March 2017 20:06
by madrian
Yes, it needs some tweaking to equally size icons. Maybe later I check this.

For BME280 dummy sensor:

in main.js find line

if(parseFloat(data.result[r]['Favorite'])==1){

few lines down find this line

$('.blocks').append(html);
}

after this you must add the following else if statement:

Code: Select all

else if(data.result[r]['Type']=='Temp + Humidity + Baro' && data.result[r]['SubType']=='THB1 - BTHR918, BTHGN129'){
								$('.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 padding-2">';
												switchHTML+='<em class="fa fa-thermometer-half fa-thermometer-half-switch"></em>';
											switchHTML+='</div>';

											switchHTML+='<div class="col-md-8 padding-2">';
												switchHTML+='<strong class="title">'+data.result[r]['Name']+'</strong><br />';
												switchHTML+='<span class="state">'+data.result[r]['Temp']+'°C</span>';
											switchHTML+='</div>';
											

											switchHTML+='<div class="col-md-4 padding-2">';
												switchHTML+='<em class="wi wi-humidity"></em>';
											switchHTML+='</div>';

											switchHTML+='<div class="col-md-8 padding-2">';
												switchHTML+='<br />';
												switchHTML+='<span class="state">'+data.result[r]['Humidity']+'%</span>';
											switchHTML+='</div>';
											
											switchHTML+='<div class="col-md-4 padding-2">';
												switchHTML+='<em class="wi wi-barometer"></em>';
											switchHTML+='</div>';

											switchHTML+='<div class="col-md-8 padding-2">';
												switchHTML+='<br />';
												switchHTML+='<span class="state">'+data.result[r]['Barometer']+'%</span>';
											switchHTML+='</div>';
										switchHTML+='</div>';
									switchHTML+='</div>';
								$('#switches').append(switchHTML);
							}

Re: New Dashboard Design

Posted: Thursday 23 March 2017 20:11
by Ierlandfan
Just a small observation on that amazing code, Barometer output should read hPa

Re: New Dashboard Design

Posted: Thursday 23 March 2017 20:22
by robgeerts
hpapagaj wrote: after this you must add the following else if statement:
Added this to my code at gitlab!
Ierlandfan wrote:Just a small observation on that amazing code, Barometer output should read hPa
Changed this to hpapagaj's code ;)

Re: New Dashboard Design

Posted: Thursday 23 March 2017 20:30
by madrian
I forgot that I changed margin-left for the first icon (fa-thermometer-half-switch)

Line 46 creative.css:

Code: Select all

.fa.fa-thermometer-half {margin-left:8px;}
after that add:

Code: Select all

.fa.fa-thermometer-half.fa-thermometer-half-switch {margin-left:4px;}
There is a place for more cosmetic work:

-vertical-align middle for sensor values
-equally sized icons (I have a feel that the last icon is smaller than others)

Re: New Dashboard Design

Posted: Thursday 23 March 2017 20:35
by robgeerts
hpapagaj wrote:I forgot that I changed margin-left for the first icon (fa-thermometer-half-switch)
Added!
hpapagaj wrote: There is a place for more cosmetic work
I know, not all icons are aligned ok when using the same margins so some icons need other values.

Re: New Dashboard Design

Posted: Thursday 23 March 2017 23:03
by madrian
May I ask which icon set do you use? I need to add some switches. :)

Re: New Dashboard Design

Posted: Thursday 23 March 2017 23:05
by robgeerts
Well, the bulbs are just png's foinded on gooe. But i also include font awesome. Be my guest to find an iconset that fits the design.

Re: New Dashboard Design

Posted: Friday 24 March 2017 7:24
by gjaa
Hi Rob,

Is there a possibility to see the weather forecast of today?
Schermafbeelding 2017-03-24 om 07.22.21.png
Schermafbeelding 2017-03-24 om 07.22.21.png (197.15 KiB) Viewed 2388 times
My son asked me, the weater forecast for today and I only know the temerature at the moment

Gerard

Re: New Dashboard Design

Posted: Friday 24 March 2017 8:58
by robgeerts
Yes, replace js/weather.js with the new one (see attachment)

Re: New Dashboard Design

Posted: Friday 24 March 2017 14:04
by HansieNL
I did add the weekday to the Date and Time block at the right upper corner.
In main.js add $('#weekday').html(moment().locale('nl').format('dddd'));
In index.html add "<h4 id="weekday"></h4>"

Re: New Dashboard Design

Posted: Friday 24 March 2017 15:34
by robgeerts
HansieNL wrote:I did add the weekday to the Date and Time block at the right upper corner.
In main.js add $('#weekday').html(moment().locale('nl').format('dddd'));
In index.html add "<h4 id="weekday"></h4>"


Thanks, I've added this to the latest version in Gitlab.

Re: New Dashboard Design

Posted: Friday 24 March 2017 21:27
by gjaa
I changed Gasverbruik in Gasverbruik vandaag (index.html)
Schermafbeelding 2017-03-24 om 21.25.27.png
Schermafbeelding 2017-03-24 om 21.25.27.png (60.77 KiB) Viewed 2292 times

Re: New Dashboard Design

Posted: Friday 24 March 2017 22:10
by robgeerts
gjaa wrote:I changed Gasverbruik in Gasverbruik vandaag (index.html)
Schermafbeelding 2017-03-24 om 21.25.27.png
Changed it in Gitlab too!
gjaa wrote:Hi Rob,
Is there a possibility to see the weather forecast of today?
Gerard
Earlier, I mentioned I changed this, and I did, but from now on, it still starts with the weather of tommorrow after 15:00h

Re: New Dashboard Design

Posted: Friday 24 March 2017 22:36
by gjaa
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)