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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

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

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

Post by HansieNL »

EdwinK wrote: Wednesday 11 December 2019 18:01 @Hansienl how did you get that uptime tile look so nice. I only got:
Screen Shot 2019-12-11 at 18.00.24.png
A dzvents script fills a Domoticz user variable with the uptime string and created a Dashticz variable block.

Code: Select all

-- dzuptime.lua
-- 
-- Set Domoticz Uptime as User Variable string
-- 

return { 
	logging = {
		-- level = domoticz.LOG_DEBUG, -- Select one of LOG_INFO, LOG_DEBUG, LOG_ERROR, LOG_FORCE to override system log level
		level = domoticz.LOG_INFO,
		marker = "(Uptime)"
			  },
	on = {
		timer = {
			"every minute"
				}
		 },

	execute = function(dz)
		local days		= dz.startTime.daysAgo
		local hours		= dz.startTime.hoursAgo%24
		local minutes	= dz.startTime.minutesAgo%60
        
		dz.variables("Uptime").set(days .. " dagen, " .. hours .. " uur en " .. minutes .. " minuten")

	end
}

Code: Select all

blocks['v3'] = { //Uptime
    title: 'Uptime',
	image: '../custom/img/uptime.png',
	switch: true,
	width: 12
}
Blah blah blah
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

HansieNL wrote: Thursday 12 December 2019 2:02
EdwinK wrote: Wednesday 11 December 2019 18:01 @Hansienl how did you get that uptime tile look so nice. I only got:
Screen Shot 2019-12-11 at 18.00.24.png
A dzvents script fills a Domoticz user variable with the uptime string and created a Dashticz variable block.
O, that UV was gone after restoring a backup. And it also helps to use the correct variable number ;)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
martin82
Posts: 13
Joined: Monday 23 December 2019 15:24
Target OS: -
Domoticz version:
Contact:

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

Post by martin82 »

wauw i see verry nice dashboards.

i started with dashticz but i'm a noob i can install and run dashticz .
but how to setup a nice dashboard that is to difficult for me, can someome help me with setting up the dashboard.

i read al all the wikki but sorry for me is it to difficult.

i run domoticz i use sonoff flashd and zigbee2mqtt .

who can help me to setting up a nice dashboard for dashticz ??

greeet

martin
martin82
Posts: 13
Joined: Monday 23 December 2019 15:24
Target OS: -
Domoticz version:
Contact:

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

Post by martin82 »

i got a pm but i can not answer to you lokonli .

to feew message on this board wroten.

but i can speak dutch :)

i hope that you can help me :)
gbianchi
Posts: 1
Joined: Saturday 28 December 2019 0:51
Target OS: -
Domoticz version:
Contact:

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

Post by gbianchi »

Image

Thank for domoticz and dashticz!
User avatar
Sjonnie2017
Posts: 364
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

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

Post by Sjonnie2017 »

HansieNL wrote: Thursday 12 December 2019 2:02
A dzvents script fills a Domoticz user variable with the uptime string and created a Dashticz variable block.
[Noob mode on]

OK, I need some help here, please! I have the coding skills of a Kangaroo and I know I am doing something wrong (probably in Domoticz).

I have created the lua script and placed it in the dzVents folder (dzVEnts is enabled in settings). Restarted Domoticz but the variable is not filled with the value. Variable is of type "string" and is named "Uptime

Any help, tips, insights are truly appreciated!

[/Noob mode on]

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
pvklink
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by pvklink »

Hi,

I made a dashticz screen for my grandfather so he can manage his lights without walking to much (86 years old)
Because of his age i have to pay attention to font-size etc.
Last thing to tdo is aligment.
I managed to align block titles horizontal but
vertical alignment does not work , i tried several options...

.block_391 .title {font-size:26px;vertical-align: center}
.block_392 .title {font-size:26px;vertical-align: middle}
.block_393 .title {font-size:26px; padding-top: 6px; }

Somebody tried this ?
Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

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

Post by clinkadink »

pvklink wrote: Wednesday 01 January 2020 19:39 Hi,

I made a dashticz screen for my grandfather so he can manage his lights without walking to much (86 years old)
Because of his age i have to pay attention to font-size etc.
Last thing to tdo is aligment.
I managed to align block titles horizontal but
vertical alignment does not work , i tried several options...

.block_391 .title {font-size:26px;vertical-align: center}
.block_392 .title {font-size:26px;vertical-align: middle}
.block_393 .title {font-size:26px; padding-top: 6px; }

Somebody tried this ?
As far as I can recall, vertical-align will only work on inline elements, i.e. not a div (which is what you are trying apply it to). Notwitstanding, vertical-align not used much anymore, now that Flex is available. If you don't want to use Flex (which does work with Dashticz), you can try making your div (i.e the element the title sits in) an inline element, using either of the first two options.

Code: Select all

style="display:inline-block;vertical-align:middle"
style="display:table-cell;vertical-align:middle"
If you don't want to change it to either of the above, then vertical-align needs a fixed height to calculate the 'middle'.

Code: Select all

style="height:20px;vertical-align:middle"
If that doesn't work, another (crude) method is to change the line-height, by any of these methods:

Code: Select all

style="line-height:1.6;"
style="line-height:200%;"
style="line-height:30px;" 
Personally, I would always recommend Flex:

Code: Select all

style="display:flex;align-items:center;"
The great thing about Flex, is that it is responsive. It will adapt per browser screen/resolution/orientation.
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

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

Post by clinkadink »

Image

Domoticz is a powerful bit of kit, but the UI is dated, despite some good themes, like Machinon. Dashticz really allows to you to maximise and showcase the true potential of Domoticz. I have only being using it for 2 weeks, but already love it. Many thanks.
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
pvklink
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by pvklink »

thanks @clinkadink,
i will try the various options...
Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

clinkadink wrote: Thursday 02 January 2020 22:11 Image
Looks nice and clean.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
JuanUil
Posts: 497
Joined: Friday 22 May 2015 12:21
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11083
Location: Asten NB Nederland
Contact:

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

Post by JuanUil »

clinkadink wrote: Thursday 02 January 2020 22:11 Image

Domoticz is a powerful bit of kit, but the UI is dated, despite some good themes, like Machinon. Dashticz really allows to you to maximise and showcase the true potential of Domoticz. I have only being using it for 2 weeks, but already love it. Many thanks.
Nice,
could you post custom js and css and so?
Your mind is like a parachute,
It only works when it is opened!

RPI4 several Fibaro, KaKu, Neocoolcam switches, Z-Wave, Zigbee2Mqtt, Ikea bulbs and remote, Zigbee temp nodes
User avatar
Sjonnie2017
Posts: 364
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

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

Post by Sjonnie2017 »

I have been experimenting with Dashticz for a few days now and the configuration is getting to a point where it is usable to replace my physical remotes and use my PC/tablet or phone to drive lights and shutters. That was the main goal. I have been using Domoticz for a while now and wanted to organize my dashboards in a more flexible way than Domoticz provided; hence Dashticz :) I have no need for online information (well... maybe weather forecasts would be nice) and I don't want my calendar or IP cam on the dash. I like things "simple" :mrgreen:

I still have some issues to iron out and some items to add (when they arrive).

Items to add:
A - ZigBee smoke alerts
B - ZigBee temperature/humidity sensors

