Dashticz - Show your dashboard and how-to's!

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

EdwinH
Posts: 6
Joined: Tuesday 29 August 2017 17:37
Target OS: Raspberry Pi
Domoticz version: 3.8153
Location: Almere
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by EdwinH » Monday 19 February 2018 15:03

Many thanks to all developers and contributors / testers of this great app.
I started with stable version of Dashticz but after 2 days I ran in a dead-lock because calendar / garbage and news did not show.

So I installed beta release and started over ( well.. copy / paste / trail & error from saved CONFIG.js :D )

I like to share progress so far of which I am very pleased.
Dashticz_1.jpg
Dashticz_1.jpg (240.25 KiB) Viewed 3484 times
Dashticz_2.jpg
Dashticz_2.jpg (266.65 KiB) Viewed 3484 times
Dashticz_3.jpg
Dashticz_3.jpg (300.65 KiB) Viewed 3484 times

For those who like to know my home automation:
I have Domoticz running on Rasperberry pi3, connected via IFTTT to with Google Home, two Google home mini's , chromecastvideo and audio, 2 x SONY SRs-ZR5's, a bunch of Philips Hue, KaKu switches, 433Mhz transiever, Honeywell round connect thermostat, Logitech Harmony hub, Eminent outdoor camera, Solarpanels with Omnik converter, and smart utility cabinet, sensors on water-gauge.

Helix
Posts: 6
Joined: Saturday 16 September 2017 15:44
Target OS: Raspberry Pi
Domoticz version: 3.8796
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by Helix » Friday 23 February 2018 12:12

Good Morning all!
I'd like to buy a tablet to control dashticz on the wall.
In your opinion, what is the minimum advisable size of the screen in order to have a satisfactory control of the Dashtcz web page?
What tablet do you recommend cheaply that is reliable?

Thanks friends!
Ciao, Leonardo

oeble
Posts: 2
Joined: Monday 27 June 2016 12:31
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by oeble » Friday 23 February 2018 21:24

Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.
Attachments
20180223_195852.jpg
20180223_195852.jpg (187.52 KiB) Viewed 3346 times
20180223_195847.jpg
20180223_195847.jpg (191.29 KiB) Viewed 3346 times
20180223_133539.jpg
20180223_133539.jpg (258.24 KiB) Viewed 3346 times

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Show your Dashticz v2.0 and how-to's!

Post by wmmudde » Saturday 24 February 2018 11:21

Martijn85 wrote:
Wednesday 26 April 2017 16:01
This is mine:

config.js
Spoiler: show
var _LANGUAGE = 'nl_NL';
var _HOST_DOMOTICZ = 'http://192.168.x.x:8080';
var _DOMOTICZ_REFRESH = 5; //in seconds
var _HOST_ZIGGO_HORIZON = 'http://192.168.x.x/dasboard/switch_horizon.php';
var _APIKEY_WUNDERGROUND = 'xxx';
var _WEATHER_CITY = 'Sneek';
var _WEATHER_CITYNAME = ''; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY = 'NL';
var _USE_AUTO_POSITIONING = false; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = false; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK = true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED = 'https://crossorigin.me/http://feeds.fee ... ers/nieuws';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = true; //Bft instead of m/s
var _TRANSLATE_SPEED = false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES = 5;
var _SCROLL_NEWS_AFTER = 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT = 'slide'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'

var _APIKEY_MAPS = 'xxx';
var _MAPS_LATITUDE = xxx;
var _MAPS_LONGITUDE = xxx;
var _MAPS_ZOOMLEVEL = 8;

var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/Rada ... =445&h=296', url: 'http://www.weer.nl/verwachting/nederland/son/189656/'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}

/*
CUSTOM POSITIONING:

*/
var blocks = {}

blocks[314] = {}
blocks[314]['width'] = 3;
blocks[322] = {}
blocks[322]['width'] = 3;
blocks[348] = {}
blocks[348]['width'] = 6;
blocks[349] = {}
blocks[349]['width'] = 6;
blocks[350] = {}
blocks[350]['width'] = 6;

blocks[334] = {}
blocks[334]['width'] = 3;
blocks[335] = {}
blocks[335]['width'] = 3;
blocks[336] = {}
blocks[336]['width'] = 3;
blocks[337] = {}
blocks[337]['width'] = 3;

blocks[17] = {}
blocks[17]['width'] = 3;
blocks[23] = {}
blocks[23]['width'] = 3;
blocks[231] = {}
blocks[231]['width'] = 3;
blocks[242] = {}
blocks[242]['width'] = 3;

