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

[rgroothuis]

See screenshot, I'm new to Dashticz and trying to build a nice dashboard.

Screen Shot 2018-10-10 at 10.51.00.png (27.26 KiB) Viewed 3774 times

How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.

[Thuis]

Wow, Martijn85, nice setup, looks great ! Is see you have dimmable lights, what kind of hardware do you use for dimming ?

[Thuis]

See screenshot, I'm new to Dashticz and trying to build a nice dashboard.

Screen Shot 2018-10-10 at 10.51.00.png

How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.

Try this in you custom.css

Code: Select all

.col-xs-2, .col-xs-4 {
    float: right;    /* or left, natuurlijk*/
}

Maybe it works

[Thuis]

See screenshot, I'm new to Dashticz and trying to build a nice dashboard.

Screen Shot 2018-10-10 at 10.51.00.png

How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.

Or try this in your custom.css:

Code: Select all

.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(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover 	{padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.8); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}

[rgroothuis]

This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.

Screen Shot 2018-10-10 at 12.39.27.png (16.84 KiB) Viewed 3753 times

[Thuis]

This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.

Screen Shot 2018-10-10 at 12.39.27.png

I cannot recreate your layout, did you tried the last change, and undo the first ?
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++

[rgroothuis]

This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.

Screen Shot 2018-10-10 at 12.39.27.png

I cannot recreate your layout, did you tried the last change, and undo the first ?
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++

Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.

[EastXIII]

Nobody can help me? Or did I post it in the wrong place?

@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!

*Edit; steep learning curve and I like it. For those who want to know:
1. Put this in custom.css so all images from the /IMG folder used in your dash wil be enlarged:

Code: Select all

img.icon { max-width:28px !important;}

2. Put this in custom.css;

Code: Select all

 div.mh.transbg.block_IDX.col-xs-4.hover div.col-xs-8.col-data {
padding-left:10px !important;}    // replace with own IDX 

3. same as 1.
4. Still don't know...

[Thuis]

This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.

Screen Shot 2018-10-10 at 12.39.27.png

I cannot recreate your layout, did you tried the last change, and undo the first ?
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++

Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.

Great ! Yes it is very time consuming if you do not know what your doing, like me. I keep trying and trying, searching logic of things, but it has so many variables that it is frustrating. Look here, I try to get the buttons and the reading inside my thermostat, but man, it is so hard, i do not understand the relationships between all the .mh .div .col .whatever ... haha



So in eed to get the + and the - to move in the right direction, and i need to put the " ingestelde temperatuur" text in the right direction ..... It does have the led font type of the setpoint in the middle, but now the rest ....

And i am used to scada packets like WinCC, Proface or Codesys, where i can draw, click, copy and paste, haha

[Lokonli]

This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.

Screen Shot 2018-10-10 at 12.39.27.png

I cannot recreate your layout, did you tried the last change, and undo the first ?
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++

Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.

For the text position, did you try:
viewtopic.php?f=67&t=25200

If that's not a solution, please post your custom.css (I suppose you modified it), and I can have a look.

[rgroothuis]

Thanks for the suggestion, that seems to be working. Great.

[Thuis]

Hey, look I finally have the buttons and the set-point positioned on the thermostat image. The only thing is, I am trying to figure out, how i can group all the elements together. Try searching and reading. Is there some one here that could tell me how to do that? So that the buttons and the set-point data and the background image and the block become one? Must be possible, right? This is of course, when changing the display browser it comes all messed up, because they are not grouped...

[gielie]

Hey, look I finally have the buttons and the set-point positioned on the thermostat image. The only thing is, I am trying to figure out, how i can group all the elements together. Try searching and reading. Is there some one here that could tell me how to do that? So that the buttons and the set-point data and the background image and the block become one? Must be possible, right? This is of course, when changing the display browser it comes all messed up, because they are not grouped...

Looks great, you mind sharing your config.js, custom.css and custom.js?

[Thuis]

config.js

Code: Select all

/*	Configuratie	*/
var config = {}
	config['language'] = 'nl_NL';
	config['domoticz_ip'] = 'http://ip.ip:port';
	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'] = 'key';
	config['owm_city'] = 'somewhere';
	config['owm_name'] = '';
	config['owm_country'] = 'nl';
	config['static_weathericons'] = 1;