Issues to iron out:
1 - getting the color slider to show up (see thread here: https://www.domoticz.com/forum/viewtopi ... 67&t=30784)
2 - having the water sensors showing the last update and not showing up like a security device
3 - getting the settings/full screen buttons to align properly on first desktop screen
4 - really love to have the group of shutters show up and act like individual shutters - I have applied a workaround for now (see thread here: https://www.domoticz.com/forum/viewtopi ... 67&t=30718)

Any tips on the above issues are greatly appreciated :)

The screenshots

Desktop:
Image

Image

Tablet:
Image

Image

Image

Image

Image

Phone:
Image

Image

Image

Image

Image

Image

My (anonimised) config.js

Code: Select all


// --------------------------------------------------------------------------------------------
// Algemene configuratie
// --------------------------------------------------------------------------------------------

var config = {}
config['domoticz_ip'] = 'http://xxx.xxx.xxx.xxx:2080';
config['login_timeout'] = '60';
config['user_name'] = '0';
config['pass_word'] = '0';
config['app_title'] = '@Home';

config['room_plan'] = '0';

config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';

config['default_news_url'] = 'https://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['default_cors_url'] = '';

config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '0';
config['standby_call_url_on_end'] = '0';
config['theme'] = 'default';
config['background_image'] = 'img/bg15.jpg';
config['standby_after'] = '0';
config['start_page'] = '1';
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '0';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'slide';

config['standard_graph'] = 'month';
config['blink_color'] = '255, 255, 255, 1';

config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = '0';

config['boss_stationclock'] = 'RedBoss';

config['gm_api'] = '0';
config['gm_zoomlevel'] = '0';
config['gm_latitude'] = '0';
config['gm_longitude'] = '0';

config['speak_lang'] = 'en-US';

config['wu_api'] = '';
config['wu_city'] = '';
config['wu_name'] = '0';
config['wu_country'] = 'NL';
config['owm_api'] = 'xxx';
config['owm_city'] = 'Wilnis';
config['owm_name'] = 'Wilnis';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '4';
config['idx_moonpicture'] = '0';
config['owm_days'] = true;
config['owm_min'] = true;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;

config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';

config['switch_horizon'] = '0';
config['host_nzbget'] = '0';
config['spot_clientid'] = '0';
config['sonarr_url'] = '0';
config['sonarr_apikey'] = '0';
config['sonarr_maxitems'] = '0';

config['garbage_company'] = '';
config['garbage_icalurl'] = '0';
config['google_api_key'] = '0';
config['garbage_calendar_id'] = '0';
config['garbage_zipcode'] = '0';
config['garbage_street'] = '0';
config['garbage_housenumber'] = '0';
config['garbage_housenumberadd'] = '0';
config['garbage_maxitems'] = '0';
config['garbage_width'] = '0';
config['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = 0;
config['garbage_use_names'] = 0;
config['garbage_use_cors_prefix'] = 1;

config['setpoint_min'] = '5';
config['setpoint_max'] = '40';
config['loginEnabled'] = 0;
config['disable_update_check'] = 0;

config['no_rgb'] = 0;
config['hide_off_button'] = 0;

config['auto_positioning'] = 1;
config['use_favorites'] = 0;

config['disable_googleanalytics'] = 1;

config['last_update'] = 1;
config['hide_topbar'] = 0;
config['security_button_icons'] = 1;
config['edit_mode'] = 0;

config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;

config['hide_mediaplayer'] = 0;

// --------------------------------------------------------------------------------------------
// Screen definitions
// --------------------------------------------------------------------------------------------

var max_resolution_desktop    = 'default';
var max_resolution_tablet     = 'tablet';
var max_resolution_phone      = 'phone';

// --------------------------------------------------------------------------------------------
// Title Definitions
// --------------------------------------------------------------------------------------------

var title_lampen              = 'title_lampen';
var title_dimmers             = 'title_dimmers';
var title_lampen_2200         = 'title_lampen_2200';
var title_vochtsensors        = 'title_vochtsensors';
var title_ventilatoren        = 'title_ventilatoren'
var title_ventilator1         = 'title_ventilator1';
var title_ventilator2         = 'title_ventilator2';
var title_rookmelders         = 'title_rookmelders';
var title_gas_en_elektra      = 'title_gas_en_elektra';
var title_elektra             = 'title_elektra';
var title_gas                 = 'title_gas';
var title_luikensets          = 'title_luikensets';
var title_luiken              = 'title_luiken';
var title_datum_tijd          = 'title_datum_tijd'
var title_weer                = 'title_weer';
var title_klimaatsensors      = 'title_klimaatsensors';
var title_deurbel             = 'title_deurbel';
var title_raspberry           = 'title_raspberry';
var title_alle_schakelaars    = 'title_alle_schakelaars';
var title_domoticz            = 'title_domoticz';
var title_uptime              = 'title_uptime';
var title_hobby_verlichting   = 'title_hobby_verlichting';
var title_settings            = 'title_settings';

// --------------------------------------------------------------------------------------------
// IDX Definitions
// --------------------------------------------------------------------------------------------

// Verlichting
var ventilator_lamp            = 47;
var simon_levelt               = 59;
var wandbord                   = 60;
var cd_rek                     = 61;
var eettafel                   = 122;
var plafondspot_tv             = 64;
var secretaire                 = 117;
var buffetkast                 = 66;
var dressoir                   = 73;
var traplicht                  = 75;
var plafondspot_haard          = 76;
var hobby_yyy                  = 78;
var hobby_algemeen             = 79;
var slaapkamer_bed             = 82;
var slaapkamer_plafond         = 83;
var hobby_xxx                  = 85;
var theaterspot                = 133;
var mondriaan_tv               = 107;
var mondriaan_dressoir         = 135;

// Luiken
var luik_keuken                = 63;
var luik_dressoir              = 67;
var luik_haard                 = 68;
var luik_kop_tuin              = 69;
var luik_tuindeur              = 70;
var luik_tuinraam              = 71;
var luik_secretaire            = 72;
var luik_eettafel              = 77;
var luik_hobby_waterzijde      = 80;
var luik_hobby_kop             = 81;

// Luikensets (Scenes)
var luiken_waterzijde          = 's1';
var luiken_tuinzijde           = 's2';
var luiken_hobby               = 's3';

// Experiment met individuele scenes voor openen en sluiten
var luiken_hobby_open          = 's7';
var luiken_hobby_dicht         = 's8';
var luiken_water_open          = 's9';
var luiken_water_dicht         = 's10';
var luiken_tuin_open           = 's11';
var luiken_tuin_dicht          = 's12';

// Lampenset
var lampen_2200                = 's4';
var alle_lampen_uit            = 's13';

// Weer
var tuinvilla_buiten           = 89;
var schuur                     = 90;
var tuinvilla                  = 91;
var kelder_achter              = 92;
var regen                      = 111;
var grafiek_regen              = 'graph_111';

// Sensoren
var vochtsensor_ontvochtiger   = 100;
var vochtsensor_cv_ketel       = 101;
var vochtsensor_wasmachine     = 102;
var vochtsensor_waterontharder = 103;
var rookmelder_woonkamer       = 97;
var rookmelder_gang            = 115;
var rookmelder_slaapkamer      = 99;

// Gas en elektra
var elektra                    = 112;
var gas                        = 113;
var elektra_nu                 = '112_1';
var elektra_vandaag            = '112_2';
var elektra_totaal             = '112_3';
var grafiek_gas                = 'graph_113';
var grafiek_elektra            = 'graph_112';

// Deurbel
var deurbel                    = 104;

// Ventilator (1 en 2)
var ventilator1_stand_0         = 48;
var ventilator1_stand_1         = 49;
var ventilator1_stand_2         = 50;
var ventilator1_stand_3         = 51;

// Sensoren RPi
var rpi_cpu_load                = 125;
var rpi_temp                    = 126;
var rpi_mem_usage               = 127;

// Variabelen uit Domoticz
var uptime                      = 'v5';

// Dummy blocks
var dummy9                      = 'dummy9'

// --------------------------------------------------------------------------------------------
// Buttons
// --------------------------------------------------------------------------------------------

var buttons = {}

// --------------------------------------------------------------------------------------------
// Blocks
// --------------------------------------------------------------------------------------------

var blocks = {}

// --------------------------------------------------------------------------------------------
// Lampen
// --------------------------------------------------------------------------------------------

// Lampen uit om 22.00 uur
blocks[lampen_2200] = {}
blocks[lampen_2200]['title'] = 'Lampen uit om 22.00';
blocks[lampen_2200]['width'] = 3;
blocks[lampen_2200]['hide_data'] = true;

blocks[alle_lampen_uit] = {}
blocks[alle_lampen_uit]['title'] = 'Alles uit';
blocks[alle_lampen_uit]['width'] = 3;

// Title: Lampen
blocks[title_lampen] = {}
blocks[title_lampen]['type'] = 'blocktitle'
blocks[title_lampen]['title'] = 'Lampen'
blocks[title_lampen]['image'] = 'lights.png'

// Title: Alle_Schakelaars
blocks[title_alle_schakelaars] = {}
blocks[title_alle_schakelaars]['type'] = 'blocktitle'
blocks[title_alle_schakelaars]['title'] = 'Alle Schakelaars'
blocks[title_alle_schakelaars]['image'] = 'lights.png'

// Title: Hobby Verlichting
blocks[title_hobby_verlichting] = {}
blocks[title_hobby_verlichting]['type'] = 'blocktitle'
blocks[title_hobby_verlichting]['title'] = 'Verlichting Hobby'
blocks[title_hobby_verlichting]['image'] = 'lights.png'

// Lampen - Simon Lévelt
blocks[simon_levelt] = {}
blocks[simon_levelt]['title'] = 'Simon Lévelt';
blocks[simon_levelt]['width'] = 4;
blocks[simon_levelt]['hide_data'] = false;

// Lampen - Wandbord
blocks[wandbord] = {}
blocks[wandbord]['title'] = 'Wandbord';
blocks[wandbord]['width'] = 4;
blocks[wandbord]['hide_data'] = false;

// Lampen - CD Rek
blocks[cd_rek] = {}
blocks[cd_rek]['title'] = 'CD Rek';
blocks[cd_rek]['width'] = 4;
blocks[cd_rek]['hide_data'] = false;

// Lampen - Secretaire
blocks[secretaire] = {}
blocks[secretaire]['title'] = 'Secretaire';
blocks[secretaire]['width'] = 3;
blocks[secretaire]['hide_data'] = false;

// Lampen - Buffetkast
blocks[buffetkast] = {}
blocks[buffetkast]['title'] = 'Buffetkast';
blocks[buffetkast]['width'] = 3;
blocks[buffetkast]['hide_data'] = false;

// Lampen - Dressoir
blocks[dressoir] = {}
blocks[dressoir]['title'] = 'Dressoir';
blocks[dressoir]['width'] = 3;
blocks[dressoir]['hide_data'] = false;

// Lampen - Mondriaan TV
blocks[mondriaan_tv] = {}
blocks[mondriaan_tv]['title'] = 'Mondriaan TV';
blocks[mondriaan_tv]['width'] = 3;
blocks[mondriaan_tv]['hide_data'] = false;

// Lampen - Mondriaan Dressoir
blocks[mondriaan_dressoir] = {}
blocks[mondriaan_dressoir]['title'] = 'Mondriaan Dressoir';
blocks[mondriaan_dressoir]['width'] = 3;
blocks[mondriaan_dressoir]['hide_data'] = false;

// Lampen - Traplicht
blocks[traplicht] = {}
blocks[traplicht]['title'] = 'Traplicht';
blocks[traplicht]['width'] = 3;
blocks[traplicht]['hide_data'] = false;

// Title Dimmers
blocks[title_dimmers] = {}
blocks[title_dimmers]['type'] = 'blocktitle'
blocks[title_dimmers]['title'] = 'Dimmers'
blocks[title_dimmers]['image'] = 'dimmer2.png'

// Lampen - Theaterspot
blocks[theaterspot] = {}
blocks[theaterspot]['title'] = 'Theaterspot';
blocks[theaterspot]['width'] = 6;
blocks[theaterspot]['hide_data'] = false;

// Dimmers - Eettafel
blocks[eettafel] = {}
blocks[eettafel]['title'] = 'Eettafel';
blocks[eettafel]['width'] = 6;
//blocks[eettafel]['hide_data'] = false;

// Dimmers - Plafondspots TV Dimmer
blocks[plafondspot_tv] = {}
blocks[plafondspot_tv]['title'] = 'Plafondspots TV';
blocks[plafondspot_tv]['width'] = 6;
blocks[plafondspot_tv]['hide_data'] = false;

// Dimmers - Plafondspot Haard Dimmer
blocks[plafondspot_haard] = {}
blocks[plafondspot_haard]['title'] = 'Plafondspots Haard';
blocks[plafondspot_haard]['width'] = 6;
blocks[plafondspot_haard]['hide_data'] = false;

// Lampen - Hobby xxx Dimmer
blocks[hobby_xxx] = {}
blocks[hobby_xxx]['title'] = 'Hobby xxx';
blocks[hobby_xxx]['width'] = 4;
blocks[hobby_xxx]['hide_data'] = false;

// Lampen - Hobby xxx Dimmer
blocks[hobby_yyy] = {}
blocks[hobby_yyy]['title'] = 'Hobby yyy';
blocks[hobby_yyy]['width'] = 4;
blocks[hobby_yyy]['hide_data'] = false;

// Lampen - Hobby voorraad Dimmer
blocks[hobby_algemeen] = {}
blocks[hobby_algemeen]['title'] = 'Hobby Voorraad';
blocks[hobby_algemeen]['width'] = 4;
blocks[hobby_algemeen]['hide_data'] = false;

// --------------------------------------------------------------------------------------------
// Sensors
// --------------------------------------------------------------------------------------------

// Title Vochtsensors
blocks[title_vochtsensors] = {}
blocks[title_vochtsensors]['type'] = 'blocktitle'
blocks[title_vochtsensors]['title'] = 'Vochtsensors'
blocks[title_vochtsensors]['image'] = 'water_set.png'

// Vochtsensors - Ontvochtiger
blocks[vochtsensor_ontvochtiger] = {};
blocks[vochtsensor_ontvochtiger]['title'] = 'Ontvochtiger';
blocks[vochtsensor_ontvochtiger]['width'] = 3;
blocks[vochtsensor_ontvochtiger]['image'] = 'water.png';
blocks[vochtsensor_ontvochtiger]['protected'] = true;
blocks[vochtsensor_ontvochtiger]['hide_data'] = false;

// Vochtsensors - CV ketel
blocks[vochtsensor_cv_ketel] = {};
blocks[vochtsensor_cv_ketel]['title'] = 'CV ketel';
blocks[vochtsensor_cv_ketel]['width'] = 3;
blocks[vochtsensor_cv_ketel]['image'] = 'water.png';
blocks[vochtsensor_cv_ketel]['protected'] = true;
blocks[vochtsensor_cv_ketel]['hide_data'] = false;

// Vochtsensors - Wasmachine
blocks[vochtsensor_wasmachine] = {};
blocks[vochtsensor_wasmachine]['title'] = 'Wasmachine';
blocks[vochtsensor_wasmachine]['width'] = 3;
blocks[vochtsensor_wasmachine]['image'] = 'water.png';
blocks[vochtsensor_wasmachine]['protected'] = true;
blocks[vochtsensor_wasmachine]['hide_data'] = false;

// Vochtsensors - Waterontharder
blocks[vochtsensor_waterontharder] = {};
blocks[vochtsensor_waterontharder]['title'] = 'Waterontharder';
blocks[vochtsensor_waterontharder]['width'] = 3;
blocks[vochtsensor_waterontharder]['image'] = 'water.png';
blocks[vochtsensor_waterontharder]['protected'] = true;
blocks[vochtsensor_waterontharder]['hide_data'] = false;

// --------------------------------------------------------------------------------------------
// Ventilator
// --------------------------------------------------------------------------------------------

// Title Ventilatoren
blocks[title_ventilatoren] = {}
blocks[title_ventilatoren]['type'] = 'blocktitle'
blocks[title_ventilatoren]['title'] = 'Ventilatoren'
blocks[title_ventilatoren]['image'] = 'fan_set.png'
blocks[title_ventilatoren]['width'] = 12;

// Title Ventilator1
blocks[title_ventilator1] = {}
blocks[title_ventilator1]['type'] = 'blocktitle'
blocks[title_ventilator1]['title'] = 'Ventilator 1'
blocks[title_ventilator1]['image'] = 'fan.png'

// Title Ventilator2
blocks[title_ventilator2] = {}
blocks[title_ventilator2]['type'] = 'blocktitle'
blocks[title_ventilator2]['title'] = 'Ventilator 2'
blocks[title_ventilator2]['image'] = 'fan.png'

// Hier moet nog (steeds!!) iets slims komen om de standen van de ventilator te kiezen en in 1 knop onder te brengen

blocks[ventilator1_stand_0] = {}
blocks[ventilator1_stand_0]['title'] = 'Fan 1 uit'
blocks[ventilator1_stand_0]['width'] = 3;
blocks[ventilator1_stand_0]['image'] = 'fan_off.png'

blocks[ventilator1_stand_1] = {}
blocks[ventilator1_stand_1]['title'] = 'Fan 1 stand 1'
blocks[ventilator1_stand_1]['width'] = 3;
blocks[ventilator1_stand_1]['imageOn'] = 'fan_on.png'
blocks[ventilator1_stand_1]['imageOff'] = 'fan_off.png'

blocks[ventilator1_stand_2] = {}
blocks[ventilator1_stand_2]['title'] = 'Fan 1 stand 2'
blocks[ventilator1_stand_2]['width'] = 3;
blocks[ventilator1_stand_2]['imageOn'] = 'fan_on.png'
blocks[ventilator1_stand_2]['imageOff'] = 'fan_off.png'

blocks[ventilator1_stand_3] = {}
blocks[ventilator1_stand_3]['title'] = 'Fan 1 stand 3'
blocks[ventilator1_stand_3]['width'] = 3;
blocks[ventilator1_stand_3]['imageOn'] = 'fan_on.png'
blocks[ventilator1_stand_3]['imageOff'] = 'fan_off.png'

// --------------------------------------------------------------------------------------------
// Rookmelders
// --------------------------------------------------------------------------------------------

// Title rookmelders
blocks[title_rookmelders] = {}
blocks[title_rookmelders]['type'] = 'blocktitle'
blocks[title_rookmelders]['title'] = 'Rookmelders'
blocks[title_rookmelders]['image'] = 'smoke_set.png'

//// Rookmelder Woonkamer
//blocks[rookmelder_woonkamer] = {};
//blocks[rookmelder_woonkamer]['title'] = 'Woonkamer';
//blocks[rookmelder_woonkamer]['width'] = 4;
//blocks[rookmelder_woonkamer]['image'] = 'smoke.png'
//blocks[rookmelder_woonkamer]['protected'] = true;
//blocks[rookmelder_woonkamer]['hide_data'] = true;

//// Rookmelder Gang
//blocks[rookmelder_gang] = {};
//blocks[rookmelder_gang]['title'] = 'Gang';
//blocks[rookmelder_gang]['width'] = 4;
//blocks[rookmelder_gang]['image'] = 'smoke.png'
//blocks[rookmelder_gang]['protected'] = true;
//blocks[rookmelder_gang]['hide_data'] = true;

//// Rookmelder Slaapkamer
//blocks[rookmelder_slaapkamer] = {};
//blocks[rookmelder_slaapkamer]['title'] = 'Slaapkamer';
//blocks[rookmelder_slaapkamer]['width'] = 4;
//blocks[rookmelder_slaapkamer]['image'] = 'smoke.png'
//blocks[rookmelder_slaapkamer]['protected'] = true;
//blocks[rookmelder_slaapkamer]['hide_data'] = true;

// --------------------------------------------------------------------------------------------
// "Slimme" meter
// --------------------------------------------------------------------------------------------

// Title Gas en Elektra
blocks[title_gas_en_elektra] = {}
blocks[title_gas_en_elektra]['type'] = 'blocktitle'
blocks[title_gas_en_elektra]['title'] = 'Gas en Elektra'
blocks[title_gas_en_elektra]['image'] = 'gas_electricity.png'

blocks[title_elektra] = {}
blocks[title_elektra]['type'] = 'blocktitle'
blocks[title_elektra]['title'] = 'Elektra'

blocks[title_gas] = {}
blocks[title_gas]['type'] = 'blocktitle'
blocks[title_gas]['title'] = 'Gas'

// componenten gas en elektra
blocks[elektra_nu] = {}
blocks[elektra_nu]['width'] = 4;
blocks[elektra_nu]['show_lastupdate'] = false;
blocks[elektra_nu]['protected'] = true;

blocks[elektra_vandaag] = {}
blocks[elektra_vandaag]['width'] = 4;
blocks[elektra_vandaag]['show_lastupdate'] = false;
blocks[elektra_vandaag]['protected'] = true;

blocks[elektra_totaal] = {}
blocks[elektra_totaal]['width'] = 4;
blocks[elektra_totaal]['show_lastupdate'] = false;
blocks[elektra_totaal]['protected'] = true;

blocks[gas] = {}
blocks[gas]['width'] = 6;
blocks[gas]['show_lastupdate'] = false;
blocks[gas]['protected'] = true;

blocks[grafiek_elektra] = {}
blocks[grafiek_elektra]['title'] = 'Elektriciteit';
blocks[grafiek_elektra]['width'] = 12;
blocks[grafiek_elektra]['height'] = '400px';
//blocks[grafiek_elektra]['height'] = '1050px !important';
//blocks[grafiek_elektra]['graph'] = 'bar';
//blocks[grafiek_elektra]['legend'] = 
blocks[grafiek_elektra]['pointFillColors'] = ['#aaa9a9', '#7e7e7e'];
blocks[grafiek_elektra]['pointSize'] = 3;
blocks[grafiek_elektra]['lineColors'] = ['#aaa9a9', '#7e7e7e'];

blocks[grafiek_gas] = {}
blocks[grafiek_gas]['title'] = 'Gas';
blocks[grafiek_gas]['width'] = 12;
blocks[grafiek_gas]['height'] = '400px';
//blocks[p1_grafiek_gas]['graph'] = 'bar';
//blocks[p1_grafiek_gas]['pointFillColors'] = ['#aaa9a9', '#7e7e7e'];
//blocks[p1_grafiek_gas]['pointSize'] = 3;
//blocks[p1_grafiek_gas]['lineColors'] = ['#aaa9a9', '#7e7e7e'];

// --------------------------------------------------------------------------------------------
//Rolluiken
// --------------------------------------------------------------------------------------------

// Title Luikensets
blocks[title_luikensets] = {}
blocks[title_luikensets]['type'] = 'blocktitle'
blocks[title_luikensets]['title'] = 'Luikensets'
blocks[title_luikensets]['image'] = 'shutter_set.png'

// Luikenset - Waterzijde

//blocks[luiken_waterzijde] = {}
//blocks[luiken_waterzijde]['title'] = 'Waterzijde';
//blocks[luiken_waterzijde]['width'] = 6;
//blocks[luiken_waterzijde]['imageOff'] = 'blinds_open.png';
//blocks[luiken_waterzijde]['imageOn'] = 'blinds_closed.png';
//blocks[luiken_waterzijde]['hide_data'] = false;
//blocks[luiken_waterzijde]['protected'] = false;

// Luikenset Waterzijde Open
blocks[luiken_water_open] = {}
blocks[luiken_water_open]['title'] = 'Water Open';
blocks[luiken_water_open]['width'] = 3;
blocks[luiken_water_open]['image'] = 'blinds_set_open.png'
blocks[luiken_water_open]['hide_data'] = false;

// Luikenset Waterzijde Dicht
blocks[luiken_water_dicht] = {}
blocks[luiken_water_dicht]['title'] = 'Water Dicht';
blocks[luiken_water_dicht]['width'] = 3;
blocks[luiken_water_dicht]['image'] = 'blinds_set_closed.png'
blocks[luiken_water_dicht]['hide_data'] = false;

// Luikenset Hobby Open
blocks[luiken_tuin_open] = {}
blocks[luiken_tuin_open]['title'] = 'Tuin Open';
blocks[luiken_tuin_open]['width'] = 3;
blocks[luiken_tuin_open]['image'] = 'blinds_set_open.png'
blocks[luiken_tuin_open]['hide_data'] = false;

// Luikenset Hobby Dicht
blocks[luiken_tuin_dicht] = {}
blocks[luiken_tuin_dicht]['title'] = 'Tuin Dicht';
blocks[luiken_tuin_dicht]['width'] = 3;
blocks[luiken_tuin_dicht]['image'] = 'blinds_set_closed.png'
blocks[luiken_tuin_dicht]['hide_data'] = false;

// Luikenset Hobby Open
blocks[luiken_hobby_open] = {}
blocks[luiken_hobby_open]['title'] = 'Hobby Open';
blocks[luiken_hobby_open]['width'] = 3;
blocks[luiken_hobby_open]['image'] = 'blinds_set_open.png'
blocks[luiken_hobby_open]['hide_data'] = false;

// Luikenset Hobby Dicht
blocks[luiken_hobby_dicht] = {}
blocks[luiken_hobby_dicht]['title'] = 'Hobby Dicht';
blocks[luiken_hobby_dicht]['width'] = 3;
blocks[luiken_hobby_dicht]['image'] = 'blinds_set_closed.png'
blocks[luiken_hobby_dicht]['hide_data'] = false;

// Title Luiken
blocks[title_luiken] = {}
blocks[title_luiken]['type'] = 'blocktitle'
blocks[title_luiken]['title'] = 'Luiken'
blocks[title_luiken]['image'] = 'shutters.png'

// Luiken - Secretaire
blocks[luik_secretaire] = {}
blocks[luik_secretaire]['width'] = 4;
blocks[luik_secretaire]['title'] = 'Secretaire'
//blocks[luik_secretaire]['hide_data'] = false;
blocks[luik_secretaire]['protected'] = false;

// Luiken - Eettafel
blocks[luik_eettafel] = {}
blocks[luik_eettafel]['width'] = 4;
blocks[luik_eettafel]['title'] = 'Eettafel'
blocks[luik_eettafel]['protected'] = false;

// Luiken - Tuin Raam
blocks[luik_tuinraam] = {}
blocks[luik_tuinraam]['width'] = 4;
blocks[luik_tuinraam]['title'] = 'Tuinraam'
blocks[luik_tuinraam]['protected'] = false;

// Luiken - Tuin Deur
blocks[luik_tuindeur] = {}
blocks[luik_tuindeur]['width'] = 4;
blocks[luik_tuindeur]['title'] = 'Tuindeur'
blocks[luik_tuindeur]['protected'] = false;

// Luiken - Kop Tuin
blocks[luik_kop_tuin] = {}
blocks[luik_kop_tuin]['width'] = 4;
blocks[luik_kop_tuin]['title'] = 'Kop Tuin'
blocks[luik_kop_tuin]['protected'] = false;

// Luiken - Haard
blocks[luik_haard] = {}
blocks[luik_haard]['width'] = 4;
blocks[luik_haard]['title'] = 'Haard'
blocks[luik_haard]['protected'] = false;

// Luiken - Dressoir
blocks[luik_dressoir] = {}
blocks[luik_dressoir]['width'] = 4;
blocks[luik_dressoir]['title'] = 'Dressoir'
blocks[luik_dressoir]['protected'] = false;

// Luiken - Keuken
blocks[luik_keuken] = {}
blocks[luik_keuken]['width'] = 4;
blocks[luik_keuken]['title'] = 'Keuken'
blocks[luik_keuken]['protected'] = false;

// Luiken - Hobby Waterzijde
blocks[luik_hobby_waterzijde] = {}
blocks[luik_hobby_waterzijde]['width'] = 4;
blocks[luik_hobby_waterzijde]['title'] = 'Hobby W'
blocks[luik_hobby_waterzijde]['protected'] = false;

// Luiken - Hobby Kop
blocks[luik_hobby_kop] = {}
blocks[luik_hobby_kop]['width'] = 4;
blocks[luik_hobby_kop]['title'] = 'Hobby K'
blocks[luik_hobby_kop]['protected'] = false;

// --------------------------------------------------------------------------------------------
// Datum / Tijd / Weer (inclusief sensors)
// --------------------------------------------------------------------------------------------

// Title Datum & Tijd
blocks[title_datum_tijd] = {}
blocks[title_datum_tijd]['type'] = 'blocktitle'
blocks[title_datum_tijd]['title'] = 'Datum & Tijd'

// Title Weer
blocks[title_weer] = {}
blocks[title_weer]['type'] = 'blocktitle'
blocks[title_weer]['title'] = 'Weer'

// Title Klimaatsensors
blocks[title_klimaatsensors] = {}
blocks[title_klimaatsensors]['type'] = 'blocktitle'
blocks[title_klimaatsensors]['title'] = 'Klimaatsensors'
blocks[title_klimaatsensors]['image'] = 'climate.png'

blocks[regen] = {}
blocks[regen]['width'] = 12;
//blocks[regen]['show_lastupdate'] = false;
//blocks[regen]['protected'] = true;

blocks[tuinvilla_buiten] = {}
blocks[tuinvilla_buiten]['width'] = 6;
//blocks[tuinvilla_buiten]['show_lastupdate'] = false;
//blocks[tuinvilla_buiten]['protected'] = true;

blocks[tuinvilla] = {}
blocks[tuinvilla]['width'] = 6;
//blocks[tuinvilla]['show_lastupdate'] = false;
//blocks[tuinvilla]['protected'] = true;

blocks[schuur] = {}
blocks[schuur]['width'] = 6;
//blocks[schuur]['show_lastupdate'] = false;
//blocks[schuur]['protected'] = true;

blocks[kelder_achter] = {}
blocks[kelder_achter]['width'] = 6;
//blocks[kelder_achter]['show_lastupdate'] = true;
//blocks[kelder_achter]['protected'] = true;

// --------------------------------------------------------------------------------------------
// Deurbel
// --------------------------------------------------------------------------------------------

// Title Deurbel
blocks[title_deurbel] = {}
blocks[title_deurbel]['type'] = 'blocktitle'
blocks[title_deurbel]['title'] = 'Deurbel'
blocks[title_deurbel]['width'] = 6;

blocks[deurbel] = {}
blocks[deurbel]['width'] = 6;

// --------------------------------------------------------------------------------------------
// Systeeminformatie
// --------------------------------------------------------------------------------------------

blocks[title_domoticz] = {}
blocks[title_domoticz]['type'] = 'blocktitle'
blocks[title_domoticz]['image'] = 'domoticz.png'
blocks[title_domoticz]['title'] = 'Domoticz'
blocks[title_domoticz]['width'] = 12;

blocks[uptime] = {}
//blocks[uptime]['title'] = 'Uptime'
blocks[uptime]['image'] = 'uptime.png'
//blocks[uptime]['switch'] = true;
blocks[uptime]['width'] = 6;

blocks[title_settings] = {}
blocks[title_settings]['type'] = 'blocktitle'
blocks[title_settings]['image'] = ''
blocks[title_settings]['title'] = 'Settings'
blocks[title_settings]['width'] = 6;

blocks['settings'] = {}
blocks['settings']['width'] = 6;

blocks[title_raspberry] = {}
blocks[title_raspberry]['type'] = 'blocktitle'
blocks[title_raspberry]['image'] = 'rpi_128.png'
blocks[title_raspberry]['title'] = 'RPi & Domoticz'
blocks[title_raspberry]['width'] = 12;

blocks[rpi_cpu_load] = {}
blocks[rpi_cpu_load]['image'] = 'cpu2.png'
blocks[rpi_cpu_load]['width'] = 6;

blocks[rpi_temp] = {}
blocks[rpi_temp]['image'] = 'cpu_temp.png'
blocks[rpi_temp]['width'] = 6;

blocks[rpi_mem_usage] ={}
blocks[rpi_mem_usage]['image'] = 'ram2.png'
blocks[rpi_mem_usage]['width'] = 6;

// --------------------------------------------------------------------------------------------
// Dummyblocks
// --------------------------------------------------------------------------------------------

//blocks[dummy9] = {}
//blocks[dummy9]['type'] = 'blocktitle'
//blocks[dummy9]['title'] = ''
//blocks[dummy9]['width'] = 9;


// --------------------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------------------
var columns = {}

// Laatst gebruikte column nummer is 17 (desktop) 

// Aangepaste invulling voor de titelbalk

columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','sunrise']

// Screen 1 voor desktop

columns[1] = {}
columns[1]['blocks'] = [title_lampen, simon_levelt, wandbord, cd_rek, title_dimmers, theaterspot, eettafel, plafondspot_tv, plafondspot_haard, title_luikensets, luiken_tuin_open, luiken_tuin_dicht, luiken_water_open, luiken_water_dicht, luiken_hobby_open, luiken_hobby_dicht, lampen_2200, alle_lampen_uit, title_luiken, luik_secretaire, luik_eettafel, luik_tuinraam, luik_tuindeur, luik_kop_tuin, luik_haard, luik_dressoir, luik_keuken, luik_hobby_waterzijde, luik_hobby_kop]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = [title_gas_en_elektra, grafiek_elektra, elektra_nu, elektra_vandaag, elektra_totaal, grafiek_gas, gas]
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = [title_raspberry, rpi_cpu_load, rpi_temp, rpi_mem_usage, uptime, title_klimaatsensors, regen, tuinvilla_buiten, tuinvilla, schuur, kelder_achter, title_deurbel, deurbel, title_settings, 'settings']
columns[3]['width'] = 3;

// Screen 2 voor desktop

columns[4] = {}
columns[4]['blocks'] = [title_alle_schakelaars, simon_levelt, wandbord, cd_rek, secretaire, buffetkast, dressoir, mondriaan_tv, mondriaan_dressoir, traplicht, title_dimmers, theaterspot, eettafel, plafondspot_tv, plafondspot_haard, title_hobby_verlichting, hobby_xxx, hobby_yyy, hobby_algemeen, title_ventilatoren, ventilator_lamp, ventilator1_stand_0, ventilator1_stand_1, ventilator1_stand_2, ventilator1_stand_3]
columns[4]['width'] = 12;

// Screen 3 voor desktop

columns[14] = {}
columns[14]['blocks'] = [title_rookmelders, rookmelder_gang, title_vochtsensors, vochtsensor_ontvochtiger, vochtsensor_cv_ketel, vochtsensor_waterontharder, vochtsensor_wasmachine]
columns[14]['width'] = 12

// Screen 4 voor desktop
columns[17] = {}
columns[17]['blocks'] = [title_weer, 'currentweather_big_owm','weather_owm']
columns[17]['width'] = 12;

// Screen 1 voor tablet

columns[5] = {}
columns[5]['blocks'] = [title_lampen, simon_levelt, wandbord, cd_rek, title_dimmers, theaterspot, eettafel, plafondspot_tv, plafondspot_haard, title_luikensets, luiken_tuin_open, luiken_tuin_dicht, luiken_water_open, luiken_water_dicht, luiken_hobby_open, luiken_hobby_dicht, lampen_2200, alle_lampen_uit]
columns[5]['width'] = 6;

columns[6] = {}
columns[6]['blocks'] = [title_klimaatsensors, regen, tuinvilla_buiten, tuinvilla, schuur, kelder_achter, title_raspberry, rpi_cpu_load, rpi_temp, rpi_mem_usage, uptime]
columns[6]['width'] = 6;

// Screen 2 voor tablet bestaat uit losse luiken en alle schakelaars

columns[15] = {}
columns[15]['blocks'] = [title_luiken, luik_secretaire, luik_eettafel, luik_tuinraam, luik_tuindeur, luik_kop_tuin, luik_haard, luik_dressoir, luik_keuken, luik_hobby_waterzijde, luik_hobby_kop, title_ventilatoren, ventilator_lamp, ventilator1_stand_0, ventilator1_stand_1, ventilator1_stand_2, ventilator1_stand_3]
columns[15]['width'] = 6;

columns[16] = {}
columns[16]['blocks'] = [title_alle_schakelaars, simon_levelt, wandbord, cd_rek, secretaire, buffetkast, dressoir, mondriaan_tv, mondriaan_dressoir, traplicht, title_dimmers, theaterspot, eettafel, plafondspot_tv, plafondspot_haard]
columns[16]['width'] = 6;

// Screen 3 voor tablet bestaat uit columns[4]

// Screen 4 voor tablet

columns[7] = {}
columns[7]['blocks'] = [title_gas_en_elektra, grafiek_elektra, elektra_nu, elektra_vandaag, elektra_totaal, grafiek_gas, gas]
columns[7]['width'] = 12;

// Screen 5 voor tablet (sensoren en ventilatoren)

columns[11] = {}
columns[11]['blocks'] = [title_rookmelders, rookmelder_gang, title_vochtsensors, vochtsensor_ontvochtiger, vochtsensor_cv_ketel, vochtsensor_waterontharder, vochtsensor_wasmachine]
columns[11]['width']= 6;

columns[12] = {}
columns[12]['blocks'] = [title_hobby_verlichting, hobby_xxx, hobby_yyy, hobby_algemeen]
columns[12]['width'] = 6;

// Screen 1 voor phone

columns[8] = {}
columns[8]['blocks'] = [title_lampen, simon_levelt, wandbord, cd_rek, title_dimmers, theaterspot, eettafel, plafondspot_tv, plafondspot_haard, title_luikensets, luiken_tuin_open, luiken_tuin_dicht, luiken_water_open, luiken_water_dicht, luiken_hobby_open, luiken_hobby_dicht, lampen_2200, alle_lampen_uit]
columns[8]['width'] = 12;

// Screen 2 voor phone bestaat uit columns[4]

// Screen 3 voor phone bestaat uit de losse luiken

columns[13] = {}
columns[13]['blocks'] = [title_luiken, luik_secretaire, luik_eettafel, luik_tuinraam, luik_tuindeur, luik_kop_tuin, luik_haard, luik_dressoir, luik_keuken, luik_hobby_waterzijde, luik_hobby_kop]
columns[13]['width'] = 12;

// Screen 4 voor phone (sensoren) bestaat uit column[14]

// Screen 5 voor phone

columns[9] = {}
columns[9]['blocks'] = [title_elektra, grafiek_elektra, elektra_nu, elektra_vandaag, elektra_totaal]
columns[9]['width'] = 12;

// Screen 6 voor phone

columns[10] = {}
columns[10]['blocks'] = [title_gas, grafiek_gas, gas]
columns[10]['width'] = 12;

// --------------------------------------------------------------------------------------------
// Screens
// --------------------------------------------------------------------------------------------
var screens = {}

// Desktop

screens[max_resolution_desktop] = {}
screens[max_resolution_desktop]['maxwidth'] = 1920;
screens[max_resolution_desktop]['maxheight'] = 1200;

screens[max_resolution_desktop][1] = {}
screens[max_resolution_desktop][1]['background'] = 'img/bg15.jpg';
screens[max_resolution_desktop][1]['columns'] = [1,2,3]

screens[max_resolution_desktop][2] = {}
screens[max_resolution_desktop][2]['background'] = 'img/bg15.jpg';
screens[max_resolution_desktop][2]['columns'] = [4]

screens[max_resolution_desktop][3] = {}
screens[max_resolution_desktop][3]['background'] = 'img/bg15.jpg';
screens[max_resolution_desktop][3]['columns'] = [14]

screens[max_resolution_desktop][4] = {}
screens[max_resolution_desktop][4]['background'] = 'img/bg15.jpg';
screens[max_resolution_desktop][4]['columns'] = [17]

// Tablet

screens[max_resolution_tablet] = {}
screens[max_resolution_tablet]['maxwidth'] = 1280;
screens[max_resolution_tablet]['maxheight'] = 800;

screens[max_resolution_tablet][1] = {}
screens[max_resolution_tablet][1]['background'] = 'img/bg15.jpg';
screens[max_resolution_tablet][1]['columns'] = [5,6]

screens[max_resolution_tablet][2] = {}
screens[max_resolution_tablet][2]['background'] = 'img/bg15.jpg';
screens[max_resolution_tablet][2]['columns'] = [15,16]

screens[max_resolution_tablet][3] = {}
screens[max_resolution_tablet][3]['background'] = 'img/bg15.jpg';
screens[max_resolution_tablet][3]['columns'] = [4]

screens[max_resolution_tablet][4] = {}
screens[max_resolution_tablet][4]['background'] = 'img/bg15.jpg';
screens[max_resolution_tablet][4]['columns'] = [7]

screens[max_resolution_tablet][5] = {}
screens[max_resolution_tablet][5]['background'] = 'img/bg15.jpg';
screens[max_resolution_tablet][5]['columns'] = [11,12]

// Phone

screens[max_resolution_phone] = {}
screens[max_resolution_phone]['maxwidth'] = 720;
screens[max_resolution_phone]['maxheight'] = 1520;

screens[max_resolution_phone][1] = {}
screens[max_resolution_phone][1]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][1]['columns'] = [8]

screens[max_resolution_phone][2] = {}
screens[max_resolution_phone][2]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][2]['columns'] = [4]

