A different take on designing a Lovelace UI

how to get the devices information, what plugin? :star_struck:

thx for sharing love the transition to turn on TV. I have the same idea to orgnize my NAS, course it alway take time for turning on/off. I can turn on/off remote, but when i turn on I can’t get the loading anmination,would someone help? here is my code:

define my NAS as switch.

- platform: wake_on_lan
  name: GEN8 NAS
  mac: !secret gen8_nas_mac
  host: !secret gen8_nas_ip
  turn_off:
    service: shell_command.turn_off_nas

define the card button
image

how to get the loading status?

i found the code in your lovelace.yaml

loading: >
[[[ var boolean = states['input_boolean.sony_bravia_tv'].state;
var invert = (entity.state === 'off') ? 'invert(1)' : 'none';
var loader = '<img src="/local/loader.svg" width="100%" style="filter:' + invert + '">';
if (boolean === 'on' && entity.state === 'off' || boolean === 'on' && entity.state === 'on') return loader; ]]]

so why do u define the “input_boolean.sony_bravia_tv” as boolean type?

1 Like

may u check the path, try

/popup/test.yaml

NOTICE the ‘/’

if the yaml and the popup file are not in same folder, try entire path like “…/folder/folder/filename.x”

old post

The input booleans are just there to hide/show the loading wheel. So when I turn on my TV I do it with a switch.

#configuration.yaml

input_boolean:
  sony_bravia_tv:

switch:
  - platform: template
    switches:
      tv_template:
        value_template: "{{ is_state('media_player.sony_bravia_tv', 'on') }}"
        turn_on:
          service: script.tv_on
        turn_off:
          service: script.tv_off

If we take a look at the scripts, I turn on the input boolean and then turn on the tv. I’m letting apple tv turn on the tv with hdmi-cec. Also turning on the input boolean again when turning off the tv.

#scripts.yaml

tv_on:
  sequence:
    - service: input_boolean.turn_on
      entity_id: input_boolean.sony_bravia_tv
    - service: remote.send_command
      data:
        entity_id: remote.vardagsrum
        command: menu

tv_off:
  sequence:
    - service: input_boolean.turn_on
      entity_id: input_boolean.sony_bravia_tv
    - service: media_player.turn_off
      entity_id: media_player.sony_bravia_tv

The reason for naming the input_boolean the same as the TV (input_boolean.sony_bravia_tv, media_player.sony_bravia_tv) is to be able to condense the automation which turns the loading wheel off.
I also have a fail safe in case some state changes doesn’t register and the wheel spins forever. To combat this I just time it so if it goes on for more than a minute it turns itself off.

#automations.yaml

- alias: turn_off_loading_wheel
  initial_state: true
  trigger:
  # watch TV state change from on to off or the reverse
    - platform: state
      entity_id: 
        ['media_player.sony_bravia_tv', 'media_player.samsung', 
         'switch.dator_template', 'switch.playstation_template']
  action:
  # turn off loading wheel with corresponding entity_id
    - service: input_boolean.turn_off
      data_template:
        entity_id: >-
          {{ trigger.entity_id | 
          replace('media_player', 'input_boolean') | 
          replace('switch', 'input_boolean') }}

- alias: turn_off_loading_wheel_fail_safe
  initial_state: true
  trigger:
    - platform: state
      entity_id: 
        ['input_boolean.sony_bravia_tv', 'input_boolean.samsung', 
         'input_boolean.dator_template', 'input_boolean.playstation_template']
      to: 'on'
      for:
        minutes: 1
  action:
    - service: input_boolean.turn_off
      data_template:
        entity_id: "{{ trigger.entity_id }}"

Hope that helps

EDIT:

@coLATin Come to think of it, we can bypass switches and scripts by directly calling it in button-card.

