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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Ectholian
Posts: 16
Joined: Thursday 26 April 2018 15:27
Target OS: Linux
Domoticz version:
Contact:

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

Post by Ectholian »

damdub wrote: Wednesday 04 May 2022 23:51 Hello All,
does anyone know if it could be possible to have a New Calendar block with fixed height (some events will not be displayed) and give the possibility to scroll inside the block to display hidden events ?
Could be a nice feature to have the calendar block always fixed size and scrolling ability if too many events to fit inside the block height.
Your opinion ?
Thank you
Just with some custom css. Change the number 22 to the actual number of your calendar block. And place this in the custom.css file.

Only scroll the appointments (so the title/icon stay fixed):

Code: Select all

.block_22 .agenda {
    height: 100px;
    overflow: auto;
}
Scroll everything including icon/title:

Code: Select all

.block_22 {
    height: 100px;
    overflow: auto;
}
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 »

cduijker wrote: Friday 21 January 2022 13:45 My dashticz dashboard showing on a touchscreen display in my hallway. I use it as an alarm control panel and it shows some information about weather, traffic and latest news on my way out. So I can grab an umbrella or take the bike instead of the car :)

I also installed an RFID reader in the wall sockets below the screen to disengage the alarm system with an NFC tag.
The screen is switched on when the PIR sensor (high on the wall in the corner) detects motion or when the front door is opened. It switches off after 30 seconds when there is no more motion detected.


IMG_8150.jpg

IMG_8149.jpg

Screenshot 2022-01-21 133544.jpg
very nice!
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
Ectholian
Posts: 16
Joined: Thursday 26 April 2018 15:27
Target OS: Linux
Domoticz version:
Contact:

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

Post by Ectholian »

Does anybody know a way to refresh the new Calendar block? I don't want to refresh the whole page all the time, but I do want to refresh the calendarblock so I can see my next upcoming event on the dayplanning.
Lokonli
Posts: 2271
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 »

Ectholian wrote: Friday 26 August 2022 10:02 Does anybody know a way to refresh the new Calendar block? I don't want to refresh the whole page all the time, but I do want to refresh the calendarblock so I can see my next upcoming event on the dayplanning.
You can set the refresh parameter:

Code: Select all

refresh: 60,
But I think it shows the events of the full day.
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

Ectholian wrote: Friday 26 August 2022 8:07
damdub wrote: Wednesday 04 May 2022 23:51 Hello All,
does anyone know if it could be possible to have a New Calendar block with fixed height (some events will not be displayed) and give the possibility to scroll inside the block to display hidden events ?
Could be a nice feature to have the calendar block always fixed size and scrolling ability if too many events to fit inside the block height.
Your opinion ?
Thank you
Just with some custom css. Change the number 22 to the actual number of your calendar block. And place this in the custom.css file.

Only scroll the appointments (so the title/icon stay fixed):

Code: Select all

.block_22 .agenda {
    height: 100px;
    overflow: auto;
}
Scroll everything including icon/title:

Code: Select all

.block_22 {
    height: 100px;
    overflow: auto;
}
Thank you very much for your help. That was exactly what I needed.
Welsyntoffie
Posts: 31
Joined: Tuesday 03 November 2020 10:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Welsyntoffie »

Used some color from the background as the block color
Screenshot_20230123-185842.jpg
Screenshot_20230123-185842.jpg (199.61 KiB) Viewed 2476 times
Screenshot_20230123-190423.jpg
Screenshot_20230123-190423.jpg (177.59 KiB) Viewed 2476 times
Screenshot_20230123-190429.jpg
Screenshot_20230123-190429.jpg (217.95 KiB) Viewed 2476 times
Custom js file

Code: Select all

var config = {}
config['language'] = 'en_US'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SE
config['domoticz_ip'] = 'http://***:8081';
//config['app_title'] = 'Dashticz V3';
config['domoticz_refresh'] = '10';
config['dashticz_refresh'] = '60';
config['auto_swipe_back_after'] = '120';
config['auto_swipe_back_to'] = '1';
config['standard_graph'] = 'MONTH';
config['security_panel_lock'] = '1';
config['hide_topbar'] = '1';
config['static_weathericons'] = '0';
config['standby_after'] = 5;  //Enter standby mode after 5 minutes

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock' ,'weather']  //specify blocks for the standby mode
columns_standby[1]['width'] = 12;

var buttons = {}
buttons.page1 = { width:12, title:'Main', slide:1}
buttons.page2 = { width:12, title:'Security', slide:2}
buttons.page3 = { width:12, title:'Weather', slide:3}
buttons.page4 = { width:12, title:'Calendar', slide:4}


//Definition of blocks
blocks = {}
blocks['weather'] = {
  type: 'weather',
  apikey: 'apikey',
  city: 'mycity',
  layout: 0,
  count: 5,
  interval: 6,
  country: 'country',
  lang: 'us',
  icons: 'fill',
  showMin: 'true',
}

blocks['TFT_Color'] = {
    idx: 82,
    type: 'dial',
    title: true,
    width:6,
}

blocks['my_calendar'] = {
        type: 'calendar',
        maxitems: 5,
        layout: 2,
        url: 'https://mycal',
        icalurl: 'https://myca.ics',
        holidayurl: 'https://myca.ics',
        weeks: 5,
        lastweek: true,
        isoweek: true,
        width: 12
}

blocks['blocktitle_lights'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Lights',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_temps'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Temperatures & Utility',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_zones'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Zones',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_disabled'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Disabled',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_autoswitch'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Auto Switches',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_radio'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Radio',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}
blocks['blocktitle_battery'] = {  //'blocktitle_1' must be an unique name
  type: 'blocktitle',       //Set type to 'blocktitle' (required for block title)
  title: 'Battery',        //The title of the block as shown in the dashboard.
  addClass: 'backcolor_heading',
  width: 12,                 //The width of the block relative to the column width
}


blocks['moon'] = {
  width: 12
}

blocks[1] = {
	title: 'Occupied',
	last_update : false,
	addClass: 'backcolor',
  width: 6
}
blocks[2] = {
	title: 'PC Room Light',
	last_update : false,
  width: 12
}

blocks[29] = {
	title: 'E-light',
	last_update : false,
	width: 4,
  // Emergency light
}

blocks[4] = {
	title: 'Driveway',
	last_update : false,
	width: 4,
  // Driveway Light
}
blocks[5] = {
	title: 'Front',
	last_update : false,
  width: 4
  //Front Light
}
blocks[80] = {
	title: 'Garage Side',
	last_update : false,
	width: 4,
  //Garage Side Light
}
blocks[7] = {
	title: 'Panel Fan',
	last_update : false,
	imageOn: 'Ceilingfan48_On.png',
	imageOff: 'Ceilingfan48_Off.png',
	addClass: 'backcolor',
  width: 12
}
blocks[8] = {
	title: 'Panel fan',
	last_update : false,
//	imageOn: 'Z_btn48_On.png',
//	imageOff: 'Z_btn48_Off.png',
//	addClass: 'backcolor',
	type: 'dial',
	color: 'rgba(255,128,0,0.7)',
  width: 3
}
blocks[10] = {
	title: 'TV Room',
	last_update : false,
	addClass: 'backcolor',
  width: 6
}
blocks[65] = {
	title: 'PC Room',
	last_update : false,
	addClass: 'backcolor',
  width: 6
}
blocks[11] = {
	title: 'Kitchen Door',
	last_update : false,
  width: 6
}
blocks[12] = {
	title: 'PC room windows',
	last_update : false,
	imageOn: 'Z_btn48_On.png',
	imageOff: 'Z_btn48_Off.png',
	addClass: 'backcolor',
  width: 12
}
blocks[21] = {
	title: 'Kitchen door',
	last_update : false,
	imageOn: 'Z_btn48_On.png',
	imageOff: 'Z_btn48_Off.png',
	addClass: 'backcolor',
  width: 12
}
blocks[23] = {
	title: 'TV room PIR',
	last_update : false,
	imageOn: 'Z_btn48_On.png',
	imageOff: 'Z_btn48_Off.png',
	addClass: 'backcolor',
  width: 12
}
blocks[28] = {
	title: 'E light',
	last_update : false,
//	imageOn: 'Z_btn48_On.png',
//	imageOff: 'Z_btn48_Off.png',
//	addClass: 'backcolor',
	type: 'dial',
	color: 'rgba(255,128,0,0.7)',
  width: 3
}
blocks[30] = {
	title: 'PC room Windows',
	last_update : false,
  width: 6
}
blocks[44] = {
	title: 'Battery V',
	last_update : false,
	image: 'dc_voltage1.png',
	addClass: 'backcolor',
  width: 4
}
blocks[46] = {
	title: 'Light level',
	last_update : false,
	image: 'brightness.png',
	addClass: 'backcolor',
	width: 4,
}
blocks[48] = {
	title: 'Dyllan Room',
	last_update : false,     //if you want to show the last update specific for this block
	width: 3,
	addClass: 'backcolor',
  //Dyllan Room Temp
}

blocks[52] = {
	title: 'Panel fan speed',
	last_update : false,     //if you want to show the last update specific for this block
	width: 5,
	image: 'fan.png',
	addClass: 'backcolor',
  //Panel fan speed
}

blocks[49] = {
	title: 'PC Room',
	last_update : false,     //if you want to show the last update specific for this block
	width: 3,
	addClass: 'backcolor',
  //PC Room Temp
}
blocks[50] = {
	title: 'Outside',
	last_update : false,     //if you want to show the last update specific for this block
	width: 3,
	addClass: 'backcolor',
  //Outside Temp
}
blocks[51] = {
	title: 'Pi',
	last_update : false,     //if you want to show the last update specific for this block
	width: 3,
	addClass: 'backcolor',
   //Pi Temp
}
blocks[61] = { 				/*Using a function*/
	title: 'Water Pressure',
	last_update : false,     //if you want to show the last update specific for this block
	image: 'Bargauge.png',
	width: 3,
}
blocks[64] = {
	title: 'PC Room',
	last_update : false,     //if you want to show the last update specific for this block
	imageOn: 'Z_btn48_On.png',
	imageOff: 'Z_btn48_Off.png',
	//addClass: 'backcolor',
	type: 'dial',
	color: 'rgba(255,128,0,0.7)',
	width: 3,
  //PC Room Light Auto
}
blocks[60] = {
	title: 'Battery mA',
	last_update : false,     //if you want to show the last update specific for this block
	image: 'dc_current1.png',
	addClass: 'backcolor',
	width: 4,
}

blocks[94] = {
	title: 'Store State',
	last_update : false,
	imageOn: 'Z_btn48_On.png',
	imageOff: 'Z_btn48_Off.png',
  width: 12
}

//blocks[102] = {
//	title: 'PC Room',
//	last_update : false,
//  width: 6
//}

function getStatus_51(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>50){
      block.addClass='warning';
   }
   else {
      block.addClass='';
   }
}

