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

[Thuis]

Maybe I did not understand you, but in dashtics there is a thermostat.js in the js folder. I use the beta version.
Then with the config.js i think it kust uses the thermostat.jsto fill in and control tje setpoint and temperature.

Obviously send from my Aphone

[HansieNL]

I want a radio icon in front of the radio station text. Can someone tell me how to do that?
Thanks in advance.

[EdwinK]

So, I've bought a tablet for Dashticz. 10" Lenovo. Next work to make everything look a bit bigger on screen.



(and i need the graphs working again, but that is something for another day and time)

[gielie]

So, I've bought a tablet for Dashticz. 10" Lenovo. Next work to make everything look a bit bigger on screen.



(and i need the graphs working again, but that is something for another day and time)

looks very nice, mind to share some of the settings?

[EdwinK]

Of course (btw. this is based on what 'thuis' made a few page before). It's still a work in progress
CONFIG.js

Spoiler: show

Code: Select all

//	Configuratie
var config = {}
	config['language'] = 'nl_NL';
	config['domoticz_ip'] = 'http://192.168.0.11:8080';
	config['app_title'] = 'HOME Control';
	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'; 
	config['standard_graph'] = 'hour';
	config['timeformat'] = 'DD-MM-YY HH:mm';
	config['calendarformat'] = 'dd DD.MM HH:mm';
	config['calendarlanguage'] = 'nl_NL';
	config['calendarurl'] = 'calendar.google.com/public/basic.ics'; // still don't know what to put in here
	config['idx_moonpicture'] = 0;
	config['switch_horizon'] = 0;
	config['selector_instead_of_buttons'] = 0;
	config['auto_positioning'] = 0;
	config['use_favorites'] = 0;
	config['last_update'] = 0;
	config['hide_topbar'] = 1;
	config['hide_seconds'] = 0;
	config['hide_seconds_stationclock'] = 0;
	config['use_fahrenheit'] = 0;
	config['use_beaufort'] = 1;
	config['translate_windspeed'] = 0;
	config['static_weathericons'] = 0;
	config['calendar_parse_localy']=true;
	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'] = ';
	config['owm_city'] = 'Rhoon';
	config['owm_name'] = '';
	config['owm_country'] = 'nl';
	config['static_weathericons'] = 0;
//Vuilnis Module
	config['garbage_company'] = '';
	config['garbage_icalurl'] = 0;
	config['garbage_zipcode'] = '3161LH';
	config['garbage_street'] = 'Jonkerhof';
	config['garbage_housenumber'] = '27';
	config['garbage_maxitems'] = '3';
	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'] = false;
	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'];	

var frames = {}

