Page 23 of 51

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

Posted: Friday 05 October 2018 18:14
by Thuis
Ja natuurlijk, ik heb wel weer wat aangepast, het ziet er nu zo uit:

Image
Image
Image

Hier zijn mn configs:

Code: Select all

/*	Configuratie	*/
var config = {}
	config['language'] = 'nl_NL';
	config['domoticz_ip'] = 'http://127.0.0.1:8080';
	config['app_title'] = 'Huis bediening';
	config['domoticz_refresh'] = '5';
	config['dashticz_refresh'] = '60';
	config['default_news_url'] = 'http://www.nu.nl/';
	config['news_scroll_after'] = '15';
	config['standby_after'] = 1;
	config['auto_swipe_back_to'] = 1;
	config['auto_swipe_back_after'] = '600';
	config['auto_slide_pages'] = 0;
	config['slide_effect'] = 'slide'; /*slide' or 'fade' or 'cube' or 'coverflow' or 'flip' */
	config['standard_graph'] = 'month';
	config['timeformat'] = 'DD-MM-YY HH:mm';
	config['calendarformat'] = 'dd DD.MM HH:mm';
	config['calendarlanguage'] = 'nl_NL';
	config['calendarurl'] = 'https://basic.ics';
	config['idx_moonpicture'] = 0;
	config['switch_horizon'] = 0;
	config['selector_instead_of_buttons'] = 0;
	config['auto_positioning'] = 0;
	config['use_favorites'] = 1;
	config['last_update'] = 1;
	config['hide_topbar'] = 1;
	config['hide_seconds'] = 0;
	config['hide_seconds_stationclock'] = 0;
	config['use_fahrenheit'] = 0;
	config['use_beaufort'] = 0;
	config['translate_windspeed'] = 1;
	config['static_weathericons'] = 0;
	config['hide_mediaplayer'] = 0;
	config['logo'] = '';
	config['last_update'] = 0;
	config['gm_api'] = '';
	config['boss_stationclock'] = 'RedBoss';
	config['hide_seconds_stationclock'] = 0;
/*OpenWeather	*/
	config['owm_api'] = 'sleuteltje';
	config['owm_city'] = 'Unknown';
	config['owm_name'] = '';
	config['owm_country'] = 'nl';
	config['static_weathericons'] = 1;
