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

Dino-Tech · March 12, 2019, 3:49am

Picture card works fine for me, as I don’t need Title or tint at bottom like glace-card. Simple code too code for random camera images on main view pictured above

            - type: custom:card-modder
              style:
                background-image: "url(http://<local_IP_address:PORT>/axis-cgi/mjpg/video.cgi?cameraId=[[ input_select.auto_camera.state ]]&user=<username>&pwd=<password>)" 
                background-repeat: no-repeat
                background-size: 100% 100%
                border: solid 2.5px rgb(168, 168, 168)
                height: 414px
              card:
                type: picture
                image: /local/images-lovelace/backgroundz/ClearPNG.png

Dino-Tech · March 18, 2019, 7:52pm

Mini tutorial example including code for alert borders and notes. FINALLY COMPLETED… Copy and paste LL view with live editable instant styling which doubles as a visual tutorial on what styles look like when applied to cards in real time…Whew!!
Input_selects needed: https://pastebin.com/V4mLCHAc
Code for LL view: https://pastebin.com/4AY4gt2k

An example of what it looks like when incorporated into a wall mount display…never get bored and always be able to select a new image or even can be automated to change for ??? whatever you like

Dino-Tech · March 19, 2019, 3:50pm

Modified themes to replace Dark-Nightz and Clear-Nightz-II. One has clear card backs and the other has smoke card backs https://pastebin.com/KsREmjVn

Dino-Tech · March 21, 2019, 8:24am

Trying out some of the new cool ‘Theme’ features of compact-custom-header @mayker just added. Will be incorporating them into a few themes soon.

inspiration for card from @cjsimmons, Thanks!
Code for view:

  - id: 44
    title: server_view
    background: center / cover no-repeat url("/local/images-lovelace/backgroundz/seamless.jpg") fixed
    icon: fas:server
    panel: true
    cards:
      - type: custom:card-modder
        style:
          background-image: url("/local/images-lovelace/backgroundz/ledlite.jpg")
          background-repeat: no-repeat
          background-size: 100% 100%
          border-radius: 20px
          border: solid 8px blue
          padding: 50px, 100px, 0px, 100px
          font-size: 1.35em
          font-weight: bold
          color: "#FFF"
          height: 450px
        card:
          type: entities
          title: Pi 3
          show_header_toggle: false
          entities:
            - type: custom:vertical-stack-in-card
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:bar-card
                      title: CPU
                      title_position: inside
                      entity: sensor.processor_use
                      card_style:
                        background: none
                        box-shadow: none
                      bar_style:
                        padding-left: 2px
                        text-align: left
                        rounding: 8px
                      min: 0
                      max: 100
                      severity:
                          - value: 50
                            hue: '240'
                          - value: 60
                            hue: '50'
                          - value: 100
                            hue: '0'
                    - type: custom:bar-card
                      title: RAM
                      title_position: inside
                      entity: sensor.memory_use_percent
                      card_style:
                        background: none
                        box-shadow: none
                      bar_style:
                        padding-left: 2px
                        text-align: left
                        rounding: 8px
                      min: 0
                      max: 100
                      severity:
                          - value: 60
                            hue: '240'
                          - value: 80
                            hue: '50'
                          - value: 100
                            hue: '0'
                    - type: custom:bar-card
                      title: Disk
                      title_position: inside
                      entity: sensor.disk_free
                      card_style:
                        background: none
                        box-shadow: none
                      bar_style:
                        padding-left: 2px
                        text-align: left
                        rounding: 8px
                      min: 0
                      max: 100
                      severity:
                          - value: 50
                            hue: '240'
                          - value: 60
                            hue: '50'
                          - value: 100
                            hue: '0'
            - sensor.last_boot
            - sensor.uptime
            - sensor.ha_latest_version
            - type: section
              label: Google WiFi
            - sensor.google_wifi_status
            - sensor.google_wifi_new_version
            - sensor.google_wifi_uptime
            - type: custom:compact-custom-header
              menu: overflow
              options: clock
              voice: overflow
              notifications: overflow
              clock_format: 12
              clock_am_pm: false
              header: true

robertw · March 25, 2019, 3:13pm

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

trying to change themes in lovelace based on views not working any pointers

themes change from control panel fine all of them show have selected backend

thanks

Dino-Tech · March 25, 2019, 4:44pm

@robertw First, I would definitely change theme to the updated version here:

and I would need more info… what/where is it not applying? what are you not seeing change? what are you using for main theme? I use Dark-N-Clear as main theme now and haven’t had a need to change on a per view basis as it covers all of my needs. Let me know so I can try to figure out.

Dino-Tech · March 30, 2019, 6:22pm

Voice Activated Lovelace screens!!! Video is horribly rough and unedited, but good enough for a demonstration…
WARNING: MUTE YOUR GOOGLE DEVICES (and ignore my raspy voice )

using this to get set up first and working

