DinoTech's Tablet Designs[video-UPDATE-04.27.2020!]

Can you please post image so I can see what is displaying. Thanks

what I am doing is little different to what you did above though. I am trying to set a back ground at the vertical stack level (yours goes all the way down). please see below the sample code. Thanks for looking into this.

- card:
    cards:
      - card:
          entities:
            - light.ceiling_light_front_room_2
            - light.front_room_light
            - switch.plug_stair_lights
            - switch.plug_tv_light_strip
          title: top1Card
          type: entities
        style:
          background-size: 100% 100%
          border-radius: 15px 15px 0px 0px
          background-color: rgba(0,0,0,0)
        type: 'custom:card-modder'
      - card:
          entities:
            - light.ceiling_light_front_room_2
            - light.front_room_light
            - switch.plug_stair_lights
            - switch.plug_tv_light_strip
          title: top2Card
          type: entities
        style:
          background-size: 100% 100%
          border-radius: 0px 0px 15px 15px
          background-color: rgba(0,0,0,0)
        type: 'custom:card-modder'
    id: rooms
    type: custom:vertical-stack-in-card
  style:
    background-size: 100% 100%
    border-radius: 15px
    background-image: url('/local/images/bg3.jpg')
  type: 'custom:card-modder'

I need to see what it is displaying so I can try to help. Thanks!

@Dino-Tech we’re working on updating the Home Assistant demo on the website and would love to include parts of your config. Would you want to contribute the config of 2 or 3 tabs for the demo? Instructions how to contribute can be found here https://github.com/home-assistant/home-assistant-polymer/wiki/Contributing-a-Lovelace-config-for-the-demo

1 Like

Would be honored. I’ll follow up on this today. :ok_hand:t2:

Just started working on some new style views thanks to @thomasloven’s layout card and card-modder . Switching background and card images with input_select and I’ll try to automate that randomly. I’d like to randomly have them change when view is clicked or a set timer.


Automated now…

Have been working on this simple and easy *NO custom cards view:


Use with Darkest-Nightz theme as main HA theme and use Clear-Nightz-II theme for the view.
Code:

    title: radar_view
    theme: Clear-Nightz-II
    background: center / cover no-repeat url("/local/backgroundz/Purple-fractals.jpg") fixed
    icon: mdi:weather-partlycloudy
    cards:
      - type: vertical-stack
        cards:
          - type: entities
            title: 'Dark Sky Summary'
            show_header_toggle: false
            entities:
              - sensor.dark_sky_summary
              - sensor.dark_sky_minutely_summary
              - sensor.dark_sky_hourly_summary
              - sensor.dark_sky_daily_summary
              - type: divider
              - sensor.dark_sky_temperature
              - sensor.dark_sky_apparent_temperature
          - type: iframe
            url: https://embed.windy.com/embed2.html
            aspect_ratio: 72%
      - type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.covington_forecast
          - type: entities
            entities:
              - type: divider
          - type: entities
            entities:
              - sensor.dark_sky_daytime_high_temperature_0
              - sensor.dark_sky_overnight_low_temperature_0
              - sensor.dark_sky_precip_intensity
              - sensor.dark_sky_precip_probability
              - sensor.dark_sky_humidity
              - sensor.dark_sky_dew_point
              - sensor.dark_sky_pressure
              - sensor.dark_sky_wind_speed
      - type: vertical-stack
        cards:
          - type: history-graph
            title: 'Outside Conditions'
            entities:
              - entity: sensor.outside_ht_temp
                name: Patio Temp
                unit_of_measurement: F
              - entity: sensor.outside_ht_humidity
                name: Patio Humidity
              - entity: sensor.dark_sky_temperature
                name: Outside Temp
                unit_of_measurement: F
              - entity: sensor.dark_sky_humidity
                name: Outside Humidity
              - entity: sensor.garage_smoke_temp
                name: Garage Temp
                unit_of_measurement: F
          - type: markdown
            content: >
              ## 
              Local Radar
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: camera.local_radar
                camera_image: camera.local_radar
                show_state: false
                show_name: false
              - type: picture-entity
                entity: camera.new_orleans_radar
                camera_image: camera.new_orleans_radar
                show_state: false
                show_name: false
3 Likes

Okay. I got this working, but not the way I want…yet. Live camera feeds as background image. Haven’t seen this yet, but it has potential. Just pulling random input selections for images for now. Would like to have PIR detection designate the camera feed displayed. I know this has been done with the custom : surveillance-card, but would like help if anyone has an idea of how to accomplish.

horrible hardware here, but good enough to get the idea…

do you have a link for this? It didn’t come up when I searched

thanks :smile:

1 Like

Is Tinycam Pro / Wyzecam working stable for you ? I have the same setup and get lots of timeouts / errors. I’m running TCP on a VM with android though, so maybe thats the issue.

care to share how you managed to accomplish this? :slight_smile: You really need a github for the awesome stuff you come up with lol

1 Like

Fairly decent. Can’t complain much here due to my total investments in the set up. $47 android tab wall mount(alarm panel controls), running on LAN through a $4 app with 5 $20 cameras presently. Much better quality when viewed directly with TinyCam’s webserver IP on PC though, but I don’t use the feeds for main security, just for occasional viewing if alerted or curious.

This is what makes the background display the live feed:

    title: test4_view
    theme: Clear-Nightz-II
    icon: mdi:tablet
    panel: true
    cards:
      - type: custom:card-modder
        style:
          background-image: "url(http://192.168.1.250:8083/axis-cgi/mjpg/video.cgi?cameraId=[[ input_select.auto_camera.state ]]&user=<username>&pwd=<password>)"
          background-repeat: no-repeat
          background-size: 100% 100%
          display: block #THIS IS ESSENTIAL!
        card:
          type: custom:layout-card
          layout: vertical
          cards:
            - type: custom:card-modder
              ...  
and this is the automation:

- alias: '[Auto] camera background select'
  trigger:
    platform: time_pattern
    seconds: '/15'
  action:
    - service: input_select.set_options
      entity_id: input_select.auto_camera
      data_template:
        options: '{{ ["1234567890", "2345678901", "3456789012"] | random }}'

and create an input_select.auto_camera
and need : card-tools; custom:layout-card; custom:card-modder installed and working before setting up page
1 Like

***learning my way through the GH process currently. Hope to accomplish in near future…

1 Like

You could also get the dafang hack, works fine. Probably best used with iframe.

Was working on a few new mobile views, but had a ground up rebuild to take care of before I could finish these up. Basically just home screen and second navigation screen for now.


There are lot of new custom cards and plenty of options…
Some simple room screens for mobile.

1 Like

Code example for 2 rooms. Pretty much all the same, depending on what you add per room.

  - id: 21
    title: living_room_view
    theme: Clear-Nightz-II
    background: center / cover no-repeat url("/local/images-lovelace/backgroundz/blue_line.jpg") fixed
    icon: mdi:hotel
    cards:
      - type: custom:card-loader
        wait:
          - compact-custom-header
          - card-modder
        card:
          type: custom:card-modder
          style:
            background-color: rgba(0, 13, 255,0.15) # 0, 0, 179
            background-size: 100% 100%
            border-radius: 25px
            border: solid 10px rgb(0, 13, 255)
            padding: 5px 8px 0px 7px
            display: block
          card:
            type: vertical-stack
            cards:
              - type: custom:compact-custom-header
              - type: picture-glance
                entities:
                  - binary_sensor.living_room_motion
                  - binary_sensor.hallway_motion
                  - switch.living_room_ceiling_light
                  - switch.living_room_ceiling_fan
                  - switch.living_room_lamp
                  - light.fireplace_lights
                  - switch.tv_accent_lights
                  - switch.subwoofer
                state_image:
                  "on": /local/images-lovelace/card_backz/Living2.ON.png
                  "off": /local/images-lovelace/card_backz/Living2.OFF.png
                entity: group.living_room_lights
                aspect_ratio: 16x9 #18x11 #
              - type: horizontal-stack
                cards:
                  - type: custom:circle-sensor-card
                    entity: sensor.living_room_thermostat_temperature
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#000dff"
                    gradient: true
                    units: ' '
                    name: Temp
                    font_style:
                      color: "#000dff" # #0000b3
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#000dff"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 50px
                      height: 50px
                  - type: custom:circle-sensor-card
                    entity: sensor.living_room_thermostat_humidity
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#000dff"
                    gradient: true
                    units: ' '
                    name: Humidity
                    font_style:
                      color: "#000dff"
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#000dff"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 75px
                      height: 75px
                  - type: custom:circle-sensor-card
                    entity: sensor.filtered_realistic_temperature
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#000dff"
                    gradient: true
                    units: ' '
                    name: Ambient
                    font_style:
                      color: "#000dff" 
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#000dff"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 50px
                      height: 50px
              - type: entities
                entities:
                  - type: custom:fold-entity-row
                    head:
                      type: section
                      label: Hallway
                    items:
                      - switch.hallway_light
                      - binary_sensor.hallway_motion
                      - switch.living_room_fan
              - type: entities
                entities:
                  - type: custom:fold-entity-row
                    head:
                      type: section
                      label: Foyer
                    items:
                      - switch.foyer_light
                      - switch.foyer_accent_lights
                      - type: custom:mini-media-player
                        entity: media_player.foyer_speaker
                        icon: mdi:google-home
                        artwork: cover
                        group: true
                        hide:
                          icon: true
                          source: true
                          power_state: false
              - type: conditional
                conditions:
                  - entity: media_player.living_room_tv
                    state_not: "off"
                  - entity: media_player.living_room_tv
                    state_not: unavailable
                card:
                  type: media-control
                  entity: media_player.living_room_tv
              - type: horizontal-stack
                cards:
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture
                      image: /local/icons/round/round_home.png
                      tap_action:
                        action: navigate
                        navigation_path: /lovelace/0   # ?kiosk&show_tabs
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture
                      image: /local/icons/round/round_close.png
                      tap_action:
                        action: navigate
                        navigation_path: /lovelace/1   # ?kiosk
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture-entity
                      entity: input_boolean.browser_refresh
                      tap_action: 
                        action: toggle
                      show_state: false
                      show_name: false
                      state_image:
                        "on": /local/icons/round/round_redo.png
                        "off": /local/icons/round/round_redo.png
  - id: 22
    title: office_view
    theme: Clear-Nightz-II
    background: center / cover no-repeat url("/local/images-lovelace/backgroundz/black_carbon.jpg") fixed
    icon: mdi:laptop-chromebook
    cards:
      - type: custom:card-loader
        wait:
          - compact-custom-header
          - card-modder
        card:
          type: custom:card-modder
          style:
            background-color: rgba(255, 187, 51,0.1)
            background-size: 100% 100%
            border-radius: 25px
            border: solid 10px rgb(255, 187, 51)
            padding: 0px 10px 0px 10px
            display: block
          card:
            type: vertical-stack
            cards:
              - type: custom:compact-custom-header
              - type: picture-glance
                entities:
                  - binary_sensor.office_motion
                  - switch.office_ceiling_light
                  - light.22507506807d3a4c9f35 # office desk light
                  - switch.office_ceiling_fan
                  - switch.office_lamps
                  - light.corner_light
                  - light.bed_light
                  - switch.office_work_bench
                state_image:
                  "on": /local/images-lovelace/card_backz/Office2.ON.png
                  "off": /local/images-lovelace/card_backz/Office2.OFF.png
                entity: group.office_lights
                aspect_ratio: 16x9
              - type: horizontal-stack
                cards:
                  - type: custom:circle-sensor-card
                    entity: sensor.office_temp
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#ffbb33"
                    gradient: true
                    units: ' '
                    name: Temp
                    font_style:
                      color: "#e69900"
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#ffbb33"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 50px
                      height: 50px
                  - type: custom:circle-sensor-card
                    entity: sensor.office_humidity
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#ffbb33"
                    gradient: true
                    units: ' '
                    name: Humidity
                    font_style:
                      color: "#e69900"
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#ffbb33"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 75px
                      height: 75px
                  - type: custom:circle-sensor-card
                    entity: sensor.office_temp_avg
                    max: 90
                    min: 30
                    stroke_width: 12
                    stroke_color: "#ffbb33"
                    gradient: true
                    units: ' '
                    name: Ambient
                    font_style:
                      color: "#e69900" 
                      font-size: 1.6em
                      text-shadow: '2.2px 2.2px black'
                      font-family: 'Righteous'
                    color_stops:
                      75: "#ffbb33"
                      80: "#ffff66"
                    style:
                      top: 50%
                      left: 50%
                      width: 50px
                      height: 50px
              - type: entities
                entities:
                  - type: divider
              - type: entities
                entities:
                  - type: custom:fold-entity-row
                    head:
                      type: section
                      label: Color Lights
                    items:
                      - type: "custom:light-entity-row"
                        entity: light.corner_light
                        icon: mdi:lamp
                        name: Corner Light
                        buttons:
                          - name: Red
                            service_data:
                              color_name: red
                          - name: Green
                            service_data:
                              color_name: green
                          - name: Purple
                            service_data:
                              color_name: purple
                          - name: Teal
                            service_data:
                             color_name: teal
                          - name: Blue
                            service_data:
                              color_name: blue
                      - type: section
                      - type: "custom:light-entity-row"
                        entity: light.bed_light
                        icon: mdi:lamp
                        name: Left Light
                        buttons:
                          - name: Red
                            service_data:
                              color_name: red
                          - name: Green
                            service_data:
                             color_name: green
                          - name: Purple
                            service_data:
                             color_name: purple
                          - name: Teal
                            service_data:
                             color_name: teal
                          - name: Blue
                            service_data:
                              color_name: blue
                      - type: section
                      - type: "custom:light-entity-row"
                        entity: light.22507506807d3a4c9f35 # office desk light
                        icon: mdi:lamp
                        name: Desk Lamp
                        buttons:
                          - name: Red
                            service_data:
                              color_name: red
                          - name: Green
                            service_data:
                             color_name: green
                          - name: Purple
                            service_data:
                             color_name: purple
                          - name: Teal
                            service_data:
                             color_name: teal
                          - name: Blue
                            service_data:
                              color_name: blue
              - type: horizontal-stack
                cards:
                  - type: entity-button
                    entity: switch.office_sound
                    name: Audio
                    tap_action:
                      action: toggle
                  - type: entity-button
                    entity: switch.office_video
                    name: Video
                    tap_action:
                      action: toggle
                  - type: entity-button
                    entity: switch.air_cleaner
                    name: Purifier
                    tap_action:
                      action: toggle
                  - type: entity-button
                    entity: switch.printer
                    name: Printer
                    tap_action:
                      action: toggle
              - type: horizontal-stack
                cards:
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture
                      image: /local/icons/round/round_home.png
                      tap_action:
                        action: navigate
                        navigation_path: /lovelace/0   # ?kiosk&show_tabs
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture
                      image: /local/icons/round/round_close.png
                      tap_action:
                        action: navigate
                        navigation_path: /lovelace/1   # ?kiosk
                  - type: custom:card-modder
                    style:
                      background-color: rgba(0,0,0,0.0)
                      border-radius: 90px
                      box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
                    card:
                      type: picture-entity
                      entity: input_boolean.browser_refresh
                      tap_action: 
                        action: toggle
                      show_state: false
                      show_name: false
                      state_image:
                        "on": /local/icons/round/round_redo.png
                        "off": /local/icons/round/round_redo.png

Active borders for alarms, alerts, timers and notifications that display on all devices viewing Lovelace…