/*Vuilnis Module	*/
	config['garbage_company'] = 'curry';
	config['garbage_icalurl'] = 0;
	config['garbage_zipcode'] = '';
	config['garbage_street'] = '';
	config['garbage_housenumber'] = '';
	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=Somewhere&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://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 aanamken	*/
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://ip:poort/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password'}
	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.eenofandereschoolsite.nl/'}
	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/2018-2019?output=html'}
	buttons.energie		= {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
	buttons.home		= {key: 'Homepag'	, width:12,	image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
	buttons.bedien		= {key: 'Bedinepag'	, width:12,	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/Somewhere?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'}*/
	buttons.honeywell	= {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' }

/*
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 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 Totaal';
	blocks['96_2']['switch'] = true;
/*Kosten Energie*/
	/*Elektra vandaag*/
	blocks['134'] = {}
	blocks['134']['width'] = 4;
	blocks['134']['title'] = 'Elektra Kosten Vandaag';
	blocks['134']['switch'] = true;	
	/*Gas vandaag */
	blocks['135'] = {}
	blocks['135']['width'] = 4;
	blocks['135']['title'] = 'Gas Kosten Vandaag';
	blocks['135']['switch'] = true;	
	/*Elektra totaal*/
	blocks['136'] = {}
	blocks['136']['width'] = 4;
	blocks['136']['title'] = 'Elektra Kosten Totaal';
	blocks['136']['switch'] = true;	
	/*Gas totaal */
	blocks['137'] = {}
	blocks['137']['width'] = 4;
	blocks['137']['title'] = 'Gas Kosten Totaal';
	blocks['137']['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;

/* Kamer Thermostaat	*/
	/*Huiskamer Temperatuur		*/
	blocks[128] = {}
	blocks[128]['title'] = 'Huiskamer Temperatuur';
/*	blocks[128]['image'] = '/icons/thermostemp.png'*/
	blocks[128]['width'] = 12;
	/*Buiten Tempratuur Via Thermostaat */
	blocks[129] = {}
	blocks[129]['title'] = 'Temperatuur Buiten Huis';
/*	blocks[129]['image'] = '/icons/thermobuiten.png'*/
	blocks[129]['width'] = 12;
	/*CV aan of uit */
	blocks[130] = {}
	blocks[130]['width'] = 12;
	blocks[130]['title'] = 'Programma Kachel';
/*	blocks[130]['image'] = '/icons/windchill.png'*/
	/*Ingestelde Huiskamer Temperatuur*/	
	blocks[131] = {}
	blocks[131]['title'] = 'Ingestelde Temperatuur';
/*	blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/
	blocks[131]['width'] = 12;

*/
	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_2']['image'] = 'icons/calendar.png';

	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' /*Laatste wijziging, waarom werkt dit niet ?*/
	blocks['blocktitle_4']['width'] = 12 ;

	blocks['blocktitle_5'] = {}
	blocks['blocktitle_5']['type'] = 'blocktitle';
	blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, 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'] = 3;
	columns[5]['blocks'] = ['blocktitle_2',131,130,128,129]

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

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

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

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

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

/*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,8]

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

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/

@font-face{
 font-family:'digital-clock-font';
 src: url('../img/font/digital-7.ttf');
}

/* Title of tile */
	.title {font-size:15px;}	

/* News block: Hide icon and change margins of text to fill block */
		#rss-styled_news {
			margin-right: -20px;
			margin-left: -20px;}
	.fas.fa-newspaper-o {opacity: 50;}
/* Blocktitles?*/
		div.mh.transbg.block_graph_94 {Height:150px;}
		div.mh.titlegroups {
			height: 38px !important;	/* default height=75px */
			padding-top: 0px;			/* center text for new height */
			color: white;
			background-color: rgba(0,0,0,0.02);}
/* Modifications to the fa en wi font family*/
	.sunrise { font-size: auto; font-size: 1vw; color: yellow;}
	.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
	.sunset { font-size: 25px; font-size: 1vw; color: orange;}
	.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;} 
	.wi-humidity:before {color: gray;}
	.wi-barometer:before {color: aqua;}
	.wi-wind-direction:before {color: lightcyan;}
	.fas.fa-mobile.on.icon {font-size: 30px !; color: green;}
	.fas.fa-mobile.off.icon {font-size: 30px !important;}
/*Alle iconen verkleuren*/
	.fas.fa-lightbulb-o.on {color: yellow}
	.fas.fa-fire {color: orange}
	.fas.fa-bolt {color: yellow}
	.fas.fa-plug {color:yellowgreen}
	.fas.fa-thermometer-half {color:pink}
	.fas.fa-newspaper-o {color:springgreen}
	.fas.fa-calendar {color:purple}
	.fas.fa-certificate {color:orange}
	.fas.fa-sun-o {color:orange}
	.fas.fa-tint {color: MediumSlateBlue }
	.fas.fa-eye {color: LightGoldenRodYellow}
	.fas.fa-radio {color:red}
	.fas.fa-play {color:aqua; font-weight:bold;}
	.fas.staticon {color:red}
	.fas.fa-chevron-left {color:orange; font-weight:bold;}
	.fas.fa-chevron-right {color:orange; font-weight:bold;}	
	
 .col-xs-6 transbg imgblock {

    margin-left: auto;
    margin-right: auto }
	
	.wi.wi-day-sunny:before { color: #FFFF00; font-size: 40px;}
	.wi.wi-night-clear:before { color: #FAFAD2; font-size: 40px; }
	.wi.wi-day-cloudy:before { color: #FFFF00; font-size: 40px;}
	.wi.wi-night-cloudy:before { color: #FAFAD2; font-size: 40px; }
	.wi.wi-cloud:before { color: #F8F8FF; font-size: 40px; }
	.wi.wi-cloudy:before { color: #DCDCDC; font-size: 40px;}
	.wi.wi-showers:before { color: #00FFFF; font-size: 40px; }
	.wi.wi-day-rain:before { color:  #AFEEEE; font-size: 40px; 	}
	.wi.wi-night-rain:before { color: #4169E1; font-size: 40px; }
	.wi.wi-day-thunderstorm:before { color: #FFD700; font-size: 40px;}
	.wi.wi-night-thunderstorm:before { color: #DAA520; font-size: 40px; }
	.wi.wi-snow:before { color: #FFFAFA; font-size: 40px;}
	.wi.wi-day-fog:before { color: #F5F5F5; font-size: 40px; }
	.wi.wi-night-fog:before { color:  	#D3D3D3; font-size: 40px; }
	
div.mh.transbg.block_131.col-xs-12 {
	background-image: url("../img/icons/honeywellthermostaat1.png");
	/*background-clip:content-box;*/
	background-repeat: no-repeat;
/*  background-attachment: fixed;*/
	height:260px;
	background-position: 110px; 
	text-align:center;
  line-height: 60px;
  text-align: center;
}
/*
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 0px;
	border-radius:180px;
	
}
*/
section.wrapper {
  min-width: 400px; /* Minimum width of your wrapper element */
  overflow: hidden;
  display: inline-block;
}
.btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
	display:inline-block;
	color:red;
	position: relative;
  left: -110px;
	top: 95px;
}
.btn-number.min{
	border-bottom:0px;
	padding-bottom:7px;
	color:blue;
  position: relative;
  right: 652%;
	top: 35px;

}
 .stateheating {
	color:black;
	display:inline-block;
	width:100%;
	height:100%;
	vertical-align:0px;
	position: relative;
  left: 0%;
	bottom:70px;
}
.title-input {
	font-family: 'digital-clock-font';
	font-size:28px;
	display:inline-block;
	/*width:100%;
	Height:100%;*/
	color:black;
 	position: relative;
  Top: 75px;
}

/*
div.mh.transbg.block_131.col-xs-12 div.col-data{
	text-align:left;
  */

/* OWM Weather	*/	
	
.col-xs-12.big .weatherdegrees, .big .weatherloc {
	display: inline-block;
	margin-top: -2px;
	font-size: 18px;
	font-weight: bold;
	margin-right: 4px;
	float: right;
	text-align:right;
	color:orange;}
	.weatherfull > div div.temp {
    font-size: 28px;
    font-weight: 400;
    color: orange;
	margin-top: 10px;
	margin-left:100px;
	text-align: left;
	padding: 0px 4px;}
	.weatherfull > div div.day {
    margin-top: 0px;
    font-weight: 300;
    font-size: 20px;
	color:aqua;}
	.block_currentweather_owm
	{margin-left: 0px;}
	.transbg.col-xs-2.temp .av-temp {text-align:left;}
	.transbg.col-xs-2.temp .rain {text-align:right;}	
	.col-xs-4 transbg hover text-center btnPrev {color:red;}	
/* Fontsize buttons Blinds */
	.fa,.wi {font-size:auto !important;}
/* Block Title */

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
			margin: 0px;
			margin-left: 15px;
			font-weight: 100;
			font-size: 140%;
/*			color: white;*/
			text-shadow: 2px 2px black;
			text-align: center;}
	.smalltitle h3 {font-size: 15px !important;margin-left: 6px;color: pink; font-weight:bold;}

/* Buienradar */
	.block_117 {height: 100% !important;}
	.fas.fa-umbrella {font-size: 32px !important;font-weight: bold !important;}
	.fas.fa-umbrella.on {color:#3399ff !important;}
/* Standby screen */
	.standby .clock {font-size:60px !important;}
	.standby .weekday,.standby .date {font-size:40px !important;}
	.standby .fas.fa-thermometer-half {color:pink}
	.standby .swiper-slide {background:rgba(0,0,0,0.0)}
	/* Swiper bullet */
	.swiper-pagination-bullet {width: 30px;height: 30px;background: white;}
/* Up-Down arrow Blinds */
	.input-groupBtn li {
		position:sticky;
		z-index: 9999;
		right: 1px;
		border-radius: 0px; /* Round corners */}
/*Default buttons*/
	.btn.btn-default {
		background-color: black;
		color: white;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		border: none;}
	.btn.btn-default:hover {
		background-color: black; /* Green */
		color: lime;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
		border: none;}
/* 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(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover 	{padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}

/*Thermostaat Image*/
.transbg.col-xs-12.imgblock{
text-align:center;}

creative.css line 459 tot 524:

Code: Select all

/*
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 20px;
}
.input-groupBtn.input-chevron .btn-number {
	padding: 5px 10px 5px 10px
	
}
.input-groupBtn .btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
}
.input-groupBtn li {
	position: -webkit-sticky;
  	position: sticky;
	z-index:9997;
	right:1px;
}
.input-groupBtn li.down {
	top:35px;
}

.input-groupBtn .stop {
	z-index:9997;
	-ms-transform: rotate(45deg); /* IE 9 */
/*    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
/*      
	transform: rotate(45deg);
    top: 0;
    width: 71px;
    height: 33px;
    position: absolute;
    right: 0;
    margin-right: -27px;
    margin-top: 0px;

}

.input-groupBtn.input-chevron {
	right:27px;
}
.input-groupBtn.input-chevron.hidestop {
	right:-5px;
}
*/
.input-groupBtn .btn-number:active,.btn-number:hover {
	color: black; 
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
/*
.input-groupBtn .fa-thermostat {
	vertical-align: top;
	font-size: 20px !important;
}

.title-input {
	font-size: 20px !important; 
	margin-top:-2px;
	display: inline-block;
}
*/

graphs.js bar begins at line 222:

Code: Select all

function getGraphs(device, popup) {
    var sensor = 'counter';
    var txtUnit = '?';
    var currentValue = device['Data'];
    var decimals = 2;

    switch (device['Type']) {
        case 'Rain':
            sensor = 'rain';
            txtUnit = 'mm';
            decimals = 1;
            break;
        case 'Lux':
            sensor = 'counter';
            txtUnit = 'Lux';
            decimals = 0;
            break;
        case 'Wind':
            sensor = 'wind';
            if (config['use_beaufort']) {
                currentValue = Beaufort(device['Speed']);
                decimals = 0;
                txtUnit = 'Bft';
            } else {
                currentValue = device['Speed'];
                decimals = 1;
                txtUnit = 'm/s';
            }
            break;
        case 'Temp':
        case 'Temp + Humidity':
        case 'Temp + Humidity + Baro':
            sensor = 'temp';
            txtUnit = '°C';
            currentValue = device['Temp'];
            decimals = 1;
            break;
        case 'Humidity':
            sensor = 'temp';
            txtUnit = '%';
            decimals = 1;
            break;
    }

    switch (device['SubType']) {
        case 'Percentage':
            sensor = 'Percentage';
            txtUnit = '%';
            decimals = 1;
            break;
        case 'Custom Sensor':
            sensor = 'Percentage';
            txtUnit = device['SensorUnit'];
            decimals = 1;
            break;
        case 'Gas':
            txtUnit = 'm3';
            break;
        case 'Energy':
        case 'kWh':
        case 'YouLess counter':
            txtUnit = 'kWh';
            currentValue = device['CounterToday'];
            break;
        case 'Visibility':
            txtUnit = 'km';
            break;
        case 'Radiation':
        case 'Solar Radiation':
            txtUnit = 'Watt/m2';
            decimals = 0;
            break;
        case 'Pressure':
            txtUnit = 'Bar';
            break;
        case 'Soil Moisture':
            txtUnit = 'cb';
            break;
        case 'Leaf Wetness':
            txtUnit = 'Range';
            break;
        case 'Voltage':
        case 'A/D':
            txtUnit = 'mV';
            break;
        case 'VoltageGeneral':
            txtUnit = 'V';
            break;
        case 'DistanceGeneral':
        case 'Distance':
            txtUnit = 'cm';
            break;
        case 'Sound Level':
            txtUnit = 'dB';
            break;
        case 'CurrentGeneral':
        case 'Current':
            txtUnit = 'A';
            break;
        case 'Weight':
            txtUnit = 'kg';
            break;
        case 'Waterflow':
            sensor = 'Percentage';
            txtUnit = 'l/min';
            break;
        case 'Counter Incremental':
            txtUnit = device['CounterToday'].split(' ')[1];
            currentValue = device['CounterToday'].split(' ')[0];
            break;
    }

    currentValue = number_format(currentValue, decimals);
    showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup);
}

function getGraphByIDX(idx) {
    getGraphs(alldevices[idx], true);
}

function getButtonGraphs(device) {
    if ($('#opengraph' + device['idx']).length === 0) {
        var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
        html += '<div class="modal-dialog">';
        html += '<div class="modal-content">';
        html += '<div class="modal-header">';
        html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
        html += '</div>';
        html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading;
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        $('body').append(html);

        $('#opengraph' + device['idx']).on('shown.bs.modal', function () {
            getGraphByIDX($(this).data('idx'));
        });
    }
}

function showGraph(idx, title, label, range, current, forced, sensor, popup) {
    if (typeof(popup) === 'undefined') forced = false;
    if (typeof(forced) === 'undefined') forced = false;

    if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) {
        forced = true;
    }

    if ($('.graphcurrent' + idx).length > 0) {
        $('.graphcurrent' + idx).html(current + ' ' + label);
    }

    if (forced || popup) {
        _GRAPHS_LOADED[idx] = time();
        //Check settings for standard graph
        if (range === 'initial') {
            switch (settings['standard_graph']) {
                case 'hours':
                    range = 'last';
                    break;
                case 'day':
                    range = 'day';
                    break;
                case 'month':
                    range = 'month';
                    break;
            }
        }
        realrange = range;
        if (range === 'last') realrange = 'day';

        $.ajax({
            url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?',
            type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp',
            success: function (data) {
                if (data.status === 'ERR') {
                    alert('Could not load graph!');
                    return;
                }
                var buttons = createButtons(idx, title, label, range, current, sensor, popup);

                title = '<h4>' + title;
                if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>';
                title += '</h4>';

                var html = '<div class="graph' + (popup ? 'popup' : '')  + '" id="graph' + idx + '">';
                html += '<div class="transbg col-xs-12">';
                html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>';
                html += '</div>';
                html += '</div>';

                if ($('#graph' + idx + '.graph').length > 0) {
                    $('#graph' + idx + '.graph').replaceWith(html);
                }
                $('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html);

                var graphProperties = getGraphProperties(data.result[0], label);
                graphProperties.dateFormat = settings['shorttime'];
                if (range === 'month' || range === 'year') {
                    graphProperties.dateFormat = settings['shortdate'];
                }

                if (range === 'last') {
                    var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm');
                    data.result = data.result.filter(function (element) {
                        return element.d > fourHoursAgo;
                    });
                }
                graphProperties.data = data.result.filter(function (element) {
                    return element.hasOwnProperty(graphProperties.keys[0]);
                });

                if ($('#graphoutput' + idx).length > 0) {
                    makeMorrisGraph(idx, graphProperties);
                }
            }
        });
    }
}

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;
        }
    });
}

function createButtons(idx, title, label, range, current, sensor, popup) {
    var buttons = '<div class="btn-group" role="group" aria-label="Basic example">';
    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'last') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> ';

    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'day') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> ';

    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'month') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>';
    buttons += '</div>';

    return buttons;
}

function getGraphProperties(result, label) {
    var graphProperties = {};
    if (result.hasOwnProperty('uvi')) {
        graphProperties = {
            keys: ['uvi'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('lux')) {
        graphProperties = {
            keys: ['lux'],
            labels: ['Lux'],
        };
    } else if (result.hasOwnProperty('lux_avg')) {
        graphProperties = {
            keys: ['lux_avg', 'lux_min', 'lux_max'],
            labels: ['Lux average', 'Minimum', 'Maximum'],
        };
    } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
        graphProperties = {
            keys: ['gu', 'sp'],
            labels: ['m/s', 'm/s'],
        };
    } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['ba', 'hu', 'te'],
            labels: ['hPa', '%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['hu', 'te'],
            labels: ['%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['te'],
            labels: [_TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu')) {
        graphProperties = {
            keys: ['hu'],
            labels: ['%'],
        };
    } else if (result.hasOwnProperty('mm')) {
        graphProperties = {
            keys: ['mm'],
            labels: ['mm'],
        };
    } else if (result.hasOwnProperty('v_max')) {
        graphProperties = {
            keys: ['v_max'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('v2')) {
        graphProperties = {
            keys: ['v2', 'v'],
            labels: [label, label],
        };
        if (label === 'kWh' && realrange === 'day') {
            graphProperties.labels = ['Watt', 'Watt'];
        }
    } else if (result.hasOwnProperty('v')) {
        if (label === 'kWh' && realrange === 'day') {
            label = 'Wh';
        }
        if (data.method === 1) {
            graphProperties = {
                keys: ['eu'],
                labels: [label],
            };
        } else {
            graphProperties = {
                keys: ['v'],
                labels: [label],
            };
        }
    } else if (result.hasOwnProperty('eu')) {
        graphProperties = {
            keys: ['eu'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u')) {
        graphProperties = {
            keys: ['u'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u_max')) {
        graphProperties = {
            keys: ['u_max', 'u_min'],
            labels: ['?', '?'],
        };
    }
    return graphProperties;
}

settings.js line for color of bars or line 569:

Code: Select all

if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];

Succes

[MikeyMan]

Been scrolling through these pages hoping to find an actual How-to for Dashticz.
It's got a huge amount of potential, however, having no programming experience whatsoever, it is quite difficult to get a start.

All i've got now is a working dash, with all my domoticz info on it.
But when i try and steal anyhting from the other configs, that info disappears…
I'm afraid i'm gonna have to spend a lot of time on this

[EastXIII]

Been scrolling through these pages hoping to find an actual How-to for Dashticz.
It's got a huge amount of potential, however, having no programming experience whatsoever, it is quite difficult to get a start.

All i've got now is a working dash, with all my domoticz info on it.
But when i try and steal anyhting from the other configs, that info disappears…
I'm afraid i'm gonna have to spend a lot of time on this

I had the same. I went wrong with the IDX numbers. When you borrow someone’s config you should replace the IDX numbers with your own.
IDX number is the unique number for a device. It can be found in the ‘Devices’ tab in Domoticz.

[MikeyMan]

config.js

Code: Select all

/*	Configuratie	*/
var config = {}
	config['language'] = 'nl_NL';
	config['domoticz_ip'] = 'http://ip.ip:port';
	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'] = 'key';
	config['owm_city'] = 'somewhere';
	config['owm_name'] = '';
	config['owm_country'] = 'nl';
	config['static_weathericons'] = 1;
/*Vuilnis Module	*/
	config['garbage_company'] = 'curry';
	config['garbage_icalurl'] = 0;
	config['garbage_zipcode'] = '';
	config['garbage_street'] = '';
	config['garbage_housenumber'] = '';
	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=Somewhere&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://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 aanamken	*/
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://ip:poort/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password'}
	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.eenofandereschoolsite.nl/'}
	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/2018-2019?output=html'}
	buttons.energie		= {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
	buttons.home		= {key: 'Homepag'	, width:12,	image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
	buttons.bedien		= {key: 'Bedinepag'	, width:12,	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/Somewhere?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'}*/
	buttons.honeywell	= {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' }

/*
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 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 Totaal';
	blocks['96_2']['switch'] = true;
/*Kosten Energie*/
	/*Elektra vandaag*/
	blocks['134'] = {}
	blocks['134']['width'] = 4;
	blocks['134']['title'] = 'Elektra Kosten Vandaag';
	blocks['134']['switch'] = true;	
	/*Gas vandaag */
	blocks['135'] = {}
	blocks['135']['width'] = 4;
	blocks['135']['title'] = 'Gas Kosten Vandaag';
	blocks['135']['switch'] = true;	
	/*Elektra totaal*/
	blocks['136'] = {}
	blocks['136']['width'] = 4;
	blocks['136']['title'] = 'Elektra Kosten Totaal';
	blocks['136']['switch'] = true;	
	/*Gas totaal */
	blocks['137'] = {}
	blocks['137']['width'] = 4;
	blocks['137']['title'] = 'Gas Kosten Totaal';
	blocks['137']['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;

/* Kamer Thermostaat	*/
	/*Huiskamer Temperatuur		*/
	blocks[128] = {}
	blocks[128]['title'] = 'Huiskamer Temperatuur';
/*	blocks[128]['image'] = '/icons/thermostemp.png'*/
	blocks[128]['width'] = 12;
	/*Buiten Tempratuur Via Thermostaat */
	blocks[129] = {}
	blocks[129]['title'] = 'Temperatuur Buiten Huis';
/*	blocks[129]['image'] = '/icons/thermobuiten.png'*/
	blocks[129]['width'] = 12;
	/*CV aan of uit */
	blocks[130] = {}
	blocks[130]['width'] = 12;
	blocks[130]['title'] = 'Programma Kachel';
/*	blocks[130]['image'] = '/icons/windchill.png'*/
	/*Ingestelde Huiskamer Temperatuur*/	
	blocks[131] = {}
	blocks[131]['title'] = 'Ingestelde Temperatuur';
/*	blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/
	blocks[131]['width'] = 12;

*/
	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_2']['image'] = 'icons/calendar.png';

	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' /*Laatste wijziging, waarom werkt dit niet ?*/
	blocks['blocktitle_4']['width'] = 12 ;

	blocks['blocktitle_5'] = {}
	blocks['blocktitle_5']['type'] = 'blocktitle';
	blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, 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'] = 3;
	columns[5]['blocks'] = ['blocktitle_2',131,130,128,129]

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

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

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

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

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

/*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,8]

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

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/

@font-face{
 font-family:'digital-clock-font';
 src: url('../img/font/digital-7.ttf');
}

/* Title of tile */
	.title {font-size:15px;}	

/* News block: Hide icon and change margins of text to fill block */
		#rss-styled_news {
			margin-right: -20px;
			margin-left: -20px;}
	.fas.fa-newspaper-o {opacity: 50;}
/* Blocktitles?*/
		div.mh.transbg.block_graph_94 {Height:150px;}
		div.mh.titlegroups {
			height: 38px !important;	/* default height=75px */
			padding-top: 0px;			/* center text for new height */
			color: white;
			background-color: rgba(0,0,0,0.02);}
/* Modifications to the fa en wi font family*/
	.sunrise { font-size: auto; font-size: 1vw; color: yellow;}
	.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
	.sunset { font-size: 25px; font-size: 1vw; color: orange;}
	.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;} 
	.wi-humidity:before {color: gray;}
	.wi-barometer:before {color: aqua;}
	.wi-wind-direction:before {color: lightcyan;}
	.fas.fa-mobile.on.icon {font-size: 30px !; color: green;}
	.fas.fa-mobile.off.icon {font-size: 30px !important;}
/*Alle iconen verkleuren*/
	.fas.fa-lightbulb-o.on {color: yellow}
	.fas.fa-fire {color: orange}
	.fas.fa-bolt {color: yellow}
	.fas.fa-plug {color:yellowgreen}
	.fas.fa-thermometer-half {color:pink}
	.fas.fa-newspaper-o {color:springgreen}
	.fas.fa-calendar {color:purple}
	.fas.fa-certificate {color:orange}
	.fas.fa-sun-o {color:orange}
	.fas.fa-tint {color: MediumSlateBlue }
	.fas.fa-eye {color: LightGoldenRodYellow}
	.fas.fa-radio {color:red}
	.fas.fa-play {color:aqua; font-weight:bold;}
	.fas.staticon {color:red}
	.fas.fa-chevron-left {color:orange; font-weight:bold;}
	.fas.fa-chevron-right {color:orange; font-weight:bold;}	
	
 .col-xs-6 transbg imgblock {

    margin-left: auto;
    margin-right: auto }
	
	.wi.wi-day-sunny:before { color: #FFFF00; font-size: 40px;}
	.wi.wi-night-clear:before { color: #FAFAD2; font-size: 40px; }
	.wi.wi-day-cloudy:before { color: #FFFF00; font-size: 40px;}
	.wi.wi-night-cloudy:before { color: #FAFAD2; font-size: 40px; }
	.wi.wi-cloud:before { color: #F8F8FF; font-size: 40px; }
	.wi.wi-cloudy:before { color: #DCDCDC; font-size: 40px;}
	.wi.wi-showers:before { color: #00FFFF; font-size: 40px; }
	.wi.wi-day-rain:before { color:  #AFEEEE; font-size: 40px; 	}
	.wi.wi-night-rain:before { color: #4169E1; font-size: 40px; }
	.wi.wi-day-thunderstorm:before { color: #FFD700; font-size: 40px;}
	.wi.wi-night-thunderstorm:before { color: #DAA520; font-size: 40px; }
	.wi.wi-snow:before { color: #FFFAFA; font-size: 40px;}
	.wi.wi-day-fog:before { color: #F5F5F5; font-size: 40px; }
	.wi.wi-night-fog:before { color:  	#D3D3D3; font-size: 40px; }
	
div.mh.transbg.block_131.col-xs-12 {
	background-image: url("../img/icons/honeywellthermostaat1.png");
	/*background-clip:content-box;*/
	background-repeat: no-repeat;
/*  background-attachment: fixed;*/
	height:260px;
	background-position: 110px; 
	text-align:center;
  line-height: 60px;
  text-align: center;
}
/*
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 0px;
	border-radius:180px;
	
}
*/
section.wrapper {
  min-width: 400px; /* Minimum width of your wrapper element */
  overflow: hidden;
  display: inline-block;
}
.btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
	display:inline-block;
	color:red;
	position: relative;
  left: -110px;
	top: 95px;
}
.btn-number.min{
	border-bottom:0px;
	padding-bottom:7px;
	color:blue;
  position: relative;
  right: 652%;
	top: 35px;

}
 .stateheating {
	color:black;
	display:inline-block;
	width:100%;
	height:100%;
	vertical-align:0px;
	position: relative;
  left: 0%;
	bottom:70px;
}
.title-input {
	font-family: 'digital-clock-font';
	font-size:28px;
	display:inline-block;
	/*width:100%;
	Height:100%;*/
	color:black;
 	position: relative;
  Top: 75px;
}

/*
div.mh.transbg.block_131.col-xs-12 div.col-data{
	text-align:left;
  */

/* OWM Weather	*/	
	
.col-xs-12.big .weatherdegrees, .big .weatherloc {
	display: inline-block;
	margin-top: -2px;
	font-size: 18px;
	font-weight: bold;
	margin-right: 4px;
	float: right;
	text-align:right;
	color:orange;}
	.weatherfull > div div.temp {
    font-size: 28px;
    font-weight: 400;
    color: orange;
	margin-top: 10px;
	margin-left:100px;
	text-align: left;
	padding: 0px 4px;}
	.weatherfull > div div.day {
    margin-top: 0px;
    font-weight: 300;
    font-size: 20px;
	color:aqua;}
	.block_currentweather_owm
	{margin-left: 0px;}
	.transbg.col-xs-2.temp .av-temp {text-align:left;}
	.transbg.col-xs-2.temp .rain {text-align:right;}	
	.col-xs-4 transbg hover text-center btnPrev {color:red;}	
/* Fontsize buttons Blinds */
	.fa,.wi {font-size:auto !important;}
/* Block Title */

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
			margin: 0px;
			margin-left: 15px;
			font-weight: 100;
			font-size: 140%;
/*			color: white;*/
			text-shadow: 2px 2px black;
			text-align: center;}
	.smalltitle h3 {font-size: 15px !important;margin-left: 6px;color: pink; font-weight:bold;}

/* Buienradar */
	.block_117 {height: 100% !important;}
	.fas.fa-umbrella {font-size: 32px !important;font-weight: bold !important;}
	.fas.fa-umbrella.on {color:#3399ff !important;}
/* Standby screen */
	.standby .clock {font-size:60px !important;}
	.standby .weekday,.standby .date {font-size:40px !important;}
	.standby .fas.fa-thermometer-half {color:pink}
	.standby .swiper-slide {background:rgba(0,0,0,0.0)}
	/* Swiper bullet */
	.swiper-pagination-bullet {width: 30px;height: 30px;background: white;}
/* Up-Down arrow Blinds */
	.input-groupBtn li {
		position:sticky;
		z-index: 9999;
		right: 1px;
		border-radius: 0px; /* Round corners */}
/*Default buttons*/
	.btn.btn-default {
		background-color: black;
		color: white;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		border: none;}
	.btn.btn-default:hover {
		background-color: black; /* Green */
		color: lime;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
		border: none;}
/* 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(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover 	{padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}

/*Thermostaat Image*/
.transbg.col-xs-12.imgblock{
text-align:center;}

creative.css line 459 tot 524:

Code: Select all

/*
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 20px;
}
.input-groupBtn.input-chevron .btn-number {
	padding: 5px 10px 5px 10px
	
}
.input-groupBtn .btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
}
.input-groupBtn li {
	position: -webkit-sticky;
  	position: sticky;
	z-index:9997;
	right:1px;
}
.input-groupBtn li.down {
	top:35px;
}

.input-groupBtn .stop {
	z-index:9997;
	-ms-transform: rotate(45deg); /* IE 9 */
/*    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
/*      
	transform: rotate(45deg);
    top: 0;
    width: 71px;
    height: 33px;
    position: absolute;
    right: 0;
    margin-right: -27px;
    margin-top: 0px;

}

.input-groupBtn.input-chevron {
	right:27px;
}
.input-groupBtn.input-chevron.hidestop {
	right:-5px;
}
*/
.input-groupBtn .btn-number:active,.btn-number:hover {
	color: black; 
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
/*
.input-groupBtn .fa-thermostat {
	vertical-align: top;
	font-size: 20px !important;
}

.title-input {
	font-size: 20px !important; 
	margin-top:-2px;
	display: inline-block;
}
*/

graphs.js bar begins at line 222:

Code: Select all

function getGraphs(device, popup) {
    var sensor = 'counter';
    var txtUnit = '?';
    var currentValue = device['Data'];
    var decimals = 2;

    switch (device['Type']) {
        case 'Rain':
            sensor = 'rain';
            txtUnit = 'mm';
            decimals = 1;
            break;
        case 'Lux':
            sensor = 'counter';
            txtUnit = 'Lux';
            decimals = 0;
            break;
        case 'Wind':
            sensor = 'wind';
            if (config['use_beaufort']) {
                currentValue = Beaufort(device['Speed']);
                decimals = 0;
                txtUnit = 'Bft';
            } else {
                currentValue = device['Speed'];
                decimals = 1;
                txtUnit = 'm/s';
            }
            break;
        case 'Temp':
        case 'Temp + Humidity':
        case 'Temp + Humidity + Baro':
            sensor = 'temp';
            txtUnit = '°C';
            currentValue = device['Temp'];
            decimals = 1;
            break;
        case 'Humidity':
            sensor = 'temp';
            txtUnit = '%';
            decimals = 1;
            break;
    }

    switch (device['SubType']) {
        case 'Percentage':
            sensor = 'Percentage';
            txtUnit = '%';
            decimals = 1;
            break;
        case 'Custom Sensor':
            sensor = 'Percentage';
            txtUnit = device['SensorUnit'];
            decimals = 1;
            break;
        case 'Gas':
            txtUnit = 'm3';
            break;
        case 'Energy':
        case 'kWh':
        case 'YouLess counter':
            txtUnit = 'kWh';
            currentValue = device['CounterToday'];
            break;
        case 'Visibility':
            txtUnit = 'km';
            break;
        case 'Radiation':
        case 'Solar Radiation':
            txtUnit = 'Watt/m2';
            decimals = 0;
            break;
        case 'Pressure':
            txtUnit = 'Bar';
            break;
        case 'Soil Moisture':
            txtUnit = 'cb';
            break;
        case 'Leaf Wetness':
            txtUnit = 'Range';
            break;
        case 'Voltage':
        case 'A/D':
            txtUnit = 'mV';
            break;
        case 'VoltageGeneral':
            txtUnit = 'V';
            break;
        case 'DistanceGeneral':
        case 'Distance':
            txtUnit = 'cm';
            break;
        case 'Sound Level':
            txtUnit = 'dB';
            break;
        case 'CurrentGeneral':
        case 'Current':
            txtUnit = 'A';
            break;
        case 'Weight':
            txtUnit = 'kg';
            break;
        case 'Waterflow':
            sensor = 'Percentage';
            txtUnit = 'l/min';
            break;
        case 'Counter Incremental':
            txtUnit = device['CounterToday'].split(' ')[1];
            currentValue = device['CounterToday'].split(' ')[0];
            break;
    }

    currentValue = number_format(currentValue, decimals);
    showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup);
}

function getGraphByIDX(idx) {
    getGraphs(alldevices[idx], true);
}

function getButtonGraphs(device) {
    if ($('#opengraph' + device['idx']).length === 0) {
        var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
        html += '<div class="modal-dialog">';
        html += '<div class="modal-content">';
        html += '<div class="modal-header">';
        html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
        html += '</div>';
        html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading;
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        $('body').append(html);

        $('#opengraph' + device['idx']).on('shown.bs.modal', function () {
            getGraphByIDX($(this).data('idx'));
        });
    }
}

function showGraph(idx, title, label, range, current, forced, sensor, popup) {
    if (typeof(popup) === 'undefined') forced = false;
    if (typeof(forced) === 'undefined') forced = false;

    if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) {
        forced = true;
    }

    if ($('.graphcurrent' + idx).length > 0) {
        $('.graphcurrent' + idx).html(current + ' ' + label);
    }

    if (forced || popup) {
        _GRAPHS_LOADED[idx] = time();
        //Check settings for standard graph
        if (range === 'initial') {
            switch (settings['standard_graph']) {
                case 'hours':
                    range = 'last';
                    break;
                case 'day':
                    range = 'day';
                    break;
                case 'month':
                    range = 'month';
                    break;
            }
        }
        realrange = range;
        if (range === 'last') realrange = 'day';

        $.ajax({
            url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?',
            type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp',
            success: function (data) {
                if (data.status === 'ERR') {
                    alert('Could not load graph!');
                    return;
                }
                var buttons = createButtons(idx, title, label, range, current, sensor, popup);

                title = '<h4>' + title;
                if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>';
                title += '</h4>';

                var html = '<div class="graph' + (popup ? 'popup' : '')  + '" id="graph' + idx + '">';
                html += '<div class="transbg col-xs-12">';
                html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>';
                html += '</div>';
                html += '</div>';

                if ($('#graph' + idx + '.graph').length > 0) {
                    $('#graph' + idx + '.graph').replaceWith(html);
                }
                $('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html);

                var graphProperties = getGraphProperties(data.result[0], label);
                graphProperties.dateFormat = settings['shorttime'];
                if (range === 'month' || range === 'year') {
                    graphProperties.dateFormat = settings['shortdate'];
                }

                if (range === 'last') {
                    var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm');
                    data.result = data.result.filter(function (element) {
                        return element.d > fourHoursAgo;
                    });
                }
                graphProperties.data = data.result.filter(function (element) {
                    return element.hasOwnProperty(graphProperties.keys[0]);
                });

                if ($('#graphoutput' + idx).length > 0) {
                    makeMorrisGraph(idx, graphProperties);
                }
            }
        });
    }
}

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;
        }
    });
}

function createButtons(idx, title, label, range, current, sensor, popup) {
    var buttons = '<div class="btn-group" role="group" aria-label="Basic example">';
    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'last') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> ';

    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'day') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> ';

    buttons += '<button type="button" class="btn btn-default ';
    if (range === 'month') buttons += 'active';
    buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>';
    buttons += '</div>';

    return buttons;
}

function getGraphProperties(result, label) {
    var graphProperties = {};
    if (result.hasOwnProperty('uvi')) {
        graphProperties = {
            keys: ['uvi'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('lux')) {
        graphProperties = {
            keys: ['lux'],
            labels: ['Lux'],
        };
    } else if (result.hasOwnProperty('lux_avg')) {
        graphProperties = {
            keys: ['lux_avg', 'lux_min', 'lux_max'],
            labels: ['Lux average', 'Minimum', 'Maximum'],
        };
    } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
        graphProperties = {
            keys: ['gu', 'sp'],
            labels: ['m/s', 'm/s'],
        };
    } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['ba', 'hu', 'te'],
            labels: ['hPa', '%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['hu', 'te'],
            labels: ['%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['te'],
            labels: [_TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu')) {
        graphProperties = {
            keys: ['hu'],
            labels: ['%'],
        };
    } else if (result.hasOwnProperty('mm')) {
        graphProperties = {
            keys: ['mm'],
            labels: ['mm'],
        };
    } else if (result.hasOwnProperty('v_max')) {
        graphProperties = {
            keys: ['v_max'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('v2')) {
        graphProperties = {
            keys: ['v2', 'v'],
            labels: [label, label],
        };
        if (label === 'kWh' && realrange === 'day') {
            graphProperties.labels = ['Watt', 'Watt'];
        }
    } else if (result.hasOwnProperty('v')) {
        if (label === 'kWh' && realrange === 'day') {
            label = 'Wh';
        }
        if (data.method === 1) {
            graphProperties = {
                keys: ['eu'],
                labels: [label],
            };
        } else {
            graphProperties = {
                keys: ['v'],
                labels: [label],
            };
        }
    } else if (result.hasOwnProperty('eu')) {
        graphProperties = {
            keys: ['eu'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u')) {
        graphProperties = {
            keys: ['u'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u_max')) {
        graphProperties = {
            keys: ['u_max', 'u_min'],
            labels: ['?', '?'],
        };
    }
    return graphProperties;
}

settings.js line for color of bars or line 569:

Code: Select all

if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];

Succes

Do i understand correctly that you managed to set your honeywell with Dashticz?
My Evohome is working fine with Domoticz (although set only works on the temperature page, not on the dash), but in Dashticz i only get the current temperature...

[Thuis]

Yes i can set my honeywell lyric t6 with dashticz, yes you understand well.

[MikeyMan]

Yes i can set my honeywell lyric t6 with dashticz, yes you understand well.

I have managed to setup my evohome in Domoticz. I can see the "Woonkamer" temperature on the temperature pages. And i see the Evohome Touch on the switches page. However, i cannot set a specific temperature. I would guess that there would be some kind of slider on the Evohome Touch.

I see that the switch type is set to on/off, but is that correct? There is also no further action specified.

[Thuis]

I added the hardware as honeywell thermostat, then i got 4 devices. 128Kamertemperatuur, 129Buitentemperatuur, 130CV volgt programma(switch) and 131Ingestelde temperatuur(setpoint). With the setpoint idx in dashticz i can change the ingestelde temperatuur. When i do this, the switch turns off, so i believe that this means, the thermostat is now not following the thermostat program. I am still figuring out what the switch is for. My thought is, if I turn the switch to on, the thermostat will follow its program again,but i have to test this, and i need time for that haha. Did you tried hardware honeywell thermostat?