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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

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

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

Post by EdwinH »

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 5578 times
Dashticz_2.jpg
Dashticz_2.jpg (266.65 KiB) Viewed 5578 times
Dashticz_3.jpg
Dashticz_3.jpg (300.65 KiB) Viewed 5578 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: 5
Joined: Saturday 16 September 2017 15:44
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8796
Contact:

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

Post by Helix »

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: 5
Joined: Monday 27 June 2016 12:31
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8153
Contact:

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

Post by oeble »

Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.
Attachments
20180223_195852.jpg
20180223_195852.jpg (187.52 KiB) Viewed 5440 times
20180223_195847.jpg
20180223_195847.jpg (191.29 KiB) Viewed 5440 times
20180223_133539.jpg
20180223_133539.jpg (258.24 KiB) Viewed 5440 times
wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

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: 30
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Beschuitje »

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 5344 times
wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

Beschuitje wrote: Monday 26 February 2018 10: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 / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

oeble wrote: Friday 23 February 2018 20: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: 667
Joined: Wednesday 08 March 2017 9:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:

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

Post by poudenes »

English forum, so please no dutch here
RPi3 B+, Debain Stretch, Domoticz, Homebridge, Dashticz, RFLink, Milight, Z-Wave, Fibaro, Nanoleaf, Nest, Harmony Hub, Now try to understand pass2php
wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

oeble wrote: Friday 23 February 2018 20: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: 104
Joined: Tuesday 08 November 2016 14:03
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Poland
Contact:

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

Post by CaesarPL »

wmmudde wrote: Monday 26 February 2018 12:15
oeble wrote: Friday 23 February 2018 20: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: 464
Joined: Tuesday 03 November 2015 11:01
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

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

Post by htilburgs »

Beschuitje wrote: Monday 26 February 2018 10: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 5237 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: 464
Joined: Tuesday 03 November 2015 11:01
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

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

Post by htilburgs »

Just to give an impression of my current dashboard. Try to make it simple and clean.
Dashticz.jpg
Dashticz.jpg (102.27 KiB) Viewed 5231 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: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

Indeed, nice and clean.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Beschuitje
Posts: 30
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Beschuitje »

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 11:21, edited 1 time in total.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

htilburgs wrote: Monday 26 February 2018 23: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) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
wmmudde
Posts: 22
Joined: Monday 31 July 2017 14:33
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

htilburgs wrote: Monday 26 February 2018 22:51
Beschuitje wrote: Monday 26 February 2018 10: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: 104
Joined: Tuesday 08 November 2016 14:03
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Poland
Contact:

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

Post by CaesarPL »

wmmudde wrote: Tuesday 27 February 2018 15: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: 464
Joined: Tuesday 03 November 2015 11:01
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

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

Post by htilburgs »

wmmudde wrote: Tuesday 27 February 2018 15:19
htilburgs wrote: Monday 26 February 2018 22:51
Beschuitje wrote: Monday 26 February 2018 10: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 5071 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: 30
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Beschuitje »

IMG_9242.jpg
IMG_9242.jpg (111.01 KiB) Viewed 5067 times
IMG_9243.jpg
IMG_9243.jpg (63.48 KiB) Viewed 5067 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 / ODroid
Domoticz version:
Contact:

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

Post by wmmudde »

htilburgs wrote: Wednesday 28 February 2018 17:17
wmmudde wrote: Tuesday 27 February 2018 15:19
htilburgs wrote: Monday 26 February 2018 22: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