Help a non-programmer out

Configuration Frontend
1

I really have been trying:

But I keep hitting dead ends – or, maybe I’m hitting the limits of my abilities.

I would like a simple page/dashboard/lovelace to be able to glance at and with as few brain cells as possible take note of the temperate at various locations (such as different places inside various homes, the well house, the outside, the water tank areas, etc.).

Something like this: Each line is color coded for the range of temp (but with fully shaded areas inside the rectangles), or maybe horizontal bars that are both color coded and length coded.

Icing on the cake would be able to have certain icons/images to the left of the location name that correspond to the type of location (water tank area, well, inside home A, inside home B, outside, etc.)

Something like (degrees F):

0-32 – Icy blue
33-48 – blue
49-60 – green
61-69 – yellowish
70-76 – orange
77 and above - red

image
image355×701 27.4 KB

I just don’t have the skill to make this happen.

Thank you!

2

Have you checked car-mod?

3

You missed the d. card-mod. :slightly_smiling_face:

Here’s an example using the tile card and card-mod:

2 Likes
4

Thank you both so much!

This gets me closer, but I sure would like a bar, or background color to match the icon color, and hopefully a custom icon for each.

And, because I have 20+ entities, a way to re-use a single card_mod code.

I was able to make this:

image

With this code:

type: tile
entity: sensor.pirateweather_temperature
name: Outside Temperature
tap_action:
  action: more-info
icon_tap_action:
  action: navigate
  navigation_path: /lovelace-warny/dg
card_mod:
          style: |
            .tile {
              {% if states(config.entity)|float(0) > 74.9 %}
                --tile-color: red;
              {% elif states(config.entity)|float(0) > 62 %}
                --tile-color: orange;
              {% elif states(config.entity)|float(0) > 48 %}  
                --tile-color: green;
              {% else %}  
                --tile-color: blue;
              {% endif %}  
            }
5

You can use card-mod themes for repetitive config:

You can change all of these too.

Check out the this post for more:

6

All your requirements can be met by card-mod, including applying styles to cards in a batch. There’s a long thread around here with incredible front end customizations that people achieve with card-mod. They can help you with the CSS.

7

You have these ways to reuse a code in general, not with card-mod only:

  1. Call a code snippet by “include”.
  2. Use yaml-anchors (one file-wide only).
  3. Call a code snippet from “secrets” - which is possible but WRONG since “secrets” is supposed to keep SECRETS, i.e. confidential info (not just everything you want to use system-wide).
  4. (suitable in some use cases) use a custom decluttering-card’s templates to represent a card, a row, a set of UI elements - to be reused (similarly - about using templates of custom:apexcharts-card & custom:button-card).
  5. (for card-mod styling only) use card-mod-themes.

FYI:
– difference between include & secrets (and some posts below);
– check this FR.

8

Includes and secrets can only be used in yaml mode though. Unless card-mod supports this now?

9

This is correct.
And yaml-anchors - may be used in UI but are not persistent, replaced by a code after reopening a card.

In UI (storage mode) only decluttering-card templates (+ templates for apexcharts, button-card) & card-mod-themes may only be used to re-use a code (incl. styles).

10

Let me see if I understand (hint: I probably don’t):

These are some ways to re-use card-mod code:

  1. card-mod-themes: This method uses yaml files stored in config/themes/ to apply card-mod styles. These themes/styles can be applied card-wide or for certain entities only by the use of classes (defined within the theme).

  2. !include: This method simply reads a separate file in config/ and inserts the code at that point in the yaml

  3. yaml-anchors: I don’t understand this method, but it sounds like it has potential substantial drawbacks.

  4. !secret: This method works just like !include, but only with the file config/secrets and is meant for confidential pieces of data – so don’t use this for other things. It will not work in the UI yaml editor.

  5. decluttering-card: This method uses decluttering_templates. From there it just gets way too complicated.

I am seriously about to give up on this endeavor. I see that there are super powerful methods to achieve just about anything one can imagine, but the learning curve for a non-programmer is pretty steep.

I should probably focurs on figuring out how to use card-mod to get the look I want and just copy/paste that code 20+ times for now. That will be a huge-enough task.

11

100% working way, but not correct ideologically.

100% working way in yaml mode. In storage mode - anchors not saved after reopening (code itself is not lost).

System-wide (if a global theme selected), view-wide (if a personal theme selected) or card-wide (if a personal theme selected).