screens[max_resolution_phone][3] = {}
screens[max_resolution_phone][3]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][3]['columns'] = [13]

screens[max_resolution_phone][4] = {}
screens[max_resolution_phone][4]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][4]['columns'] = [14]

screens[max_resolution_phone][5] = {}
screens[max_resolution_phone][5]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][5]['columns'] = [9]

screens[max_resolution_phone][6] = {}
screens[max_resolution_phone][6]['background'] = 'img/bg15.jpg';
screens[max_resolution_phone][6]['columns'] = [10]

And my moderately adjusted custom.css:

Code: Select all

/*
CUSTOM CSS FILE
*/

.titlegroups {text-align: center !important;}

.transbg[class*="col-xs"] {
  border-radius: 20px;                            /* Rounded corners */
}

.swiper-pagination-bullet {
    width: 35px !important;
    height: 35px !important;
}

.swiper-pagination {
    text-align: right !important;
}

As said before: any tips on my issues are greatly appreciated :)

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
garethiowc
Posts: 28
Joined: Sunday 03 December 2017 23:02
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by garethiowc »

Hi Tycho,

I'm assuming under the status section the device status dependant on a ping check?

https://www.domoticz.com/wiki/System_Al ... ker_(Ping)

I have followed the guide linked above and the checks work ok but are displayed using a lamp icon in dashticz. How did you get green and red icons?