- type: custom:button-card
  entity: media_player.sony_bravia_tv
  tap_action:
    services: |
      [[[ if (entity.state === 'off')
      hass.callService('input_boolean', 'turn_on', {entity_id: 'input_boolean.sony_bravia_tv'});
      hass.callService('remote', 'send_command', {entity_id: 'remote.vardagsrum', command: 'menu'});
      if (entity.state === 'on')
      hass.callService('input_boolean', 'turn_on', {entity_id: 'input_boolean.sony_bravia_tv'});
      hass.callService('media_player', 'turn_off', {entity_id: 'media_player.sony_bravia_tv'}); ]]]
3 Likes

much appreciated, will do that :wink:

HI Matt. Great work you have done. I am having some issues using your setup i hope you can help with. So in the sidebar i wanted to implement my calendar card from hacs which works fine. My issue is when i insert it in picture elements and more agendas are added the card expands not in a downwards vertical direction as it should do but both up/downwards. How can i force it to expand only downwards? I hope you can help me with a solution. image

I know that for certain things you can set height or max-height to 1px. If it respects the height you’ll not see the card but if it doesn’t that will lock it in place vertically.

1 Like

You are brilliant. It work. Thanks a million.

1 Like

HI Matt. Just a second question. The icon you use for the vacuum to lunch the mod_browser works perfect, but is it possible to do this with an image instead without including an entity like in your solution?

By including an entity do you mean the tap action? If so yes

- type: image
  image: local/test.png
  style:
    top: 50%
    left: 50%
    width: 50%
  tap_action:
    action: call-service
    service: browser_mod.popup
    service_data:
      deviceID: this
      ...

Hey @Mattias_Persson

Did you change your synology_dsm configuration from your configurations / sensors file and used the now build in Integration feature instead?

Perfect. i cant believe how much time i have used to found this out.
Last question :slight_smile: in your greatings card: instead off using unicode character how could i use an image instead? (I am displaying from an rpi so the icons are not that nice)
Can i do this in the same sentence or would you create another sensor that changes image?image

I think you could use these as markdown renders them

emoji {{'\U0001F611'}} 
icon <ha-icon icon="mdi:home-assistant"></ha-icon> 
image <img src="/local/test.png" width="40%">

Yeah, I think the modified stopped working and haven’t looked into it.

EDIT:

Hey @Yoinkz
The setup moved from sensors.yaml to configuration.yaml

#configuration.yaml

synology_dsm_custom:
  # update sensors every 30 seconds instead of 15min
  # __init__.py SCAN_INTERVAL = timedelta(seconds=30)
  # const.py DOMAIN = "synology_dsm_custom"
  # manifest.json "domain": "synology_dsm_custom"
  - host: !secret synologydsm_host
    port: !secret synologydsm_port
    ssl: false
    username: !secret synologydsm_username
    password: !secret synologydsm_password

EDIT 2:
21/05/2020

Scan interval has been added to the integrations page, so ignore above instructions.

Im am 100% sure how to impletment this? could you give an example?

Literally just replace the unicode with an mdi or image

{% set t = now().hour %}
{% if t <= 1 %} God natt {{'\U0001F611'}}
{% elif t <= 3 %} God natt <ha-icon icon="mdi:home-assistant"></ha-icon> 
{% elif t <= 5 %} God natt <img src="/local/test.png" width="40%">
...
2 Likes

Work like a charm. :ok_hand: Just one last thing for today ;). I have had this discussion with many. When running picture elements en “panel=true” it automatically adjust the width but do you have any good idea how to automate the height so we dont have the roller on the right side? i have seen alot of questions regarding this?

That’s not possible, sorry.

OK. Anyways. Thanks for your assistance this evening. Its much appreciated.

Hi Jason, I got rid of the scroll bar simply by resizing the background image to the screen resolution I’m using. Only problem is that opens up another can of worms in having to correct the height % spacing for everything.
That’s just how it goes but to get a UI that looks as good as this. In the years I’ve been using HA, nothing has sunk my time like this has :wink: but I have learnt some Swedish…