đŸ”č Lovelace_gen - Add abilities to ui_lovelace.yaml

Share your Projects! Custom Integrations
61

I accomplished what I wanted (more or less) using the include arguments now, works really good!
Thanks for the tip!

62

could you post an example?

63

Here’s an example from my own configuration:

This code:

Includes the same floorplan twice, once with only lights, and once with only things that are not lights.
In another view, I have the same floorplan with everything included.

Floorplan code here:

1 Like
64

Hi Thomas.
The !file facility causes errors in 0.107.x (with resources moved from ui-lovelace.yaml to configuration.yaml for dashboards). I created an issue in the repository.

65

Hi there,

I’m having a hard time getting a card working where it generates the card from a list of entities based on what selected in an input_select.
My VSCode addon gives me this:

image
image1601×1228 154 KB

Anny suggestions?

66

Several:

  • Don’t post pictures of code. Especially with this much noise. 4/5 of what’s shown in that picture has nothing to do with your problem, and thus it takes me five times as long time to find the problem as it should have to.
  • Strip the problem down to the bare essentials. Remove as much as possible, or - better yet - start from something very very simple and then expand from that. This will help you with the next suggestions.
  • Explain what you are trying to do and why you think your method is right
  • Explain what you expected to happen
  • Explain what happens instead
  • Explain what you have already tried in order to fix it and what happened then

The errors from vscode, btw, are probably because you are mixing jinja and yaml, and the plugin can’t handle that. It’s a very uncommon combination outside of hass.

68

Hi Thomas,

I totally agree on you points.
My initial thought was that the issue lied in the syntax/errors i could see in the VS Code.
As these red line/red comments was not copyable i had to do a screenshot. Again I agree, never use screenshot for code.

But since the issue is not the red lines i will try to explain which goal i trying to achieve.

I would like a card on my lovelace, where i have a drop down meny where i can select one of my room, and the it should show only what entities i have in that room.
The example i’m following is from a guy who put his configuration on github, but he’s unable to help be because of family related thing.

Maybe there a smarter way to do this`?

69

lovelace_gen can not change anything based on the state of your entities.

Try this instead.

70

So I’ve been reading up on lovelace_gen and I’m very interested to cut down my code by a lot (currently sitting around 25.000 lines of code for my tablet and smartphone interfaces). Before I take the plunge and achieve the no point of return, I have just one question: will this also in theory load stuff faster (especially tablet)? Having a shit load of (conditional) custom cards slows thing down I noticed (especially on mid-range tablets). If so, that would be a big bonus to use this.

71

I can’t say for certain, but I wouldn’t expect so.

Lovelace_gen takes the yaml you create and GENerates the full Lovelace configuration from it, by the time it’s loaded in the browser there’s probably just as many lines of config as before.

2 Likes
72

That makes sense. Regardless I will try further down the road. It’s a great way to learn more and tidy up my codes along the way :slight_smile:

73

It offers lots of benefits around keeping the config under control and manageable, IMO it’s well worth the learning curve.

1 Like
74

While I do understand that lovelace_gen does a one time parsing and creation of config, and as such does not update the GUI dynamically as sensors change - it will in some situations still make sense to allow “state”-data in the config. Not all states are “dynamic” in the sense that they change often.

Just like @klogg I use a lot of inputs (input_number, input_text etc) to define a lot of names and “static” values, to keep them consistent between automations, scripts and the GUI. For now, I can’t use these in combination with lovelace_gen.

A simple example would be an “indoor_temp.yaml” that could look something like

{% set max_temp = states('input_number.max_indoor_temp') %}
{% set min_temp = states('input_number.min_indoor_temp') %}

type: 'custom:canvas-gauge-card'
gauge: 
  maxValue: {{ max_temp }}
  minValue: {{ min_temp }}

(...)

type: custom:mini-graph-card 
upper_bound: {{ max_temp }} 
lower_bound: {{ min_temp }}

I don’t expect lovelace_gen to atuomatically reflect any changes to the inputs. Just use the value as defined at the time of UI-generation. So if I change the inputs, the gauge and graphs do not change until I reload the UI, but I would still be able to use the values from the inputs to generate the card to ensure that it is consistant with automations and scripts that does other stuff based on the values.

1 Like
75

How do I parse ‘structures’ ?

E.g.: this is my template:

# lovelace_gen

type: custom:mini-graph-card
entities:
  {{ entities }}
align_icon: {{ align_icon|default('right') }}
align_state: {{ align_state | default('center') }}
hours_to_show: {{ hours_to_show|default('24') }}
points_per_hour: {{ points_per_hour|default('2') }}
line_width: {{line_width|default('3') }}
hour24: {{ hour24|default('true') }}
group_by: hour
animate: {{ animate|default('false') }}
icon: {{ icon }}
aggregate_func: {{ aggregate_func | default('avg') }}
line_color: {{ line_color|default('red') }}
name: {{ name }}
font_size: {{ font_size|default('70') }}
font_size_header: {{ font_size_header|default('11') }}
show: 
  graph: {{ graph|default('line') }}
  icon: {{ show_icon|default('true') }}
  name: {{ show_name|default('true') }}
  fill: {{ show_fill|default('true') }}
  extrema: {{ show_extrema|default('false') }}
  average: {{ show_average|default('false') }}
style: |
  ha-card {
    border-radius: 10px;
    --paper-item-icon-color: var(--paper-item-icon-color);
    --paper-item-icon-active-color: var(--paper-item-icon-active-color);

    box-shadow: 5;
    font-weight: bold;
    opacity: 1.0;
  }

Now, this works:

              - !include
                - '../templates/graph.yaml'
                - entities: 
                    - sensor.zonneboiler_temp3
                    - sensor.zonneboiler_temp2

This doesn’t:

              - !include
                - '../templates/graph.yaml'
                - entities: 
                    - entity: sensor.zonneboiler_temp3
                      color: red
                    - entity: sensor.zonneboiler_temp2

How should i format it ?

76

See the Note: near the bottom of this section.

77

Yeah, I’ve read that link before. Just not sure how to do it. How does it know then where to add the ‘-’ ? Or do I need a dict inside a dict? E.g. the color belongs to the entity:

- entity: sensor.zonneboiler_temp3
  color: red
- entity: sensor.zonneboiler_temp2
78

What you have there is a list of dicts that you want to pass as a string.
It’s not entirely straight forward.

Maybe this can clear things up a bit: http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

79

I’ve tried to use the following jinja in my lovelace yaml and get an error
{% set data = state_attr('sensor.sonarr_upcoming_media', 'data') | from_json %}

jinja2.exceptions.TemplateAssertionError: no filter named 'from_json'

the same jinja works ok in developer tools

80

Try fromjson as it is in the documentation.

You’ll probably find that state_attr doesn’t work, though. lovelace_gen generates a static lovelace configuration, and thus is can’t use dynamic attributes or states.

81

blast - back to the drawing board

Thanks