:)


tycho28 wrote: Monday 30 July 2018 13:50 This is my dashboard.
Image

I've a small tablet (got it free) which I 'mounted' on a pallet on the wall. The dashboard on the tablet is a older version, the picture above is the correct one :)
Image

Config.js
Spoiler: show

Code: Select all

var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'http://192.168.0.2:8081';
config['app_title'] = 'Breda';
config['domoticz_refresh'] = '60';
config['dashticz_refresh'] = '60';
config['auto_positioning'] = 0;
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd D MMM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['wu_api'] = 'xxx';
config['wu_city'] = 'Breda';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['hide_topbar'] = 1;

var publictransport = {}
publictransport.ovinfotrain= { station: 'station-breda', show_lastupdate:true, provider: '9292-train', icon: 'train', results: 5 };

var calendars = {}
calendars.private = { maxitems: 5, icalurl: 'https://calendar.google.com/calendar/xxx/basic.ics' }

/* BLOCKS CONFIGURATION */
var blocks = {}
blocks['bt_1'] = {}
blocks['bt_1']['type'] = 'blocktitle';
blocks['bt_1']['title'] = 'Verlichting';
blocks['bt_2'] = {}
blocks['bt_2']['type'] = 'blocktitle';
blocks['bt_2']['title'] = 'Temperatuur';
blocks['bt_3'] = {}
blocks['bt_3']['type'] = 'blocktitle';
blocks['bt_3']['title'] = 'Stroom';
blocks['bt_4'] = {}
blocks['bt_4']['type'] = 'blocktitle';
blocks['bt_4']['title'] = 'Status';

