Home Assistant Community

DinoTech's[NEW Voice Activated Lovelace screens!]

#28

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.

0 Likes

#29

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

1 Like

#30

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

0 Likes

#31

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

0 Likes

#32

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

#33

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.

4 Likes

Blue/Grey Night theme
#34

Awesome! Looks really good!

1 Like

#35

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

google-green-500:  "#13eb13"
0 Likes

#36

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

#37

Have you tried overflow:hidden

2 Likes

#38

corrected @thomasloven 's post My Lovelace Plugins

1 Like

#39

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'
0 Likes

#40

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

0 Likes

#41

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'
0 Likes

#42

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

0 Likes

#43

@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

#44

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

0 Likes

#45

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…

0 Likes

#46

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

#47

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…

0 Likes