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

Will you share the images you are using as background?
Thanks…

there are many weather backgrounds that are available in Google search. I just look for the darker images so the text shows up better. Thanks!

1 Like

Will have code posted shortly. Thanks!


topview
not perfect, but the top left and right icons are device trackers and middle is garage door, but could be used for whatever you need. Just added colors to show states

    title: home_mobile_view
#    theme: Dark-Nightz
#    background: center / cover no-repeat url("/local/backgroundz/rainy-day.jpg") fixed
    icon: mdi:cellphone-android
    cards:
      - id: d2ea36757487473184313782aac6fa3d  # Automatically created id
        type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.darren_home
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/darren_home.png
                    "off": /local/icons/round/darren_away.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: switch.garage_door
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/garage_open.png
                    "off": /local/icons/round/garage_closed.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.donna_home
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/donna_home.png
                    "off": /local/icons/round/donna_away.png
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_listen.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/13?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.8)
                  background-image: url("/local/icons/thermo.png")
                  background-repeat: no-repeat
                  background-position: center
                  background-size: 100% 100%
                  border: solid 1.5px rgba(0,0,0,1.3)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: climate.living_room
                  tap_action: more_info
                  show_state: false
                  show_name: false
                  image: /local/icons/clear.bubble.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_tv.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/13?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.disable_notifications
                  tap_action: 
                    action: toggle
                  show_state: false
                  show_name: false
                  image: /local/icons/round/round_notify.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_sun.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/20?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_camera.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/1?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_config.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/11?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_shield.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/19?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_users.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/21?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_option.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/10?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_close.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/0?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_redo.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/18?kiosk
          - type: custom:compact-custom-header
            notification: true
            menu: true
            options: false
            voice: false
            clock: notification
            clock_format: 12
            clock_am_pm: true
            header: false
            background_image: true
            tabs: false 

Custom cards:

# custom cards used
resources:
  - url: /local/custom-lovelace/thermostat-card.js?v=0.1.1
    type: module
  - url: /local/custom-lovelace/vertical-stack-in-card.js?v=0.0.9
    type: js
  - url: /local/custom-lovelace/alarm_control_panel-card.js?v=0.4.0
    type: js
  - url: /local/custom-lovelace/bignumber-card.js?v=0.0.1
    type: js
  - url: /local/card-tools.js?v=445b68
    type: js
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
    type: js
  - url: /local/custom-lovelace/card-modder.js?v=35eb37
    type: js
  - url: /local/kiosk.js?v=0
    type: js

Here is the link for the icons used: The Spherical icon set

A few different mobile screens:


  - id: 23
    title: spotify_mobile_view
    theme: Clear-Nightz-II
    background: center / cover no-repeat url("/local/mobile_backz/stoneWall.jpg") fixed 
    icon: mdi:spotify
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:card-modder
            style:
              background-image: url("/local/mobile_backz/diamondPlate.jpg")
              background-repeat: repeat
              background-size: 100% 100%
              border-radius: 25px 25px 0px 0px
              color: rgb(102, 255, 51)
            card:
              type: entities
              show_header_toggle: false
              entities:
                - type: custom:bignumber-card
                  entity: sensor.time
                  scale: 14px
                  color: rgb(102, 255, 51)
                - type: custom:mini-media-player
                  entity: media_player.spotify
                  name: Spotify Player
                  artwork: full-cover-fit
                  hide_icon: true
                  power_color: true
                  idle_view: true
                  volume_stateless: true
                  replace_mute: stop
                  toggle_power: turn_off
                  show_progress: true
                  group: true
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border-radius: 0px 0px 0px 25px
                card:
                  type: picture
                  image: /local/icons/round/1mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_previous_track
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/4mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_play_pause
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")  # backgroundz/BlackStainless3
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/5mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_play
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/6mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_stop
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border-radius: 0px 0px 25px 0px
                card:
                  type: picture
                  image: /local/icons/round/8mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_next_track
                    service_data:
                      entity_id: media_player.spotify
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_home.png 
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/18?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_close.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/0?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_redo.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/23?kiosk
2 Likes

Is there a way to set a specific Mobile/PC view to a device?

Awesome views btw, keep it up!

1 Like

Thanks! Can be done this way: Thanks to @maykar https://github.com/maykar/compact-custom-header but I prefer using different views for mobile, mainly because of wallpaper size and the different display properties for mobile vs. desktop & tablet. I have a specific view for each button on mobile home_view(shown above) and the buttons are set to navigate to the view intended. Unfortunately, I have currently 24 views and over 4k in code. Plan on revising and cutting back a bit.I will be moving the mobile_home_view to /lovelace/0 position(initial view) and adding a button to send to PC or tablet views section soon.

Great, thanks… will you be so kind to share also the background images?

1 Like

Is the github still available? I only see a 404.

