[smartly] custom temperature gradient HOWTO

Continuing the discussion from [smartly] bug report and support thread:

The default values for F (auto detected F/C btw) using the values below make a gradient that looks like this:

-30, 15, 32, 33, 70, 90, 100, 120

You can override them, though!

Under the color tab when editing the tile in SMARTLY, you’ll see some help text below the input box. Currently we are only supporting a single gradient color-scheme, but in the future we’ll allow creating our own.

So, the gradient is roughly purple > blue > light blue > green > yellow > orange > red.

The default values are in the help text, so if you wanted to just tweak it so your “comfortable” temperature is 20 degrees lower (moving the green of the gradient down 20 degrees) for F, you’d use:


-30, 15, 32, 33, 50, 90, 100, 120

Or if you wanted to lose the hard edge from 32 to 33 degrees, you can have a tighter green “comfortable” range by using:

-30, 15, 32, 50, 60, 70, 100, 120

Anyways, play with the values and if you make a good recipe post it here.



thanks … will leave alone for now since mine has about 30 colors… if i run it back throuh smartly though can i get teh truncation somehow for all temperature tiles?

I’ve added a screenshot of the default color gradient to the OP. Look above :point_up:

looks good ill give it a try on the test dashboard… i did notice when i ran my existing through smartly there is an issue after pasting back that the smartly tile is not being hidden.

also if you use the global setting since i dont want to do it for 50 tiles. where do you paste the gradient in… i only see a checkbox and a place to paste the battery gradient in?

That normally means smartly-inject is not loading correctly.

its loading becuase i can enlarge and move the tiles around?
it disappears when i click on the paw and enable it and move stuff around… comes back when i turn it off?

also when i check the global color box and go back it is unchecked and when i paste my values stil lhave decimal pts.

working find now when i ran it through again. go figure… there colors are a little too neon for me. i perfer like i did to change colors only every 10% or so and a little darker green etc.



and i guess it rounds off just to calculate the color tile but then uses the full temp… nice

also why are some black text and some white…

It’s a visibility calculation in chroma.js, to determine whether or not to use black or white text. It breaks on the 50% mark of luminosity, but we might want to bias it in one direction or the other at some point in the future.

also another slight issue when the temp code kicks in. it is blowing away the transparency i have set for the tiles… see the existing page…


I’m sorry my friend, that will need to be a future feature… I’m thinking a dropdown for ‘transparency’.

1 Like

there seems to be some issue with the overriding color for an indiv. tile… it is not changing the color of the first tile regardless if i set the green at 50 60 or 70



Screenshot 2020-10-30 172351

its not letting me make any more replies say 20 max try again tommorrow… i just removed all the spaces still not working

you mean get rid of the f for farenheit then it really is not working as default comes out yellow instead of green

Screenshot 2020-10-30 173411

apologies instructions are unclear, the only thing that should be in that field are numbers and commas.

no that’s correct, 69 degrees would be 2/3 the way between green to yellow.

-10 purple
10 purple to blue (from -10)
20 blue to light blue (from 10)
40 light blue to green (from 20)
50 green to green (from 40)
80 green to yellow (from 50)
100 yellow to orange (from 80)
120 orange to red (from 100)

with your values, 40-50 is your green band

currently the temperature gradient can only be overridden at the tile level… so by default it’ll just be the gradient posted in the OP

Still playing with the latest Smartly, but spotted that the color gradient is working locally, but when I access via the cloud, it remains a purple color. Is the gradient intended to work on only the local dashboard?

1 Like

Please give it a try now! You might need to shift+refresh but please try a normal refresh first.


Yes, it works with a refresh, but every time I load a (cloud) dashboard, I then need to do a refresh. Can the refresh be built in to the load page sequence?

Hmm, it shouldn’t need a refresh after loading the dash. I’ll take a look. Meantime could you try in an incognito window to rule out browser caching issues?

You could be right with the Browser caching or it could be Firefox specific. I tried it on my Tablet in Chrome and it worked fine, I tried it in private mode in Firefox and it also worked fine, it’s just FF normal that it’s not updating without a refresh.

1 Like