blocks[507] = {}
blocks[507]['icon'] = 'fa-moon-o';
blocks[26] = {}
blocks[26]['icon'] = 'fa-home';
blocks[26]['width'] = 3;
blocks[511] = {}
blocks[511]['icon'] = 'fa-apple';
blocks[511]['width'] = 3;
blocks[513] = {}
blocks[513]['icon'] = 'fa-android';
blocks[513]['width'] = 3;
blocks[472] = {}
blocks[472]['icon'] = 'fa-tv';
blocks[472]['width'] = 3;

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Toon';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Status';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'HDD verbruik';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Weer';

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',348,349,350,314,322,'blocktitle_2',336,335,334,337,340,341,'blocktitle_4',17,23,231,242]
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['clock','sunrise','horizon',buttons.buienradar,'trafficmap','news']
columns[2]['width'] = 2;

columns[3] = {}
columns[3]['blocks'] = ['blocktitle_5','weather',481,482,483,11,'blocktitle_3',456,459,507,26,511,513,472]
columns[3]['width'] = 5;

//var columns_standby = {}
//columns_standby[1] = {}
//columns_standby[1]['blocks'] = ['clock','currentweather_big','weather']
//columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg6.jpg';
//screens[1]['background_morning'] = 'bg_morning.jpg';
//screens[1]['background_noon'] = 'bg_noon.jpg';
//screens[1]['background_afternoon'] = 'bg_afternoon.jpg';
//screens[1]['background_night'] = 'bg_night.jpg';
screens[1]['columns'] = [1,2,3]
dashboard.jpg


Hoe krijg jij die trafficmap werkend? mij lukt het niet

Beschuitje
Posts: 16
Joined: Saturday 24 February 2018 13:07
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by Beschuitje » Monday 26 February 2018 11:42

Have been working around with Dasticz and smart meter readings (we have 2 smart meters in our house) and combining it with the agenda of my autistic son. This stuff is amazing and a big thank you to Rob for building this!

I have been able to get things up and running with the help of this forum so also a big thank you to all posters!!
Now busy setting my new Pi up to boot from SSD on USB and when that's done i can start building again and copying everything from my old Pi.

