Domoticz

Open source Home Automation System
https://forum.domoticz.com/

Dashticz - Dial Ring Color

https://forum.domoticz.com/viewtopic.php?t=38264

Page 1 of 1

Dashticz - Dial Ring Color

Posted: Tuesday 22 March 2022 8:33
by Doudy
Hello,
My problem
The color of the ring dial

Why the 'Direction' ring is white (idem "Vitesse-Vent" et "Direction-Vent")
Why are the 'Rain/...' rings not the same thickness as 'Pressure or Radiation'?

Image
Image

My CONFIG.js

Code: Select all

blocks['wind1'] = {
    idx: 43,
    title: 'Vitesse-Vent',  // Vitesse vent
    type: 'dial',
    subtype: 'windspeed',
	color: '#99cc00', 
	width: 2,
	decimals: 1,
    values: [],
	min: 0,
	max: 100,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: true,
}
blocks['wind2'] = {
    idx: 43,
    title: 'Rafale-Vent',  // Rafale vent
    type: 'dial',
    subtype: 'windgust',
	color: '#99cc00', 
	width: 2,
	decimals: 1,
	values: [],
	min: 0,
	max: 140,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: true,
}
blocks['wind3'] = {
	idx: 43,
	title: 'Direction ',  // Direction du vent Km/h
	type: 'dial',
	color: '#99cc00', 
	width: 2,
	values: [],
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: true,
}
blocks['wind4'] = {
	idx: 408,
	title: 'Direction du Vent',  // Direction du vent texte
	type: 'dial',
	color: '#99cc00', 
	values: [
			{
			value: 'Data',
			addClass: 'bigwind',
			//decimals: 0,
			//unit: ' Km/h',
			}
	],
	setpoint: 0, 
	offset: 0,
	width: 2,
	showring: false,
	showunit: false,
	shownumbers: false,
	last_update: true,
	showvalue: false,
	min: 0,
	max: 360,
}
blocks['wind5'] = {
	idx: 41,
	title: 'Pression Atmosphérique',  // Pression Atmosphérique
	type: 'dial',
	color: '#99cc00', 
	values: [
			{
			value: 'Data',
			addClass: 'bigwind',
			//decimals: 0,
			//unit: ' Km/h',
			}
	],
	setpoint: 0, 
	offset: 180,
	width: 2,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: false,
	min: 950,
	max: 1100,
}
blocks['wind6'] = {
	idx: 45,
	title: 'Radiations Solaires', 
	type: 'dial',
	color: '#99cc00', 
	values: [
			{
			value: 'Radiation',
			addClass: 'bigwind',
			decimals: 0,
			unit: 'W/m²',
			color: 'red',
			}
	],
	setpoint: 0, 
	offset: 0, // 0 will point to the wind source, 180 will point to wind direction (default is 0),
	min: 0,
	max: 500,
	width: 2,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: false,
}

Code: Select all

blocks['rain_207'] = {
    idx: 207,
    title: 'Pluie/An',
    type: 'dial',
    unit: ' mm',
    setpoint: 0,  
    color: '#57c4d6',
    min: 0, 
    max: 1000, 
    width: 2,
    shownumbers: true,  
    showring: false, 
    showunit: true, 
}
blocks['rain_208'] = {
    idx: 208,
    title: 'Pluie/Mois',
    type: 'dial',
    unit: ' mm',
    setpoint: 0,  
    color: '#57c4d6',
    min: 0, 
    max: 120,
    width: 2,
    shownumbers: true, 
    showring: false,
    showunit: true,
}
blocks['rain_209'] = {
    idx: 209,
    title: 'Pluie/Semaine',
    type: 'dial',
    unit: ' mm',
    color: '#57c4d6',
    setpoint: 0,  // this value will be used to control the color of the outer ring, e.g. < 15 is blue, >= 15 is orange
    min: 0, // set the minimum value for the dial range (default is 5)
    max: 100, // set the maximum value for the dial range (default is 35)
    width: 2,
    shownumbers: true,  // display the numbers on the dial (default is false)
    showring: false, // display outer ring color all the time (default is false, will only display when hover over)
    showunit: true, // display unit for the dial value (default is false)
}
blocks['rain_210'] = {
    idx: 210,
    title: 'Pluie/Jour',
    type: 'dial',
    unit: ' mm',
    color: '#57c4d6',
    setpoint: 0,  // this value will be used to control the color of the outer ring, e.g. < 15 is blue, >= 15 is orange
    min: 0, // set the minimum value for the dial range (default is 5)
    max: 60, // set the maximum value for the dial range (default is 35)
    width: 2,
    shownumbers: true,  // display the numbers on the dial (default is false)
    showring: false, // display outer ring color all the time (default is false, will only display when hover over)
    showunit: true, // display unit for the dial value (default is false)
}
My custom.css

Code: Select all

/*///////////////////// DIAL - Wind - Pression - Radiations //////////*/
[data-id='wind1']  .slice.primary, .secondary {color: #99cc00 !important;}
[data-id='wind2']  .slice.primary, .secondary {color: #99cc00 !important;}
[data-id='wind3']  .slice.primary, .secondary {color: #99cc00 !important;}
/*[data-id='wind4']  .slice.primary, .secondary {color: #99cc00 !important;}*/
[data-id='wind5']  .slice.primary, .secondary {color: #99cc00 !important;}
[data-id='wind6']  .slice.primary, .secondary {color: #99cc00 !important;}
/*///////////////////// DIAL - Pluie ///////////////////////////*/
[data-id='rain_210']  .slice.primary, .secondary {color: #00b3e5 !important;}
[data-id='rain_209']  .slice.primary, .secondary {color: #00b3e5 !important;}
[data-id='rain_208']  .slice.primary, .secondary {color: #00b3e5 !important;}
[data-id='rain_207']  .slice.primary, .secondary {color: #00b3e5 !important;}
PS: 'Wind direction' is an IDX text

;)

Re: Dashticz - Dial Ring Color

Posted: Wednesday 13 April 2022 8:29
by Doudy
Nobody ?
;)

Re: Dashticz - Dial Ring Color

Posted: Sunday 17 April 2022 22:39
by Lokonli
Doudy wrote: ↑Wednesday 13 April 2022 8:29 Nobody ?
;)
When I use your block definition for 'wind3' (='Direction') and your custom.css then the ring color of my dial becomes green (#99CC00)

So I think there is some other code probably in your custom.css that gives the white color of the ring. Or another setting in CONFIG.js

To debug, start with an empty CONFIG.js and an empty custom.css.
Then add your 'direction' block to CONFIG.js and check how it looks.

Looking at your custom.css, I think you made a small mistake.

Instead of:

Code: Select all

[data-id='wind1']  .slice.primary, .secondary {color: #99cc00 !important;}
probably you mean the following:

Code: Select all

[data-id='wind1']  .slice.primary, [data-id='wind1']  .slice.secondary {color: #99cc00 !important;}
(you have to repeat the complete css selector when you use a comma)

But, in fact the custom.css coloring is not needed, since you're already using the 'color' parameter in your block definition:

Code: Select all

	color: '#99cc00',
This will already give a green ring color, and a green title.

edit:
You may have to add the following block parameter:

Code: Select all

    setpoint: -1
The setpoint for a wind device is 15 by default, which is not logical for a wind direction dial.
(if the wind direction < 15 the ring will get the 'secondary' color)

Re: Dashticz - Dial Ring Color

Posted: Monday 18 April 2022 8:07
by Doudy
I'm trying all this info ASAP
Thank you
👍
😉

Re: Dashticz - Dial Ring Color

Posted: Wednesday 20 April 2022 9:10
by Doudy
Hello,

I have change "wind3" :

Code: Select all

blocks['wind3'] = {
	idx: 43,
	title: 'Direction ',  // Direction du vent °
	type: 'dial',
	color: '#99cc00', 
	width: 2,
	values: [],
	setpoint: -1,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: true,
}
and CSS :

Code: Select all

[data-id='wind3']  .slice.primary, [data-id='wind3']  .slice.secondary {color: #99cc00 !important;}
but i have green color at the full ring !
Image
the other wind rings are OK
Image
I have no oder code with wind3!

Re: Dashticz - Dial Ring Color

Posted: Wednesday 20 April 2022 9:54
by Lokonli
Doudy wrote: ↑Wednesday 20 April 2022 9:10 Hello,

I have change "wind3" :

Code: Select all

blocks['wind3'] = {
	idx: 43,
	title: 'Direction ',  // Direction du vent °
	type: 'dial',
	color: '#99cc00', 
	width: 2,
	values: [],
	setpoint: -1,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: true,
	showvalue: true,
}
and CSS :

Code: Select all

[data-id='wind3']  .slice.primary, [data-id='wind3']  .slice.secondary {color: #99cc00 !important;}
but i have green color at the full ring !
Image
That is correct, by design.

What would you prefer?

Re: Dashticz - Dial Ring Color

Posted: Wednesday 20 April 2022 10:08
by Doudy
Hello,
Only green up to the number of degrees indicated
;)

Re: Dashticz - Dial Ring Color

Posted: Wednesday 20 April 2022 19:54
by Lokonli
Doudy wrote:Hello,
Only green up to the number of degrees indicated
;)
And 330? As an almost complete ring, or like -30 starting from top?

Verstuurd vanaf mijn SM-A526B met Tapatalk

Re: Dashticz - Dial Ring Color

Posted: Thursday 21 April 2022 7:48
by Doudy
Lokonli wrote: ↑Wednesday 20 April 2022 19:54 And 330? As an almost complete ring, or like -30 starting from top?
:oops:
I do not understand
;)
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited