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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Friday 05 October 2018 18:14

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 !
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

User avatar
HansieNL
Posts: 460
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

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

Post by HansieNL » Friday 05 October 2018 19:24

@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
Blah blah blah

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Friday 05 October 2018 20:16

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 ....
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

User avatar
EdwinK
Posts: 1403
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 » Friday 05 October 2018 20:51

Looks like I've got something to do this weekend. See if I can put my stuff in this nice layout.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Friday 05 October 2018 21:59

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.
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

User avatar
EdwinK
Posts: 1403
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 » Friday 05 October 2018 22:08

Already got parts working. Now time to stop and do some other things.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Friday 05 October 2018 23:23

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
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

ArthurNL
Posts: 14
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.9700
Location: The Netherlands
Contact:

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

Post by ArthurNL » Saturday 06 October 2018 10:13

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
Dashticz V2.4.0 Beta

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Saturday 06 October 2018 23:02

@ArthurNL Wauw, ziet er goed uit.

Ik heb mn thermostaat eindelijk aangesloten :-)

Image
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

ArthurNL
Posts: 14
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.9700
Location: The Netherlands
Contact:

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

Post by ArthurNL » Sunday 07 October 2018 9:15

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];
Dashticz V2.4.0 Beta

User avatar
gielie
Posts: 239
Joined: Tuesday 12 January 2016 12:40
Target OS: Raspberry Pi
Domoticz version: latest β
Location: The Netherlands (Alkmaar)
Contact:

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

Post by gielie » Monday 08 October 2018 15:45

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.
- Vision ZU1401 USB Stick
- Aeotec MultiSensor 6
- FIBARO FGS222
- FIBARO FGWPE Wall Plug
- Everspring AN157
- Neo CoolCam Power plug
- Neo CoolCam PIR Sensor
- Popp Smoke Detector
- Toon
- Kodi Media Server

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » 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 :-)
the code for thermostat i will put on when i am at home.
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

User avatar
EdwinK
Posts: 1403
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 » Monday 08 October 2018 21:02

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
Last edited by EdwinK on Tuesday 09 October 2018 13:34, edited 2 times in total.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

ArthurNL
Posts: 14
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.9700
Location: The Netherlands
Contact:

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

Post by ArthurNL » 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 ?
Dashticz V2.4.0 Beta

EastXIII
Posts: 19
Joined: Monday 08 October 2018 13:56
Target OS: Raspberry Pi
Domoticz version: Beta
Contact:

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

Post by EastXIII » Tuesday 09 October 2018 13:42

@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!
Attachments
2.png
2.png (270.58 KiB) Viewed 725 times

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » 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 . . .
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

User avatar
EdwinK
Posts: 1403
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 09 October 2018 15:05

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 :)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Tuesday 09 October 2018 15:06

:-p
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

ArthurNL
Posts: 14
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.9700
Location: The Netherlands
Contact:

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

Post by ArthurNL » Tuesday 09 October 2018 17:48

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:
Dashticz V2.4.0 Beta

User avatar
Thuis
Posts: 68
Joined: Tuesday 11 September 2018 11:36
Target OS: -
Domoticz version: 2.9700
Location: The Netherlands
Contact:

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

Post by Thuis » Wednesday 10 October 2018 8:48

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
p1 Smartmeter, CM15Pro, Lyric T6, Sonoff, Xiaomi Aqara, Intel Xeon.

Post Reply

Who is online

Users browsing this forum: kgbengt, MathieuD, scheelings and 3 guests