Page 18 of 50

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

Posted: Monday 19 February 2018 14:03
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 5577 times
Dashticz_2.jpg
Dashticz_2.jpg (266.65 KiB) Viewed 5577 times
Dashticz_3.jpg
Dashticz_3.jpg (300.65 KiB) Viewed 5577 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.

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

Posted: Friday 23 February 2018 11:12
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!

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

Posted: Friday 23 February 2018 20:24
by oeble
Just started with Dashticz...6 screen setup.. like it ! , especially the customization options.

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

Posted: Saturday 24 February 2018 10:21
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

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

Posted: Monday 26 February 2018 10:42
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

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

Posted: Monday 26 February 2018 10:55
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?

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

Posted: Monday 26 February 2018 10:57
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?

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

Posted: Monday 26 February 2018 11:53
by poudenes
English forum, so please no dutch here

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

Posted: Monday 26 February 2018 12:15
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?

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

Posted: Monday 26 February 2018 15:59
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;

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

Posted: Monday 26 February 2018 22:51
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 5236 times

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

Posted: Monday 26 February 2018 23:16
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 5230 times

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

Posted: Tuesday 27 February 2018 8:46
by EdwinK
Indeed, nice and clean.

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

Posted: Tuesday 27 February 2018 9:35
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.

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

Posted: Tuesday 27 February 2018 10:13
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?

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

Posted: Tuesday 27 February 2018 15:19
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?

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

Posted: Tuesday 27 February 2018 16:57
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.

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

Posted: Wednesday 28 February 2018 17:17
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 5070 times

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

Posted: Wednesday 28 February 2018 17:35
by Beschuitje
IMG_9242.jpg
IMG_9242.jpg (111.01 KiB) Viewed 5066 times
IMG_9243.jpg
IMG_9243.jpg (63.48 KiB) Viewed 5066 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.

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

Posted: Thursday 01 March 2018 12:21
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?