He was making changes to repo I think. Checked and edited link. Should work now

I do not own the rights to these images, but the images can be found here: https://pngtree.com/free-backgrounds and many more and 2 per day can be downloaded. The image size needed depends on device you are using to view. Example: on my device, Pixel 2XL, the screen size is 2880x1440, so I resize my mobile backgrounds to that size for optimal viewing and no stretching or distortion.

1 Like

I have been trying to figure out how to create a black on black theme and all of the text be visible. I was told it wasn’t possible due to the way HA theme is designed. Well…good enough for me!

    Darkest-Nightz:
      dark-primary-color: "#4d4d4d"
      disabled-text-color: "#5e5e6e"
      light-primary-color: "#a2a2a9"
      paper-card-background-color: "#121317"
      paper-grey-200: "#acacb9"
      paper-item-icon-color: "#c8c8d0"
      paper-listbox-background-color: "#0b0e0f"
      primary-background-color: "#0b0e0f"
      primary-color: "4d4d4d" # # # # # # # # # <<---- DO NOT CHANGE # # # 
      primary-text-color: "#f2f2f2"
      secondary-text-color: "#babac4"
      text-primary-color: "#d6d6dc"
      secondary-background-color: "#737373"
      sidebar-text_-_background: "#66757f"
      paper-card-header-color: "var(--paper-item-icon-color)"
      paper-item-icon-active-color: "#e4da00"
      paper-item-icon_-_color: "var(--primary-text-color)"
      paper-listbox-color: "var(--primary-text-color)"
      paper-grey-50: "var(--primary-text-color)"
      paper-slider-active-color: "var(--light-primary-color)"
      paper-slider-knob-color: "var(--paper-item-icon-color)"
      paper-slider-knob-start-color: "var(--secondary-background-color)"
      paper-slider-pin-color: "var(--secondary-background-color)"
      paper-slider-secondary-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "#e4da00"
      paper-toggle-button-unchecked-button-color: "var(--table-row-background-color)"
      paper-toggle-button-checked-bar-color: "var(--paper-item-icon-color)"
      paper-toggle-button-unchecked-bar-color: "var(--paper-item-icon-color)"
      table-row-background-color: "#22232b" 
      table-row-alternative-background-color: "var(--paper-card-background-color)"
      sidebar-icon-color: "#838395"
      sidebar-text-color: "#F1F1F1"
      sidebar-selected-background-color: "var(--primary-background-color)"
      sidebar-selected-icon-color: "#b3b3b3"
      sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
      divider-color: 'hsl(220, 5%, 38%)'
      dark-divider-opacity: '0.5'
      light-divider-opacity: '0.1'
      shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 27%)'
      shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 38%)'
      paper-font-headline_-_letter-spacing: '-0.2px'
      paper-font-headline_-_font-weight: '500'
      paper-font-body1_-_font-weight: '500'
      label-badge-red: 'hsla(0, 0%, 0%, 0)'
      label-badge-border-color: 'var(--label-badge-red)'
      label-badge-background-color: 'var(--paper-card-background-color)'
      label-badge-text-color: 'var(--primary-text-color)'
      primary-font-family: "Verdana"
      paper-font-common-base_-_font-family: "var(--primary-font-family)"
      paper-font-common-code_-_font-family: "var(--primary-font-family)"
      paper-font-body1_-_font-family: "var(--primary-font-family)"
      paper-font-subhead_-_font-family: "var(--primary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--primary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      google-red-500: "#cc0000"
      google-blue-500: "#0033cc"
      google-green-500:  "#00cc00"
      google-yellow-500: "#ffff66"

Let me know what you think.

6 Likes

Awesome! Looks really good!

1 Like

minor adjustment if you prefer a darker green as I do…

google-green-500:  "#13eb13"

trying to get rounded corners but, looks like it doesn’t work with picture-elements card. I am getting a square picture on top of rounded box

1 Like

Have you tried overflow:hidden

2 Likes

corrected @thomasloven 's post My Lovelace Plugins

1 Like

trying to make mini graph card semi transparent (like you did for office temp/humidity, etc). transparency seems to work but the image is not appearing from beneath. please see below the relevant code.

- card:
      cards:
        - card:
            detail: 2
            height: 50
            entity: >-
              sensor.philio_technology_corporation_phpab01eu_micromodule_energy_meter_power
            hide:
              - icon
              - state
            name: Power Usage
            type: 'custom:mini-graph-card'
          style:
            background-color: rgba(0,0,0,0.3)
            background-size: 100% 100%
            border-radius: 15px 15px 0px 0px
          type: 'custom:card-modder'  
      type: 'custom:vertical-stack-in-card'
    id: powerusage
    style:
      background-image: url('/local/images/powerMeter.jpg') fixed
      background-size: 100% 100%
      border-radius: 15px
    type: 'custom:card-modder'

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!