function deviceHook(device) {
  if (device.idx==82) {
    var level=parseInt(device.Level);
    device.deviceStatus='level'+level
  }
}

function getStatus_61(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])<2){
      block.addClass='warningred';
   }
   else {
      block.addClass='backcolor';
   }
}
/* Background color change based on Switch Status*/
function getStatus_2(block){
   if(Domoticz.getAllDevices()[2].Data != 'Off'){
      block.addClass='Onswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_4(block){
   if(Domoticz.getAllDevices()[4].Data == 'On'){
      block.addClass='Onswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_29(block){
   if(Domoticz.getAllDevices()[29].Data == 'On'){
      block.addClass='Onswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_5(block){
   if(Domoticz.getAllDevices()[5].Data == 'On'){
      block.addClass='Onswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_80(block){
   if(Domoticz.getAllDevices()[80].Data == 'On'){
      block.addClass='Onswitch';
   }
   else {
      block.addClass='backcolor';
   }
}

function getStatus_1(block){
   if(Domoticz.getAllDevices()[1].Data == 'On'){
      block.addClass='Offswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_10(block){
   if(Domoticz.getAllDevices()[10].Data == 'On'){
      block.addClass='Offswitch';
   }
   else {
      block.addClass='backcolor';
   }
}
function getStatus_65(block){
   if(Domoticz.getAllDevices()[65].Data == 'On'){
      block.addClass='Offswitch';
   }
   else {
      block.addClass='backcolor';
   }
}


function getStatus_11(block){
   if(Domoticz.getAllDevices()[11].Data == 'Open'){
      block.addClass='Offswitch';
   }
   else {
      block.addClass='backcolor';
   }
}

function getStatus_30(block){
   if(Domoticz.getAllDevices()[30].Data == 'Open'){
      block.addClass='Offswitch';
   }
   else {
      block.addClass='backcolor';
   }
}

/*
function getStatus_51(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>50){
      block.addClass='warning';
   }
   else {
      block.addClass='';
   }
}
*/
function getStatus_44(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])<12){
      block.addClass='warning';
   }
   else {
      block.addClass='backcolor';
   }
}

function getStatus_51(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>=44 && parseFloat(device['Data'])<=46 ){
      $('.block_51 .col-icon').addClass('warningorange');
   }
    if(parseFloat(device['Data'])<44){
      $('.block_51 .col-icon').addClass('warninggreen');
   }
   if(parseFloat(device['Data'])>46){
      $('.block_51 .col-icon').addClass('warningred');
   }
}
function getStatus_49(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>=29 && parseFloat(device['Data'])<=35 ){
      $('.block_49 .col-icon').addClass('warningorange');
   }
    if(parseFloat(device['Data'])<29){
      $('.block_49 .col-icon').addClass('warninggreen');
   }
   if(parseFloat(device['Data'])>35){
      $('.block_49 .col-icon').addClass('warningred');
   }
}
function getStatus_50(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>=29 && parseFloat(device['Data'])<=35 ){
      $('.block_50 .col-icon').addClass('warningorange');
   }
    if(parseFloat(device['Data'])<29){
      $('.block_50 .col-icon').addClass('warninggreen');
   }
   if(parseFloat(device['Data'])>35){
      $('.block_50 .col-icon').addClass('warningred');
   }
}
function getStatus_48(block){
var idx = block.idx;
var device = block.device;
   if(parseFloat(device['Data'])>=29 && parseFloat(device['Data'])<=35 ){
      $('.block_48 .col-icon').addClass('warningorange');
   }
    if(parseFloat(device['Data'])<29){
      $('.block_48 .col-icon').addClass('warninggreen');
   }
   if(parseFloat(device['Data'])>35){
      $('.block_48 .col-icon').addClass('warningred');
   }
}



/*function afterGetDevices(){
	 if ((alldevices[51].Temp>=44) && (alldevices[51].Temp<46)) {
		$('.block_51 .col-icon').addClass('warningorange');
	 }	
	 if (alldevices[51].Temp<43) {
		$('.block_51 .col-icon').addClass('warninggreen');
	 }	
	if (alldevices[51].Temp>=47) {
		$('.block_51 .col-icon').addClass('warningred');
	 }
}*/


//function getStatus_102(block){
//var idx = block.idx;
//var device = block.device;
//   if(parseFloat(device['Data'])==1){
//      block.addClass='warning';
//   }
//   else {
//      block.addClass='';
//   }
//}


//Definition of columns
columns = {}
columns[1] = {
  blocks : [buttons.page1, buttons.page2, buttons.page3, buttons.page4],
  width: 1
}
columns[2] = {
  blocks : ['blocktitle_lights', 2, 5, 4,80, 29, 7,'blocktitle_autoswitch',64, 28, 8],
  width: 4
}
columns[3] = {
  blocks : ['blocktitle_temps', 50, 49, 48, 51,61, 46, 52, 'blocktitle_radio', 'streamplayer','blocktitle_battery', 44, 60],
  width: 5
}
columns[4] = {
  blocks : ['sunrise' ,'stationclock', 'moon'],
  width: 2
}
columns[5] = {
  blocks : [buttons.page1, buttons.page2, buttons.page3, buttons.page4],
  width: 1
}
columns[6] = {
  blocks : ['blocktitle_zones', 1, 10, 65, 11, 30, 'TFT_Color'],
  width: 3
}
columns[7] = {
  blocks : ['secpanel'],
  width: 6
}
columns[8] = {
  blocks : ['blocktitle_disabled', 21, 12, 23, 94],
  width: 2
}
columns[9] = {
  blocks : [buttons.page1, buttons.page2, buttons.page3, buttons.page4],
  width: 1
}
columns[10] = {
  blocks : ['weather'],
  width: 11
}
columns[11] = {
  blocks : ['my_calendar'],
  width: 12
}