frames.artwork = {width:12, isimage:true, refresh:2000, image: 'http://192.168.0.10:9002/music/current/cover.jpg?player=b8:27:eb:00:62:03'}
frames.weather = {refreshiframe:1800000,height:230,frameurl:"http://forecast.io/embed/#lat=51.860062&lon=4.412646&name=Rhoon&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12}

//Knoppen var aanmaken
var buttons = {}

buttons.ipcam1 		= {key: 'cam1'	, width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}

//buttons.ipcam2 		= {key: 'cam2'	, width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}
	
buttons.energie		= {key: 'EnergiePag', width:12, icon: 'fas fa-plug', title: 'Ga naar Energie' ,slide:2 }

buttons.home		= {key: 'Homepage'	, width:12,	icon: 'fas fa-home', title: 'Ga naar Thuis Scherm' ,slide:1 }

buttons.bedien		= {key: 'Bedienpage'	, width:12,	icon: 'fas fa-user-alt', title: 'TOON®/Schakelaars' ,slide:3 }

//OV 
var publictransport = {}
publictransport.trein1= { show_via: true, station: 'station-kampen', title:'NS Kampen Centraal', show_lastupdate:true, provider: '9292-train', icon: 'train', results: 5 };

publictransport.trein2= { show_via: true, station: 'station-kampen-zuid', title:'NS Kampen Zuid', show_lastupdate:true, provider: '9292-train', icon: 'train', results: 5 };

publictransport.bus= { show_via: true, station: 'station-kampen', title:'Bus', show_lastupdate:true, provider: '9292-bus', icon: 'bus', results: 5 };

//Calendar 
var calendars = {}
calendars.business = { url: 'https://calendar.google.com/calendar/r', icon:'fa-calendar', maxitems: 5, color:'red',icalurl: 'https://calendar.google.com/calendar/ical/' }

calendars.private = { icon: 'fa-calendar', maxitems: 5, color:'green',icon:'fa-calendar', color:'green', icalurl: 'https://calendar.google.com/calendar/ical/' }

calendars.combined = {}
calendars.combined.maxitems = 5 ;
calendars.combined.calendars = [
   { color:'green',	calendar:calendars.business }, 
   { color:'red',	calendar:calendars.private }
]
calendars.combined.url = 'https://calendar.google.com/calendar';

//buttons.moon	= {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}

var blocks = {}

// Bloknamen
	blocks['blocktitle_1'] = {}
	blocks['blocktitle_1']['type'] = 'blocktitle';
	blocks['blocktitle_1']['title'] = 'TOON®'
	blocks['blocktitle_1']['width'] = 12 ;
	
	blocks['blocktitle_2'] = {}
	blocks['blocktitle_2']['type'] = 'blocktitle';
	blocks['blocktitle_2']['title'] = 'WEER'
	blocks['blocktitle_2']['width'] = 12 ;

	blocks['blocktitle_3'] = {}
	blocks['blocktitle_3']['type'] = 'blocktitle';
	blocks['blocktitle_3']['title'] = 'Energie/GAS'
	blocks['blocktitle_3']['width'] = 12 ;

	blocks['blocktitle_4'] = {}
	blocks['blocktitle_4']['type'] = 'blocktitle';
	blocks['blocktitle_4']['title'] = 'Lampen/Schakelaars'
	blocks['blocktitle_4']['width'] = 12 ;

	blocks['blocktitle_5'] = {}
	blocks['blocktitle_5']['type'] = 'blocktitle';
	blocks['blocktitle_5']['title'] = 'Agenda / Nieuws'
	blocks['blocktitle_5']['width'] = 12 ;

	blocks['blocktitle_6'] = {}
	blocks['blocktitle_6']['type'] = 'blocktitle';
	blocks['blocktitle_6']['title'] = 'Nieuws / Files / Weer'
	blocks['blocktitle_6']['width'] = 12 ;

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

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

	blocks['blocktitle_9'] = {}
	blocks['blocktitle_9']['type'] = 'blocktitle';
	blocks['blocktitle_9']['title'] = 'Diverse blocks'
	blocks['blocktitle_9']['width'] = 12 ;

//	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'] = 300;

// scenes
blocks['s1'] = {}
blocks['s1']['title'] = 'Lampen';
blocks['s1']['width'] = 6;

//Regenkans
		blocks[9] = {}
		blocks[9]['title'] = 'Regenkans';
		blocks[9]['width'] = 4;
		blocks[9]['switch'] = true;
		blocks[9]['icon'] = 'fas fa-tint';

// Iemand thuis
		blocks[12] = {}
		blocks[12]['title'] = 'Edwin';
		blocks[12]['icon'] = 'fas fa-male';
		blocks[12]['width'] = 6;

// Onweer
blocks['51_1'] = {}
		blocks['51_1']['title'] = 'Onweer';
		blocks['51_1']['icon'] = 'fas fa-bolt';
		blocks['51_1']['width'] = 6;
		blocks['51_1']['switch'] = true;
// Zonwering
blocks[20] = {}
blocks[20]['width'] = 12;
blocks[20]['hide_stop'] = true;
	 
//Zonwering manual
blocks[30] = {}
blocks[30]['title'] = 'manual'
blocks[30]['width'] = 6;
blocks[30]['hide_stop'] = true;

blocks[31] = {}
blocks[31]['title'] = 'HUE';
blocks[31]['width'] = 12;
blocks[31]['icon'] = 'fa-lightbulb-o';

// TEMP SLK
blocks['21_1'] = {}
blocks['21_1']['title'] = 'SLK';
blocks['21_1']['width'] = 6;
blocks['21_1']['switch'] = true;
// Temp HSK
blocks['16_1'] = {}
blocks['16_1']['title'] = 'HSK';
blocks['16_1']['width'] = 6
blocks['16_1']['switch'] = true;
// buiten temp
blocks['33_1'] = {}
blocks['33_1']['title'] = 'Buiten';
blocks['33_1']['switch'] = true;
blocks['33_1']['width'] = 6;

// Weer en metingen van buiten OWM
//	Buiten temperatuur
		blocks['47_1'] = {}
		blocks['47_1']['title'] = 'Temperatuur';
		blocks['47_1']['width'] = 4;
		blocks['47_1']['switch'] = true;
//	Luchtvochtigheid
		blocks['47_2'] = {}
		blocks['47_2']['title'] = 'Vochtigheid';
		blocks['47_2']['width'] = 4;
		blocks['47_2']['switch'] = true;
//	Lucht druk
		blocks['47_3'] = {}
		blocks['47_3']['title'] = 'Baro';
		blocks['47_3']['width'] = 4;
		blocks['47_3']['switch'] = true;
//	Windkracht
		blocks[48] = {}
		blocks[48]['title'] = 'Windkracht';
		blocks[48]['width'] = 4;
		blocks[48]['switch'] = true;
//	Zicht
		blocks[49] = {}
		blocks[49]['title'] = 'Zicht';
		blocks[49]['width'] = 4;
		blocks[49]['switch'] = true;
//	Clouds-index
		blocks[50] = {}
		blocks[50]['title'] = 'Clouds';
		blocks[50]['width'] = 4;
		blocks[50]['switch'] = true;
		blocks[50]['icon'] = 'fas fa-cloud';

// P1 GAS
	//	Gas meter verbruik vandaag
		blocks['37_1'] = {}
		blocks['37_1']['width'] = 4;
		blocks['37_1']['title'] = 'Gas Vandaag';
		blocks['37_1']['switch'] = true;
	//	blocks['37_1']['image'] = 'gas48.png'; 
	// 	Gasmeter verbruik totaal
		blocks['37_2'] = {}
		blocks['37_2']['width'] =  4;
		blocks['37_2']['title'] = 'Gas Totaal';
		blocks['37_2']['switch'] = true; 
		
// P1 Elektra
	// 	KWh verbruik actueel
		blocks['39_1'] = {}
		blocks['39_1']['title'] = 'Energie Actueel';
		blocks['39_1']['width'] = 12;
		blocks['39_1']['switch'] = true; 
	//	Verbruik KWh Vandaag
		blocks['39_2'] = {}
		blocks['39_2']['title'] = 'Energie vandaag';
		blocks['39_2']['width'] = 4;
		blocks['39_2']['switch'] = true; 
	//	Totale KWh verbruik	
		blocks['39_3'] = {}
		blocks['39_3']['title'] = 'Energie Totaal';
		blocks['39_3']['width'] = 4;
		blocks['39_3']['switch'] = true;
		blocks['39_3']['image'] = 'current48.png'; 

// Blokken die nog geplaatst moeten worden
// 	mm Regen
/*		blocks[59] = {}
		blocks[59]['title'] = 'Regen'
		blocks[59]['width'] = 4;
		blocks[59]['switch'] = true;*/

//	Gevoelstemperatuur, Windchill
/*		blocks[75] = {}
		blocks[75]['title'] = 'windchill';
		blocks[75]['width'] = 4;
		blocks[75]['switch'] = true;	*/	

//Schakelaars
/*		blocks[39] = {}
		blocks[39]['title'] = 'HSK-1';
		blocks[39]['width'] = 6;
		blocks[44] = {}
		blocks[44]['title'] = 'HSK-2';
		blocks[44]['width'] = 6;
		
		blocks[37] = {}
		blocks[37]['title'] = 'FAN_hsk';
		blocks[37]['width'] = 6;
		blocks[45] = {}
		blocks[45]['title'] = 'FAN-slk';
		blocks[45]['width'] = 6;
		blocks[18] = {}
		blocks[18]['title'] = 'HUE';
		blocks[18]['width'] = 8;
		
		blocks[24] = {}
		blocks[24]['title'] = 'KetelInfo';
		blocks[24]['width'] = 6;
		
		blocks[48] = {}
		blocks[48]['width'] = 6;
		blocks[49] = {}
		blocks[49]['width'] = 6;
		blocks[50] = {}
		blocks[50]['width'] = 6;
		blocks[51] = {}
		blocks[51]['width'] = 6;
		blocks[52] = {}
		blocks[52]['width'] = 6; */

blocks[15] = {}
blocks[15]['title'] = 'Berging';
blocks[15]['width'] = 6;
	

//TOON - Rooted
blocks[38] = {}
blocks[38]['title'] = 'KamerTmp';
blocks[38]['switch'] = true;
blocks[38]['width'] = 4;

// werkt niet!
//blocks[36] = {}
//blocks[36]['title'] = '';
//blocks[36]['switch'] = true;
//blocks[36]['width'] = 6;

blocks[42] = {}
blocks[42]['title'] = 'Toon Prog';
//blocks[42]['switch'] = true;
blocks[42]['width'] = 6;

blocks[45] = {}
blocks[45]['title'] = 'Toon Autoprog';
blocks[45]['switch'] = true;
blocks[45]['width'] = 6;

blocks[43] = {}
blocks[43]['title'] = 'Ketelstand';
blocks[43]['switch'] = true;
blocks[43]['width'] = 6;

blocks[44] = {}
blocks[44]['title'] = 'Toon Scenes';
blocks[44]['switch'] = true;
blocks[44]['width'] = 12;

blocks[34] = {}
blocks[34]['switch'] = true;
blocks[34]['title'] = 'Mod. Lvl';
blocks[34]['width'] = 6;
blocks[35] = {}
blocks[35]['switch'] = true;
blocks[35]['title'] = 'Keteldruk';
blocks[35]['width'] = 6;
blocks[40] = {}
blocks[40]['switch'] = true;
blocks[40]['title'] = 'Boiler IN';
blocks[40]['width'] = 6;
blocks[41] = {}
blocks[41]['title'] = 'Boiler UIT';
blocks[41]['switch'] = true;
blocks[41]['width'] = 6;	
	
	

// Hier worden de kolommen voor op het scherm gemaakt
var columns = {}
	columns['bar'] = {}
	columns['bar']['blocks'] = ['logo','miniclock','settings']

//screen 1
	columns[1] = {}
	columns[1]['blocks'] = [buttons.ipcam1,frames.artwork] 
	columns[1]['width'] = 3;

	columns[2] = {}
	columns[2]['blocks'] = ['blocktitle_5',calendars.combined,'garbage','news_1']
	columns[2]['width'] = 3; 

	columns[3] = {}
	columns[3]['blocks'] = ['blocktitle_2',frames.weather,38,'21_1','16_1','33_1','47_1','47_2','47_3',48,49,50,9,'51_1']
	columns[3]['width'] = 4; 

	columns[4] = {}
	columns[4]['blocks'] = ['sunrise',31,44,12,30,20,26,24,buttons.home,buttons.energie,buttons.bedien]
	columns[4]['width'] = 2; 

//screen 2
	columns[5] = {}
	columns[5]['width'] = 3;
	columns[5]['blocks'] = ['blocktitle_3','39_1','39_2','39_3','37_1','37_2']

	columns[6] = {}
	columns[6]['blocks']=[]
	columns[6]['width'] = 3;
	
	columns[7] = {}
	columns[7]['blocks'] = []
	columns[7]['width'] = 4;

//screen 3
	columns[8] = {}
	columns[8]['blocks'] = ['blocktitle_4',15] 
	columns[8]['width'] = 3;

	columns[9] = {}
	columns[9]['blocks'] = ['blocktitle_1',34,35,40,41,42,43,45]
	columns[9]['width'] = 3;

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

//Standby modus configuratie
var columns_standby = {}
	columns_standby[1] = {}
	columns_standby[1]['blocks'] = ['clock']  //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'] = 'bg10.jpg';
	screens['default'][1]['columns'] = [1,2,3,4]

	screens['default'][2] = {}
	screens['default'][2]['background'] = 'bg10.jpg';
	screens['default'][2]['columns'] = [5,6,7,4]

	screens['default'][3] = {}
	screens['default'][3]['background'] = 'bg10.jpg';
	screens['default'][3]['columns'] = [8,9,10,4]

custom css

Spoiler: show

Code: Select all

.col-xs-12.items {
   font-size: 15px;
}

.trash .state div.trashtoday      { font-size: 30px; font-weight: 3; margin-left: 29px; font-weight: bold; font-variant: small-caps;}
.trash .state div.trashtomorrow       { font-size: 25px; font-weight: 2; margin-left: 25px; font-variant: small-caps;}
.trash .state div.trashrow        { font-size: 22px; font-weight: 1; margin-left: 29px; font-variant: small-caps;}

.img.trashcan           { height: 65px; width: 65px; margin-left:0px; margin-top: 20px;}


.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}

