Show off your picture-elements uses

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

How did you 1 background for - sidebar and other part

It’s just a Picture Elements card with my floorplan as image. On top i have the custom:sidebar-card and some other cards. I also use Custom Header to hide the top header, but that function will break with the next update.

Buth how you have same image underneath side bar, whole background looks like one background

The background is just the background as it is in the theme. On top i have the Picture Elements card, in the tab in the header make sure panelmodus is selected. So the card spread over the whole screen. The image i use in de Picture Elements card is my floorplan.png, so with transparacy around the ‘house’.

In the Picture elements card i also placed the Sidebar-card, with the background set to transparant.

Reply to my own post for an update. Full write up, explanation and code is shared here: Fully loaded media player card (picture-elements project)

@Frank_Hagenbuch @jimz011

1 Like

This is my new home assistant interface :grinning:
it’s specifically designed for tablet in kiosk mode

I recorded a small video

This is my config

26 Likes

Very nice :slight_smile:

2 Likes

You did an amazing job with your setup. I’m sure that you will be soon be inundated with many questions about it. I’ll start
 :slight_smile:

  • How did you accomplish the drag on your floorplan to rotate to a different floor? (at ~ 1:17 in the video) Is that specific to kiosk mode? The rotation animation and transition is really nice.
2 Likes

Judging by the animation and the pagination bullets at the top, I believe this is swiper card with effect: cube as parameter.

2 Likes

:astonished: You win Home Assistant. :astonished:

1 Like

Thanks. I wasn’t aware of that card.

Hi, great job, can I ask you how did you manage to get this cool pop up ?

Thank you guys :blush:
@cdopp as ASNNetworks said the home section is a swipe card with cube effect. each floor is a picture elements card inside the swipe card
@MrJelly17 I don’t know if you are talking to me and which popup you are referring to, btw, each popup window is made using browser_mod.popup service

Great work! any chance of seeing some code? :smile: I’m also interested in how you added the ‘now playing’ in your setup. Looks great!