Show off your picture-elements uses

I will try soon! I’m very busy at the moment and the card needs some explaining because I have also set stuff the card doesn’t show (like theme colors and input boolean for day/night theme).

This is the final card (well, almost, I’m still waiting how to link the new Media Browser to a button :slight_smile:!)

Day Play + Pause
msedge_qG3a9yDKIO
msedge_cLiARgjbdm

Night Play + Pause
msedge_PGar36yAUC
msedge_K6IwYqh4ry

7 Likes

Latest update!

Use of picture-elements and picture-entity (animated climacon change on state) with a generous sprinkle of CSS.

6 Likes

How did you get your tabs at the bottom of the page?? :smiley:

Hi. I used this Custom Header

2 Likes

What calendar card are you using?

This one Lovelace Google Calendar

Fantastic work!

Would you mind telling me how you got the weather to appear like that?

@ASNNetworks I love that card, and it is just a core picture elements right? Would you be so kind to share this?

hello, can you send me please file empty_frame.png.
then could you explain to me how to create that avatar?
what size should it have?

thank you

Please let us see your config, you have so many cool things postet , let us see all together :slight_smile:

1 Like

Unfortunately I am extremely busy having two jobs and my configuration is split into 40+ different files and locations. But I do want to share a proper write up of this media player with detailed explanation. I am on holidays this week, so I’ll try to do that end of this week!

@jimz011 tagging you as well I saw your message this thread, I’ll update you when I have the write up!

I’ll create a new thread with the write up.

1 Like

I did it like this.

aspect_ratio: '4'
elements:
  - card_type: weather-forecast
    entity: weather.eindhoven
    secondary_info_attribute: humidity
    style: |
      ha-card {
        background: purple;
        font-family: Days One;
        font-size: 20px;
        height: 400px;
        left: 250px;
        text-shadow: 2px 2px 2px black;
        top: 0px;
        width: 490px;
      }
    type: 'custom:hui-element'
image: 'http://192.168.0.117:8123/local/back.png'
type: picture-elements
1 Like

Just started with HA and this is what i have so far. But guess i have to make some changes as custom header won’t work in the future.

5 Likes

please can you sendme back.png file?

For a first timer a helluva good-looking setup. Goed gedaan man. Share? :+1:

Here you go :grin:!

back|281x500

Dank je! At this piont it’s not finished yet and i have to make some big changes because CH won’t work in the future. So at this point i wanna have a look in which direction i will go. Will update when i have made progression

I can’t download

Click on it. Then it opens as big picture. Right click on it and download

Here is a configuration to set the time of an automation :

reveil

Disabling the alarm clock prevents editing of the configuration.
The change of color and icon is done thanks to the customize part.

Rest assured the colors will match your theme :wink:
8137a6d0796a446a180d3ef282e36d8ebd5b452d d3efa4f07b230835538737c069cda66283e330d7

This card uses:


Card code

elements:
  - entity: sensor.vide
    prefix: Réveil 1
    style:
      color: var(--primary-color)
      font-size: 20px
      font-variant: small-caps
      left: 13%
      pointer-events: none
      top: 70%
    tap_action:
      action: none
    type: state-label
  - entity: input_boolean.wakestatus_1
    style:
      '--paper-item-icon-color': var(--primary-color)
      left: 13%
      top: 35%
    tap_action:
      action: toggle
    type: state-icon
  - entity: input_datetime.wake_time_1
    hide:
      name: true
    hour_step: 1
    layout:
      align_controls: center
      name: inside
    link_values: true
    minute_step: 1
    name: ''
    style:
      .: |
        ha-card {
          box-shadow: none;
          background-color: rgba(0,0,0,0);
          opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
          pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
        }
        .time-picker-row{
          margin-left: 5px !important;
        }
      .time-picker-row:
        .time-picker-content:
          .: |
            .time-separator {
              display: none;
            }
          time-unit:
            $: |
              .time-unit {
                padding: 2px !important;
              }
              .time-input {
                border: 2px solid var(--primary-color) !important;
                background-color: rgba(0,0,0,0) !important;
                color: black !important;
                border-radius: 5px;
              }     
              .time-picker-icon {
                color: var(--primary-color) !important;
                z-index: 100;
              }
      left: 45%
      top: 50%
    type: 'custom:time-picker-card'
  - entity: input_boolean.wakeweekday_mon_1
    icon: 'mdi:alpha-l-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 17%
      top: 20%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_tue_1
    icon: 'mdi:alpha-m-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 7%
      top: 20%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_wed_1
    icon: 'mdi:alpha-m-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 22%
      top: 50%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_thu_1
    icon: 'mdi:alpha-j-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 12%
      top: 50%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_fri_1
    icon: 'mdi:alpha-v-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 2%
      top: 50%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_sat_1
    icon: 'mdi:alpha-s-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 17%
      top: 80%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_sun_1
    icon: 'mdi:alpha-d-circle'
    show_label: false
    show_name: false
    show_state: false
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 7%
      top: 80%
    styles:
      card:
        - width: 35px
        - height: 35px
        - border-radius: 999px
        - background-color: 'rgba(0, 0, 0, 0)'
        - box-shadow: none
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      icon:
        - transform: scale(2.1)
    type: 'custom:button-card'
image: /local/images/transparent/transparent.png
type: picture-elements


Entities code
#Input_booleans
input_boolean:
  wakestatus_1:
    name: Alarm 1
    icon: mdi:alarm
  wakeweekday_sun_1:
    name: Sunday
    icon: mdi:calendar
  wakeweekday_mon_1:
    name: Monday        
    icon: mdi:calendar
  wakeweekday_tue_1:
    name: Tuesday        
    icon: mdi:calendar
  wakeweekday_wed_1:
    name: Wednesday       
    icon: mdi:calendar
  wakeweekday_thu_1:
    name: Thursday       
    icon: mdi:calendar
  wakeweekday_fri_1:
    name: Friday        
    icon: mdi:calendar
  wakeweekday_sat_1:
    name: Saturday        
    icon: mdi:calendar
    
#Input_datetime
input_datetime:
  wake_time_1:
    name: wake_time_1
    has_date: false
    has_time: true

#Sensors
sensor:
  - platform: template
    sensors: 
      vide:
          value_template: "" 

automation:
  - id: 'wake_1_detect_time' 
    alias: Wake 1
    trigger:
      platform: template
      value_template: "{{states('sensor.time') == (state_attr('input_datetime.wake_time_1','timestamp') | int | timestamp_custom('%H:%M', False))}}"
    condition:  
     condition: template
     value_template: >
        {% set today = 'input_boolean.wakeweekday_' ~ now().strftime("%a") | lower ~ '_1' %}
        {{ is_state('input_boolean.wakestatus_1', 'on') and is_state(today, 'on') }}
    action:

homeassistant:
  customize:
    input_boolean.wakestatus_1:
      templates:
        icon_color: if (state === 'on') return 'green'; else return 'red';
        icon: if (state === 'on') return 'mdi:alarm-check'; else return 'mdi:alarm-off';

source @Kayden919 @cob94440

3 Likes