Dashticz - Dial Ring Color

[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'?




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

[Doudy]

Nobody ?

[Lokonli]

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)

[Doudy]

I'm trying all this info ASAP
Thank you

[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 !

the other wind rings are OK

I have no oder code with wind3!

[Lokonli]

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 !

That is correct, by design.

What would you prefer?

[Doudy]

Hello,
Only green up to the number of degrees indicated

[Lokonli]

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

[Doudy]

And 330? As an almost complete ring, or like -30 starting from top?

I do not understand