search

automatikas / Node-red-Nest-thermostat

Node-red dashboard Nest thermostat ui_template
GNU General Public License v3.0
30 stars 17 forks source link

more a Question ... #2

Closed MaxRei-dev closed 4 years ago

MaxRei-dev commented 5 years ago

how to change the leaf Icon to for example an waterdrop? I tried to change the

var leafDef = ["M", 3, 84, "c", 24, 17, 51, 18, 73, -6, "C", 100, 52, 100, 22, 100, 4, "c", -13, 15, -37, 9, -70, 19, "C", 4, 32, 0, 63, 0, 76, "c", 6, -7, 18, -17, 33, -23, 24, -9, 34, -9, 48, -20, -9, 10, -20, 16, -43, 24, "C", 22, 63, 8, 78, 3, 84, "z"].map(function(x) { return isNaN(x) ? x : x*leafScale; }).join(' '); to for example: var leafDef = "M132.281,264.564c51.24,0,92.931-41.681,92.931-92.918c0-50.18-87.094-164.069-90.803-168.891L132.281,0l-2.128,2.773 c-3.704,4.813-90.802,118.71-90.802,168.882C39.352,222.883,81.042,264.564,132.281,264.564z";

but no luck. i must say i dont understand the .map(function(x) { return isNaN(x) ? x : x*leafScale; }).join(' ');

thank you

automatikas commented 5 years ago

Function maps SVG data for scaling. In your case you have to separate out letters in quotation marks. Values with dots as one value, values with - as one value:

var leafDef = ["M" , 132.281 , 264.564 , "c" , 51.24 , 0 , 92.931 , -41.681 , ..... and so on.

for example snowflake icon for cooling:

["M", 461, 124, "l", -22, -13, "l", -60, 32, "v", -43, "l", -16, -9, "l", -15, 9, "v", 67, "l", -41, 21, "v", -46, "l", -41, 23, "v", -43, "l", 62, -31, "V" ,70, "l", -22, -12, "l", -40, 21, "V" ,14, "L" ,246, 0, "l", -20, 14, "v", 65, "l", -35, -21, "l", -17, 11, "v", 23, "l", 52, 30, "v", 43, "l", -41, -22, "v", 45, "l", -38, -22, "l", 1, -63, "l", -20, -12, "l", -15, 12, "v", 41, "l", -58, -32, "l", -24, 11, "v", 26, "l", 57, 31, "l", -37, 21, "v", 23, "l", 21, 10, "l", 53, -31 , "l", 37, 21, "l", -37, 23, "l", 38, 22, "h", 1, "l", -37, 22, "l", -54, -32, "l", -22, 12, "v", 24, "l", 38, 18, "l", -58, 33, "v", 26, "l", 25, 10, "l", 57, -32, "v", 41, "l", 14, 11, "l", 17, -12, "v", -62, "l", 41, -21, "v", 45, "l", 41, -25, "v", 43, "l", -52, 30, "v", 23, "l", 17, 11, "l", 35, -21, "v", 65, "l", 20, 14, "l", 20, -14, "v", -65, "l", 35, 21, "l", 17, -9, "v", -25, "l", -52, -30, "v", -43, "l", 41, 23, "v", -42, "l", 41, 22, "v", 62, "l", 16, 11, "l", 15, -11, "v", -41, "l", 56, 31, "l", 26, -11, "v", -25, "l", -54, -33, "l", 34, -19, "v" , -22, "l", -19, -12, "l", -55, 30, "l", -39, -20, "l", 38, -22, "l", -36, -23, "l", 37, -24, "l", 55, 32, "l", 19, -10, "v", -23, "l", -36, -20, "l", 56, -32, "V", 124, "z", "M", 266, 277, "h", -36, "l", -19, -30, "l", 18, -32, "h", 36, "l", 17, 32, "L", 266, 277, "z"]

MaxRei-dev commented 5 years ago

Thanks a lot. I managed now to have an Waterdrop Icon in addition to the Leaf. (has_water ;-) ). so i can show leaf: Heatpump is standby, waterdrop: heatpump making hot water, ... perfect. greets Max

MaxRei-dev commented 5 years ago

ohh sorry one more question. what to do if i have more than one path in an svg ?

Thanks

automatikas commented 5 years ago

If I understand your question correctly then you need to combine paths in the one map. The path starts with "M" and end with "z" entry. (..., 26.79 , "z" , "M" , 81.781 ,...) i never take the hard way.

easy way to find some icon svg icon codes are here: maybe you will find ready icon what you are looking for.

good luck :)

Another example i have on my own thermostat is floor heating i con. it is combination of three lines.

["M" , 8.219 , 26.79 , "c" , 8.736 , -7.502 , 15.637 , -13.433 , 34.359 , -2.854 , "c" , 8.994 , 5.081 , 16.249 , 6.999 , 22.289 , 6.998 , "c" , 10.575 , 0 , 17.426 , -5.883 , 23.352 , -10.975 , "c" , 2.113 , -1.814 , 2.385 , -5.035 , 0.607 , -7.194 , "s" , -4.932 , -2.438 , -7.045 , -0.621 , "c" , -8.735 , 7.505 , -15.635 , 13.434 , -34.363 , 2.853 , "c" , -24.739 , -13.975 , -36.326 , -4.02 , -45.637 , 3.977 , "c" , -2.112 , 1.815 , -2.385 , 5.036 , -0.607 , 7.195 , "C" , 2.951 , 28.327 , 6.105 , 28.606 , 8.219 , 26.79 , "z" , "M" , 81.781 , 37.678 , "c" , -8.735 , 7.503 , -15.635 , 13.433 , -34.363 , 2.853 , "C" , 22.679 , 26.555 , 11.092 , 36.51 , 1.781 , 44.508 , "c" , -2.112 , 1.816 , -2.385 , 5.037 , -0.607 , 7.193 , "c" , 1.777 , 2.159 , 4.932 , 2.438 , 7.045 , 0.622 , "c" , 8.736 , -7.503 , 15.637 , -13.433 , 34.359 , -2.855 , "c" , 8.994 , 5.081 , 16.249 , 7 , 22.289 , 7 , "c" , 10.575 , 0 , 17.426 , -5.884 , 23.352 , -10.975 , "c" , 2.113 , -1.816 , 2.385 , -5.037 , 0.607 , -7.194 , "C" , 87.049 , 36.138 , 83.895 , 35.861 , 81.781 , 37.678 , "z" , "M" , 81.781 , 63.209 , "c" , -8.735 , 7.504 , -15.635 , 13.433 , -34.363 , 2.854 , "C" , 22.679 , 52.087 , 11.092 , 62.042 , 1.781 , 70.04 , "c" , -2.112 , 1.815 , -2.385 , 5.037 , -0.607 , 7.196 , "c" , 1.777 , 2.156 , 4.932 , 2.436 , 7.045 , 0.62 , "C" , 16.955 , 70.351 , 23.855 , 64.424 , 42.578 , 75 , "c" , 8.994 , 5.083 , 16.249 , 7 , 22.289 , 7 , "c" , 10.575 , 0 , 17.426 , -5.884 , 23.352 , -10.974 , "c" , 2.113 , -1.815 , 2.385 , -5.038 , 0.607 , -7.196 , "C" , 87.048 , 61.672 , 83.895 , 61.395 , 81.781 , 63.209 , "z"]