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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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 !
I Love Domoticz ! And the community around it :-)
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post 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
Blah blah blah
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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 ....
I Love Domoticz ! And the community around it :-)
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 »

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) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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.
I Love Domoticz ! And the community around it :-)
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 »

Already got parts working. Now time to stop and do some other things.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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
I Love Domoticz ! And the community around it :-)
ArthurNL
Posts: 15
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.10717
Location: The Netherlands
Contact:

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

Post 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
Dashticz V2.4.0 Beta
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post by Thuis »

@ArthurNL Wauw, ziet er goed uit.

Ik heb mn thermostaat eindelijk aangesloten :-)

Image
I Love Domoticz ! And the community around it :-)
ArthurNL
Posts: 15
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.10717
Location: The Netherlands
Contact:

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

Post 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];
Dashticz V2.4.0 Beta
User avatar
gielie
Posts: 290
Joined: Tuesday 12 January 2016 11:40
Target OS: Raspberry Pi / ODroid
Domoticz version: latest β
Location: The Netherlands (Alkmaar)
Contact:

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

Post 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.
- Aeon Labs USB Stick met Z-wave plus
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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.
I Love Domoticz ! And the community around it :-)
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 »

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) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
ArthurNL
Posts: 15
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.10717
Location: The Netherlands
Contact:

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

Post 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 ?
Dashticz V2.4.0 Beta
EastXIII
Posts: 29
Joined: Monday 08 October 2018 13:56
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Contact:

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

Post 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!
Attachments
2.png
2.png (270.58 KiB) Viewed 5237 times
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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 . . .
I Love Domoticz ! And the community around it :-)
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 »

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) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post by Thuis »

:-p
I Love Domoticz ! And the community around it :-)
ArthurNL
Posts: 15
Joined: Friday 05 October 2018 14:36
Target OS: Windows
Domoticz version: 4.10717
Location: The Netherlands
Contact:

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

Post 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:
Dashticz V2.4.0 Beta
User avatar
Thuis
Posts: 251
Joined: Tuesday 11 September 2018 11:36
Target OS: Linux
Domoticz version: Beta
Location: The Netherlands
Contact:

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

Post 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
I Love Domoticz ! And the community around it :-)
Post Reply

Who is online

Users browsing this forum: floris74 and 1 guest