/*Vuilnis Module	*/
	config['garbage_company'] = 'cure';
	config['garbage_icalurl'] = 0;
	config['garbage_zipcode'] = 'zipped';
	config['garbage_street'] = 'unknown';
	config['garbage_housenumber'] = ' 0 ';
	config['garbage_maxitems'] = '12';
	config['garbage_width'] = '12';
	config['garbage_hideicon'] = 0;
	config['garbage_use_names'] = true;
	config['garbage_use_colors'] = true;
	config['garbage_icon_use_colors'] = true;
	config['garbage_use_cors_prefix'] = true;
	config['garbage'] = {
		gft: {kliko: 'green', code: '#FF8C00', name: 'GFT', icon: 'img/garbage/kliko_brown.png'},
		pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
		rest: {kliko: 'grey', code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'},
		papier: {kliko: 'blue', code: '#00BFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
		kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
		brown: {kliko: 'brown', code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
		black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
		milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
		kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},}
	config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee'];	

/*iFrames aanmaken	*/
/*
var frames = {}
	frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=00.0000&lon=0.0000&name=Unknown&country=NL&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12}
*/
/*	MAPS VAN GOOGLE		*/
/*
var maps = {}
	maps.location = { height: 256, width:12, latitude: 00.00000, longitude: 0.00000, zoom:10 }
*/
/*Kalender var aanmaken	*/
	var calendars = {}
		calendars.private = { fontsize:28, image:'/icons/calendar.png', maxitems: 10, icalurl: 'https://cors-anywhere.herokuapp.com/https://calendar.google.com/calendar/ical/unknown%40gmail.com/private-unknown-key/basic.ics' }
/*De internet radio speler	*/
var _STREAMPLAYER_TRACKS = [
	{"track":1,"name":"NPO Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
	{"track":2,"name":"Radio Rijnmond","file":"http://d2e9xgjjdd9cr5.cloudfront.net/icecast/rijnmond/radio-mp3"},
	{"track":3,"name":"Sublime FM","file":"http://Stream.sublimefm.nl/SublimeFM_mp3 "},
	{"track":4,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
	{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
	{"track":6,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},];
/*Knoppen var aanmaken	*/
var buttons = {}
	buttons.buienradar	= { key: 'buienradar'	, width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256'}
	buttons.ipcam1 		= {key: 'cam1'	, width:12, isimage:true, image: 'http://eenipadres/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=user&pwd=paswoord'}
	buttons.ipcam2 		= {key: 'cam2'	, width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}
	buttons.domoticz 	= {key:'log'	, width:12, icon:'fa-microchip', title: 'Domoticz Log', log:true, level: 2}
	buttons.school 		= {key: 'school'	, width:12, image:'img/icons/school.png', title: 'School site, met handige informatie', url:'https://www.eenschoolwebsite.kijkmaarwatjedoet/'}
	buttons.vakantie 	= {key: 'vakantie'	, width:12, image:'img/icons/vakantie3.png', title: 'School Vakanties voor alle regios', url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/schoolholidays/schoolyear/2017-2018?output=html'}
	buttons.energie		= {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
	buttons.home		= {key: 'Homepag'	, width:6,	image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
	buttons.bedien		= {key: 'Bedinepag'	, width:6,	image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 }
	/*buttons.verkeer	= { width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}*/
	/*buttons.wind1 	= { width: 4, height: 10, isimage:true, image: 'https://www.windfinder.com/widget/forecast/js/eenplaats?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=m_s&days=2&show_day=0&show_pressure=0&show_temperature=0'}*/
	/*buttons.moon		= {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}*/
	/*buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}*/


/*Hier moeten de blokken met IDX uit Domoticz apparaten of benaming via config	*/
var blocks = {}
/*	Standaard blokken met config benaming	*/
	blocks['news_1'] = {}
	blocks['news_1']['feed'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss/Algemeen';
	blocks['news_1']['maxheight'] = 350;

	
/*Blokken met [IDX] nummer vanuit Domoticz	*/
/* 	Xiaomi Gateway Kleuren	*/
	blocks[1] = {}  
	blocks[1]['width'] = 6;
/* 	Xiaomi Ringtone Selector	*/
	blocks[3] = {}
	blocks[3]['width'] = 6;
/* 	Xiaomi Deursensor 	*/
	blocks[99] = {}
	blocks[99]['title'] = 'Deur Sensor'
	blocks[99]['width'] = 6;
/*	Xiaomi Raam Sensor 	*/
	blocks[100] = {}
	blocks[100]['title'] = 'Raam Sensor'
	blocks[100]['width'] = 6;
/*Metingen onboard sensoren Server PC	*/
/* 	Ssyteem Temp	*/
	blocks[101] = {}
	blocks[101]['width'] = 6;
/*	CPU temp	*/
	blocks[105] = {}
	blocks[105]['width'] = 6;

/*P1 Smartmeter Elektr	*/
/* 	KWh verbruik actueel	*/
	blocks['94_1'] = {}
	blocks['94_1']['title'] = 'Energie Actueel';
	blocks['94_1']['width'] = 6;
	blocks['94_1']['switch'] = true;
/* 	Verbruik KWh Vandaag	*/
	blocks['94_2'] = {}
	blocks['94_2']['title'] = 'Energie vandaag';
	blocks['94_2']['width'] = 4;
	blocks['94_2']['switch'] = true;
/*	Totale KWh verbruik	*/
	blocks['94_3'] = {}
	blocks['94_3']['title'] = 'Energie Totaal';
	blocks['94_3']['width'] = 4;
	blocks['94_3']['switch'] = true;
	blocks['94_3']['image'] = 'current48.png';
/*	Binnenkomend Voltage	*/
	blocks[95] = {}
	blocks[95]['width'] = 4;
	blocks[95]['title'] = 'Inkomend Voltage';
	blocks[95]['switch'] = true;
	blocks[95]['image'] = 'current48.png';
/*	Gas meter verbruik vandaag	*/
	blocks['96_1'] = {}
	blocks['96_1']['width'] = 4;
	blocks['96_1']['title'] = 'Gas verbr. Vandaag';
	blocks['96_1']['switch'] = true;
	blocks['96_1']['image'] = 'gas48.png'
/* 	Gasmeter verbruik totaal 	*/
	blocks['96_2'] = {}
	blocks['96_2']['width'] = 4;
	blocks['96_2']['title'] = 'Gas Verbr. Totaal';
	blocks['96_2']['switch'] = true;

/*Weer en metingen van buiten	*/
/*	Buiten temperatuur	*/
	blocks['123_1'] = {}
	blocks['123_1']['title'] = 'Temperatuur'
	blocks['123_1']['width'] = 4;
/*	Luchtvochtigheid	*/
	blocks['123_2'] = {}
	blocks['123_2']['title'] = 'Vochtigheid'
	blocks['123_2']['width'] = 4;
/*	Lucht druk	*/
	blocks['123_3'] = {}
	blocks['123_3']['title'] = 'Luchtdruk'
	blocks['123_3']['width'] = 4;
/*	Windkracht	*/
	blocks[124] = {}
	blocks[124]['title'] = 'Windkracht'
	blocks[124]['width'] = 4;
/*	UV-index	*/
	blocks[52] = {}
	blocks[52]['title'] = 'UV Index'
	blocks[52]['width'] = 4;
/* 	mm Regen	*/
	blocks[127] = {}
	blocks[127]['title'] = 'Regen'
	blocks[127]['width'] = 4;
/*	Zicht*/
	blocks[125] = {}
	blocks[125]['width'] = 4;
/*	Gevoels temperatuur, Windchill	*/
	blocks[121] = {}
	blocks[121]['title'] = '';
	blocks[121]['image'] = '/icons/windchill.png'
	blocks[121]['width'] = 12;

/*Bloknamen	*/
	blocks['blocktitle_1'] = {}
	blocks['blocktitle_1']['type'] = 'blocktitle';
	blocks['blocktitle_1']['title'] = 'Gas en Elektra Verbruik'
	blocks['blocktitle_1']['width'] = 12 ;

	blocks['blocktitle_2'] = {}
	blocks['blocktitle_2']['type'] = 'blocktitle';
	blocks['blocktitle_2']['title'] = 'Kamer Thermostaat'
	blocks['blocktitle_2']['width'] = 12 ;

	blocks['blocktitle_3'] = {}
	blocks['blocktitle_3']['type'] = 'blocktitle';
	blocks['blocktitle_3']['title'] = 'Bediening Lampen'
	blocks['blocktitle_3']['width'] = 12 ;

	blocks['blocktitle_4'] = {}
	blocks['blocktitle_4']['type'] = 'blocktitle';
	blocks['blocktitle_4']['title'] = 'Agenda / Kalender'
	blocks['blocktitle_4']['icon'] = 'fa-calendar' /*Jammer, waarom werkt dit niet ?*/
	blocks['blocktitle_4']['width'] = 12 ;

	blocks['blocktitle_5'] = {}
	blocks['blocktitle_5']['type'] = 'blocktitle';
	blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Jammer, waarom werkt dit niet ?*/
	blocks['blocktitle_5']['title'] = 'Nieuws / Files / Weer'
	blocks['blocktitle_5']['width'] = 12 ;

	blocks['blocktitle_6'] = {}
	blocks['blocktitle_6']['type'] = 'blocktitle';
	blocks['blocktitle_6']['title'] = 'Oranje = Hoog tarief / Blauw = Laag tarief'
	blocks['blocktitle_6']['width'] = 12 ;

	blocks['camtitle_1'] = {}
	blocks['camtitle_1']['type'] = 'blocktitle';
	blocks['camtitle_1']['title'] = 'Camera'
	blocks['camtitle_1']['width'] = 12 ;
	
/*Hier worden de colommen voor op het scherm gemaakt	*/
var columns = {}
	columns['bar'] = {}
	columns['bar']['blocks'] = ['logo','miniclock','settings']

	columns[1] = {}
	columns[1]['blocks'] = ['currentweather_big_owm',buttons.ipcam1, buttons.ipcam2]  //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
	columns[1]['width'] = 3;

	columns[2] = {}
	columns[2]['blocks'] = [calendars.private, buttons.school, buttons.vakantie, 'garbage', 'streamplayer']
	columns[2]['width'] = 3; 

	columns[3] = {}
	columns[3]['blocks'] = ['news_1','traffic',121,'123_1','123_2','123_3',124,52,127,125]
	columns[3]['width'] = 4; 

	columns[4] = {}
	columns[4]['blocks'] = ['clock','stationclock','sunrise',buttons.buienradar,buttons.energie] 
	columns[4]['width'] = 2; 

	columns[5] = {}
	columns[5]['width'] = 4;
	columns[5]['blocks'] = ['blocktitle_2']

	columns[6] = {}
	columns[6]['blocks']=['96_1','96_2',95,'graph_96',buttons.home,buttons.bedien]
	columns[6]['width'] = 4;
	
	columns[7] = {}
	columns[7]['blocks'] = ['94_1','94_2','94_3','graph_94','clock']
	columns[7]['width'] = 4;

	columns[8] = {}
	columns[8]['blocks'] = ['blocktitle_3',buttons.domoticz,1,99,100,] 
	columns[8]['width'] = 4;

	columns[9] = {}
	columns[9]['blocks'] = ['blocktitle_3']
	columns[9]['width'] = 4;

	columns[10] = {}
	columns[10]['blocks'] = [buttons.home,buttons.energie]
	columns[10]['width'] = 4;

/*Standby modus configuratie	*/
var columns_standby = {}
	columns_standby[1] = {}
	columns_standby[1]['blocks'] = ['weather_owm','clock','94_1','123_1']  //specify blocks for the standby mode
	columns_standby[1]['width'] = 12;

/*Hier worden de verschillende schermen gemaakt welke je kunt swipen	*/
var screens = {}
	screens['default'] = {}
	screens['default']['maxwidth'] = 1920;
	screens['default']['maxheight'] = 1080;

	screens['default'][1] = {}
	screens['default'][1]['background'] = 'bg27.png';
	screens['default'][1]['columns'] = [1,2,3,4]

	screens['default'][2] = {}
	screens['default'][2]['background'] = 'bg27.png';
	screens['default'][2]['columns'] = [5,6,7]

	screens['default'][3] = {}
	screens['default'][3]['background'] = 'bg27.png';
	screens['default'][3]['columns'] = [8,9,10]
	

Ben er nog steeds niet achter hoe ik de icons van de electra en de gas kan vervangen door images, als ook het autootje, maar ik spit gestaag door !

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

Posted: Friday 05 October 2018 19:24
by HansieNL
@Thuis: do you wanna change "het autootje" or just the size, because there's gonna be a fix for a font size problem in latest beta's.
https://github.com/Dashticz/dashticz_v2/pull/384

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

Posted: Friday 05 October 2018 20:16
by Thuis
HansieNL, I like to change all the icons, to icons I have in my own icon folder. All of them, so yes "het autootje" needs to be a "stuurwiel" png in my /img/icons folder ....

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

Posted: Friday 05 October 2018 20:51
by EdwinK
Looks like I've got something to do this weekend. See if I can put my stuff in this nice layout.

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

Posted: Friday 05 October 2018 21:59
by Thuis
Sorry for my Dutch, I dont know whatcame over me, and just now reading it back i see i used dutch, haha im tiredof search reading and testing, that just it.

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

Posted: Friday 05 October 2018 22:08
by EdwinK
Already got parts working. Now time to stop and do some other things.

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

Posted: Friday 05 October 2018 23:23
by Thuis
Yes but it is so weird, if you see the graphs and you open the graph with pressing the blok, gas today for instance, the graph gas is gone on the page and will only come back after refreshing the page. So do not open the graph by pressing a block. 😋

Sent from my Lphone

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

Posted: Saturday 06 October 2018 10:13
by ArthurNL
My contribution:

Image

Config.js
Spoiler: show
var config = {}

config['language'] = 'en_US';
config['domoticz_ip'] = 'http://url&port';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '60';
config['dashticz_refresh'] = '60';
config['standard_graph'] = 'hours'; // or 'hours' or 'day'
config['last_update'] = false; // true

/*
OpenWeathermap config
*/
config['owm_api'] = 'api-key';
config['owm_city'] = 'city';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['static_weathericons'] = 1;


var blocks = {}
blocks[1] = {} //
blocks[1]['width'] = 6;

blocks['1_1'] = {} // Electra verbruik
blocks['1_1']['title'] = 'Verbruik';
blocks['1_1']['switch'] = true;
blocks['1_1']['icon'] = 'fas fa-bolt';

blocks['1_3'] = {} // Electra gebruik
blocks['1_3']['title'] = 'Gebruik';
blocks['1_3']['switch'] = true;
blocks['1_3']['icon'] = 'fas fa-bolt';

blocks[4] = {} //
blocks[4]['width'] = 6;

blocks['4_1'] = {} // Gas verbruik
blocks['4_1']['title'] = 'Verbruik';
blocks['4_1']['switch'] = true;

blocks['4_3'] = {} // Gas gebruik
blocks['4_3']['title'] = 'Gebruik';
blocks['4_3']['switch'] = true;

blocks[5] = {} //
blocks[5]['width'] = 6;

blocks['5_1'] = {} // Sonoff
blocks['5_1']['title'] = 'Temperatuur';
blocks['5_1']['switch'] = true;

blocks['5_2'] = {} // Sonoff
blocks['5_2']['title'] = 'Vochtigheid';
blocks['5_2']['switch'] = true;

blocks[7] = {} //
blocks[7]['width'] = 6;

blocks['7_1'] = {} // Esp #1 Woonkamer
blocks['7_1']['title'] = 'Temperatuur';
blocks['7_1']['switch'] = true;

blocks['7_2'] = {} // Esp #1 Woonkamer
blocks['7_2']['title'] = 'Vochtigheid';
blocks['7_2']['switch'] = true;

blocks[8] = {} //
blocks[8]['width'] = 6;

blocks['8_1'] = {} // Esp #2 Werkkamer
blocks['8_1']['title'] = 'Temperatuur';
blocks['8_1']['switch'] = true;

blocks['8_2'] = {} // Esp #2 Werkkamer
blocks['8_2']['title'] = 'Vochtigheid';
blocks['8_2']['switch'] = true;


/*
blocks['blocktitle10'] = {}
blocks['blocktitle10']['type'] = 'blocktitle';
blocks['blocktitle10']['title'] = 'Sonff';
blocks['blocktitle20'] = {}
blocks['blocktitle20']['type'] = 'blocktitle';
blocks['blocktitle20']['title'] = 'Esp #1';
blocks['blocktitle30'] = {}
blocks['blocktitle30']['type'] = 'blocktitle';
blocks['blocktitle30']['title'] = 'Esp #2';
*/


var buttons = {}
buttons.webcam = {width:12, isimage:true, refresh:10000, image: 'http://cdn.knmi.nl/knmi/map/page/weer/a ... ratuur.png', url: 'http://www.knmi.nl'}


var columns = {}
columns['bar'] = {};
columns['bar']['blocks'] = ['sunrise','miniclock','settings'];

columns[10] = {} // Rij 1
columns[10]['blocks'] = ['graph_8','8_1','8_2','graph_7','7_1','7_2','graph_5','5_1','5_2'];
columns[10]['width'] = 4;

columns[20] = {} // Rij 2
columns[20]['blocks'] = ['graph_1','1_1','1_3','graph_4','4_1','4_3'];
columns[20]['width'] = 4;

columns[30] = {} // Rij 3
columns[30]['blocks'] = ['currentweather_big_owm','weather_owm',buttons.webcam];
columns[30]['width'] = 4;


var screens = {}
screens[10] = {}
screens[10]['columns'] = [10,20,30];
Still todo:
- create bar graphs instead of line
- remove humidity from graphs (current sensor outputs temp + humidity)
- change graph to Actual Usage instead of Daily Usage
- change kWh on Gas Meter output; this one is a bit difficult, as I am using a Youless for both measuring my electrics and gas usage. But the Dashticz code doesn't differentiate between these two. Issue is that the hardware etc is exact the same. The Domoticz dashboard itself does show it in m3 instead of kWh

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

Posted: Saturday 06 October 2018 23:02
by Thuis
@ArthurNL Wauw, ziet er goed uit.

Ik heb mn thermostaat eindelijk aangesloten :-)

Image

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

Posted: Sunday 07 October 2018 9:15
by ArthurNL
My latest version;
Image

config.js
Spoiler: show
var config = {}

config['language'] = 'en_US';
config['domoticz_ip'] = 'http://192.168.1.51:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '60';
config['dashticz_refresh'] = '60';
config['standard_graph'] = 'hours'; // or 'hours' or 'day'
config['last_update'] = false; // true
config['lineColors'] = ['#7d82e0','#f04a4a','#00e'];

/*
OpenWeathermap config
*/
config['owm_api'] = 'key';
config['owm_city'] = 'Tilburg';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['static_weathericons'] = 1;


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

blocks['1_1'] = {} // Electra verbruik
blocks['1_1']['title'] = 'Verbruik';
blocks['1_1']['switch'] = true;

blocks['1_2'] = {} // Electra totaal
blocks['1_2']['title'] = 'Totaal';
blocks['1_2']['switch'] = true;

blocks['1_3'] = {} // Electra gebruik
blocks['1_3']['title'] = 'Gebruik';
blocks['1_3']['switch'] = true;

blocks[4] = {} //
blocks[4]['width'] = 4;

blocks['4_1'] = {} // Gas verbruik
blocks['4_1']['title'] = 'Verbruik';
blocks['4_1']['switch'] = true;

blocks['4_2'] = {} // Gas totaal
blocks['4_2']['title'] = 'Totaal';
blocks['4_2']['switch'] = true;

blocks['4_3'] = {} // Gas gebruik
blocks['4_3']['title'] = 'Gebruik';
blocks['4_3']['switch'] = true;

blocks[5] = {} //
blocks[5]['width'] = 6;

blocks['5_1'] = {} // Sonoff
blocks['5_1']['title'] = 'Temperatuur';
blocks['5_1']['switch'] = true;

blocks['5_2'] = {} // Sonoff
blocks['5_2']['title'] = 'Vochtigheid';
blocks['5_2']['switch'] = true;

blocks[7] = {} //
blocks[7]['width'] = 6;

blocks['7_1'] = {} // Esp #1 Woonkamer
blocks['7_1']['title'] = 'Temperatuur';
blocks['7_1']['switch'] = true;

blocks['7_2'] = {} // Esp #1 Woonkamer
blocks['7_2']['title'] = 'Vochtigheid';
blocks['7_2']['switch'] = true;

blocks[8] = {} //
blocks[8]['width'] = 6;

blocks['8_1'] = {} // Esp #2 Werkkamer
blocks['8_1']['title'] = 'Temperatuur';
blocks['8_1']['switch'] = true;

blocks['8_2'] = {} // Esp #2 Werkkamer
blocks['8_2']['title'] = 'Vochtigheid';
blocks['8_2']['switch'] = true;


/*
blocks['blocktitle10'] = {}
blocks['blocktitle10']['type'] = 'blocktitle';
blocks['blocktitle10']['title'] = 'Sonff';
blocks['blocktitle20'] = {}
blocks['blocktitle20']['type'] = 'blocktitle';
blocks['blocktitle20']['title'] = 'Esp #1';
blocks['blocktitle30'] = {}
blocks['blocktitle30']['type'] = 'blocktitle';
blocks['blocktitle30']['title'] = 'Esp #2';
*/


var buttons = {}
buttons.webcam1 = {width:6, isimage:true, refresh:10000, image: 'http://cdn.knmi.nl/knmi/map/page/weer/a ... ratuur.png', url: 'http://www.knmi.nl'}
buttons.webcam2 = {width:6, isimage:true, refresh:10000, image: 'https://cdn.knmi.nl/knmi/map/page/weer/ ... kracht.png', url: 'http://www.knmi.nl'}


var columns = {}
columns['bar'] = {};
columns['bar']['blocks'] = ['sunrise','miniclock','settings'];

columns[10] = {} // Kolom 1
columns[10]['blocks'] = ['graph_8','8_1','8_2','graph_7','7_1','7_2','graph_5','5_1','5_2'];
columns[10]['width'] = 4;

columns[20] = {} // Kolom 2
columns[20]['blocks'] = ['graph_1','1_3','1_1','1_2','graph_4','4_3','4_1','4_2'];
columns[20]['width'] = 4;

columns[30] = {} // Kolom 3
columns[30]['blocks'] = ['currentweather_big_owm','weather_owm',buttons.webcam1,buttons.webcam2];
columns[30]['width'] = 4;


var screens = {}
screens[10] = {}
screens[10]['columns'] = [10,20,30];

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

Posted: Monday 08 October 2018 15:45
by gielie
Thuis wrote: ↑Saturday 06 October 2018 23:02 @ArthurNL Wauw, ziet er goed uit.

Ik heb mn thermostaat eindelijk aangesloten :-)

Image
Looking great.
1 question, how do you get the bar graph instead of a line, could you share that with us? And id like to see the code of the thermostat.

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

Posted: Monday 08 October 2018 16:18
by Thuis
for the bar, search morris.bar on google and take a look at the graphs.js in the js folder :-)
the code for thermostat i will put on when i am at home.

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

Posted: Monday 08 October 2018 21:02
by EdwinK
Based on the layout of @thuis, I made me this:

Image

Still a bit of work to do, but slowly getting there. First, need to fix the tiles (data next to icons instead of under it)

(edit: the fix for this was to remove 1 line from custom.css)

Only thing to do now, is to give the calendar the same font as the garbage

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

Posted: Monday 08 October 2018 22:11
by ArthurNL
Thuis wrote: ↑Monday 08 October 2018 16:18 for the bar, search morris.bar on google and take a look at the graphs.js in the js folder :-)
Sounds difficult :D

Care to share the graphs.js ?

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

Posted: Tuesday 09 October 2018 13:42
by EastXIII
@robgeerts ; Thanks for Dashticz! It's awesome!

So here is my dash so far. It still has a long way to go but there is progress.
Maybe someone can help me with some issues I've run across. I've done research but can't find the solution...

1. How do I enlarge image's instead of icons in Custom.css?
2. How do I align the images/icons separate from the text inside a block?
Below "Verlichting" I've enlarged the 'slide-switch' but I can't get the alignment right. Same for "Harmony Hub". I want the icons/images to drop down a bit.
3. At "Temperatuur" the thermometer icons stay small instead of the 26 px I set in Custom.css with the .fa,.wi command. How do I match these with the rest?
4. "Thermostaat?" Is suppossed to be my Honeywell EvoHome Thermostat, in Domoticz via WEB API, but I cannot adjust temperature like in Domoticz. How do I fix this?

Please believe me when I say I've done the research but I just did'nt find the solutions so far...
Thanks for making a great product and sharing all your skills!

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

Posted: Tuesday 09 October 2018 15:03
by Thuis
ArthurNL wrote: ↑Monday 08 October 2018 22:11
Thuis wrote: ↑Monday 08 October 2018 16:18 for the bar, search morris.bar on google and take a look at the graphs.js in the js folder :-)
Sounds difficult :D

Care to share the graphs.js ?
Maybe someone can make it as an option in config.js, so you can choose, bar, line, cake :-)
And also the colors . . .

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

Posted: Tuesday 09 October 2018 15:05
by EdwinK
Thuis wrote: ↑Tuesday 09 October 2018 15:03
Maybe someone can make it as an option in config.js, so you can choose, bar, line, cake :-)
And also the colors . . .
Mmm.. Cake :)

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

Posted: Tuesday 09 October 2018 15:06
by Thuis
:-p

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

Posted: Tuesday 09 October 2018 17:48
by ArthurNL
Thuis wrote: ↑Tuesday 09 October 2018 15:03
ArthurNL wrote: ↑Monday 08 October 2018 22:11
Thuis wrote: ↑Monday 08 October 2018 16:18 for the bar, search morris.bar on google and take a look at the graphs.js in the js folder :-)
Sounds difficult :D

Care to share the graphs.js ?
Maybe someone can make it as an option in config.js, so you can choose, bar, line, cake :-)
And also the colors . . .
Can you share your graphs.js? So we don't have to re-invent the wheel? :mrgreen:

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