//Definition of screens
screens = {}
screens[1] = {
  columns: [1, 2, 3, 4]
}
screens[2] = {
  columns: [5, 6, 7, 8]
}
screens[3] = {
  columns: [9, 10]
}

var screens = {}
screens[1] = {}
screens[1]['background'] = 'wall1.jpg';
/*screens[1]['background_morning'] = 'bg16.jpg';
screens[1]['background_noon'] = 'bg16.jpg';
screens[1]['background_afternoon'] = 'bg16.jpg';
screens[1]['background_night'] = 'bg16.jpg';*/
screens[1]['columns'] = [1,2,3,4]

screens[2] = {}
screens[2]['background'] = 'wall1.jpg';
/*screens[2]['background_morning'] = 'bg4.jpg';
screens[2]['background_noon'] = 'bg4.jpg';
screens[2]['background_afternoon'] = 'bg4.jpg';
screens[2]['background_night'] = 'bg4.jpg';*/
screens[2]['columns'] = [5,6,7,8]

screens[3] = {}
screens[3]['background'] = 'wall1.jpg';
/*screens[3]['background_morning'] = 'bg4.jpg';
screens[3]['background_noon'] = 'bg4.jpg';
screens[3]['background_afternoon'] = 'bg4.jpg';
screens[3]['background_night'] = 'bg4.jpg';*/
screens[3]['columns'] = [9,10]

screens[4] = {}
screens[4]['background'] = 'bg4.jpg';
/*screens[4]['background_morning'] = 'bg4.jpg';
screens[4]['background_noon'] = 'bg4.jpg';
screens[4]['background_afternoon'] = 'bg4.jpg';
screens[4]['background_night'] = 'bg4.jpg';*/
screens[4]['columns'] = [11]

var _STREAMPLAYER_TRACKS     = [
	{"track":1,"name":"Pulse EDM","file":"http://naxos.cdnstream.com/1373_128"},
	{"track":2,"name":"Jacaranda","file":"https://live.jacarandafm.com/jacarandahigh.mp3"},
	{"track":3,"name":"94.7","file":"https://25443.live.streamtheworld.com/FM947_SC"},
	{"track":4,"name":"5FM","file":"http://22653.live.streamtheworld.com/5FMAAC.aac"},
	{"track":5,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
	{"track":6,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
	{"track":7,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},
];

Custom css file

Code: Select all

[data-id='TFT_Color'] .dial-menu li:nth-child(1){
    display: none;
}

.block_sunrise {
   font-size:20px !important;
   background: rgba(0,0,0,0.6) !important;
}

div[class*='block_'] {
  height: 65px !important;
}

.blocktitle .dt_title {
    font-size: 30px;
    color: white;
}
.blocktitle {								/* Block Titles*/
    height: 65px !important;                /* default height=75px */
    padding-top: 3px !important;                    /* center text for new height */
}

.backcolor {
   background: rgba(0,0,0,0.6) !important;
    background-clip: padding-box !important;
}

.backcolor_heading {
   background: rgba(0,0,0,0.6) !important;
    background-clip: padding-box !important;
    text-align: center;
}

.backcolor_theme {
   background: rgba(255,125,0,0.3) !important;
    background-clip: padding-box !important;
    text-align: center;
}

.transbg[class*="col-xs"] {
  border: 2px solid rgba(255,255,255,0);            /* border: 7px -> 3px - Smaller space between blocks */
}

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

.far,.fas,.wi {
   font-size:35px !important;        /* All icons larger */
}
/*
.block_60 {
   font-size:15px !important;
   color:white !important;			/* Change font size of this block */
}



*/
.screenstandby {
    background-color: black !important
}

.swiper-pagination-bullet {
    display: none !important
}


div[data-id='streamplayer'].playing > div {
background-color: rgba(255,128,0,0.7) !important;
background-clip: padding-box !important;
}
div[data-id='streamplayer'] > div {
background-color: rgba(0,0,0,0.6) !important;;
}

.warningred {
  color: red !important;
}
.warningorange {
  color: orange !important;
}
.warninggreen {
  color: green !important;
}

/*.block_buttons {
  height: 500px !important;
}*/

.warning {
   background: rgba(200,0,0,0.4) !important;
    background-clip: padding-box !important;
}

/*ring color*/
.level10 .dial-center {
  box-shadow: 0 0 10px 1px green !important;
}

/*selected item color*/
.level10 .status {
  --dial-color: green !important
}

/*ring color*/
.level20 .dial-center {
  box-shadow: 0 0 10px 1px red !important;
}

/*selected item color*/
.level20 .status {
  --dial-color: red !important
}

/*ring color*/
.level30 .dial-center {
  box-shadow: 0 0 10px 1px yellow !important;
}

/*selected item color*/
.level30 .status {
  --dial-color: yellow !important
}

/*ring color*/
.level40 .dial-center {
  box-shadow: 0 0 10px 1px white !important;
}

/*selected item color*/
.level40 .status {
  --dial-color: white !important
}

.Onswitch {
	background: rgba(255,128,0,0.7) !important;
	background-clip: padding-box !important;
}

.Offswitch {
	background: rgba(200,0,0,0.6) !important;
	background-clip: padding-box !important;
}

vanenkelen
Posts: 5
Joined: Sunday 19 June 2022 16:28
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by vanenkelen »

cduijker wrote: Friday 21 January 2022 13:45 My dashticz dashboard showing on a touchscreen display in my hallway. I use it as an alarm control panel and it shows some information about weather, traffic and latest news on my way out. So I can grab an umbrella or take the bike instead of the car :)
Hi, nice touch with the light transparent buttons over the dark background. How did you manage that? I'm only getting dark tranparent buttons or solid coloured buttons. I really like your style.
TroisSix
Posts: 91
Joined: Monday 11 January 2016 9:29
Target OS: -
Domoticz version: 2022.2
Location: France
Contact:

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

Post by TroisSix »

Hi,
Do you know if it's possible to modify the last_update format of a single block and not all blocks?
I am searching to do this with a hack in custom.js, for now I can only display/hide a last_update field, but I cannot modify its date's format.

The only thing I can do for now is this:

Code: Select all

var lastUpdate = moment(Domoticz.getAllDevices()[4062]['LastUpdate']);
var yesterday = moment().add('days', -1);
if (lastUpdate ==yesterday )   Dashticz.setBlock('Summary', { last_update: false }); // means I don't display the last_update's field if the data is from yesterday
else if (lastUpdate <yesterday )   Dashticz.setBlock('Summary', { textOff: "(" + device['Data'] + ")",last_update: false }); // means if the info is older than yesterday, I don't display the last_update's field and I add brackets to the data , but I would prefer the date to be displayed with dateFormat: 'DD.MM'
PS: By default, the date is formatted like HH:mm, it suits for today.

Thank you for your help ^^
VM Debian - Domoticz stable v2023.1, RFXtrx433, Aeotec Z-Stick Gen5, APC ES700
- rts: dio, oregon, somfy
- zwave: fibaro fgs212, aeotec smart switch, vision ZG8101
- IO Homecontrol: Velux Connexoon
- logitech harmony hub, philips hue, gps Pilot
vanenkelen
Posts: 5
Joined: Sunday 19 June 2022 16:28
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by vanenkelen »

Can someone take a look at my Dashticz dashboard? I am almost satisfied, except for one point.

I would like to show a gray border around the rainfall radar, just like the gray border around the google maps block. But I can't get it done, any advice?

Or if that doesn't work, possibly the other way around, the google maps also without a gray border.

See below how it looks now and the pieces of code in the config.js I'm using.
Schermafbeelding 2023-02-18 153457.jpg
Schermafbeelding 2023-02-18 153457.jpg (305.46 KiB) Viewed 2276 times
The code I'm using for this block/frame is:

Code: Select all

blocks['buien'] = {
  frameurl: 'https://gadgets.buienradar.nl/gadget/zoommap/?lat=51.67667&lng=4.79306&overname=2&zoom=8&naam=made&size=3&voor=1',
  scrollbars: false,
  width:12,
  aspectratio: 0.66
}
var maps = {}
maps.location = { 
  height: 300, 
  width: 12, 
  latitude: 52.0356824, 
  longitude: 4.718503, 
  zoom: 9
}
columns[6] = {
  blocks : ['blocktitle_14', 'buien', maps.location],
  width: 4
}
I already played with "width" of the 'buien' block and with the size of the buienradar image. That doesn't help me a lot:


Adjusted width to 11:
Schermafbeelding 2023-02-18 154846.jpg
Schermafbeelding 2023-02-18 154846.jpg (163.74 KiB) Viewed 2276 times

Adjusted size of buienradar image:
Schermafbeelding 2023-02-18 155528.jpg
Schermafbeelding 2023-02-18 155528.jpg (162.22 KiB) Viewed 2276 times
Anyone knows if and how to fix this?
NilsNijenhuis
Posts: 81
Joined: Friday 10 July 2020 22:56
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by NilsNijenhuis »

I think that you have to solve this in the custom.css file

right klink on the object -> inspecteren (in netherlands) and find the right object
use the next line to give the border a color of your desire. (change the 255 to any number between 0 and 255)

Code: Select all

border: 1px solid rgba(255,255,255,0);
for example, 1 of the things i use is:

Code: Select all

/* Change spacing between borders, background and rounded corners */
.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: 1px solid rgba(255,255,255,0);    /* spacing between borders 7px */
  	background: rgba(0,0,0, 0.4);                 /* transparancy of 0.4 (larger is darker) */
  	background-clip: padding-box;
  	border-radius: 1px;                                /* rounded corners */ 
}
}
Attachments
dashticz.jpg
dashticz.jpg (363.3 KiB) Viewed 2185 times
vanenkelen
Posts: 5
Joined: Sunday 19 June 2022 16:28
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by vanenkelen »

NilsNijenhuis wrote: Thursday 09 March 2023 15:24 I think that you have to solve this in the custom.css file

right klink on the object -> inspecteren (in netherlands) and find the right object
use the next line to give the border a color of your desire. (change the 255 to any number between 0 and 255)

Code: Select all

border: 1px solid rgba(255,255,255,0);
for example, 1 of the things i use is:

Code: Select all

/* Change spacing between borders, background and rounded corners */
.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: 1px solid rgba(255,255,255,0);    /* spacing between borders 7px */
  	background: rgba(0,0,0, 0.4);                 /* transparancy of 0.4 (larger is darker) */
  	background-clip: padding-box;
  	border-radius: 1px;                                /* rounded corners */ 
}
}
Thanks, have been playing around with border and padding, but still no success. Things are changing, but not really what I want. I'll try a little more and keep you informed.
ssk17051980
Posts: 112
Joined: Thursday 08 December 2022 22:15
Target OS: Raspberry Pi / ODroid
Domoticz version: 2023.2
Location: ROMANIA
Contact:

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

Post by ssk17051980 »

Hello,
what sensor do you use to monitor the water pressure

i have the sensor from foto, but i do not know the next step =)))
Attachments
1601057888859-druck2.jpg
1601057888859-druck2.jpg (40.93 KiB) Viewed 2106 times
NilsNijenhuis
Posts: 81
Joined: Friday 10 July 2020 22:56
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

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

Post by NilsNijenhuis »

Attachments
watermeter.jpg
watermeter.jpg (169.78 KiB) Viewed 2047 times
sieth
Posts: 33
Joined: Wednesday 15 November 2017 19:40
Target OS: Linux
Domoticz version: 2020.2
Location: Belgium
Contact:

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

Post by sieth »

I made a wooden frame and embedded a power supply in the wall.
IMG20230317171529-02.jpeg
IMG20230317171529-02.jpeg (40.18 KiB) Viewed 2037 times
IMG20230317171317-01.jpeg
IMG20230317171317-01.jpeg (48.43 KiB) Viewed 2037 times
User avatar
Sjonnie2017
Posts: 363
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 »

Thanks for getting us back on track! And looking good! :)

Watersensors issues should be dealt with in a seperate topic ;)
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
Welsyntoffie
Posts: 31
Joined: Tuesday 03 November 2020 10:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Welsyntoffie »

Added my hot water heater via a D1 mini.
Also made my dashboard less with no wall paper and added placeholder blocks.
fully-screenshot.png
fully-screenshot.png (204.46 KiB) Viewed 2000 times
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 »

That sure looks nice.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
ruwo
Posts: 3
Joined: Tuesday 03 September 2019 18:38
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by ruwo »

I am referring to an old post, but I can't find any newer post on how to integrate Sonos status information in Dashticz. Below JeroenL says he uses Domoticz variables for this. Can anyone explain this in more detail?

Thanks in advance,

ruwo

JeroenL wrote: Friday 31 January 2020 16:23 Having Sonos largely integrated into Dashtiz (see below), the last fun part is still missing: AlbumArt

I have the (dynamic) URL to the current AlbumArt in a Domoticz variable (As I have for album, artist and title). Does anyone have an ideas how I can get this variable from Domoticz into my frames block, something like:

url : sonos_albumart

Also I noticed the images vary in size, do they need to get scaled somehow to be placed properly into a frame?

Thanks - Jeroen



Verzonden vanaf mijn iPad met Tapatalk

Edit: I already found it. Apparently I had difficulties in interpreting the instructions for putting data in variables via LUA. Thus: solved
nfuse
Posts: 32
Joined: Thursday 26 March 2020 11:37
Target OS: -
Domoticz version:
Contact:

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

Post by nfuse »

to keep this topic alive my latest dashboard it need some tuning but i'am really happy with it everything in one page has still my preference.

Image

build in 15.6" touchscreen

Image

config.js

Code: Select all

var config = {}
config['domoticz_ip'] = '';
config['login_timeout'] = '0';
config['user_name'] = '';
config['pass_word'] = '';
// config['security_panel_lock'] = 1;
config['app_title'] = '';
config['room_plan'] = '0';
config['domoticz_refresh'] = '1';
config['dashticz_refresh'] = '60';
// config['default_cors_url'] = '';
config['dashticz_php_path'] = './vendor/dashticz/';
// config['standby_call_url'] = '';
// config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
config['background_image'] = 'img/background.jpg';
config['standby_after'] = '0';
config['start_page'] = '1';
config['enable_swiper'] = '1';
config['vertical_scroll'] = '0';
config['horizontal_scroll'] = '0';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '60';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'fade';
config['standard_graph'] = 'day';
// config['blink_color'] = '255, 255, 255, 1';
config['spot_clientid'] = '';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['batteryThreshold'] = 0;
config['speak_lang'] = 'nl-NL';
config['google_api_key'] = '';
config['setpoint_min'] = '5';
config['setpoint_max'] = '40';
config['loginEnabled'] = 0;
config['disable_update_check'] = 1;
config['no_rgb'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['security_button_icons'] = 1;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['owm_api'] = '';
config['owm_city'] = '';
config['owm_name'] = 'Weer';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '5';
config['owm_days'] = true;
config['owm_min'] = 1; 
config['enable_websocket'] = 1
config['garbage_use_names'] = 1;
config['garbage_use_cors_prefix'] = 1;

config['garbage_mapping'] = {
    rest: ['grof', 'grey', 'rest', 'grijs','grijze'],
    gft: ['gft', 'tuin', 'refuse bin', 'green', 'groen', 'Biodégradables', 'snoei'],
    pmd: ['plastic', 'pmd', 'verpakking', 'kunststof', 'valorlux'],
    papier: ['papier', 'blauw', 'blue', 'recycling bin collection'],	
};

config['garbage'] = {
    gft: {kliko: 'green', code: '#FFFFFF', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
    pmd: {kliko: 'orange', code: '#FFFFFF', name: 'Plastic', icon: 'img/garbage/kliko_orange.png'},
    rest: {kliko: 'grey', code: '#FFFFFF', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
    papier: {kliko: 'blue', code: '#FFFFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
};

var max_resolution_desktop 		= 'default';
var max_resolution_smart  	  	= 'tablet';
var p1_elektra_nu				= '15_1';
var verbruikt					= '15_2';
var temp_serverruimte			= '53_1';
var vandaag_geleverd			= '15_5'; 
var grafiek_elektra				= '15';
var orcon_status				= '75';
var douche					= '77';
var eten						= '78';
var verbruik_server				= '81_1';
var verbruik_accu				= '753';
var temp_buiten				= '25';
var sonos_keuken				= '56';
var sonos_woonkamer			= '58';
var deurbel					= '71';
var temp_warmtepomp			= 'graph_92';
var temp_woonkamer			= '102';
var temp_boven				= '251';
var temp_server				= '131_1';
var temp_babykamer				= '123_1';	
var temp_badkamer				= '115_1';
var hum_woonkamer				= '107_2';
var hum_server					= '131_2';
var hum_badkamer				= '115_2';
var post						= '231';
var vloerpomp_beneden			= '196';
var vloerpomp_boven			= '140';
var ring_verwarming				= '205';
var beneden	   				= '391';
var beneden_stand				= '388';
var boven						= '215';
var boven_stand				= '212';
var hue_aanrecht				= '286';
var hue_woonkamer				= '70';
var hue_keuken_l				= '43';
var hue_keuken_r				= '35';
var hue_veranda				= '239';
var hue_overloop				= '142';
var hue_gang					= '149';
var hue_slaapkamer				= '9';
var zones						= '59';
var contact_voordeur			= '138';
var contact_schuur				= '187';
var contact_poort				= '226';
var contact_serre				= '147';
var contact_keukenraam			= '254';
var securitypanel				= '220';
var bui_komt_over				= '163';
var en_duurt					= '164';
var en_bestaat_uit				= '169';
var wind						= '158';
var zonnescherm				= '240';
var zonnescherm1				= '240';
var douche					= '383';
var blocks = {}


blocks
blocks[bui_komt_over] = {
	title: 'regen over',
	hide_data: false,
	hide_lastupdate: true,
	icon: 'fas fa-umbrella',
	width: 3
}

blocks[en_duurt] = {
	title: 'regen duur',
	hide_data: false,
	hide_lastupdate: true,
	icon: 'fas fa-clock',
	width: 3
}

blocks[en_bestaat_uit] = {
	title: 'mm2 regen',
	hide_data: false,
	hide_lastupdate: true,
	icon: 'fas fa-cloud-rain',
	width: 3
}

blocks[contact_voordeur] = {
  width: 2,
  title: 'voordeur'
}

blocks[contact_schuur] = {
  width: 2,
  title: 'kantoor'
}

blocks[contact_serre] = {
  width: 2,
  title: 'serre'
}

blocks[contact_keukenraam] = {
  width: 2,
  title: 'keuken'
};

blocks[1320] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[1321] = {
  width: 2,
  switch: false,
  hide_data: false,
  hide_lastupdate: false,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[312] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[302] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[306] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: 'Internet'
}

blocks[307] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: 'wifi 1'
}

blocks[308] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: 'wifi 2'
}

blocks[309] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: 'wifi 3'
}

blocks[405] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[406] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[407] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[310] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: 'firewall'
}

blocks[408] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[409] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[410] = {
  width: 2,
  hide_data: false,
  hide_lastupdate: true,
  imageOn: 'green_ok.png',
  imageOff: 'red_cross.png',
  title: ''
}

blocks[contact_poort] = {
	idx: 1023,
	title: 'lampjes',
	width: 2,
}

blocks[hue_aanrecht] = {
	idx: 286,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'keuken aanrecht'
	
}

blocks[hue_gang] = {
	idx: 149,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'veranda 2'
	
}

blocks[hue_overloop] = {
	idx: 142,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'overloop'
	
}

blocks[hue_slaapkamer] = {
	idx: 9,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'slaapkamer'
	
}

blocks[hue_woonkamer] = {
	idx: 70,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'woonkamer'
	
}

blocks[hue_keuken_r] = {
	idx: 35,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'keuken R'

}

blocks[hue_keuken_l] = {
	idx: 43,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'keuken L'
	
}

blocks[hue_veranda] = {
	idx: 239,
	type: 'dial',
//	subtype: 'updown',
	color: '#ebd234',
	height: 165, 
	last_update: true,
	width: 3,
	title: 'veranda 1'	
}

blocks['beneden'] = {
	idx: 964,
type: 'dial',
//	subtype: 'updown',
	width: 3,
	temp: 126,
	setpoint: 20,
	min: 15,
	max: 30,
	shownumbers: true,
	last_update: true,
	color: '#57c4d6',
	height: 165, 
	showring: true,
	title: 'beneden'
}
	
blocks[beneden_stand] = {
	idx: 961,
	type: 'dial',
	subtype: 'updown',
	width: 3,
	color: '#57c4d6',
	height: 165, 
	title: 'beneden'
	
}

blocks[boven] = {
	idx: 215,
	type: 'dial',
//	subtype: 'updown',
	width: 3,
	temp: 118,
		setpoint: 20,
	min: 15,
	max: 30,
	shownumbers: true,
	last_update: true,
	color: '#57c4d6',
	height: 165,
	showring: false,
	title: 'boven'
	
}

blocks[boven_stand] = {
	idx: 212,
	type: 'dial',
	subtype: 'updown',
	width: 3,
	color: '#57c4d6',
	height: 165, 
	title: 'stand boven'
	
}

blocks['wind'] = {
 	idx: 158,
 	title: 'Wind',
 	type: 'dial',
 //       setpoint: 5,
 	offset: 0,
  	color: '#57c4d6',
	isneedle: true,
	showring: false,
	showunit: true,
	shownumbers: true,
	last_update: false,
	width: 3,
	height: 165 
}

blocks['tibbercharge'] = {
	idx: 902,
	title: 'charge',
//	icon: 'fas fa-battery',
	width: 2,
//	switch: true
}

blocks['bureau_vw'] = {
	idx: 1067,
	title: 'bureau-heater',
	icon: 'fas fa-heater',
	width: 3,
	switch: true
}

blocks['1067'] = {
	idx: 1067,
	title: 'bureau-vw',
	icon: 'fas fa-heater',
	width: 3,
	switch: true
}


blocks['verwarming_bg'] = {
	idx: 196,
	title: 'verwarming',
	icon: 'fas fa-heater',
	width: 3,
	switch: true,
	imageOn: 'heating_on.png',
	imageOff: 'heating_off.png',
	last_update: false,
	confirmation: 1
}

blocks[196] = {
	title: 'verwarming',
	icon: 'fas fa-heater',
	width: 3,
	switch: true,
	imageOn: 'heating_on.png',
	imageOff: 'heating_off.png',
	last_update: false,
	confirmation: 1
}

blocks[vloerpomp_beneden] = {
  width: 3,
  title: 'vloer verwarming',
  switch: true,
  hide_data: false,
  last_update: false,
  imageOn: 'heating_on.png',
  imageOff: 'heating_off.png'
}

blocks[vloerpomp_boven] = {
  width: 3,
  title: 'Cool / Warm',
  switch: true,
  hide_data: false,
  last_update: false,
  imageOn: 'heating_on.png',
  imageOff: 'heating_off.png'
}

blocks[ring_verwarming] = {
  width: 3,
  title: 'accu verwarming',
  switch: true,
  hide_data: false,
  last_update: false,
  imageOn: 'heating_on.png',
  imageOff: 'heating_off.png'
}

blocks[verbruikt] = {
  last_update: true,
  width: 3,
  title: '(24u)',
  hide_data: false
}

blocks[temp_woonkamer] = {
  last_update: true,
  width: 3,
  title: 'Beneden',
  hide_data: false
}

blocks[temp_boven] = {
  last_update: true,
  width: 3,
  title: 'Boven',
  hide_data: false
}

blocks[temp_buiten] = {
  width: 3,
  title: '',
  switch: false,
  hide_data: false,
  last_update: false
}

blocks[post] = {
  width: 2,
  hide_lastupdate: true,
  title: ''
}

blocks[vandaag_geleverd] = {
  width: 2,
  title: 'geleverd',
  last_update: false,
  protected: false,
  icon: 'fas fa-bolt'
}

blocks[verbruik_server] = {
  width: 4,
  last_update: false,
  protected: false
}

blocks[orcon_status] = {
  width: 5,
  last_update: false,
  protected: false
}

blocks['wtw'] = {
  idx: 73,
  title: 'wtw',
  width: 3,
  last_update: false,
  protected: false
}

blocks['wtw1'] = {
  idx: 73,
  title: 'wtw',
  width: 5,
  last_update: false,
  protected: false
}

blocks[zonnescherm] = {
	imageOn: 'blinds_closed.png',
	imageOff: 'blinds_open.png',
	title: 'zonnescherm',
	width: 3,
}

blocks['zonnescherm1'] = {
	idx: 240,
	imageOn: 'blinds_closed.png',
	imageOff: 'blinds_open.png',
	title: 'screen',
	width: 5,
}


blocks[1194] = {
	imageOn: 'Tibber48_On.png',
	imageOff: 'Tibber48_Off.png',
	title: 'laad uren',
	width: 4,
}