then browser-commander+scripts+Google routines=Voice controlled LL…

Mariusthvdb · March 31, 2019, 12:07am

this is cool!
just got my google Home’s yesterday, and looking for pointers how to set them up with HA. Would you be able to help me out here, can’t seem to find the documentation for that, and there’s no integration available?

Dino-Tech · March 31, 2019, 1:04am

Thanks. Would love to help. Been awhile since I set that up, but I think all you have to do is restart HA after setting up GH and then go to intergration page and set up from there. I am not at computer but I will look at it when I get home.

Tombstone · March 31, 2019, 6:55am

@Dino-Tech love it what your table your use there and how do you have your screen on your Wall…

Dino-Tech · March 31, 2019, 10:06pm

@Tombstone 10.1 Windows tablet. I added link to video and used black frame 9in x 11in outside measurements and velcro to mount tablet to frame and then 2 screws and heavy duty velcro behind tablet to wall. Has been on wall almost 2 years now.

Tombstone · March 31, 2019, 11:10pm

nice work bud

Dino-Tech · May 1, 2019, 8:10pm

Have been working on the mechanics of my set-up and I have redesigned a few views and added several new features including Lovelace Swipe Navigation @mayker . Added screen changing based on time of day(background images rotate every 5 mins), tablet screen turns “ON” and “OFF” based on motion. The design follows the touchless controls and motion activated popup camera screens and active alert borders that work on sleep and off screens. Everything has been moved to “popups” globally to make creating new screens quicker and with less code.

The use of @thomasloven 's lovelace-popup-card allows code to be reused so one view has access to many different individual ‘full screen’ popup cards without having to navigate away to another view. So basically, it’s like having multiple views on one screen. Works for my set up well, as this design is intended for one screen with access to everything needed and no navigating. Easier for guests and wife

More images HERE and more to come…

Repo available HERE. Ideas or improvements are always welcomed. Thanks!

Custom cards used:

Big THANKS to all the card makers for the time and hard work!!!

A few sample popup screens:
lovelace-countdown-dates opens in morning when coffee maker turns off

Opens on all devices(tablets/phones)in the event of a detection.
(Hope I never see this one again)

Battery screen popups up when a device is low

Alarm clock pops up when ‘Goodnight’ script is activated

Similar styled pop-ups for each room

Animated temp and humidity

coffee timer that pops up when alarm clock goes off. Popup code: https://pastebin.com/Z2rMKbA1

Camera images rotate when no motion, (large screen pops up when motion is detected)

camera motion activated pop-up with animated warning borders flashing

custom:fold-entity-row used for drop down selector to save space…

Backgrounds change every 7 seconds

Sensors to track HA components…

One of the night screens that rotate…

Pops up when door or window is opened, then popup closes when cleared

Reminders, I can never have enough

Dino-Tech · May 24, 2019, 9:39am

Okay, so this isn’t much to look at… but this is part of my new Limited Guest Access login. The view only has controls for the room lights , fan, coffee maker and kitchen cabinets. This is one of 5 user logins that have different views and different accessibility to my HA instance. Should be finishing up soon …

Started working on a few mobile popups that are sized for mobile veiwing…

Dino-Tech · June 30, 2019, 3:51am

Live voice with video notifications…

Pretty cool and very useful to me. The ability to actually hear what event has just occurred , instead of just hearing a ding from my phone and then having to open up and see what it was, makes a huge difference when I’m extremely busy. browser-mod takes care of the mechanics from @thomasloven and then a simple app to keep the screen on so I stay logged into HA and a ‘blackout’ screen so I’m not eating up my battery…and voila! Live voice with video notifications…
not much of a video, but enough to get the point

Tombstone · June 30, 2019, 9:47am

Good ider

jimz011 · June 30, 2019, 9:53am

Very cool @Dino-Tech I only have iPads with no fixed power supply so unfortunately this won’t be useful to me right now. But next year when I will move out to another home I am certainly going to fix my ipads into the wall and create something like it.

Dino-Tech · June 30, 2019, 12:04pm

Cool! I’ve been really getting bugged lately with my notifications dinging my phone and it was nothing of great importance and I stopped what I was doing to check my phone and it could’ve waited…and now, driving down the road and I can hear the event notification @jimz011

jimz011 · June 30, 2019, 10:49pm

Yeah luckily I have an Apple Watch which will save me a bunch of “grabbing to my phone” moments. But for sure in the house with all the tablets pinging it is great to know immediately as people don’t tend to wear their watches forever at all times haha. I will probably do all of this stuff next year when we move to an actual home (I live in an appartment right now, though it is a 100 square meters I would still love to have a garden for my dog).

So don’t you dare quitting on Home Assistant before that

j4Media · August 7, 2019, 6:38pm

Hi @Dino-Tech, love what you are accomplishing! I have a quick question: How are you able to change the graph line and fill color in the charts above? I’m thinking it’s in you theme code, but don’t know what element to target. Thanks!