/*
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_37 {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;
}

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

/* 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;}

custom.js

Spoiler: show

Code: Select all

 //add custom javascript in here
function afterGetDevices(){
	
	
}

function getExtendedBlockTypes(blocktypes){
	//blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
	return blocktypes;
} 

[poweredge]

Ja natuurlijk, ik heb wel weer wat aangepast, het ziet er nu zo uit:





Hier zijn mn configs:


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 !

Hi Thuis - zou je eventueel ook je background willen delen? Vind het wel een stylish one....

[CaesarPL]

So, I've bought a tablet for Dashticz. 10" Lenovo. Next work to make everything look a bit bigger on screen.



(and i need the graphs working again, but that is something for another day and time)

Hi, just quick question. Do you know how to change forecast.io text and icons color to any other than black? For some time it stays black, which used to be white.

[EdwinK]

No clue. You might have to experiment with some CSS

[Thuis]

Hi Thuis - zou je eventueel ook je background willen delen? Vind het wel een stylish one....

I just used google, found what i liked and got to this website, where you can download the wallpaper. Good luck

https://picsbroker.com/basic-wallpapers ... lpapers-1/

[Lokonli]

So, I've bought a tablet for Dashticz. 10" Lenovo. Next work to make everything look a bit bigger on screen.



(and i need the graphs working again, but that is something for another day and time)

Hi, just quick question. Do you know how to change forecast.io text and icons color to any other than black? For some time it stays black, which used to be white.

See viewtopic.php?f=67&t=16526&hilit=foreca ... 60#p193322

[poweredge]

Hi Thuis - zou je eventueel ook je background willen delen? Vind het wel een stylish one....

I just used google, found what i liked and got to this website, where you can download the wallpaper. Good luck

https://picsbroker.com/basic-wallpapers ... lpapers-1/

thanks

[EdwinK]

Not 100% happy with this, wallmount feels instable, but is fixed against the wall, as far as i could get the screws in. For now, however this is my view.



O, and my wall is not that ugly color the picture makes it.

Now i need everything the tiles to be a bit bigger.

[Thuis]

@EdwinK, Looks Good !

[EdwinK]

Thanks. It's for the most part from *your* dashboard.

[Thuis]

Hier is mijn 55 inch "tablet", haha nee het is gewoon een TV. Kodi staat hier bijna 24/7 aan, en kan Dashticz via Kodi oproepen, geen tab nodig dus

Here is my 55 inch "tablet", haha no, it is just a TV. Kodi is almost 24/7 on over here, and I call Dashticz with Kodi, no need of a tablet thus







When will there be a product that is controlled over ethernet, can dim, and does not use internet, and works out of the box with domoticz, so i can change out my x10 dimmers and switches. Try to read about flashing and soldering, but i think i wait until a products will arrive that can do this. Would be very easy, on: 192.168.0.100/on, off: 192.168.0.100/off, dim or bright 45%: 192.168.0.100/45 etc... Why do all these companies want me to use their cloud, it is useless. Well there must be a smart company that will do this in the future, must wait for it. Until then, my X10 CM15 is just not connectable to domoticz, on windows, i use windows. I've read this rfxcom, but does it work under windows and can i dim bright my x10 in wall switches? Can i use my RF IR universal ICON10 remote controller? it is unclear in the rfxcom manual.

[poweredge]

lol - gaaf - maar je bedient em dan met remote en dus niet met touch ?

[Thuis]

Yes, I have a remote than can do mouse handling, or I could use the wiimote (see the little bar above the screen), or a ps3 controller, or just buttons on the remote :-p

Ah I forgot, the keyboard keys

[lamerix]

Hey guys.
This is my first post :p Yeey! Anyway still WIP ..and it will probably change quite a bit in time , but ... here it is




CONFIG.js

Code: Select all

var config = {}
var blocks = {}
var columns = {}
var buttons = {}
var screens = {}

// Configuration
config['domoticz_ip'] = 'http://domoticz';              // http(s) address of your Domoticz installation
config['app_title'] = 'LameHome';                       // Dashboard name (Shown in Topbar)
config['loginEnabled'] = 0;                             // Enable if you want to login from Dashticz
config['language'] = 'en_US';                           // Language
config['domoticz_refresh'] = '5';                       // How often to fetch data from Domoticz
config['dashticz_refresh'] = '180';                     // How often to refresh Dashticz dashboard
// UI Settings
config['selector_instead_of_buttons'] = 0;              // Selector as buttons || DropDown Menu
config['auto_positioning'] = 0;                         // Ability to define your own positioning for the buttons (in combo with use_favorites
)
config['hide_mediaplayer'] = 0;                         // Hide media player when not playing
config['standby_after'] = 0;                            // Go in StandBy mode adter X minutes
config['use_favorites'] = 0;                            // Show favorites (should be 1 if you want to use auto_positioning)
config['last_update'] = 0;                              // Shows last updated information in blocks
config['no_rgb'] = 0;                                   // RGB Buttons on switch
config['hide_off_button'] = 0;                          // Hide RGB Selector (only show power slider)
config['hide_topbar'] = 0;                              // Hide the topbar
config['hide_seconds'] = 0;                             // Hide seconds in clock
// Screen swipe/slide settings
config['auto_swipe_back_to'] = 1;                       // When no activity switch back to selected screen
config['auto_swipe_back_after'] = '30';                 // Inactivity time before switching to default screen
config['auto_slide_pages'] = 0;                         // Auto-swipe all screen every X seconds
config['slide_effect'] = 'slide';                       // Slide effect (slide, fade, cube, coverflow, flip)
config['settings_icons'] = ["fullscreen"];              // Toolbar 'items' (available: settings, fullscreen)
// Graphs configuration
config['lineColors'] = ['#e00', '#0e0', '#00e'];        // Graph line colors
config['standard_graph'] = 'month';                     // Default graphs view (hour, day, month)
// Time settings
config['boss_stationclock'] = 'RedBoss';                // Clock type (NoBoss, BlackBoss, RedBoss, ViennaBoss)
config['timeformat'] = 'DD-MM-YY HH:mm';
config['shortdate'] = 'D MMM';
config['longdate'] = 'D MMMM YYYY';
config['shorttime'] = 'HH:mm';
config['longtime'] = 'HH:mm:ss';
config['weekday'] = 'dddd';
// Calendar
config['calendarurl'] = 0;
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
// News section
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';   // News feed URL
config['news_scroll_after'] = '7';                      // Scroll news after X seconds
// Weather settings
config['use_fahrenheit'] = 0;                           // Use Fahrenheit
config['translate_windspeed'] = 1;                      // Use fullnames for wind direction
config['static_weathericons'] = 0;                      // Static/dynamic weather icons
// Weather Underground
config['wu_api'] = 'API Key :)';
config['wu_city'] = 'Plovdiv';
config['wu_name'] = 0;
config['wu_country'] = 'BG';
// Google Maps
config['gm_api'] = 'API KEY :)';
config['gm_zoomlevel'] = 13;
config['gm_latitude'] = 'XX.XX';
config['gm_longitude'] = 'YY.YY';




blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Времето';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Power';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'System';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Хол';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Спалня';

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Тераса';

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Сензори';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Присъствие';

blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Трафик';

blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Server';

blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'UPS';

blocks['blocktitle_12'] = {}
blocks['blocktitle_12']['type'] = 'blocktitle';
blocks['blocktitle_12']['title'] = 'Ping';

blocks['blocktitle_13'] = {}
blocks['blocktitle_13']['type'] = 'blocktitle';
blocks['blocktitle_13']['title'] = 'Disks';

blocks['blocktitle_14'] = {}
blocks['blocktitle_14']['type'] = 'blocktitle';
blocks['blocktitle_14']['title'] = 'RGB Lights';


buttons.log = { key: 'log', width:6, icon:'fa-microchip', title: 'Status log', log:true, level: 2}
buttons.log_detail = { key: 'log', width:6, icon:'fa-microchip', title: 'Full log', log:true, level: 1}

buttons.iss = { key: 'iss', width:12, isimage:true, refreshimage:60000, image: 'https://spacetrack.eu/iss/globe.php?114126457&' }
buttons.storms = { key: 'iss', width:12, isimage:true, refreshimage:60000, image: 'https://burze.dzis.net/burze_europa_anim.gif' }



// Weather Plovdiv
blocks[7] = {}
blocks[7]['width'] = 6;
blocks[7]['title'] = 'Пловдив';

blocks[9] = {}
blocks[9]['width'] = 6;
blocks[9]['title'] = 'Пловдив';


// Qubino Smart Meter 2
blocks[53] = {}
blocks[53]['width'] = 4;
blocks[53]['icon'] = 'fas fa-bolt';
blocks[53]['title'] = 'Кръг №2';

blocks[55] = {}
blocks[55]['width'] = 4;
blocks[55]['title'] = 'Напрежение';

blocks[57] = {}
blocks[57]['width'] = 4;
blocks[57]['title'] = 'Power Factor';


// NFS Server
blocks[1] = {}
blocks[1]['width'] = 6;
blocks[1]['title'] = 'CPU Usage';
blocks[1]['icon'] = 'fas fa-percent';

blocks[2] = {}
blocks[2]['width'] = 6;
blocks[2]['icon'] = 'fas fa-microchip';
blocks[2]['title'] = 'RAM Usage';

blocks[4] = {}
blocks[4]['width'] = 4;
blocks[4]['icon'] = 'fas fa-database';
blocks[4]['title'] = '/';

blocks[6] = {}
blocks[6]['width'] = 4;
blocks[6]['icon'] = 'fas fa-database';
blocks[6]['title'] = '/mnt/wd0';

blocks[5] = {}
blocks[5]['width'] = 4;
blocks[5]['icon'] = 'fas fa-database';
blocks[5]['title'] = '/mnt/wd1';

blocks[58] = {}
blocks[58]['width'] = 12;
blocks[58]['title'] = 'CPU Temp';

// UPS
blocks[36] = {}
blocks[36]['width'] = 12;
blocks[36]['icon'] = 'fas fa-battery-full';
blocks[36]['title'] = 'Battery Charge';

blocks[35] = {}
blocks[35]['width'] = 12;
blocks[35]['icon'] = 'fas fa-battery-full';
blocks[35]['title'] = 'UPS Load';

blocks[34] = {}
blocks[34]['width'] = 12;
blocks[34]['icon'] = 'fas fa-battery-full';
blocks[34]['title'] = 'Battery Voltage';

blocks[33] = {}
blocks[33]['width'] = 12;
blocks[33]['icon'] = 'fas fa-bolt';
blocks[33]['title'] = 'Input Voltage';

// Ping
blocks[37] = {}
blocks[37]['title'] = 'Ping Google';
blocks[37]['width'] = 12;
blocks[37]['icon'] = 'fas fa-exchange-alt';

blocks[38] = {}
blocks[38]['title'] = 'Ping Level3';
blocks[38]['width'] = 12;
blocks[38]['icon'] = 'fas fa-exchange-alt';

blocks[39] = {}
blocks[39]['title'] = 'Ping Coolbox';
blocks[39]['width'] = 12;
blocks[39]['icon'] = 'fas fa-exchange-alt';


// Livingroom
blocks[31] = {}
blocks[31]['width'] = 6;
blocks[31]['title'] = 'Хол';

blocks[51] = {}
blocks[51]['width'] = 12;
blocks[51]['title'] = 'Прахови частици - 2.5';
blocks[51]['icon'] = 'fas fa-asterisk';
//blocks[51]['icon'] = 'fab fa-ravelry';

// Bedroom
blocks[45] = {}
blocks[45]['width'] = 6;
blocks[45]['title'] = 'Спалня';


// Terrase
blocks[27] = {}
blocks[27]['width'] = 6;
blocks[27]['title'] = 'Тераса';

blocks[24] = {}
blocks[24]['width'] = 6;
blocks[24]['title'] = 'Тераса';
blocks[24]['icon'] = 'fas fa-sun';

blocks[22] = {}
blocks[22]['width'] = 12;
blocks[22]['hide_data'] = 1;
blocks[22]['title'] = 'Прозорец - Тераса';
blocks[22]['icon'] = 'fas fa-door-open';
blocks[22]['speakOn'] = 'Window open';
blocks[22]['speakOff'] = 'Window open';

// Anavi RGB
blocks[50] = {}

// Presence
blocks[29] = {}
blocks[29]['width'] = 6;
blocks[29]['icon'] = 'fas fa-male';
blocks[29]['hide_data'] = 1;
blocks[29]['title'] = 'Георги';
blocks[29]['speakOn'] = 'Georgi is present';
blocks[29]['speakOff'] = 'Georgi is gone';

blocks[30] = {}
blocks[30]['width'] = 6;
blocks[30]['icon'] = 'fas fa-female';
blocks[30]['hide_data'] = 1;
blocks[30]['title'] = 'Петя';
blocks[30]['speakOn'] = 'Petya is present';
blocks[30]['speakOff'] = 'Petya is gone';


// Power
blocks[40] = {}
blocks[40]['width'] = 4;
blocks[40]['hide_data'] = 0;
blocks[40]['icon'] = 'fas fa-power-off';
blocks[40]['title'] = 'Кухня - 1';
blocks[40]['speakOff'] = 'Kitchen 1 is off';
//blocks[40]['speakOn'] = 'Kitchen 1 is on';

blocks[44] = {}
blocks[44]['width'] = 4;
blocks[44]['hide_data'] = 0;
blocks[44]['icon'] = 'fas fa-power-off';
blocks[44]['title'] = 'Кухня - 2';
blocks[44]['speakOff'] = 'Kitchen 2 is off';
//blocks[44]['speakOn'] = 'Kitchen 2 is on';

blocks[46] = {}
blocks[46]['width'] = 4;
blocks[46]['hide_data'] = 0;
blocks[46]['icon'] = 'fas fa-power-off';
blocks[46]['title'] = 'Бойлер';

blocks[43] = {}
blocks[43]['width'] = 6;
blocks[43]['hide_data'] = 0;
blocks[43]['icon'] = 'fas fa-bolt';
blocks[43]['title'] = 'Кухня - 1';

blocks[49] = {}
blocks[49]['width'] = 6;
blocks[49]['hide_data'] = 0;
blocks[49]['icon'] = 'fas fa-bolt';
blocks[49]['title'] = 'Бойлер';




columns[1] = {};
columns[1]['blocks'] = ['blocktitle_1', '7_1', '7_2', buttons.storms];
columns[1]['width'] = 3;

columns[2] = {};
columns[2]['blocks'] = ['blocktitle_2', 55, 53, 57, 40, 44, 46, 43, 49, 'blocktitle_3', 1, 2, 4, 6, 5];
columns[2]['width'] = 4;

columns[3] = {};
columns[3]['blocks'] = ['blocktitle_4', '31_1', '31_2', 51, 'blocktitle_5', '45_1', '45_2', 'blocktitle_6', 27, 24];
columns[3]['width'] = 3;

columns[4] = {};
columns[4]['blocks'] = ['blocktitle_7', 22, 'blocktitle_8', 29, 30, 'blocktitle_14', 50];
columns[4]['width'] = 2;

columns[5] = {};
columns[5]['width'] = 4;
columns[5]['blocks'] = ['blocktitle_3', 1, 2, 4, 6, 5, 'graph_58', buttons.log, buttons.log_detail];

columns[6] = {};
columns[6]['width'] = 2;
columns[6]['blocks'] = ['blocktitle_11', 36, 35, 34, 'blocktitle_12', 37, 38, 39];

columns[7] = {};
columns[7]['width'] = 6;
columns[7]['blocks'] = ['blocktitle_13', 'graph_6', 'graph_5'];

columns[8] = {};
columns[8]['width'] = 3;
columns[8]['blocks'] = ['clock', buttons.storms];

columns[9] = {};
columns[9]['width'] = 3;
columns[9]['blocks'] = ['blocktitle_1', 'currentweather_big', 'weather', 'sunrise', '7_2', '7_3'];

columns[10] = {};
columns[10]['width'] = 3;
columns[10]['blocks'] = ['blocktitle_4', '31_1', '31_2', 51, 'blocktitle_5', '45_1', '45_2', 'blocktitle_6', 27, 24];

columns[11] = {};
columns[11]['width'] = 3;
columns[11]['blocks'] = ['blocktitle_9', 'trafficmap'];

columns[12] = {};
columns[12]['width'] = 6;
columns[12]['blocks'] = ['blocktitle_2', 'graph_55', 'graph_57'];

columns[13] = {};
columns[13]['width'] = 6;
columns[13]['blocks'] = ['blocktitle_2', 'graph_53', 'graph_43'];

// Screens
screens[1] = {};
screens[1]['columns'] = [1, 2, 3, 4];
screens[2] = {};
screens[2]['columns'] = [5, 6, 7];
screens[3] = {};
screens[3]['columns'] = [8, 9, 10, 11];
//screens[4] = {};
//screens[4]['columns'] = [12, 13];

custom.css

Code: Select all

/*
CUSTOM CSS FILE
*/

.fa,.wi { font-size:20px !important; }

div.mh.titlegroups {
    height: 46px !important;
    padding-top: 3px !important;
    padding-bottom:45px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0.15);
    text-align: center;
    background-clip: padding-box;
    border-radius: 9px;
}

/* Topbar */
.transbg.dark.col-xs-1,
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3,
.transbg.dark.col-xs-4,
.transbg.dark.col-xs-5,
.transbg.dark.col-xs-6,
.transbg.dark.col-xs-7,
.transbg.dark.col-xs-8,
.transbg.dark.col-xs-9,
.transbg.dark.col-xs-10,
.transbg.dark.col-xs-11,
.transbg.dark.col-xs-12 {
    border: 3px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.25);
    background-clip: padding-box;
    border-radius: 9px;
}

/* 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.3);
    background-clip: padding-box;
    border-radius: 9px;
    height:100%
}


/* Fix graph background color */
.graphpopup > .transbg.col-xs-12 {
   background-color: #333333 !important;
}

/* On mouse-over */
.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: 9px;
    cursor:pointer;
    height:100%
}

.trafficmap { height: 100%;}
.col-xs-1.block_trafficmap, 
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, 
.col-xs-8.block_trafficmap, .col-xs-9.block_trafficmap, .col-xs-10.block_trafficmap, .col-xs-11.block_trafficmap, .col-xs-12.block_trafficmap 
{
    padding-left: 13px !important;
    padding-right: 13px !important;
    height:240px !important;
}

.fas.fa-user.on { color:#F1C300; }
.fas.fa-user.off { color:#fff; }

.fas.fa-male.on { color:#00FF00; }
.fas.fa-male.off { color:#fff; }

.fas.fa-female.on {  color:#00FF00; }
.fas.fa-female.off {  color:#fff; }

.fas.fa-power-off.on { color:#00FF00; }
.fas.fa-power-off.off { color:#fff; }

.fas.fa-door-open.on { color:#FF0000; }
.fas.fa-door-open.off { color:#fff; }

.far.fa-lightbulb.on { color:#F1C300; }
.far.fa-lightbulb.off { color:#fff; }


#graphoutput4 {height: 120px;}
#graphoutput5 {height: 120px;}
#graphoutput6 {height: 120px;}
#graphoutput37 {height: 120px;}
#graphoutput38 {height: 120px;}
#graphoutput39 {height: 120px;}
#graphoutput58 {height: 130px;}
#graphoutput53 {height: 120px;}
#graphoutput55 {height: 120px;}
#graphoutput57 {height: 120px;}
#graphoutput43 {height: 120px;}
#graphoutput49 {height: 120px;}

/* Sunset & Sunrise icon color */
.wi-sunrise { color: yellow; !important; }
.wi-sunset  { color: yellow; !important; }

/* Make traffic map bigger */
.trafficmap { height: 100%; }
.col-xs-1.block_trafficmap,
.col-xs-2.block_trafficmap,
.col-xs-3.block_trafficmap,
.col-xs-4.block_trafficmap,
.col-xs-5.block_trafficmap,
.col-xs-6.block_trafficmap,
.col-xs-7.block_trafficmap,
.col-xs-8.block_trafficmap,
.col-xs-9.block_trafficmap,
.col-xs-10.block_trafficmap,
.col-xs-11.block_trafficmap,
.col-xs-12.block_trafficmap {
    padding-left: 13px !important;
    padding-right: 13px !important;
    height: 380px !important;
}

div.buttons.storms { height:400px !important; }

/*
.btn-default { visibility:hidden; } 
.fas.fa-tint { color:#4FBBFF; }
.fas.fa-bolt { color:#FFFF4F; }
.fas.fa-percent { color:#BEFF4F; }
.fas.fa-asterisk { color:#4FBBFF; }
.wi.wi-barometer { color:#4FBBFF; }
.fas.fa-thermometer-half { color:#FF66CC; }
.fas.fa-sun { color:#FFFF4F; }
.wi.wi-humidity { color:#4FBBFF; }
*/

I have few questions about dashticz....
1. Can I have a per-graph period display setting ? (Set default to montly and have few on hourly ?)
2. Can I have different size(width) for the same block on different screens?
3. Can I change the background of the button. windows ? (In my case buttons.log)
4. Can I change the size of the pop-up window for those button. windows ? (again buttons.log my case)

[Shizzle]

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

How did you get the costs to display? I can't seem to find the idx number of those, the costs are in Domoticz though, so that's strange..

[EdwinK]

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...

As said, I'm working to get something like this, but.. I can't get the graph's to show.

Screen Shot 2018-11-29 at 16.32.31.png (17.88 KiB) Viewed 3599 times