#Does anyone know how I can make this

1 messages · Page 1 of 1 (latest)

unborn moss
#

Here's some JavaScript that might help you out. I don't really have anything temperature related; mine is more battery related but the same concept.

#

So I create a variable that can be called later. Here, it is battery percentages return a certain color.yaml variables: var_color: |- [[[ var blevel=entity.state; if (blevel > 80) return 'lime'; else if (blevel >= 30) return 'green'; else if (blevel >= 30) return 'orange'; else if (blevel >= 30) return 'yellow'; else return 'red'; ]]]

#

Then I call the color like this```yaml
styles:
icon:
- color: '[[[ return variables.var_color ]]]'

#

Another example where I've created variables for temperature and humidity and use them in the style section. (There are also statements that handle the icon and name using the variables.)yaml styles: icon: - color: > [[[ if (variables.temperature == true && variables.humidity == true) return "white" ; else return "black"; ]]] card: - color: > [[[ if (variables.temperature == true && variables.humidity == true) return "white" ; else return "black"; ]]] - background-color: > [[[ if (variables.temperature == true && variables.humidity == true) return 'green'; else return 'red'; ]]]

image.png
ivory lion
#

Can I just use javascript in yaml files? Didn't know that

#

Also, how would I accomplish this with the card that already exists? Because I like that design however I couldnt quite figure out how to replace the icon with a text (current state of sensor)

unborn moss
#

Yeah. You can use JavaScript in the yaml. I use the Editor UI but do the majority of my editing in yaml mode. Because most of the cards are templates, anything you add to the code will override whatever is specified in the template. So, if the template sets a certain icon and you set a different one, the card will use the one you specify.

#

Where it gets tricky is figuring out how to modify the template (with your code) in such a way that it produces the result that you want.

ivory lion
#

Yeah looking through its files all I find is show icon through and styling but not really a way to change its elemnts

unborn moss
#

You shouldn't have to change anything within the "core" files of Minimalist UI. You would just make your changes "locally". For example, I have a template called oversized_custom_button_with_auto. It is about 40 lines long, but it also references another template called oversized_custom_button which is 80-ish lines long. However, when I can put a card using the template in the dashboard, this is all it needs: ```yaml

  • type: custom:button-card
    template: oversized_custom_button_with_auto
    entity: light.kitchen_lights
    hold_action:
    action: navigate
    navigation_path: /fire-main/room
    variables:
    var_auto_entity: '[[[ return ''input_boolean.automation_auto_kitchen_lights''; ]]]'```
dreamy stirrup
#

What are you trying to achieve here? change the card "room" icon to entity?

ivory lion
#

So if its cold its blie

#

Blue

#

Nice its green

#

Hot its red

#

And orange etc in between

unborn moss
#

@dreamy stirrup Didn't we get some colored icon stuff working with your dashboard or did we only work with the SVGs? I posted some code above but I don't know how well it would play with Minimalist.

dreamy stirrup
ivory lion
#

Oeh can I also get the code you used for that?

#

And if yall have any idea how I can do the big ones let me know

dreamy stirrup
ivory lion
#

Where does that raw config go? Just create a new custom card in minimalist?

dreamy stirrup
#

on Raw Configuration

unborn moss
#

The Raw configuration is the entire yaml for the dashboard. Be cautious in there because you can easily screw things up if you're not careful. (Not meant to scare you to keep you out of there.) Indention is super important.

ivory lion
ivory lion
#

Found it

ivory lion
#

How do I make sure the right column is also lowered

image.png
unborn moss