blocks['laaduren'] = {
	idx: 1194,
	imageOn: 'Tibber48_On.png',
	imageOff: 'Tibber48_Off.png',
	title: 'laad uren',
	width: 4,
}

blocks[1003] = {
	imageOn: 'Tibber48_On.png',
	imageOff: 'Tibber48_Off.png',
	title: 'Laden',
	width: 2,
}

blocks['laden'] = {
	idx: 1003,
	imageOn: 'Tibber48_On.png',
	imageOff: 'Tibber48_Off.png',
	title: 'Laden',
	width: 3,
}

blocks['p1'] =	{
    		title: 'verbruik',
    		//graphTypes: ['v'],
		devices: [15,900],
		stacked: true,
		tooltiptotal: true,
		graph: ['bar','bar'],
		legend: false,
		height: '330',
		datasetColors:['rgba(56, 226, 20, 0.5)', 'rgba(66, 145, 182, 0.5)', 'rgba(245, 226, 39, 0.4)', 'rgba(255, 0, 0, 0.5)'],
		range:'2 week',
		custom :	{
				"last":	{
							data:	{
								usage: 'd.v_15+d.v_900',
								generation: '-d.r1_15'
								}
		        				},
				"afgelopen 24 uur":	{
							range: 'last',
							groupBy: 'hour',
							filter: '24 hours',
							data:	{
								usage: 'd.v_15',
								generation: '-d.r1_15'
								}
		        				},
				"2 week":			{
							range: 'month',
							groupBy: 'day',
							filter: '14 days',
							data:	{
								usage: 'd.v_15+d.v2_15',
								generation: '-d.r1_15-d.r2_15'
								}
        						},
				"per jaar": 		{
							range: 'year',
							groupBy: 'month',
							filter: '12 month',
							data:	{
								usage: 'd.v_15+d.v2_15',
								generation: '-d.r1_15-d.r2_15'
								}
	        					}
        			}
    		},

blocks['graph_15'] = {
    title: 'verbruik',
    devices: [15,24,753,819,1301],
	lineFill: [true, true, true, true],
	height: '292',
	datasetColors:['rgba(56, 226, 20, 0.4)', 'rgba(66, 145, 182, 0.4)', 'rgba(245, 226, 39, 0.4)', 'rgba(255, 0, 0, 0.4)', 'rgba(255, 224, 224, 0.4)'],
        debugbutton: false,
        custom : {"last": {
		range: 'last',
		data: 	{
		pv1: '-d.u_24',
		pv2: '-d.u_819',
        'huidig verbruik': 'd.v_15+d.v2_15',
		netverbruik: 'd.eu_15-d.eg_15',
		accuverbruik: '-d.u_753'
		}
        },
        "12": {
        range: 'day',
        filter: '12 hours',
        data:	{
		pv1: '-d.u_24',
		pv2: '-d.u_819',
        'huidig verbruik': 'd.v_15+d.v2_15',
		netverbruik: 'd.eu_15-d.eg_15',
		accuverbruik: '-d.u_753'
		}
		}
    },
    legend: true
}

blocks['geohita'] = {
        title: '',
		width: 12,
        	devices: [156, 126, 1271],
		lineFill: [true, true, true, true],
		datasetColors:['rgba(56, 226, 20, 0.4)', 'rgba(66, 145, 182, 0.4)', 'rgba(255, 0, 0, 0.4)'],
        debugbutton: false,
		height: '292',
		range: 'last',
		range: 'day',
        legend: {
				'te_156': 'buiten',
				'te_126': 'vloer',
				'te_1271': 'warmtepomp'
        },

}

blocks['batterystatus'] = {
        devices: [697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712],
}

blocks['all_zones'] = {
        title: 'Room Temperatures',
        devices: [92, 151,102, 126, 156],
        groupByDevice: true

}

blocks['garbage'] = {
	title: 'containers',
    company: 'hvc',
    zipcode: '',
    street: '',
    housenumber: 17,
    maxitems: 4,
    width: 4
}
blocks['log'] = {
	title: 'events',
	height: '350px',
	width: 12
}

blocks['gmail_calendars'] = {
        type: 'calendar',
		title: 'agenda',
        layout: 1,
        icalurl: {
                Personal: {
                        ics: '', 
                color: 'lightyellow'
                },
                Business: {
                        ics: '',
                        color: 'lightgreen'
                }
        },
        holidayurl: '',
        maxitems: 5,
        weeks: 5,
	refresh: 60,
        lastweek: false,
        isoweek: false,
		fixallday: true,
        width: 8
}

///////////////////////////////////////////////////////////////////////////////////////////////// pagina 2 thuisaccu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

blocks['cell01'] = {
	idx: [697],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell01',
	values : [
    {
      idx: 721,
      scale: 1,
      decimals: 2
    },
  ],

}

blocks['cell02'] = {
	idx: [698],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell02',
	values : [
    {
      idx: 722,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell03'] = {
	idx: [699],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell03',
	values : [
    {
      idx: 723,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell04'] = {
	idx: [700],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell04',
	values : [
    {
      idx: 724,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell05'] = {
	idx: [701],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell05',
	values : [
    {
      idx: 725,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell06'] = {
	idx: [702],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell06',
	values : [
    {
      idx: 726,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell07'] = {
	idx: [703],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell07',
	values : [
    {
      idx: 727,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell08'] = {
	idx: [704],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell08',
	values : [
    {
      idx: 728,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell09'] = {
	idx: [705],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell09',
	values : [
    {
      idx: 729,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell10'] = {
	idx: [706],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell10',
	values : [
    {
      idx: 729,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell11'] = {
	idx: [707],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell11',
	values : [
    {
      idx: 730,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell12'] = {
	idx: [708],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell12',
	values : [
    {
      idx: 731,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell13'] = {
	idx: [709],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell13',
	values : [
    {
      idx: 732,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell14'] = {
	idx: [710],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell14',
	values : [
    {
      idx: 733,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell15'] = {
	idx: [711],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell15',
	values : [
    {
      idx: 734,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['cell16'] = {
	idx: [712],
	type: 'dial',
	animation: false,
	width: 3,
	height: 165,
	min: 2.5,
	max: 3.65,
	decimals: 2,
	shownumbers: true,
	title: 'cell16',
	values : [
    {
      idx: 735,
      scale: 1,
      decimals: 3
    },
  ],

}

blocks['bt-voltage'] = {
	idx: [751],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 40,
	max: 56,
	showring: true,
	shownumbers: true,
	showunit: true,
	splitdial: true,
	decimals: 2,
	title: 'batt voltage',
	values : [
    {
      idx: 750,
      decimals: 3
    },
  ],

}

blocks['bt-percentage'] = {
	idx: [759],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	setpoint: 0,
	min: 0,
	max: 100,
	showring: true,
	shownumbers: true,
	showunit: true,
	splitdial: true,
	decimals: 0,
	title: 'batt state',
	values : [
    {
	idx: 944,
	showunit: true,
	unit:'h',
	decimals: 0
    },
  ],

}

blocks['load-L2'] = {
	idx: [502],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	setpoint: 0,
	min: -3000,
	max: 3000,
	showring: true,
	shownumbers: true,
	showunit: true,
	splitdial: true,
	decimals: 0,
	title: 'load L2'
}

blocks['pv1-volt'] = {
	idx: [673],
	height: 165,
	type: 'dial',
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 400,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	title: 'pv1 voltage'
}

blocks['discharge-watts'] = {
	idx: [753],
	height: 165,
	type: 'dial',
	unit: 'W',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: -3000,
	max: 3000,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: '(dis)charge',
values : [
    	{
      	idx: 752,
      	decimals: 2
    	},
  ],

}

blocks['pv1-watts'] = {
	idx: [24],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 3000,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'pv1 watts'
}

blocks['L1'] = {
	title: 'L1 L2 L3',
	idx: 15,
	height: 165,
	type: 'dial',
	subtype: 'usage',
	width: 3,
	inverted: false,
	last_update: false,
	animation: false
}

blocks['L2'] = {
	idx: [23],
	height: 165,
	type: 'dial',
	subtype: 'usage',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 4000,
	inverted: true,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'Levering L2',
	values : [
    	{
      	idx: 30,
      	decimals: 0
    	},
  ],


}

blocks['L3'] = {
	idx: [24],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 4000,
	inverted: true,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'Levering L3',
	values : [
    	{
      	idx: 31,
      	decimals: 0
    	},
  ],

}


blocks['bt-charge-a'] = {
	idx: [752],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: -60,
	max: 60,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 2,
	title: 'charging amps'
}

blocks['amp-available'] = {
	idx: [760],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 320,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'Amps available'
}

blocks['bms-temp'] = {
	idx: [758],
	height: 165,
	type: 'dial',
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 50,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'bms temp'
}

blocks['cel-voltage'] = {
	idx: [750],
	height: 165,
	type: 'dial',
	animation: false,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 4,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 3,
	title: 'cel voltage'
}

blocks['cel-delta'] = {
	idx: [749],
	height: 165,
	type: 'dial',
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 0.5,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 3,
	title: 'cel delta'
}

blocks['inverter-load'] = {
	idx: [814],
	type: 'dial',
	animation: false,
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 100,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 0,
	title: 'inverter load',
	values : [
    {
      idx: 813,
      decimals: 0
    },
  ],

}

blocks['tibber'] = {
	idx: [1196],
	type: 'dial',
	dialimage: 'img/Tibber48_On.png',
	subtype: 'Text',
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 2,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 3,
	title: 'Kwh prijs',
	values : [
    	{
		title: '',
      	idx: 1195,
      	decimals: 3
    	},
		{
		title: '',
      	idx: 1192,
      	decimals: 3
    	},
  ],

}

blocks['uitblaas-temp'] = {
	idx: [102],
	type: 'dial',
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 40,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 1,
	title: 'uitblaas temp'
}

blocks['temp-beneden'] = {
	idx: [126],
	type: 'dial',
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 40,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 1,
	title: 'temp beneden'
}

blocks['temp-boven'] = {
	idx: [118],
	type: 'dial',
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 40,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 1,
	title: 'temp boven'
}

blocks['temp-kantoor'] = {
	idx: [110],
	type: 'dial',
	height: 165,
	width: 3,
	color: '#ebd234',
	min: 0,
	max: 40,
	showring: true,
	shownumbers: true,
	fixed: false,
	splitdial: true,
	decimals: 1,
	title: 'temp kantoor'
}

blocks['temp-buiten'] = {
 idx: [157],
 type: 'dial',
 height: 165,
 width: 3,
 min: -40,
 max: 40,
 showring: true,
 shownumbers: false,
 fixed: false,
 decimals: 1,
 title: 'temp buiten'
}

blocks['verbruik-omvormer'] = {
  title: "verbruik BAT AC",
  idx: '813',
  icon: 'fas fa-car-battery',
  format:true,
  width:3,
  decimals: 0
}

blocks['teruglevering'] = {
  idx: '15_2',
  title:"pv1: <UsageDeliv>",
  value: "werkelijk: <NettCounterToday>",
  width: 3,
  format:true,
  decimals: 2
}

blocks['teruglevering1'] = {
  idx: '15_2',
  title:"pv1: <UsageDeliv>",
  value: "werkelijk: <NettCounterToday>",
  width: 5,
  format:true,
  decimals: 2
}

blocks['pv1'] = {
	idx: '24',
	unit: ' Watt',
	title: "pv1",
	width: 3,
	decimals: 0,
	icon: 'fas fa-sun',
}

blocks['verwachting'] = {
	idx: '1293',
	title: "",
	width: 12,
	icon: 'fas fa-sun',
}

blocks['pv2'] = {
	idx: '817',
	unit: ' W',
	title: "pv2",
	width: 3,
	decimals: 0,
	icon: 'fas fa-sun',
}

blocks['warmtenet'] = {
	idx: [1266],
	height: 165,
	width: 3,
	color: '#ebd234',
	title: "GJ verbruik",
    type: 'dial',
    values: [
        {
        value: 'CounterToday',
        decimals: 3,
        unit: 'vandaag',
        },
    ],
    min: -10,
    max: 10,
    splitdial:true,  //0 in the top
    shownumbers: true,
    showvalue: true //to hide the total counter (=default main value)
}

blocks['weather'] = {
    type: 'weather',
    layout: 4,
    count: 3,
    name: 'Emmeloord',
	lang: 'nl',
	scale: '1',
	width: 6,
    showDetails: false,
    showHourly: false,
    showWind: true,
    colors: {
        cloud: 'orange',
        light_cloud: 'orange',
        dark_cloud: 'orange',
    }
}


buttons = {}

buttons.camvoor = {
    width: 6,
  isimage: true,
  refresh: 0.5,
  forcerefresh: true,
  refreshiframe: 0.5,
	btnimage: '', 
	url: ''
}

buttons.camachter = {
    width: 6,
  isimage: true,
  refresh: 0.5,
  forcerefresh: true,
  refreshiframe: 0.5,
	btnimage: '', 
	url: ''
}

var frames = {}

frames.sonos = {
  frameurl:"",
  height: 235,
  scrollbars: false,
}



frames.buienradar = {
	frameurl:"", 
	aspectratio: 1,
	scaletofit: 250,
	scrollbars: false,
//	forcerefresh: 1,
	width: 6
}

var columns = {}

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

columns[1] = {}
columns[1]['blocks'] = [frames.buienradar, 'weather', 'graph_15', hue_woonkamer, hue_keuken_l, hue_keuken_r, hue_aanrecht, hue_slaapkamer, hue_overloop, hue_veranda, hue_gang, 1320, 1321, 310,306,307,308,309,302,405,406,407,408,409,410]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = ['L1', 'L2', 'L3', 'bt-voltage', 'bt-percentage','discharge-watts', 'inverter-load', 'tibber', 'teruglevering', 'pv2', 1194, 1003, contact_voordeur, contact_keukenraam, contact_serre, contact_schuur, contact_poort, post, bui_komt_over, en_duurt, 'wtw', zonnescherm, 'verwarming_bg', ring_verwarming, vloerpomp_boven, 'bureau_vw', buttons.camvoor, buttons.camachter, frames.sonos, 'log']
columns[2]['width'] =4;

columns[3] = {}
columns[3]['blocks'] = ['p1', 'geohita', 'wind', 'beneden', beneden_stand, 'warmtenet', 'uitblaas-temp', 'temp-beneden', 'temp-boven', 'temp-kantoor', 'gmail_calendars', 'garbage']
columns[3]['width'] = 4;

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

columns[5] = {}
columns[5]['blocks'] = ['15', '22', '23', '24', '819', '900', 'batterystatus']
columns[5]['width'] = 4;

columns[6] = {}
columns[6]['blocks'] = ['cell01','cell08','cell09','cell16','cell02','cell07','cell10','cell15','cell03','cell06','cell11','cell14','cell04','cell05','cell12','cell13', 'cel-delta']
columns[6]['width'] = 4;

columns[7] = {}
columns[7]['blocks'] = ['900', hue_woonkamer, hue_keuken_l, hue_keuken_r, hue_aanrecht, hue_slaapkamer, hue_overloop, hue_veranda, hue_gang]
columns[7]['width'] = 4;

columns[8] = {}
columns[8]['blocks'] = [buttons.camvoor, buttons.camachter, 'teruglevering1', 'pv2', 'laden', 'L1', 'bt-percentage','discharge-watts', 'tibber','temp-buiten', 'temp-beneden', 'uitblaas-temp', 'temp-boven', 'zonnescherm1', 'wtw1', contact_voordeur, contact_keukenraam, contact_serre, contact_schuur, vloerpomp_boven, bui_komt_over, 'gmail_calendars', 'garbage', 'graph_15',310,306,307,308,309,302,405,406,407,408,409,410, 'cell01','cell08','cell09','cell16','cell02','cell07','cell10','cell15','cell03','cell06','cell11','cell14','cell04','cell05','cell12','cell13', 'cel-delta', 'batterystatus']
columns[8]['width'] =4;

columns[9] = {}
columns[9]['blocks'] = ['900', bui_komt_over, en_duurt, 'zonnescherm', vloerpomp_boven, contact_voordeur, contact_keukenraam, vloerpomp_beneden, 'bureau-vw', 196, 'tibber-charge', 'wind', 'beneden', beneden_stand, boven, 'uitblaas-temp', 'temp-beneden', 'temp-boven', 'temp-kantoor', 'gmail_calendars', 'garbage', 'alarmmeldingen']
columns[9]['width'] = 4;

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 3560;
screens['default']['maxheight'] = 3440;

screens['default'][1] = {}
screens['default'][1]['background'] = 'hack2.jpg';
screens['default'][1]['columns'] = [1,2,3]

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

screens['tablet'] = {}
screens['tablet']['maxwidth'] = 900;
screens['tablet']['maxheight'] = 2340;
screens['tablet'][1] = {}
screens['tablet'][1]['background'] = '';
screens['tablet'][1]['columns'] = [8]
custom.css

Code: Select all

/* Background 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 {
	background: rgba(20,0,0,0.2);
        background: none;
}
.dt_content .dial {
    	background: none;

}
.dial-center { 
 #   color: #eee !important;
    font-size: 18px !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    background: none;
    
}

.dialbtn.up {
  background-color: rgba(52, 235, 79, 0.1) !important;
}

.dialbtn.middle {
  background-color: rgba(0,0,0,0.0);
  background: none;
}

.dialbtn.down {
  background-color: rgba(0,0,0,0.5); !important;
}

.dt_content .data {
    color: #fff !important;
    font-size: 16px !important;
}
/* smallere blocks */

div.mh {
    height: 52px;
    padding-top: 2px !important;
    padding-bottom: 1px !important;
}

div[data-id='log'] {
	background: rgba(0,0,0,0.1);
}

/*block colors */
.warninggreen {
  background: rgba(52, 235, 79, 0.5) !important;
  background-clip: padding-box !important;
}
.warningblue {
  background: rgba(45,119,204,0.5) !important;
  background-clip: padding-box !important;
}
.warningred {
  background: rgba(199,44,44,0.5) !important;
  background-clip: padding-box !important;
}
.warningorange {
  background: rgba(238,121,11,0.5) !important;
  background-clip: padding-box !important;
}
.warningpurple {
  background: rgba(157,25,214,0.5) !important;
  background-clip: padding-box !important;
}

/* trash settings */
		
.garbage {
    height: 135px;
    overflow: auto
}
.trashcan {
    height: 60px;
	max-width: 150%;
    overflow: auto
}
.dt_block {
	background-color: none;
	background: rgba(0,0,0,0.2);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);

}	

.weather .weatherday {
	background: rgba(0,0,0,0.0);
	color: #fff !important;
}

.weathercurrent .temp {
    font-size: 40px !important;
    margin-right: 1em !important;
    margin-left: 1em !important;
	color: white !important;
}


.weathercurrent {
    height: 50px !important;
	background: rgba(0,0,0,0.1);
	border-radius: 20px !important;
}

/* Different fontsize & color for Text inside Block font-family: arial narrow; */ 
.title { 
    color: #fff !important;
    font-size: 10px !important;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
} 
/* Different color for Value inside Block */
.value { 
    color: white !important;
 }

/* Space between blocks */
.transbg {
    border-width: 1px !important;
    border-radius: 20px;
}

div.mh.titlegroups {
    height: 65px !important;                /* default height=75px */
    padding-top: 1px;   
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.button {
   flex-direction: column;
   min-height: 70px;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);

}
/* Blocks name: 12px */
.title { 
    font-size:12px;
    color:white;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	
} 
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
   color:#00FF00;
}
.fa.fa-power-off.off {
   color:#FF0000;
}
/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
   color:#F1C300;
}
.far.fa-lightbulb {
   color:#fff;
}

[data-id='geohita'] .graphbuttons {
   display: none;
}

[data-id='graph_15'] .graphbuttons {
   display: none;
}

[data-id='secpanel'].frame iframe {
  transform: scale(0.5);
  border: 0px;
  height: 300px !important;
  width: 100%;
  max-width: 200%;
  transform-origin: 0 0;
}
and custom.js

Code: Select all

//add custom javascript in here
	



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


//controller for 4 switch wtw fan ( how to add multiple entry's in one block this is a 4 switch funtion

function getStatus_wtw(block, afterupdate){
var idx = block.idx;
var device = block.device;
var level = parseFloat(device['Level']);
   block.addClass='warninggreen'
   if(level>=20){
      block.addClass='warningblue';
   }
   if(level>=30){
      block.addClass='warningred';
   }
   if(level>=40){
      block.addClass='warningpurple';
   }
}

function getStatus_wtw1(block, afterupdate){
var idx = block.idx;
var device = block.device;
var level = parseFloat(device['Level']);
   block.addClass='warninggreen'
   if(level>=20){
      block.addClass='warningblue';
   }
   if(level>=30){
      block.addClass='warningred';
   }
   if(level>=40){
      block.addClass='warningpurple';
   }
}


// Watt consumption

function getStatus_customblock(block, afterupdate){
var idx = block.idx;
var device = block.device;
var usage= parseFloat(device['Usage']);
   block.addClass='warninggreen'

   if(usage>=1){
      block.addClass='warningblue';
   }
   if(usage>=2000){
      block.addClass='warningred';
   }
}

// Watt terug

function getStatus_teruglevering(block, afterupdate){
var idx = block.idx;
var device = block.device;
var usage= parseFloat(device['Usage']);
   block.addClass='warninggreen'

   if(usage>=-1){
      block.addClass='warningblue';
   }
   if(usage>=2000){
      block.addClass='warningred';
   }
}

function getStatus_teruglevering1(block, afterupdate){
var idx = block.idx;
var device = block.device;
var usage= parseFloat(device['Usage']);
   block.addClass='warninggreen'

   if(usage>=-1){
      block.addClass='warningblue';
   }
   if(usage>=2000){
      block.addClass='warningred';
   }
}


// auto lader

function getStatus_753(block, afterupdate){
var idx = block.idx;
var device = block.device;
var usage= parseFloat(device['Data']);
   block.addClass='warningred'
   block.title='accu verbruik';
   if(usage>=1){
      block.addClass='warninggreen';
	  block.title='wordt geladen';
   }
   if(usage>=5000){
      block.addClass='warningpurple';
	  block.title='Let op overbelasting!';
   }
}
 // mailbin delivery notification

function getStatus_231(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="er is Post!"){
      block.addClass='warningred';
	block.icon='fas fa-envelope-open';
   }
   else {
      block.addClass='warninggreen';
	  block.icon='fas fa-envelope';
	  block.title='';
   }
}

function getStatus_902(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_1000(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_bureau_vw(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}


function getStatus_ladenvan(block, afterupdate){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_1194(block, afterupdate){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}


function getStatus_1002(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}




// esp8266 heating scripts

function getStatus_140(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_verwarming_bg(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_1003(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_laden(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_1067(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_196(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_205(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}


function getStatus_46(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_48(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_49(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_50(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_226(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="On"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}


function getStatus_138(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="Open"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_187(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="Open"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

//contact_test
function getStatus_254(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="Open"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}
//contact_poort
function getStatus_226(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="Open"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}


function getStatus_147(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="Open"){
      block.addClass='warningred';
   }
   else {
      block.addClass='warninggreen';
   }
}

function getStatus_163(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 min"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}

function getStatus_24(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 Watt"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}

function getStatus_pv1(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 W"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}

function getStatus_pv2(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 A"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}


function getStatus_15_5(block){
var idx = block.idx;
var device = block.device;
   if(device['CounterDelivToday']=="0.000 kWh"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}

function getStatus_164(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 min"){
      block.addClass='warninggreen';
   }
   else {
      block.addClass='warningpurple';
   }
}
function getStatus_169(block){
var idx = block.idx;
var device = block.device;
   if(device['Data']=="0 mm/h"){
      block.addClass='';
   }
   else {
      block.addClass='warningpurple';
   }
}

// zonnescherm 
function getStatus_240(block, afterupdate){
var idx = block.idx;
var device = block.device;
var level = parseFloat(device['Level']);
   block.addClass='warninggreen'
  if(level>=10){
     block.addClass='warningred';
   }
   if(level>=20){
      block.addClass='warningred';
   }
}

function getStatus_zonnescherm1(block, afterupdate){
var idx = block.idx;
var device = block.device;
var level = parseFloat(device['Level']);
   block.addClass='warninggreen'
  if(level>=10){
     block.addClass='warningred';
   }
   if(level>=20){
      block.addClass='warningred';
   }
}
docker with sonos http api / mosquitto / zigbee2mqtt assistant / portainer / dashticz / nodeJS on windows with Zigbee2Mqtt, and some flask builds of my own
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 »

That looks nice.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests