Dashticz - General Discussions

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Locked
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post by robgeerts »

You can zip the files and send them via PM?
stlaha2007
Posts: 370
Joined: Monday 05 October 2015 10:16
Target OS: -
Domoticz version:
Contact:

Re: RE: Re: New Dashboard Design

Post 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.
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post by robgeerts »

No problem, i'm just glad you (and others in this topic) like the dashboard!
User avatar
gjaa
Posts: 38
Joined: Thursday 12 February 2015 6:59
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: New Dashboard Design

Post 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
madrian
Posts: 231
Joined: Saturday 27 August 2016 1:18
Target OS: -
Domoticz version:
Contact:

Re: New Dashboard Design

Post 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 2465 times
stlaha2007
Posts: 370
Joined: Monday 05 October 2015 10:16
Target OS: -
Domoticz version:
Contact:

Re: RE: Re: New Dashboard Design

Post 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...
madrian
Posts: 231
Joined: Saturday 27 August 2016 1:18
Target OS: -
Domoticz version:
Contact:

Re: New Dashboard Design

Post 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);
							}
Ierlandfan
Posts: 89
Joined: Friday 09 October 2015 17:40
Target OS: Linux
Domoticz version:
Contact:

Re: New Dashboard Design

Post by Ierlandfan »

Just a small observation on that amazing code, Barometer output should read hPa
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post 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 ;)
madrian
Posts: 231
Joined: Saturday 27 August 2016 1:18
Target OS: -
Domoticz version:
Contact:

Re: New Dashboard Design

Post 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)
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post 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.
madrian
Posts: 231
Joined: Saturday 27 August 2016 1:18
Target OS: -
Domoticz version:
Contact:

Re: New Dashboard Design

Post by madrian »

May I ask which icon set do you use? I need to add some switches. :)
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post 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.
User avatar
gjaa
Posts: 38
Joined: Thursday 12 February 2015 6:59
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: New Dashboard Design

Post 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 2401 times
My son asked me, the weater forecast for today and I only know the temerature at the moment

Gerard
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post by robgeerts »

Yes, replace js/weather.js with the new one (see attachment)
Attachments
weather.js
(2.01 KiB) Downloaded 126 times
User avatar
HansieNL
Posts: 964
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: New Dashboard Design

Post 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>"
Blah blah blah
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post 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.
User avatar
gjaa
Posts: 38
Joined: Thursday 12 February 2015 6:59
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: New Dashboard Design

Post 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 2305 times
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: New Dashboard Design

Post 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
User avatar
gjaa
Posts: 38
Joined: Thursday 12 February 2015 6:59
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: New Dashboard Design

Post 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)
Attachments
solarpanels.txt
(2.15 KiB) Downloaded 67 times
Locked

Who is online

Users browsing this forum: No registered users and 1 guest