Domoticz

Posted: **Friday 12 March 2021 16:29**

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

Posted: **Friday 12 March 2021 20:02**

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 1730 times

Posted: **Friday 12 March 2021 21:48**

Krenstik wrote: ↑Friday 12 March 2021 20:02 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.

Posted: **Friday 12 March 2021 21:54**

Krenstik wrote: ↑Friday 12 March 2021 20:02 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?

Posted: **Friday 12 March 2021 22:24**

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]

Posted: **Friday 12 March 2021 22:32**

I get it:

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

Posted: **Friday 12 March 2021 22:59**

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

Posted: **Friday 12 March 2021 23:08**

Krenstik wrote: ↑Friday 12 March 2021 22:32 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.

Posted: **Friday 12 March 2021 23:26**

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 1700 times

Posted: **Friday 12 March 2021 23:39**

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

Posted: **Saturday 13 March 2021 3:32**

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 1682 times

Posted: **Saturday 13 March 2021 9:06**

Krenstik wrote: ↑Saturday 13 March 2021 3:32
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'

Krenstik wrote: ↑Saturday 13 March 2021 3:32
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?

Posted: **Saturday 13 March 2021 10:02**

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 1654 times

Posted: **Monday 15 March 2021 18:33**

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 1586 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 1586 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}

Posted: **Monday 15 March 2021 21:19**

Krenstik wrote: ↑Saturday 13 March 2021 10:02 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
}

Posted: **Monday 15 March 2021 21:21**

madpatrick wrote: ↑Friday 12 March 2021 22:59 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?

Posted: **Monday 15 March 2021 22:16**

pvklink wrote: ↑Monday 15 March 2021 18:33 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?

Posted: **Tuesday 16 March 2021 11:03**

Lokonli wrote: ↑Monday 15 March 2021 21:19
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)

Posted: **Tuesday 16 March 2021 13:32**

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 1523 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}

Posted: **Tuesday 16 March 2021 19:06**

Chris12 wrote: ↑Tuesday 16 March 2021 11:03
Lokonli wrote: ↑Monday 15 March 2021 21:19
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;
}

Domoticz

Dashticz v3.7.6 beta

Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta

Re: Dashticz v3.7.6 beta