A different take on designing a Lovelace UI

I don’t anymore, I just haven’t updated the screenshots. But If you really need it browse my repo history.

browser_mod.popup title: Close and then style the popup to be transparent and the card inside the popup holds the title and entities if that makes sense.

You second example is identical to mine which leads me to believe it’s the sensor.

{{ states('sensor.monitors_volume') }}

outputs int 50

mon

Thanks for that @Mattias_Persson! Its no must have but I really liked the look of it.

Hi Mattias

Sensors seems to work fine.

Can I be because I’m using “volume” multiple times in the yaml? That is coming from you of course… is position or similar the right word here?

It shouldn’t matter since each card is isolated from each other. What’s the error message?


Does it return the state using a temp name on any working button card?

name: >
  [[[ return states['sensor.cover_position_gang'].state; ]]]

There’s some math for the circle, so does this work?

name: >
  [[[ return states['sensor.cover_position_gang'].state - 20; ]]]

If not, try parsing the state as an integer

name: >
  [[[ return parseInt(states['sensor.cover_position_gang'].state) - 20; ]]]

how do you get popup information in its own card like this?

1 Like
2 Likes

Hey @Mattias_Persson, can u post the config of the sensor.placeholder here? i`m stucked on this.

UPDATE
Tried again, was just unable to see it.
2020-09-20_09h55_58

Wuhuu, I hope? Didn’t manage to integrate it into the circle?


Hi again

No error messages. Just doesn’t appear?

I unsure what to do with that? Remove all custom field config and replace with, doesn’t help in either 3 cases:

Blockquote
name: >
[[[ return states[‘sensor.cover_position_gang’].state; ]]]

Sorry but here I’m really not that experienced :slight_smile:

For all who are interested, here’s my lovelace config:
https://mega.nz/file/zSB2jKjZ#XULaa_Mg3j76uQBnPcj-t7iL8CHKIDyoJM_wE9uH_dc

@martheijnen @Beershaker @florisi

3 Likes

no one really asked?

        - service: browser_mod.popup
          service_data:
          entities: 
            - light.bed_light
            - light.kitchen_lights
            - light.ceiling_lights
          deviceID:
            - d6416720-bbb8badf

doesnt work? do i need a picture element to call this or something?

how do i get a light botton to popup for the lights i want to turn on?


        - type: 'custom:button-card'
          name: 'Tänd lampan'
          tap_action:

no one really asked?

Actually some did.

doesnt work?

your example leaves out things in my example

There’s also the 🔹 Browser_mod - turn your browser into a controllable device, and a media_player thread.

1 Like
    - type: 'custom:button-card'
      name: 'Lights'
      tap_action:
        service: browser_mod.popup
        service_data:
        entities: 
          - light.bed_light
          - light.kitchen_lights
          - light.ceiling_lights
        deviceID:
          - d6416720-bbb8badf
sensor:

...

  - platform: template
    sensors:

    ...

      placeholder:
        value_template: ' '

You can search repos
https://github.com/matt8707/hass-config/search?l=YAML&q=placeholder

If I add the name template to my config it looks like this.

temp
You’ve changed something, and you don’t know, I certainly don’t :stuck_out_tongue:

Wow, Thanks. Sorry about that, i have searched before and somehow didn’t show anything. Anyway thaks man.

@Mattias_Persson, another question. Did you use a temporary token on your plex recently added or a developer token? its seens the temporary token can be valid for some hour or years depend on the case.

I followed the three steps

I’ve never had to update it

@Mattias_Persson First of all, thank you very much for sharing your config, it has been very very inspring.

I’m changing my mobile UI and, with your permission, I’ve borrowed some of your ideas, specifically the SVG generation for the states.

I’ve got a question about that: how can I reuse SVG generation to include multiple states in a button-card?

Example: a button-card for presence detection that includes charging level and state for multiple devices. Something like that:

IMG_8220

Thank you very much.

1 Like