[smartly] custom temperature gradient HOWTO

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.

Summary

ie

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…

Summary

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

ie

Summary

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.

Hi,

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

Good to know! It might still be an issue, only not showing on the other devices because it was the first time (or first time in a while) since they accessed the dash via cloud. I’ll keep an eye on this!

2 posts were split to a new topic: [smartly] custom (partial) battery gradient HOWTO

@SoundersDude asked whether or not he could use GRADIENTS for battery tiles as well. Currently battery tiles use thresholds and have a hard edge to each color range, but there is a workaround.

Specifically I want to make any tile that is getting close to 50% to start to be yellow with more aggressive progress to dark red between 50%-30%, as in my experience my sensors really start to be unreliable under 50%, and I want to make sure these are switched out before we leave the house for any extended period of time.

We can do that using CSS and smartly-inject’s built-in CSS class fix.