In the meantime there is one thing i can't seem to get solved. I don't have a lot of info on my screen (that's a deliberate choice). To make it line out better (and because it looks better) i want a lot more space between blocks. I placed empty buttons, blocktiles, and a empty frame but i can't seem to get them to look transparent. In the yellow circle is an empty frame with no data. What i want is not to see the frame but the background. How can i best do this?
The attachment IMG_9185.jpg is no longer available
Attachments
IMG_9185.jpg
IMG_9185.jpg (114.56 KiB) Viewed 3250 times

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by wmmudde » Monday 26 February 2018 11:55

Beschuitje wrote:
Monday 26 February 2018 11:42
Have been working around with Dasticz and smart meter readings (we have 2 smart meters in our house) and combining it with the agenda of my autistic son. This stuff is amazing and a big thank you to Rob for building this!

I have been able to get things up and running with the help of this forum so also a big thank you to all posters!!
Now busy setting my new Pi up to boot from SSD on USB and when that's done i can start building again and copying everything from my old Pi.

In the meantime there is one thing i can't seem to get solved. I don't have a lot of info on my screen (that's a deliberate choice). To make it line out better (and because it looks better) i want a lot more space between blocks. I placed empty buttons, blocktiles, and a empty frame but i can't seem to get them to look transparent. In the yellow circle is an empty frame with no data. What i want is not to see the frame but the background. How can i best do this?

IMG_9185.jpg
Kun je mij vertellen hoe jij die trafficmap met files werkend hebt gekregen?

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by wmmudde » Monday 26 February 2018 11:57

oeble wrote:
Friday 23 February 2018 21:24
Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.
De energie grafieken zien er goed uit! Kun je jou config delen of aangeven hoe ik die zo kan toevoegen?

poudenes
Posts: 619
Joined: Wednesday 08 March 2017 10:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by poudenes » Monday 26 February 2018 12:53

English forum, so please no dutch here
RPi3 with OSMC - RPi3 with Domoticz - Dashticz - MiLight - Nanolead Aurora - KaKu - Logitech Hamony - Nest - RFLink

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by wmmudde » Monday 26 February 2018 13:15

oeble wrote:
Friday 23 February 2018 21:24
Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.
How did you create the energy graphs? can you send me the details or your config?

CaesarPL
Posts: 130
Joined: Tuesday 08 November 2016 15:03
Target OS: Raspberry Pi
Domoticz version:
Location: Poland
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by CaesarPL » Monday 26 February 2018 16:59

wmmudde wrote:
Monday 26 February 2018 13:15
oeble wrote:
Friday 23 February 2018 21:24
Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.
How did you create the energy graphs? can you send me the details or your config?
E.g.

Code: Select all

columns[15] = {} //Graphs2
columns[15]['blocks'] = ['graph_121','graph_118'];
columns[15]['width'] = 5;
HW:Raspberry PiB+,Pi3,PiB,RFLink,FA20RF,DCS-930L,DCS-935L,Clarus switches,RF Temp sensors,Owl Micro+,Mi Flora,Kerui,Yeelight,Xiaomi,Broadlink RMM3,Alexa
SF:Jessie,Dmtcz 3.8153,Logitech Media srv,PiCorePlayers,Dashticz,Max2Play,InfluxDB,Grafana,HABridge

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by htilburgs » Monday 26 February 2018 23:51

Beschuitje wrote:
Monday 26 February 2018 11:42
Have been working around with Dasticz and smart meter readings (we have 2 smart meters in our house) and combining it with the agenda of my autistic son. This stuff is amazing and a big thank you to Rob for building this!

I have been able to get things up and running with the help of this forum so also a big thank you to all posters!!
Now busy setting my new Pi up to boot from SSD on USB and when that's done i can start building again and copying everything from my old Pi.

In the meantime there is one thing i can't seem to get solved. I don't have a lot of info on my screen (that's a deliberate choice). To make it line out better (and because it looks better) i want a lot more space between blocks. I placed empty buttons, blocktiles, and a empty frame but i can't seem to get them to look transparent. In the yellow circle is an empty frame with no data. What i want is not to see the frame but the background. How can i best do this?

IMG_9185.jpg
Try this in your custom.css

Code: Select all

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0);			/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}
There are several modifications I use myself:

Transparant blocks:

Code: Select all

background: rgba(0,0,0,0.1);
Smaller (or bigger) spaces between blocks:

Code: Select all

border: 3px solid rgba(255,255,255,0);
Rounded corners:

Code: Select all

border-radius: 15px;


If you only like your blocktitles transparant, use:

Code: Select all

div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}
Just play around with them and see what happens... ;-)
Schermafbeelding 2018-02-26 om 22.57.03.png
Schermafbeelding 2018-02-26 om 22.57.03.png (137.25 KiB) Viewed 3143 times
Hardware:
RPi3 - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led bulb - Yeelight Smart LED Light Strip - Neo Coolcam PIR Motion Sensor - Neo Coolcam PowerPlug - Nest Thermostat v3

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by htilburgs » Tuesday 27 February 2018 0:16

Just to give an impression of my current dashboard. Try to make it simple and clean.
Dashticz.jpg
Dashticz.jpg (102.27 KiB) Viewed 3137 times
Hardware:
RPi3 - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led bulb - Yeelight Smart LED Light Strip - Neo Coolcam PIR Motion Sensor - Neo Coolcam PowerPlug - Nest Thermostat v3

User avatar
EdwinK
Posts: 1394
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by EdwinK » Tuesday 27 February 2018 9:46

Indeed, nice and clean.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

Beschuitje
Posts: 16
Joined: Saturday 24 February 2018 13:07
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by Beschuitje » Tuesday 27 February 2018 10:35

Thanks htilburgs!
I did this in CSS for the round corners but without:
background: rgba(0,0,0,0); /* rgba(0,0,0,0.1); -> makes transparent */

So i hope that will work

Code: Select all

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0);			/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}
I tried making bigger spaces between blocks with the border code but than the text and images get out of sync.

I will play with it and see what works. I finally have usb boot with an ssd drive working om my new Pi. Somehow an image of the old installation didn't boot so i had to do a new Raspbian install. I will back-up Domoticz and Dashticz from my old install so i can start trying.

I can only then post my config.js wmmudde.

Nice dash btw. The security cam integration is on my future wish list.
Last edited by Beschuitje on Tuesday 27 February 2018 12:21, edited 1 time in total.

User avatar
EdwinK
Posts: 1394
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by EdwinK » Tuesday 27 February 2018 11:13

htilburgs wrote:
Tuesday 27 February 2018 0:16
Just to give an impression of my current dashboard. Try to make it simple and clean.

Dashticz.jpg

Care to share?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by wmmudde » Tuesday 27 February 2018 16:19

htilburgs wrote:
Monday 26 February 2018 23:51
Beschuitje wrote:
Monday 26 February 2018 11:42
Have been working around with Dasticz and smart meter readings (we have 2 smart meters in our house) and combining it with the agenda of my autistic son. This stuff is amazing and a big thank you to Rob for building this!

I have been able to get things up and running with the help of this forum so also a big thank you to all posters!!
Now busy setting my new Pi up to boot from SSD on USB and when that's done i can start building again and copying everything from my old Pi.

In the meantime there is one thing i can't seem to get solved. I don't have a lot of info on my screen (that's a deliberate choice). To make it line out better (and because it looks better) i want a lot more space between blocks. I placed empty buttons, blocktiles, and a empty frame but i can't seem to get them to look transparent. In the yellow circle is an empty frame with no data. What i want is not to see the frame but the background. How can i best do this?

IMG_9185.jpg
Try this in your custom.css

Code: Select all

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0);			/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}
There are several modifications I use myself:

Transparant blocks:

Code: Select all

background: rgba(0,0,0,0.1);
Smaller (or bigger) spaces between blocks:

Code: Select all

border: 3px solid rgba(255,255,255,0);
Rounded corners:

Code: Select all

border-radius: 15px;


If you only like your blocktitles transparant, use:

Code: Select all

div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}
Just play around with them and see what happens... ;-)

Schermafbeelding 2018-02-26 om 22.57.03.png
Hi, great looking F1 calender! Can you send me the config for that?
I also like to create the color buttons for my Yeelight LED Strip, can you send me that piece also?

CaesarPL
Posts: 130
Joined: Tuesday 08 November 2016 15:03
Target OS: Raspberry Pi
Domoticz version:
Location: Poland
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by CaesarPL » Tuesday 27 February 2018 17:57

wmmudde wrote:
Tuesday 27 February 2018 16:19
Hi, great looking F1 calender! Can you send me the config for that?
I also like to create the color buttons for my Yeelight LED Strip, can you send me that piece also?
F1 calendar is probably just another private calendar on Google.

And color buttons are Selectors in Domoticz with scripts behind.
HW:Raspberry PiB+,Pi3,PiB,RFLink,FA20RF,DCS-930L,DCS-935L,Clarus switches,RF Temp sensors,Owl Micro+,Mi Flora,Kerui,Yeelight,Xiaomi,Broadlink RMM3,Alexa
SF:Jessie,Dmtcz 3.8153,Logitech Media srv,PiCorePlayers,Dashticz,Max2Play,InfluxDB,Grafana,HABridge

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by htilburgs » Wednesday 28 February 2018 18:17

wmmudde wrote:
Tuesday 27 February 2018 16:19
htilburgs wrote:
Monday 26 February 2018 23:51
Beschuitje wrote:
Monday 26 February 2018 11:42
Have been working around with Dasticz and smart meter readings (we have 2 smart meters in our house) and combining it with the agenda of my autistic son. This stuff is amazing and a big thank you to Rob for building this!

I have been able to get things up and running with the help of this forum so also a big thank you to all posters!!
Now busy setting my new Pi up to boot from SSD on USB and when that's done i can start building again and copying everything from my old Pi.

In the meantime there is one thing i can't seem to get solved. I don't have a lot of info on my screen (that's a deliberate choice). To make it line out better (and because it looks better) i want a lot more space between blocks. I placed empty buttons, blocktiles, and a empty frame but i can't seem to get them to look transparent. In the yellow circle is an empty frame with no data. What i want is not to see the frame but the background. How can i best do this?

IMG_9185.jpg
Try this in your custom.css

Code: Select all

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0);			/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}
There are several modifications I use myself:

Transparant blocks:

Code: Select all

background: rgba(0,0,0,0.1);
Smaller (or bigger) spaces between blocks:

Code: Select all

border: 3px solid rgba(255,255,255,0);
Rounded corners:

Code: Select all

border-radius: 15px;


If you only like your blocktitles transparant, use:

Code: Select all

div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}
Just play around with them and see what happens... ;-)

Schermafbeelding 2018-02-26 om 22.57.03.png
Hi, great looking F1 calender! Can you send me the config for that?
I also like to create the color buttons for my Yeelight LED Strip, can you send me that piece also?
Hi there,

F1 Kalendar is an ICS file I've imported in Apple iCloud Calendar and set is as a public calendar. I've send you a PM for this.
In the config.js it's just a simple entry with the url of the public calendar:

Code: Select all

var calendars = {}
calendars.f1 = {maxitems: 5, title:'', image:'', icalurl:'webcal://p28-calendars.icloud.com/published/2/xxxxxx'}
The buttons for the Yeelight LED Strip. This is a dummy (selector) switch with code, to address the Yeelight LED Strip.
After that just create an entry in your config.js like normal. Make sure you look at the variables otherwise you won't see a thing ;-)

Code: Select all

config['selector_instead_of_buttons'] = 0;	//use for selectors
config['hide_off_button'] = 0; //use for selectors
Yeelight LED.png
Yeelight LED.png (157.87 KiB) Viewed 2978 times
Hardware:
RPi3 - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led bulb - Yeelight Smart LED Light Strip - Neo Coolcam PIR Motion Sensor - Neo Coolcam PowerPlug - Nest Thermostat v3

Beschuitje
Posts: 16
Joined: Saturday 24 February 2018 13:07
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by Beschuitje » Wednesday 28 February 2018 18:35

IMG_9242.jpg
IMG_9242.jpg (111.01 KiB) Viewed 2974 times
IMG_9243.jpg
IMG_9243.jpg (63.48 KiB) Viewed 2974 times
config.js

Code: Select all

var config = {}
config['language'] ='nl_NL'; //or: en_US
config['domoticz_ip'] = 'http://xxx.xxx.x.xx:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '60';
config['dashticz_refresh'] = '2';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '120';
config['standby_after'] = 4;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '30';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calenderformat'] = 'dd DD.MM HH:mm';
config['calenderlanguage'] = 'nl_NL';
config['calenderurl'] = 0;
config['wu_api'] = 'xxxxxxxxxxxxxxxxx';
config['wu_city'] = 'Diemen';
config['wu_name'] = 'Diemen';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = 0;
config['host_nzbget'] = 0;
config['switch_horizon'] = 0;
config['auto_positioning'] = 1;
config['use_favorites'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] =0;
config['gm_api'] = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
config['gm_latitude'] = 5x.xxxxxxx;
config['gm_longitude'] = x.xxxxxx0;
config['gm_zoomlevel'] = 8;
config['hide_mediaplayer'] = 1;

var frames = {}
frames.autiplan = {refreshiframe:20000,height:800,frameurl:"https://autiplan.com/viewer/xxxxxxxxxxxxxxxxxxxxxxxx?mode=group-column",width:11}

var publictransport = {}
publictransport.ovinfobus = { show_via: true, station: 'diemen/bushalte-vinkenbrug', show_lastupdate:true, provider: '9292-bus', icon: 'bus', width:6, results: 10 };

var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fa-television', width:6, channels: [1,3,4,31,46,92], maxitems: 10}

var maps = {}
maps.location = { height: 280, width:6, latitude: 5x.xxxxxxx, longitude: x.xxxxxx0, zoom:10 }



var _STREAMPLAYER_TRACKS  	= [
	{"track":1,"name":"Radio 1","file":"http://icecast.omroep.nl/radio1-bb-mp3"},
	{"track":2,"name":"Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
	{"track":3,"name":"538","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/RADIO538.mp3"},
	{"track":4,"name":"Sky Radio","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/SKYRADIO.mp3"},


  ]; 


var buttons = {}
buttons.radio = {image: 'img/radio_on.png', title: 'Radio', url: 'Radio 1","file":"http://icecast.omroep.nl/radio1-bb-mp3'}
buttons.calendarmotogp = {icon: 'fa-calendar', title: 'Kalender MotoGP', url: 'http://www.motogp.com/en.calendar/'}
buttons.calendarf1 = {icon: 'fa-calendar', title: 'Kalender F1', url: 'https://www.formula1.com/en/latest/headlines/2017/9/2018-calendar.html'}
buttons.calendarknzb = {icon: 'fa-calendar', title: 'Kalender KNZB', url:'https://www.knzb.nl/vereniging_wedstrijdsport/wedstrijdsport/webkalender/'}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'https://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256'}
buttons.verkeer = {width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}


var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['key'] = 'blocktitle_1';
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = '';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['key'] = 'blocktitle_2';
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Autiplan';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['key'] = 'blocktitle_3';
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Slimme meter Nuon';


var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo']
					
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big','blocktitle_1','weather','blocktitle_1','2','3','4','5','6']
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = ['traffic','blocktitle_1' ,publictransport.ovinfobus,maps.location,publictransport.ovinfotrain,'blocktitle_1','train']
columns[2]['width'] = 5; 

columns[3] = {}
columns[3]['blocks'] = ['clock','sunrise',buttons.radio,'blocktitle_1',buttons.calendarmotogp,buttons.calendarf1,buttons.calendarknzb,'blocktitle_1',buttons.buienradar]
columns[3]['width'] = 2; 

columns[4] = {}
columns[4]['blocks'] = []
columns[4]['width'] = 1;

columns[5] = {}
columns[5]['blocks'] = [frames.autiplan]
columns[5]['width'] = 6;

columns[6] = {}
columns[6]['blocks'] = ['1','graph_1','7','graph_7']
columns[6]['width'] = 5;

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['blocktitle_1']
columns_standby[1]['width'] = 4;

columns_standby[2] = {}
columns_standby[2]['blocks'] = [frames.autiplan]
columns_standby[2]['width'] = 5;

columns_standby[3] = {}
columns_standby[3]['blocks'] = ['blocktitle_1']
columns_standby[3]['width'] = 3;

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 3200;
screens['default']['maxheight'] = 1800;

screens['default'][1] = {}
screens['default'][1]['background'] = 'bg_morning.jpg';
screens['default'][1]['columns'] = [1,2,3]

screens['default'][2] = {}
screens['default'][2]['background'] = 'bg_morning.jpg';
screens['default'][2]['columns'] = [4,5,6]

screens['default'][3] = {}
screens['default'][3]['background'] = 'bg_morning.jpg';
screens['default'][3]['columns'] = [7,8]
CSS

Code: Select all

/* CSS document */

#graphoutput1{height:150px}
#graphoutput7{height:150px}


/* Weather */
.big .weatherdegrees,
.big .weatherloc {
	display: inline-block;
	margin-top: -2px;
	margin-left: 24px;	/* move text to the right */
	font-size: 35px;
	font weight: bold;
	
}

.skyconsmall {
	display: block;
	width: 75px;
	font-size: 15px;
}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{
	font-size:16px !important;
}

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);			
	background: rgba(0,0,0,0.2);								
	background-clip: padding-box;
		border-radius: 15px;				/* Rounded corners */
}

div.mh.titlegroups {
	height: 50px !important;
	padding-top: 3px !important;
		background: rgba(0,0,0,0);
}
Still playing with it, not fully happy. Have to clean the code too.
Hooked it up this morning and just found out my graphs fall off screen so i have to change them.

wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Show your dashboard and how-to's!

Post by wmmudde » Thursday 01 March 2018 13:21

htilburgs wrote:
Wednesday 28 February 2018 18:17
wmmudde wrote:
Tuesday 27 February 2018 16:19
htilburgs wrote:
Monday 26 February 2018 23:51


Try this in your custom.css

Code: Select all

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0);			/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}
There are several modifications I use myself:

Transparant blocks:

Code: Select all

background: rgba(0,0,0,0.1);
Smaller (or bigger) spaces between blocks:

Code: Select all

border: 3px solid rgba(255,255,255,0);
Rounded corners:

Code: Select all

border-radius: 15px;


If you only like your blocktitles transparant, use:

Code: Select all

div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}
Just play around with them and see what happens... ;-)

Schermafbeelding 2018-02-26 om 22.57.03.png
Hi, great looking F1 calender! Can you send me the config for that?
I also like to create the color buttons for my Yeelight LED Strip, can you send me that piece also?
Hi there,

F1 Kalendar is an ICS file I've imported in Apple iCloud Calendar and set is as a public calendar. I've send you a PM for this.
In the config.js it's just a simple entry with the url of the public calendar:

Code: Select all

var calendars = {}
calendars.f1 = {maxitems: 5, title:'', image:'', icalurl:'webcal://p28-calendars.icloud.com/published/2/xxxxxx'}
The buttons for the Yeelight LED Strip. This is a dummy (selector) switch with code, to address the Yeelight LED Strip.
After that just create an entry in your config.js like normal. Make sure you look at the variables otherwise you won't see a thing ;-)

Code: Select all

config['selector_instead_of_buttons'] = 0;	//use for selectors
config['hide_off_button'] = 0; //use for selectors
Yeelight LED.png

thanks for your feedback, i added the private/public calendar and it keeps saying Loading..
when i open my calendar link it is opening the correct ics file.
Do you know how i can fix it?

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest