A different take on designing a Lovelace UI

[Emad131 (Emad)]

Hi @VietNgoc

I hope you can help me with 2 things.

• Unifi
• Vaccum

Part 1.
I have a Unifi Dream Machine Pro where I want to achieve it like you i want the “Router” and “AP” layout. See picture. Have followed various guides as well as what you posted but can’t get it to work. Do you have an easier guide on how to get sensors for unifi? If you have like pic and where to put the codes to get it to work. I dont get the sensors even to show up in my setup.

Guide i used:

Monitoring your Unifi AP

The default Unifi AP integration is great for the presence detection part of your network. I wanted to have a Unifi dashboard, with more info such as CPU, RAM, number of connected clients etc. I recently found out this great python module with which you can pretty much access any info on your AP. I wrote a python script that pulls some information using the above mentioned module: from unificontrol import UnifiClient from datetime import timedelta import json #### fill in your unifi control…

–
Part 2
I have 2 different dashboards depending on whether it is a large screen or a small one where I run a mixture of Mattia’s setup and Luke’s setup. I got the floorplan part but don’t really know how to draw the white lines, see my picture and your picture. I still have lukes pic with his lines and my background.
Have used Gimp for editing. Do you have an easier guide for how to draw the lines?

The last part is how can I define the zone for my vacuum cleaner? im using Roboroc qmax 7

[VietNgoc (Ngoc John)]

ad vacuum, you have to save a map image in the configuration of the vacuum camera. Then in the image program add a layer with your floorplan.

camera:
  # ROIDMI EVE PLUS VACUUM
  - platform: xiaomi_cloud_map_extractor
    name: 'Roidmi EVE'
    host: !secret roidmi_host
    token: !secret roidmi_token
    username: !secret vacuum_username
    password: !secret vacuum_password
    country: 'de'
    store_map_raw: true
    store_map_image: true
    store_map_path: /config/tmp

to define the path of a single room you have to use a custom vacuum card, select the path via UI edit mode, then define the circuits and copy the coordinator points. I have uploaded a simple video guide here.

https://dropover.cloud/0770b1

[Davst (David Stenbeck)]

how exactly did you configure this? I tried to preload the swipe card with

preload_cards:
  - swipe-card

but still get the same error.

[VietNgoc (Ngoc John)]

I use the climate sensor to summarize information about the state of the home, such as the aqi values of individual rooms, temperature, room heating status, etc.

template:
  # SENSORS
  - sensor:
      # SENSOR CLIMATE
      - unique_id: climate_index
        name: Home Climate
        state: >-
          {% set aqi = states.sensor.air_quality_index.state | float %}
          {% if 0 < aqi < 12 %}
            Excellent
          {% elif 12.1 < aqi < 35.4 %}
            Good
          {% elif 35.5 < aqi < 55.4%}
            Fair
          {% elif 55.5 < aqi < 150.4 %}
            Interior
          {% elif 150.5 < aqi %}
            Poor
          {% endif %}
        icon: >-
          {% if states('sensor.home_climate') in ['Excellent', 'Good'] %}
            mdi:leaf
          {% elif states('sensor.home_climate') in ['Fair', 'Interior'] %}
            ios:aqi-medium
          {% else %}
            ios:aqi-high
          {%- endif %}
        attributes:
          average_temperature: >-
            {{ states.sensor.average_temperature.state }}
          average_humidity: >-
            {{ states.sensor.average_humidity.state }}
          living_room_pm25: >-
            {{ states.sensor.dyson_ph04_pm_2_5.state }} µg/m³
          bedroom_room_pm25: >-
            {{ states.sensor.zhimi_mb3_8b86_pm25.state }} µg/m³
          office_pm25: >-
            {{ states.sensor.zhimi_mb4_b008_pm25_density.state }} µg/m³
          heating: >-
            {% set heaters = [
              states.climate.bedroom_thermostat,
              states.climate.office_thermostat,
              states.climate.kids_room_thermostat,
              states.climate.living_room_thermostat ] %}
            {% set heateron = heaters | selectattr('attributes.hvac_action','eq','heating') | list | count %}
            {%- if (heateron != 0) -%}
              yes
            {% else %}
              no
            {% endif %}
          purifier: >-
            {% set purifiers = [
              states.fan.dyson_ph04,
              states.fan.office_xiaomi_air_purifier,
              states.fan.zhimi_mb3_8b86_air_purifier ] %}
            {% set purifier_on = purifiers | selectattr('state','eq','on') | list | count %}
            {%- if (purifier_on != 0) -%}
              yes
            {% else %}
              no
            {% endif %}
          heating_on: >-
            {% set heateron = [
              states.climate.bedroom_thermostat,
              states.climate.office_thermostat,
              states.climate.kids_room_thermostat,
              states.climate.living_room_thermostat ] %}
            {{ heateron | selectattr('attributes.hvac_action','eq','heating') | map(attribute='name') | list | replace('Thermostat', '') }}

[pedolsky]

Apologies, I was in a hurry. Glad, you found it out.

You can use the styles variables of the circle template directly in your button card:

      - type: custom:button-card
        entity: switch.dummieswitch
        template: [base, circle]
        variables:
          circle_input: >
            [[[
              let number = states['sensor.eingeschaltete_lampen'];
              if (number) return parseInt(number.state);
            ]]]
        styles:
          card:
            - --c-stroke-color-base: pink
            - --c-stroke-color-on: blue
            - --c-font-color: red
            - --c-font-size: 1.3rem

computes:

For a full circle, you could do the following without altering the circle template itself:

      - type: custom:button-card
        entity: switch.dummieswitch
        template: [base, circle]
        variables:
          anchor: > 
            [[[ return parseInt(states['sensor.eingeschaltete_lampen']?.state); ]]]
          circle_input: >
            [[[ return variables.anchor; ]]]
        styles:
          card:
            - --c-stroke-color-base: >
                [[[ return variables.anchor > 0 ? 'blue' : 'grey'; ]]]
            - --c-stroke-color-on: none

[Scoff (Scott)]

@pedolsky Thanks very much, that’s a big help!

[Scribby]

Do you have this running on your current setup? And if so, how did you go about getting this done?
I have HACS and HASS-agent installed on my HA.

I would preferably like a UI button or an automation.

Refreshing, editing or reloading the YAML configuration or files does not work for me. The only thing that is working for me is a full restart of HA to apply and view changes. This can take anywhere from 30 seconds to a few minutes and makes the entire design process tedious.

I have my dashboard files stored in a custom directory with the use of custom templates. Back when I had my dashboard files stored in the main config directory with ui-lovelace.yaml all I would need to do was go to:

Developer Tools > Template Entities

And that would do the trick. This no longer works for me.

[Jeroen_Brouwers]

@VietNgoc , I’m looking to make a floorplan, I see you use HA-floorplan.

Why did you choose that one over picture-element?

[pedolsky]

Are we talking about template sensors or the Yaml UI files? Nullae’s solution targets the latter.
If your template entities don’t update anymore, you should check the HA logs.

[Emad131 (Emad)]

@VietNgoc

cant get the “path” button
https://dropover.cloud/793656#ced6f9bb-4bdf-48bb-98cd-d491bbcb6a62

camera:
  - platform: xiaomi_cloud_map_extractor
    host: !secret xiaomi_vacuum_host
    token: !secret xiaomi_vacuum_token
    username: !secret xiaomi_cloud_username
    password: !secret xiaomi_cloud_password
    draw: ['all']
    map_transformation:
      trim:
        top: 15
        bottom: 15
        left: 0
        right: 0
    attributes:
      - calibration_points  
    country: 'de'
    store_map_raw: true
    store_map_image: true
    store_map_path: /config/tmp

[weemaba999 (Bart Weemaels)]

HI Johannes,

Will you be able to share your full config ?

Thanks !

Bart

[VietNgoc (Ngoc John)]

in card yaml edit mode add template,

map_modes:
  - template: vacuum_follow_path

[Emad131 (Emad)]

works!
can you paste the code? @VietNgoc

[Emad131 (Emad)]

@VietNgoc
Never mind! You are mastermind!
Not done yet but soon

[VietNgoc (Ngoc John)]

What code? I have it all uploaded on github, see how I have it set up there. You can find all the configurations in the documents from the creators of the cards and plugins.

GitHub - PiotrMachowski/lovelace-xiaomi-vacuum-map-card: This card provides a...

GitHub -...

[Davst (David Stenbeck)]

For some reason I’m having issues with the conditional_media code from the tv_media.yaml

I’ve changed it to the following to fit my needs:

template:
  - select:
      - name: conditional_media
        state: >
          {% set recently_added = 'Senast tillagt' %}
          {% set paused_timeout_minutes = 15 %}
          {% set media_players = [
            states.media_player.shield,
            states.media_player.vardagsrum_atv,
            states.media_player.spotify ] %}

          {% macro media(state) %}
          {% set state = media_players | selectattr('state','eq',state) | list %}
          {% set last_changed = recently_added if state | length == 0 else state | map(attribute='last_changed') | list | max %}
            {{ state | selectattr('last_changed','eq', last_changed) | map(attribute='name') | list | join }}
          {% endmacro %}

          {% set playing = media_players | selectattr('state','eq','playing') | list %}
          {% set timeout_playing = False if playing | length == 0 else
            (as_timestamp(now()) - as_timestamp(playing | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}

          {% set paused = media_players | selectattr('state','eq','paused') | list %}
          {% set timeout_paused = False if paused | length == 0 else
            (as_timestamp(now()) - as_timestamp(paused | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}

          {% if playing %}
            {{ media('playing') if timeout_playing else media('paused') if timeout_paused else media('playing') }}
          {% elif paused %}
            {{ media('paused') if timeout_paused else recently_added }}
          {% else %}
            {{ recently_added }}
          {% endif %}
        options: >
          {% set recently_added = ['Senast tillagt'] %}
          {% set media_players = [
            states.media_player.shield,
            states.media_player.vardagsrun_atv,
            states.media_player.spotify ] %}
          {{ recently_added + media_players | map(attribute='name') | list }}
        select_option:
          service: select.select_option
          target:
            entity_id: select.conditional_media
          data:
            option: >
              {{ option }}

shield is a nvidia shield, vardagsrum_atv is a apple tv.

The issue is that templating format is so far from any coding language i can easily read and i just can’t figure out how to debug it in a good way.

Anyways… this is what is generated as my conditional_media select

All help greatly appriciated.

[Ranur (Runar)]

@Mattias_Persson on the conditional media. I’m stuck. Have tried to search the forum now, but without success. Uncertain where to add the conditional entities for the media card. options. When checking the state, i get this: - ‘[’‘Senast tillagt’’, Undefined, Undefined, Undefined, Undefined, ‘‘Spotify’’]’ friendly_name: conditional_media
I have seen past iterations where you have automations where the media_players are defined, but I can’t locate that anymore. Please push me in the right direction. So far I have added my own mediaplayers in my ui_lovelace.yaml file - are they supposed to be declared somewhere else as well?

Edit: and as I post , I notice I’m not the only one with this issue.

[pedolsky]

The variable paused_timeout_minutes is missing.

Compare with the original code.

[Jeroen_Brouwers]

It’s in the > packages > tv_media.yaml

[Davst (David Stenbeck)]

No, I doubt that’s it since I have that line in the same place as the original code?