Posted: Wednesday 10 October 2018 8:48
by Thuis
From line 222 in graphs.js, I think:

Code: Select all

function makeMorrisGraph(idx, graphProperties) {
    Morris.Bar({
        parseTime: false,
        element: 'graphoutput' + idx,
        data: graphProperties.data,
        fillOpacity: 0.2,
        gridTextColor: '#c3f6fe',
        lineWidth: 1,
		stacked: true,
        xkey: ['d'],
        ykeys: graphProperties.keys,
        labels: graphProperties.labels,
        xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); },
        lineColors: settings['lineColors'],
		barColors: settings['lineColors'],
        pointFillColors: ['none'],
        pointSize: 1,
        hideHover: 'auto',
        resize: true,
        hoverCallback: function (index, options, content, row) {
            var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat);
            var text = datePoint + ": ";
            graphProperties.keys.forEach(function (element, index) {
                text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index];
            });
            return text;
        }
    });
}
Sorry it is not my complete graphs.js. I have 2 graphs.js, one is at home, the other one, is well at work, haha, which I am editing, so if i put the edit graphs.js on here, some things might not work correct, but this is the piece for the bars. And also, the colors are in settings.js, but maybe you already knew that?

Somewhere at Line 569 in settings.js,

Code: Select all

if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];
When I have time and am at home, I shall post the other graphs.js, if it is still wanted, but, once I get home, I rarely have spare time, so don't pin it on me :-p