Dashticz v3.7.6 beta

[Lokonli]

I've just releases Dashticz v3.7.6 beta

It mainly contains dial related changes.
You can now add multiple values to most dial types.
or, add a needle representing the value of another device to for instance a dial switch :

dialswitch.jpg (16.08 KiB) Viewed 1741 times

Code: Select all

blocks['sw1'] = {
  idx: 1056,
  type:'dial',
  values: [
    {
      idx: 1057,
      isNeedle: true
    },
  ],
  width: 6,
  showring: true,
  shownumbers: true,
  min: 0,
  max: 10
}

or, show multiple values of a P1 meter:

p1values.jpg (16.35 KiB) Viewed 1741 times

Code: Select all

blocks['p1counters'] = {
    type: 'dial',
    idx: 43,
    values: [
      {
        value: 'Data0',
        unit: 'kWh',
        label: 't1',
        scale: 0.001
      },
      {
        value: 'Data1',
        unit: 'kWh',
        label: 't2',
        scale: 0.001
      },
      {
        value: 'Data2',
        unit: 'kWh',
        label: 'ret t1',
        scale: 0.001
      },
      {
        value: 'Data3',
        unit: 'kWh',
        label: 'ret t2',
        scale: 0.001
      },
      ],
    showvalue: false,
    animation: false,
    shownumbers: true,
    fixed: true,
    width: 6
  };

More info in the release notes:
https://dashticz.readthedocs.io/en/beta ... -12-3-2021

If you're using dial values already, don't forget to read the upgrade instructions:
https://dashticz.readthedocs.io/en/beta ... /v376.html

[Krenstik]

NIce, but most of the ikons extend size..

So change something in css.? or?

Snímek obrazovky 2021-03-12 200203.jpg (196.78 KiB) Viewed 1727 times

[Lokonli]

NIce, but most of the ikons extend size..

So change something in css.? or?

Snímek obrazovky 2021-03-12 200203.jpg

I made indeed quite some changes to the css files.

I'll check what creates bigger icons.

[Lokonli]

NIce, but most of the ikons extend size..

So change something in css.? or?

Snímek obrazovky 2021-03-12 200203.jpg

I can't reproduce the issue.

Can it be that you change the icon sizes in your custom.css?

[Krenstik]

Yes, I change the size for battery status.... But I don not remember how

As I try in this "test" version all changes, I can´t recognize what is still necessary and what not. Only I can say, in the last beta was all fine.

Code: Select all

.block_25 .on { color: #06FE17;}
.block_25 .off { color: #FEFEFE;}


.block_29 .on { color: #06FE17;}
.block_29 .off { color: #FEFEFE;}

.block_13 .on { color: #06FE17;}
.block_13 .off { color: #FEFEFE;}

.block_10 .on { color: #06FE17;}
.block_10 .off { color: #FEFEFE;}

.block_8 .on { color: #06FE17;}
.block_8 .off { color: #FEFEFE;}

.block_14 .on { color: #06FE17;}
.block_14 .off { color: #FEFEFE;}

.block_16 .on { color: #06FE17;}
.block_16 .off { color: #FEFEFE;}

.block_17 .on { color: #06FE17;}
.block_17 .off { color: #FEFEFE;}

.block_154 .on { color: #06FE17;}
.block_154 .off { color: #FEFEFE;}

.block_147_1 .on { color: #06FE17;}
.block_147_1 .off { color: #FEFEFE;}

.block_134 .on { color: #06FE17;}
.block_134 .off { color: #FEFEFE;}


.graph_header {  display: none;}
.graph_title {  display: none;}
.graphclose { display: none; }


.fa-temperature-low {color:blue !important;}
.fa-temperature-high {color:red !important;}


// zvetseni ikony

.warning {   background: rgba(199,44,44,0.3) !important;    background-clip: padding-box;}
.block_147_1 {     color:red !important; }
.block_147_1 .on { color: #06FE17;}
.block_147_1 .off { color: #FEFEFE;}

.warningblue {   background: rgba(45,119,204,0.3) !important;    background-clip: padding-box;}
.lastupdate.lu_warningred {	color: red !important;}

.far.fa-border-all:before {  font-size: 44px;}
.fas.fa-border-all::before { font-size: 44px;} 
.fas.fa-cloud-sun:before {  font-size: 30px;}
.far.fa-cloud-sun:before {  font-size: 30px;}
.far.fa-door-closed:before {  font-size: 44px;}
.fas.fa-door-closed:before { font-size: 44px;} 
.far.fa-door-open:before {  font-size: 44px;}
.fas.fa-door-open:before { font-size: 44px;} 


.block_44 {font-size: 24px; !important;}
.block_44 .icon {width: 300px;  height: auto;}

.block_16.icon { height: 70px !important; }


.clock {font-size: 150px ;}
.weekday,.date {font-size: 30px !important;}
.sunset {font-size: 30px; !important;}
.sunrise {font-size: 25px; !important;}
.sunset .icon {width: 300%;  height: auto;}
.wi-sunrise	{ color: yellow;!important;}
.wi-sunset	{ color: indigo; !important;}	

.far,.fas,.wi {   font-size:24px !important;}

// termostaty bez popisu

.block_130 .icon {   font-size: 44px;   height: auto;}
.block_130 .title,das
.block_130 br:nth-child(2) {      display: none;}
.block_130 .col-data select {   font-size: 150%;   width: 100%;   background-color: rgb(242,242,242);}

.block_131 .icon {   width: 85%;   height: auto;}
.block_131 .title,das
.block_131 br:nth-child(2) {      display: none;}
.block_131 .col-data select {   font-size: 150%;   width: 100%;   background-color: rgb(242,242,242);}

.block_132 .icon {   width: 85%;   height: auto;}
.block_132 .title,das
.block_132 br:nth-child(2) {      display: none;}
.block_132 .col-data select {   font-size: 150%;   width: 100%;   background-color: rgb(242,242,242);}

.block_133 .icon {   width: 85%;   height: auto;}
.block_133 .title,das
.block_133 br:nth-child(2) {      display: none;}
.block_133 .col-data select {   font-size: 150%;   width: 100%;   background-color: rgb(242,242,242);}

.block_134 .icon {   width: 85%;   height: auto;}
.block_134 .title,das
.block_134 br:nth-child(2) {      display: none;}
.block_134 .col-data select {   font-size: 150%;   width: 100%;   background-color: rgb(242,242,242);}

/* DOTS BELOW SCREEN SWITCH SCREENS */

.swiper-pagination-bullet {background: #c7c7c7; width: 30px !important; height: 30px !important; float:centre; position:relative; right:35px;}


.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: 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: 16px;	


/code]

[Krenstik]

I get it:

.far,.fas,.wi { font-size:24px !important;}

[madpatrick]

I did the update, but the icons are now off centre.
They are shifted a liitle bit to the left

[Lokonli]

I get it:

.far,.fas,.wi { font-size:24px !important;}

That line indeed sets the icon size to a fixed value. The !important addition makes it overrrule other settings.

The dials are responsive: they scale according the dial width. So, setting it to a fixed value is not a good idea (in general).

It might already be sufficient to remove the !important part. If for the dial, or for other blocks, the icon size is not what you expect, please post an example.

If you want to change the icon size specifically for dials, you could add '.dial' in front, like:

Code: Select all

.dial .far,.dial .fas,.dial .wi { font-size: 150%}

or if you want to change the icon size for regular Domoticz blocks, add .mh in front, like:

Code: Select all

.mh .far,.mh .fas,.mh .wi { font-size: 24px}

In both cases you might have to add !important. You've to experiment a bit.

[Krenstik]

I remove it, as is not nessesary and is fine

NOw I have to clean values, to have not a double value.

Snímek obrazovky 2021-03-12 232553.jpg (161.91 KiB) Viewed 1697 times

[Lokonli]

I made some small styling changes. Please pull latest beta version. (the unit behind the main value will become a bit smaller)

[Krenstik]

two questions:

How I can get two (three) lines on dial? Always two lines? Like in dial "odber /409 Watt" In the case of the dial " Pracovna" with CO2 (ppm), if the text is shorter, It mixes it two status.

Can I add spares between value and unit in dial " Odber"? (277Watt)

Thank you.

Snímek obrazovky 2021-03-13 032531.jpg (94.86 KiB) Viewed 1679 times

[Lokonli]

How I can get two (three) lines on dial? Always two lines? Like in dial "odber /409 Watt" In the case of the dial " Pracovna" with CO2 (ppm), if the text is shorter, It mixes it two status.

Add the following to the item definition in the values part, to give the item the full width:

Code: Select all

  addClass: 'w100'

Can I add spares between value and unit in dial " Odber"? (277Watt)

I've increased the left margin of the unit a little bit in latest beta. Sufficient?

[Krenstik]

Lines - much better, great.

I do not see a big change, but I can say enough.

Is any way how to put in dial sunrise and sunset?

and also, manual for non-programming guys, how to change the color of status for example of ppm in my case? Or any kind of value in dials?

Thank you.

Code: Select all

{ value: 'Quality',label:'status', type: 'text', idx: 43 ,addClass: 'w100'      },

Snímek obrazovky 2021-03-13 100020.jpg (74.28 KiB) Viewed 1651 times

[pvklink]

I got a little issue.
I use a dimmer switch to manage the volume of my alarm (devices), off, on with volume x-y.

I made a dial for this switch.

dimmer.jpg (6.49 KiB) Viewed 1583 times

When i turn the volume to 0 (i use zero for off) then domoticz gives a value 1 (so not off in my case)

p1_dom.jpg (22.69 KiB) Viewed 1583 times

Code: Select all

blocks['volume']	= {
	title: 'Volume',
	idx:	2272,
	values:	[
		{
		idx: 2272,
		decimals: 0,
		setpoint: 60, 
		isSetpoint: true
    		},
		],
	layout: 1, 
	type: 'dial', 
        color: 'white',
	width: 3, 
//	icon: '', 
	hide_data: false,
	switch: false,
        min: 0,
        max: 100,
        showring: true,
        showunit: true,
	decimals: 0,
	animation: true,
//	fixed: true,
        shownumbers: true,
        last_update: true}

[Lokonli]

and also, manual for non-programming guys, how to change the color of status for example of ppm in my case? Or any kind of value in dials?

Thank you.

Code: Select all

{ value: 'Quality',label:'status', type: 'text', idx: 43 ,addClass: 'w100'      },

Snímek obrazovky 2021-03-13 100020.jpg

There are a few steps:
1) Add the right device status
You can use the recently added device hook functionality. You have to do some programming...
Add the following to custom.js:

Code: Select all

function deviceHook(device) {
    if (device.idx==43) {  //Check that device 43 is indeed the correct Domoticz device id
        var ppmvalue = parseFloat(device.Data);
        device.deviceStatus = ppmvalue> 500 ? 'bad':'good';
    }
}

In this example the deviceStatus will be labeled 'bad' or 'good', depending on the ppm value.
The deviceStatus will be added as CSS class name to the dial values that use this device.

2) Set the styling in custom.css

Code: Select all

.item.bad {
  color: 'red' !important
}

.item.good {
   color: 'green' !important
}

[Lokonli]

I did the update, but the icons are now off centre.
They are shifted a liitle bit to the left

Can you add a picture?
No things that could influence this in your custom.css?

[Lokonli]

I got a little issue.
I use a dimmer switch to manage the volume of my alarm (devices), off, on with volume x-y.

I made a dial for this switch.
dimmer.jpg

When i turn the volume to 0 (i use zero for off) then domoticz gives a value 1 (so not off in my case)

p1_dom.jpg

Code: Select all

blocks['volume']	= {
	title: 'Volume',
	idx:	2272,
	values:	[
		{
		idx: 2272,
		decimals: 0,
		setpoint: 60, 
		isSetpoint: true
    		},
		],
	layout: 1, 
	type: 'dial', 
        color: 'white',
	width: 3, 
//	icon: '', 
	hide_data: false,
	switch: false,
        min: 0,
        max: 100,
        showring: true,
        showunit: true,
	decimals: 0,
	animation: true,
//	fixed: true,
        shownumbers: true,
        last_update: true}

Should work better now. Can you test latest beta?

[Chris12]

There are a few steps:
1) Add the right device status
You can use the recently added device hook functionality. You have to do some programming...
Add the following to custom.js:

Code: Select all

function deviceHook(device) {
    if (device.idx==43) {  //Check that device 43 is indeed the correct Domoticz device id
        var ppmvalue = parseFloat(device.Data);
        device.deviceStatus = ppmvalue> 500 ? 'bad':'good';
    }
}

In this example the deviceStatus will be labeled 'bad' or 'good', depending on the ppm value.
The deviceStatus will be added as CSS class name to the dial values that use this device.

2) Set the styling in custom.css

Code: Select all

.item.bad {
  color: 'red' !important
}

.item.good {
   color: 'green' !important
}

Does this work for Dials with text values shown as well?

I have a dial basically showing me the status of my RPi Active/inactive using Monit, on that RPi I run Pihole.
So it would be great if I can see if the status is OK (Active) or Not OK (Inactive)

I tried this custom.js code:

Spoiler: show

Code: Select all

function deviceHook(device) {
    if (device.idx==1032) {  //Domoticz device ID 
        var rpiactive = parseFloat(device.Data);
        device.deviceStatus = rpiactive=='Active' ? 'good':'bad';
    }
}

And added the css code as well. But I cannot see any changes for the specific dial (I expect that it will be green, as status is active)
The device ID is correct (it's a text device in Domoticz)

[pvklink]

lokonli is great...
Problem solved and you also solved a problem i wanted to adress after this:
- when you change a value in domoticz, this dashticz dial does not refresh, this also solved

for me last questions are:

0. how do i get rid of "0 level" in the dial , see attachment.
hide_data: true, does not help
@update: solved, by removing the values part and add isSetpoint: true in the main part of the block

1. what does "fixed" do?

2. In my case do i have to repeat idx 2272 in the main part as well as in the values part
@update: solved, values part removed

3. Does setpoint: 60 has any use ? i thougt you could influence the colors of the ring when below or above this point

4. what does layout do

My current volume(dimmer) dial

volume.jpg (13.8 KiB) Viewed 1520 times

Code: Select all

blocks['volume']	= {
	title: 'Volume',
	idx:	2272,
	values:	[
		{
		idx: 2272,
		decimals: 0,
		setpoint: 60, 
		isSetpoint: true
    		},
		],
	layout: 1, 
	type: 'dial', 
        color: 'white',
	width: 3, 
//	icon: '', 
	hide_data: true,
	switch: false,
        min:0,
        max:100,
        showring: true,
        showunit: true,
	decimals: 0,
	animation: true,
//	fixed: true,
        shownumbers: true,
        last_update: false}

[Lokonli]

There are a few steps:
1) Add the right device status
You can use the recently added device hook functionality. You have to do some programming...
Add the following to custom.js:

Code: Select all

function deviceHook(device) {
    if (device.idx==43) {  //Check that device 43 is indeed the correct Domoticz device id
        var ppmvalue = parseFloat(device.Data);
        device.deviceStatus = ppmvalue> 500 ? 'bad':'good';
    }
}

In this example the deviceStatus will be labeled 'bad' or 'good', depending on the ppm value.
The deviceStatus will be added as CSS class name to the dial values that use this device.

2) Set the styling in custom.css

Code: Select all

.item.bad {
  color: 'red' !important
}

.item.good {
   color: 'green' !important
}

Does this work for Dials with text values shown as well?

I have a dial basically showing me the status of my RPi Active/inactive using Monit, on that RPi I run Pihole.
So it would be great if I can see if the status is OK (Active) or Not OK (Inactive)

I tried this custom.js code:

Spoiler: show

Code: Select all

function deviceHook(device) {
    if (device.idx==1032) {  //Domoticz device ID 
        var rpiactive = parseFloat(device.Data);
        device.deviceStatus = rpiactive=='Active' ? 'good':'bad';
    }
}

And added the css code as well. But I cannot see any changes for the specific dial (I expect that it will be green, as status is active)
The device ID is correct (it's a text device in Domoticz)

The data of your text device is already a string, so you have to remove parseFloat, otherwise it will be interpreted as a number. Like this:

Code: Select all

function deviceHook(device) {
    if (device.idx==1032) {  //Domoticz device ID 
        var rpiactive = device.Data;
        device.deviceStatus = rpiactive=='Active' ? 'good':'bad';
    }
}

Formatting the main value of a dial is also slightly different. You can use the following:

Code: Select all

.good .value {
    color: green;
}

.bad .value {
    color: red;
}