//Voordeur
blocks[8380] = {};
blocks[8380]['title'] = 'Voordeur';
blocks[8380]['show_lastupdate'] = false;
blocks[8380]['width'] = 6

//Balkondeur
blocks[8385] = {}; 
blocks[8385]['title'] = 'Balkondeur';
blocks[8385]['show_lastupdate'] = false;
blocks[8385]['width'] = 6

//Keukenraam
blocks[8382] = {}; 
blocks[8382]['title'] = 'Keukenraam';
blocks[8382]['show_lastupdate'] = false;
blocks[8382]['width'] = 6

//Slaapkamerraam 1
blocks[8391] = {}; 
blocks[8391]['title'] = 'Slaapkamer gallerij';
blocks[8391]['show_lastupdate'] = false;
blocks[8391]['width'] = 6

//Slaapkamerraam 2
blocks[8389] = {}; 
blocks[8389]['title'] = 'Slaapkamer balkon';
blocks[8389]['show_lastupdate'] = false;
blocks[8389]['width'] = 6

//Woonkamerraam
blocks[8387] = {}; 
blocks[8387]['title'] = 'Woonkamer';
blocks[8387]['show_lastupdate'] = false; 
blocks[8387]['width'] = 6

//* TEMPERATUUR *//
blocks['1389_1'] = {};
blocks['1389_1']['title'] = 'Woonkamer';
blocks['1389_1']['switch'] = true;

blocks['1833_1'] = {};
blocks['1833_1']['title'] = 'Slaapkamer';
blocks['1833_1']['switch'] = true;

blocks['1834_1'] = {};
blocks['1834_1']['title'] = 'Badkamer';
blocks['1834_1']['switch'] = true;

blocks[7208] = {};
blocks[7208]['title'] = 'Hal';
blocks[7208]['switch'] = true;

blocks[8368] = {};
blocks[8368]['title'] = 'Keuken';
blocks[8368]['switch'] = true;

blocks['6649_1'] = {};
blocks['6649_1']['title'] = 'Buiten';
blocks['6649_1']['switch'] = true;

//* STROOM *//

//Vaatwasser
blocks['8394_1'] = {};
blocks['8394_1']['title'] = 'Vaatwasser';
blocks['8394_1']['icon'] = 'fa-bolt';

//Wasmachine
blocks['8398_1'] = {};
blocks['8398_1']['title'] = 'Wasmachine';
blocks['8398_1']['icon'] = 'fa-bolt';

//Koelkast
blocks['8396_1'] = {};
blocks['8396_1']['title'] = 'Koelkast';
blocks['8396_1']['icon'] = 'fa-bolt';

//Gas
blocks['8405_1'] = {};
blocks['8405_1']['title'] = 'Gas';

//* VERLICHTING *//

//Sfeerverlichting Kast
blocks[82] = {}; 
blocks[82]['title'] = 'Kastverlichting';
blocks[82]['show_lastupdate'] = false;
blocks[82]['width'] = 4

//Sfeerverlichting pallet
blocks[83] = {}; 
blocks[83]['title'] = 'Pallet';
blocks[83]['show_lastupdate'] = false;
blocks[83]['width'] = 4

//Woonkamer bol
blocks[6576] = {}; 
blocks[6576]['title'] = 'Bol';
blocks[6576]['show_lastupdate'] = false;
blocks[6576]['width'] = 4

//Studiekamer
blocks[8330] = {}; 
blocks[8330]['title'] = 'Computer';
blocks[8330]['show_lastupdate'] = false;
blocks[8330]['width'] = 4

//Eettafel
blocks[8322] = {}; 
blocks[8322]['title'] = 'Eettafel';
blocks[8322]['show_lastupdate'] = false;
blocks[8322]['width'] = 4

//Woonkamer lamp
blocks[7207] = {}; 
blocks[7207]['title'] = 'Staande lamp';
blocks[7207]['show_lastupdate'] = false;
blocks[7207]['width'] = 12

//Woonkamer spot
blocks[8409] = {}; 
blocks[8409]['title'] = 'WK spots';
blocks[8409]['show_lastupdate'] = false;
blocks[8409]['width'] = 4

//Slaapkamer 1
blocks[8325] = {}; 
blocks[8325]['title'] = 'Slaapkamer gallerij';
blocks[8325]['show_lastupdate'] = false;
blocks[8325]['width'] = 4

//* Scenes *//

//Slaapkamer 2
blocks[8327] = {}; 
blocks[8327]['title'] = 'Slaapkamer balkon';
blocks[8327]['show_lastupdate'] = false;
blocks[8327]['width'] = 4

//Scene TV kijken
blocks['s2'] = {}; 
blocks['s2']['title'] = 'TV Kijken';
blocks['s2']['show_lastupdate'] = false;
blocks['s2']['width'] = 4
blocks['s2']['hide_data'] = true

//Scene alles uit
blocks['s3'] = {}; 
blocks['s3']['title'] = 'Alles uit';
blocks['s3']['show_lastupdate'] = false;
blocks['s3']['width'] = 4
blocks['s3']['hide_data'] = true

//* STROOM *//
//Energieverbruik_1
blocks['8403_1'] = {}; 
blocks['8403_1']['title'] = 'Huidig verbruik';

//Energieverbruik_2
blocks['8403_2'] = {}; 
blocks['8403_2']['title'] = 'Totaal vandaag';

//* STATUS DEVICES *//
//PC
blocks[1828] = {}; 
blocks[1828]['title'] = 'PC';
blocks[1828]['show_lastupdate'] = false;
blocks[1828]['width'] = 4
blocks[1828]['hide_data'] = true
blocks[1828]['icon'] = 'fa-circle'

//TV Woonkamer
blocks[8416] = {}; 
blocks[8416]['title'] = 'TV WK';
blocks[8416]['show_lastupdate'] = false;
blocks[8416]['width'] = 4
blocks[8416]['hide_data'] = true
blocks[8416]['icon'] = 'fa-circle'
blocks[8416]['protected'] = true

//TV Slaapkamer
blocks[1824] = {}; 
blocks[1824]['title'] = 'TV SK';
blocks[1824]['show_lastupdate'] = false;
blocks[1824]['width'] = 4
blocks[1824]['hide_data'] = true
blocks[1824]['icon'] = 'fa-circle'
blocks[1824]['protected'] = true

//ATV Woonkamer
blocks[8841] = {}; 
blocks[8841]['title'] = 'ATV WK';
blocks[8841]['show_lastupdate'] = false;
blocks[8841]['width'] = 4
blocks[8841]['hide_data'] = true
blocks[8841]['icon'] = 'fa-circle'
blocks[8841]['protected'] = true

//ATV Slaapkamer
blocks[1827] = {}; 
blocks[1827]['title'] = 'ATV SK';
blocks[1827]['show_lastupdate'] = false;
blocks[1827]['width'] = 4
blocks[1827]['hide_data'] = true
blocks[1827]['icon'] = 'fa-circle'
blocks[1827]['protected'] = true

//Philips Soundsystem
blocks[6517] = {}; 
blocks[6517]['title'] = 'Philips HTB';
blocks[6517]['show_lastupdate'] = false;
blocks[6517]['width'] = 4
blocks[6517]['hide_data'] = true
blocks[6517]['icon'] = 'fa-circle'
blocks[6517]['protected'] = true

//Printer
blocks[8839] = {}; 
blocks[8839]['title'] = 'Printer';
blocks[8839]['show_lastupdate'] = false;
blocks[8839]['width'] = 4
blocks[8839]['hide_data'] = true
blocks[8839]['icon'] = 'fa-circle'
blocks[8839]['protected'] = true

//Vaatwasser
blocks[8421] = {}; 
blocks[8421]['title'] = 'Vaatwasser';
blocks[8421]['show_lastupdate'] = false;
blocks[8421]['width'] = 4
blocks[8421]['hide_data'] = true
blocks[8421]['icon'] = 'fa-circle'
blocks[8421]['protected'] = true

//Wasmachine
blocks[8420] = {}; 
blocks[8420]['title'] = 'Wasmachine';
blocks[8420]['show_lastupdate'] = false;
blocks[8420]['width'] = 4
blocks[8420]['hide_data'] = true
blocks[8420]['icon'] = 'fa-circle'
blocks[8420]['protected'] = true

//Koelkast
blocks[8393] = {}; 
blocks[8393]['title'] = 'Koelkast';
blocks[8393]['show_lastupdate'] = false;
blocks[8393]['width'] = 4
blocks[8393]['hide_data'] = true
blocks[8393]['icon'] = 'fa-circle'
blocks[8393]['protected'] = true

//Xiaomi Gateway
blocks[8869] = {}; 
blocks[8869]['title'] = 'Xiaomi';
blocks[8869]['show_lastupdate'] = false;
blocks[8869]['width'] = 4
blocks[8869]['hide_data'] = true
blocks[8869]['icon'] = 'fa-circle'
blocks[8869]['protected'] = true

//Android Tablet
blocks[8868] = {}; 
blocks[8868]['title'] = 'Tablet lader';
blocks[8868]['show_lastupdate'] = false;
blocks[8868]['width'] = 4
blocks[8868]['hide_data'] = true
blocks[8868]['icon'] = 'fa-circle'
blocks[8868]['protected'] = true

//Android Batterij
blocks[8867] = {}; 
blocks[8867]['title'] = 'Android Tablet';
blocks[8867]['show_lastupdate'] = false;
blocks[8867]['width'] = 6
blocks[8867]['protected'] = true
blocks[8867]['icon'] = 'fa-percent'

/* IEMAND THUIS */
//Tycho
blocks[1825] = {};
blocks[1825]['title'] = 'Tycho';
blocks[1825]['icon'] = 'fa-male';
blocks[1825]['width'] = 6;
blocks[1825]['hide_data'] = true


/* COLUMN CONFIGURATION */
var columns = {}
columns['bar'] = {};
columns['bar']['blocks'] = ['sunrise','miniclock','settings'];
					
columns[1] = {};
columns[1]['blocks'] = ['clock','sunrise',publictransport.ovinfotrain,8380,8385,8382,8391,8389,8387,1825,8867];
columns[1]['width'] = 3;

columns[2] = {};
columns[2]['blocks'] = ['bt_1',8409,8322,8330,83,82,6576,'s3','s2',calendars.private,'bt_4',1828,8839,8869,8416,6517,8841,1824,1827,8868,8393,8421,8420];
columns[2]['width'] = 5; 

columns[3] = {};
columns[3]['blocks'] = ['bt_2','weather','1389_1','1833_1','1834_1',7208,8368,'6649_1','bt_3','8403_1','8403_2','8396_1','8398_1','8394_1','8405_1'];
columns[3]['width'] = 4; 

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather', 'currentweather_big']
columns_standby[1]['width'] = 12;
Custom.css
Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

/* Titles */

div.mh.titlegroups h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont, 
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
"Fira Sans", "Droid Sans", "Helvetica Neue", 
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
margin: 0px;
margin-left: 15px;
padding-top:0px;
height: auto !important;	/* default height=75px */
}

/* Blocks*/

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-4,
.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:10px;
	padding-bottom:10px;
	border: 2px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0.2);				
	background-clip: padding-box;
	border-radius: 8px;
}
.fa,.wi {
   font-size:24px !important;
}
.fa.fa-train { 
    font-size:18px !important;
}
.fa.fa-unlock.on.icon,
.fa.fa-lightbulb-o.on {
    color:#F1C300;
}
.fa.fa-lock.off.icon,
.fa.fa-lightbulb-o.off {
	color:#fff;
}


/*Toggle*/
.fa.fa-toggle-on.icon{
	color:#4bd961;
	opacity: 1 !important;
}
.fa.fa-toggle-off.icon{
	color:#fff;
	opacity: 0.5 !important;
}

/*Circle*/
.fa.fa-circle.on {
	color:#4bd961;
	font-size:15px !important;
	opacity: 1 !important;
}
.fa.fa-circle.off {
	color:#ff0000;
	font-size:15px !important;
	opacity: 1 !important;
}

.lastupdate {
	display: none;
}
.fa.fa-male.on {
	color:#F1C300
}

/*Status*/
.block_1828.transbg.col-xs-4,
.block_8839.transbg.col-xs-4,
.block_8416.transbg.col-xs-4,
.block_6517.transbg.col-xs-4,
.block_8841.transbg.col-xs-4,
.block_1824.transbg.col-xs-4,
.block_1827.transbg.col-xs-4,
.block_8393.transbg.col-xs-4,
.block_8421.transbg.col-xs-4,
.block_8420.transbg.col-xs-4,
.block_8868.transbg.col-xs-4,
.block_8869.transbg.col-xs-4 {
	height: 34px;
	padding-top:7px;
	padding-bottom:1px;
}

/*Temperatuur*/
.block_1389_1.transbg.col-xs-4,
.block_1833_1.transbg.col-xs-4,
.block_1834_1.transbg.col-xs-4,
.block_7208.transbg.col-xs-4,
.block_8368.transbg.col-xs-4,
.block_6649_1.transbg.col-xs-4 {
	height: 50px;
	padding-top:7px;
	padding-bottom:1px;
}

/*Verlichting*/
.block_8409.transbg.col-xs-4,
.block_8322.transbg.col-xs-4,
.block_8330.transbg.col-xs-4,
.block_83.transbg.col-xs-4,
.block_82.transbg.col-xs-4,
.block_6576.transbg.col-xs-4,
.block_s2.transbg.col-xs-4,
.block_s3.transbg.col-xs-4 {
	height: 50px;
	padding-top:7px;
	padding-bottom:1px;
}

/*Stroom*/
.block_8403_1.transbg.col-xs-4,
.block_8403_2.transbg.col-xs-4,
.block_8396_1.transbg.col-xs-4,
.block_8398_1.transbg.col-xs-4,
.block_8394_1.transbg.col-xs-4,
.block_8405_1.transbg.col-xs-4 {
	height: 60px;
	padding-top:7px;
	padding-bottom:1px;
}
/*Sensoren deur/raam + scene*/
.block_8380.transbg.col-xs-6,
.block_8385.transbg.col-xs-6,
.block_8382.transbg.col-xs-6,
.block_8391.transbg.col-xs-6,
.block_8389.transbg.col-xs-6,
.block_8387.transbg.col-xs-6,
.block_s3.transbg.col-xs-6 {
	height: 70px;
	padding-top:7px;
	padding-bottom:1px;
}
/*Tycho + Android Tablet*/
.block_8867.transbg.col-xs-6,
.block_1825.transbg.col-xs-6 {
	height: 50px;
	padding-top:7px;
	padding-bottom:1px;
}

div.mh.titlegroups {
	height: 40px !important;		/* default height=75px */
	padding-top: 2px;			/* center text for new height */
}
div.mh h3 {
	padding-top: 1px;
}

/*Warning*/
.warning {
   background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
}
.verbruik {
    color: #F1C300;
}
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;
} 

//Temperatuur woonkamer
function getStatus_1389_1(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_1389_1').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_1389_1').addClass('warningblue');
   }
   else {
      $('div.block_1389_1').removeClass('warning');
      $('div.block_1389_1').removeClass('warningblue');
   }
}
//Temperatuur Slaapkamer
function getStatus_1833_1(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_1833_1').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_1833_1').addClass('warningblue');
   }
   else {
      $('div.block_1833_1').removeClass('warning');
      $('div.block_1833_1').removeClass('warningblue');
   }
}
//Temperatuur Badkamer
function getStatus_1834_1(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_1834_1').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_1834_1').addClass('warningblue');
   }
   else {
      $('div.block_1834_1').removeClass('warning');
      $('div.block_1834_1').removeClass('warningblue');
   }
}
//Temperatuur Hal
function getStatus_7208(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_7208').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_7208').addClass('warningblue');
   }
   else {
      $('div.block_7208').removeClass('warning');
      $('div.block_7208').removeClass('warningblue');
   }
}
//Temperatuur Keuken
function getStatus_8368_1(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_8368').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_8368').addClass('warningblue');
   }
   else {
      $('div.block_8368').removeClass('warning');
      $('div.block_8368').removeClass('warningblue');
   }
}
//Temperatuur Buiten
function getStatus_6649_1(idx,value,device){
   if(parseFloat(device['Data'])>30){
      $('div.block_6649_1').addClass('warning');
   }
   else if (parseFloat(device['Data'])<5){
      $('div.block_6649_1').addClass('warningblue');
   }
   else {
      $('div.block_6649_1').removeClass('warning');
      $('div.block_6649_1').removeClass('warningblue');
   }
}

// SENSOREN

//Voordeur
function getStatus_8380(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8380]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8380]['icon'] = 'fa fa-lock'}
}
//Balkondeur
function getStatus_8385(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8385]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8385]['icon'] = 'fa fa-lock'}
}
//Keukenraam
function getStatus_8382(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8382]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8382]['icon'] = 'fa fa-lock'}
}
//Slaapkamer gallerij
function getStatus_8391(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8391]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8391]['icon'] = 'fa fa-lock'}
}
//Slaapkamer balkon
function getStatus_8389(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8389]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8389]['icon'] = 'fa fa-lock'}
}
//Woonkamer raam
function getStatus_8387(idx,value,device){
   if(device['Status']=='Open') { 
	blocks[8387]['icon'] = 'fa fa-unlock'}
   else { 
	blocks[8387]['icon'] = 'fa fa-lock'}
}

//VERLICHTING

//Woonkamer spot
function getStatus_8409(idx,value,device){
   if(device['Status']=='On') { 
	blocks[8409]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[8409]['icon'] = 'fa fa-toggle-off'}
}
//Eettafel
function getStatus_8322(idx,value,device){
   if(device['Status']=='On') { 
	blocks[8322]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[8322]['icon'] = 'fa fa-toggle-off'}
}
//Studeerkamer
function getStatus_8330(idx,value,device){
   if(device['Status']=='On') { 
	blocks[8330]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[8330]['icon'] = 'fa fa-toggle-off'}
}
//Pallet
function getStatus_83(idx,value,device){
   if(device['Status']=='On') { 
	blocks[83]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[83]['icon'] = 'fa fa-toggle-off'}
}
//Kastverlichting
function getStatus_82(idx,value,device){
   if(device['Status']=='On') { 
	blocks[82]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[82]['icon'] = 'fa fa-toggle-off'}
}
//Bol
function getStatus_6576(idx,value,device){
   if(device['Status']=='On') { 
	blocks[6576]['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks[6576]['icon'] = 'fa fa-toggle-off'}
}
//Alles uit
function getStatus_s3(idx,value,device){
   if(device['Status']=='On') { 
	blocks['s3']['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks['s3']['icon'] = 'fa fa-toggle-off'}
}
//TV kijken
function getStatus_s2(idx,value,device){
   if(device['Status']=='On') { 
	blocks['s2']['icon'] = 'fa fa-toggle-on'}
   else { 
	blocks['s2']['icon'] = 'fa fa-toggle-off'}
}
//VERBRUIK

//Koelkast
function getStatus_8396_1(idx,value,device){
   if(parseFloat(device['Usage'])>0){
      $('div.block_8396_1.col-xs-4').addClass('verbruik');
   }
   else {
   }
}
//Wasmachine
function getStatus_8398_1(idx,value,device){
   if(parseFloat(device['Usage'])>0){
      $('div.block_8398_1.col-xs-4').addClass('verbruik');
   }
   else {
   }
}
//Vaatwasser
function getStatus_8394_1(idx,value,device){
   if(parseFloat(device['Usage'])>0){
      $('div.block_8394_1.col-xs-4').addClass('verbruik');
   }
   else {
   }
}
User avatar
HansieNL
Posts: 964
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by HansieNL »

With the block parameter icon: Defines alternative icon of the device instead of the default, choose from: https://fontawesome.com/icons?d=gallery&m=free
You can change icon colors of a Domoticz switch via CSS.
You can find full description in the manual: https://dashticz.readthedocs.io/
Blah blah blah
garethiowc
Posts: 28
Joined: Sunday 03 December 2017 23:02
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by garethiowc »

HansieNL wrote: Sunday 26 January 2020 17:59 With the block parameter icon: Defines alternative icon of the device instead of the default, choose from: https://fontawesome.com/icons?d=gallery&m=free
You can change icon colors of a Domoticz switch via CSS.
You can find full description in the manual: https://dashticz.readthedocs.io/
Cool Thanks.

blocks[35] = {};
blocks[35]['title'] = 'Router';
blocks[35]['show_lastupdate'] = false;
blocks[35]['width'] = 4
blocks[35]['hide_data'] = true
blocks[35]['icon'] = 'fa-circle'

I've managed to adjust the block I wanted but when using 'fa-circle' I'm left with a very small square icon. I'm assuming this means there's an error in my code
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

garethiowc wrote: Sunday 26 January 2020 21:30
HansieNL wrote: Sunday 26 January 2020 17:59 With the block parameter icon: Defines alternative icon of the device instead of the default, choose from: https://fontawesome.com/icons?d=gallery&m=free
You can change icon colors of a Domoticz switch via CSS.
You can find full description in the manual: https://dashticz.readthedocs.io/
Cool Thanks.

blocks[35] = {};
blocks[35]['title'] = 'Router';
blocks[35]['show_lastupdate'] = false;
blocks[35]['width'] = 4
blocks[35]['hide_data'] = true
blocks[35]['icon'] = 'fa-circle'

I've managed to adjust the block I wanted but when using 'fa-circle' I'm left with a very small square icon. I'm assuming this means there's an error in my code
You have to put 'far' (for a regular icon) or 'fas' (for a solid icon) in front of fa-circle. For instance:
'far fa-circle'
garethiowc
Posts: 28
Joined: Sunday 03 December 2017 23:02
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by garethiowc »

Lokonli wrote: Sunday 26 January 2020 21:57
garethiowc wrote: Sunday 26 January 2020 21:30
HansieNL wrote: Sunday 26 January 2020 17:59 With the block parameter icon: Defines alternative icon of the device instead of the default, choose from: https://fontawesome.com/icons?d=gallery&m=free
You can change icon colors of a Domoticz switch via CSS.
You can find full description in the manual: https://dashticz.readthedocs.io/
Cool Thanks.

blocks[35] = {};
blocks[35]['title'] = 'Router';
blocks[35]['show_lastupdate'] = false;
blocks[35]['width'] = 4
blocks[35]['hide_data'] = true
blocks[35]['icon'] = 'fa-circle'

I've managed to adjust the block I wanted but when using 'fa-circle' I'm left with a very small square icon. I'm assuming this means there's an error in my code
You have to put 'far' (for a regular icon) or 'fas' (for a solid icon) in front of fa-circle. For instance:
'far fa-circle'
Awesome thanks :)

Next i will attempt changing the colour
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

garethiowc wrote: Monday 27 January 2020 12:53
Lokonli wrote: Sunday 26 January 2020 21:57
garethiowc wrote: Sunday 26 January 2020 21:30

Cool Thanks.

blocks[35] = {};
blocks[35]['title'] = 'Router';
blocks[35]['show_lastupdate'] = false;
blocks[35]['width'] = 4
blocks[35]['hide_data'] = true
blocks[35]['icon'] = 'fa-circle'

I've managed to adjust the block I wanted but when using 'fa-circle' I'm left with a very small square icon. I'm assuming this means there's an error in my code
You have to put 'far' (for a regular icon) or 'fas' (for a solid icon) in front of fa-circle. For instance:
'far fa-circle'
Awesome thanks :)

Next i will attempt changing the colour
Check:
https://dashticz.readthedocs.io/en/mast ... omcss.html

and:
https://dashticz.readthedocs.io/en/mast ... ynamically
garethiowc
Posts: 28
Joined: Sunday 03 December 2017 23:02
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by garethiowc »

Things have been going well -
dashticz.png
dashticz.png (181.69 KiB) Viewed 3205 times
I've managed to get the last seen update hidden on everything other than a few temperature sensors.

So as you can see in the image, last seen is hidden on the block 2 but none of the other temp sensors

/*Temperature Blocks*/

blocks[2] = {};
blocks[2]['last_update'] = false;
blocks[2]['width'] = 4
blocks[2]['hide_data'] = true

blocks[10] = {};
blocks[10]['last_update'] = false;
blocks[10]['width'] = 4
blocks[10]['hide_data'] = true

blocks[13] = {};
blocks[13]['last_update'] = false;
blocks[13]['width'] = 4
blocks[13]['hide_data'] = true

blocks[27] = {};
blocks[27]['last_update'] = false;
blocks[27]['width'] = 4
blocks[27]['hide_data'] = true

blocks[15] = {};
blocks[15]['last_update'] = false;
blocks[15]['width'] = 4
blocks[15]['hide_data'] = true

any ideas?

Thanks :)
Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 1 guest