An HA Kiosk Project

Share your Projects!
1

The Kiosk Project

Having a weather station is a bit of fun and the stat’s are fun to see live, and recorded in Home Assistant of course, but the display is a little wanting.

IMG_3959
IMG_39592016×1512 1.03 MB

So with a little help from a few friends, we now have a far more useful dashboard in the kitchen.

IMG_3958
IMG_39584032×3024 2.28 MB

The core of my setup is Home Assistant (HassOS) running as a VM on Proxmox. This dashboard is an original Raspberry Pi 7" Touch screen in a very nifty enclosure (CBRPP-TS-BLK) with a Raspberry Pi3B+ serving up Home Assistant in Chromium as the Kiosk UI.

The Raspberry setup is pretty simple based on Raspbian Lite (Buster) and this great Kiosk setup post - https://desertbot.io/blog/raspberry-pi-touchscreen-kiosk-setup. I was a bit concerned about screen burn-in so I added “xscreensaver” into the mix and used my Kitchen’s motion sensor, hooked up through a Node-RED based flow to enable the screen saver when no-one was around.

The Home Assistant setup is simply a Home Assistant Dashboard View with some horizontal and vertical stack cards and set as a Panel. The Panel (View) is in a Dashboard that is only available to the “kiosk” user I created. There are multiple Views available in the Dashboard which we can swipe between thanks to the custom “Lovelace Swipe Navigation” card.

This was a really satisfying project that brings together a number of great Home Assistant features into something that had an immediate and high WAF.

Special thanks to;

Some finer details;

  • The security cam feed can be expanded with a simple tap - I might automate that if motion is detected by the camera.
  • The weather radar similarly expands when tapped too.
  • The little icons along the top are for the Dryer, Washing Machine and a window that is always being left open when it rains. They change colour based on their state so it’s easy to see if the dryer or washer has finished, or that pesky window is open. Dryer and Washer state is based on current draw detection. And yes I do get a push notifications if it rains while that window is open, and when the dryer/washer finish.
  • The future day’s forecast text is available is you scroll the page up. Scroll bars deactivated as a Chromium switch.
  • Swiping right takes you to a screen for controlling lights and our Sonos system.
  • The current temperature, humidity and rainfall are direct from the weather station using rtl_433 (https://github.com/merbanan/rtl_433). Data still goes to WeatherUnderground using the original panel, but I’m not dependent on that anymore.

What’s next. The RPi Panel is pretty low resolution, has a poor angle of view and the case has a huge bezel. In the same space I hope to put a nicer panel with a smaller bezel. That will give me some more screen real estate for some more data and hopefully a wider angle of view.

Thanks to the broad community for making all this possible.

8 Likes
2

I love that!
I have one of those screens too…

3

And love your BOM plug-ins. Although those animated weather icons are a killer aren’t they! Made the poor pi 3B+ run at 200%!

4

Yikes! I didn’t know they did that. So did you switch to the static option?

5

Can you share your lovelace yaml? :wink:

1 Like
6

Yep - static option is fine. The animated icons do the same to Safari and Chrome in MacOS aswell… They’re awesome, but expensive :wink:

7 
custom_header:
  exceptions:
    - conditions:
        user: ##my admin user##
      config:
        hide_header: false
        kiosk_mode: false
  hidden_tab_redirect: false
  hide_header: true
  kiosk_mode: true
swipe_nav:
  wrap: false
  animate: swipe
views:
  - panel: true
    background: '#131313'
    path: kiosk
    title: Kiosk
    visible:
      - user: a6a2fa0206e34fc1a527bea675c774b2
      - user: 818329f37f6241e191edebd1542af650
      - user: e01aacfad38d42e88f820be4ef3fdb5a
    theme: AMOLED Blue
    badges: []
    cards:
      - cards:
          - apparent_right_margin: 1em
            apparent_right_pos: 1em
            apparent_top_margin: 45px
            current_data_top_margin: 10em
            current_text_alignment: center
            current_text_font_size: 1.2em
            current_text_left_pos: 0em
            current_text_top_margin: 5em
            current_text_width: 100%
            entity_apparent_temp: sensor.bom_sydney_weather_feels_like_c
            entity_current_conditions: sensor.bom_sydney_icon_0
            entity_current_text: sensor.bom_current_text
            entity_daily_summary: sensor.bom_sydney_detailed_summary_0
            entity_daytime_high: sensor.bom_sydney_max_temp_c_0
            entity_daytime_low: sensor.bom_sydney_min_temp_c_0
            entity_fire_danger: sensor.bom_fire_danger
            entity_fire_danger_summary: sensor.bom_fire_danger_summary
            entity_forecast_high_temp_1: sensor.bom_sydney_max_temp_c_1
            entity_forecast_high_temp_2: sensor.bom_sydney_max_temp_c_2
            entity_forecast_high_temp_3: sensor.bom_sydney_max_temp_c_3
            entity_forecast_high_temp_4: sensor.bom_sydney_max_temp_c_4
            entity_forecast_high_temp_5: sensor.bom_sydney_max_temp_c_5
            entity_forecast_icon_1: sensor.bom_sydney_icon_1
            entity_forecast_icon_2: sensor.bom_sydney_icon_2
            entity_forecast_icon_3: sensor.bom_sydney_icon_3
            entity_forecast_icon_4: sensor.bom_sydney_icon_4
            entity_forecast_icon_5: sensor.bom_sydney_icon_5
            entity_forecast_low_temp_1: sensor.bom_sydney_min_temp_c_1
            entity_forecast_low_temp_2: sensor.bom_sydney_min_temp_c_2
            entity_forecast_low_temp_3: sensor.bom_sydney_min_temp_c_3
            entity_forecast_low_temp_4: sensor.bom_sydney_min_temp_c_4
            entity_forecast_low_temp_5: sensor.bom_sydney_min_temp_c_5
            entity_humidity: sensor.bom_sydney_weather_relative_humidity
            entity_pop: sensor.bom_sydney_chance_of_rain_0
            entity_pop_1: sensor.bom_sydney_chance_of_rain_1
            entity_pop_2: sensor.bom_sydney_chance_of_rain_2
            entity_pop_3: sensor.bom_sydney_chance_of_rain_3
            entity_pop_4: sensor.bom_sydney_chance_of_rain_4
            entity_pop_5: sensor.bom_sydney_chance_of_rain_5
            entity_pop_intensity: sensor.bom_sydney_weather_rain_today
            entity_pos_1: sensor.bom_sydney_possible_rainfall_1
            entity_pos_2: sensor.bom_sydney_possible_rainfall_2
            entity_pos_3: sensor.bom_sydney_possible_rainfall_3
            entity_pos_4: sensor.bom_sydney_possible_rainfall_4
            entity_pos_5: sensor.bom_sydney_possible_rainfall_5
            entity_possible_today: sensor.bom_sydney_possible_rainfall_0
            entity_summary_1: sensor.bom_sydney_summary_1
            entity_summary_2: sensor.bom_sydney_summary_2
            entity_summary_3: sensor.bom_sydney_summary_3
            entity_summary_4: sensor.bom_sydney_summary_4
            entity_summary_5: sensor.bom_sydney_summary_5
            entity_sun: sun.sun
            entity_temperature: sensor.newtown_temperature
            entity_uv_alert: sensor.bom_uv_alert
            entity_uv_alert_summary: sensor.bom_uv_alert_summary
            entity_wind_bearing: sensor.bom_sydney_weather_wind_direction
            entity_wind_speed: sensor.bom_sydney_weather_wind_speed_kmh
            large_icon_left_position: 0em
            large_icon_top_margin: '-3.5em'
            locale: en
            old_daily_format: false
            refresh_interval: 30
            separator_top_margin: 3em
            show_beaufort: false
            show_separator: false
            slot_l1: daytime_high
            slot_l2: daytime_low
            slot_l3: wind
            slot_l4: pressure
            slot_l5: sun_next
            slot_r1: pop
            slot_r2: humidity
            slot_r3: uv_alert
            slot_r4: fire_danger
            slot_r5: sun_following
            static_icons: true
            summary_font_size: 1em
            summary_top_padding: 2em
            sunset: true
            temp_font_size: 4em
            temp_font_weight: 300
            temp_right_pos: 0.85em
            temp_uom_right_margin: 7px
            temp_uom_top_margin: '-9px'
            time_format: 12
            title: BOM Weather
            tooltip_bg_color: 'rgb( 75,155,239)'
            tooltip_border_color: 'rgb(255,161,0)'
            tooltip_border_width: 1
            tooltip_caret_size: 5
            tooltip_fg_color: '#fff'
            tooltip_left_offset: -12
            tooltip_width: 110
            tooltips: false
            type: 'custom:bom-weather-card'
            style: |
              ha-card { border-radius: 0px; }
          - cards:
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    styles:
                      card:
                        - width: 65px
                        - height: 65px
                        - background-color: 'rgba(0,0,0,0)'
                        - box-shadow: white
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_icon: true
                    show_name: false
                    entity: binary_sensor.dryer
                    icon: 'mdi:tumble-dryer'
                  - type: 'custom:button-card'
                    styles:
                      card:
                        - width: 65px
                        - height: 65px
                        - background-color: 'rgba(0,0,0,0)'
                        - box-shadow: whi
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_icon: true
                    show_name: false
                    entity: binary_sensor.washing_machine
                    icon: 'mdi:washing-machine'
                    icon_height: 30px
                  - type: 'custom:button-card'
                    styles:
                      card:
                        - width: 65px
                        - height: 65px
                        - background-color: 'rgba(0,0,0,0)'
                        - box-shadow: whi
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_icon: true
                    show_name: false
                    entity: binary_sensor.window_door_sensor
                    icon_height: 30px
                  - type: markdown
                    content: >-
                      # {{ states.sensor.time.state | timestamp_custom('%H:%M')
                      }}


                      ### {{ now().day }}  / {{ now().month }}
                    style: |
                      ha-card {
                        margin-top: 10px;
                        # margin-bottom: 330px;
                        background-color: rgba(0, 0, 0, 0);
                        font-size: 120%;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        box-shadow: none;
                        text-align: right;
                      }
                      h1, h3 {
                        font-weight: 400 !important;
                      }
                      h1 {
                        line-height: .1em;
                        }
              - cards:
                  - entity: sensor.newtown_humidity
                    icon: 'hass:gauge'
                    name: Humidity
                    type: entity
                    style: |
                      ha-card {
                        background: rgba(0,0,0,0);
                        box-shadow: white;
                        }
                  - entity: sensor.kitchen_sensor_3
                    icon: 'mdi:thermometer'
                    name: Kitchen
                    type: entity
                    style: |
                      ha-card {
                        background: rgba(0,0,0,0);
                        box-shadow: white;
                        }
                  - entity: sensor.rain_daily
                    icon: 'mdi:weather-rainy'
                    name: Rain
                    type: entity
                    style: |
                      ha-card {
                        background: rgba(0,0,0,0);
                        box-shadow: white;
                        }
                type: horizontal-stack
              - type: horizontal-stack
                cards:
                  - aspect_ratio: 100%
                    entity: camera.front_porch
                    image: 'https://demo.home-assistant.io/stub_config/bedroom.png'
                    type: picture-entity
                    show_name: false
                    show_state: false
                  - aspect_ratio: 100%
                    entity: camera.bom_radar_loop_sydney
                    image: >-
                      https://www.home-assistant.io/images/merchandise/shirt-frontpage.png
                    show_name: false
                    show_state: false
                    type: picture-entity
              - type: markdown
                content: >-
                  **Today:** {{
                  states.sensor.bom_sydney_detailed_summary_0.state }}
                style: |
                  ha-card {
                    background: rgba(0,0,0,0);
                    box-shadow: white;
                    }
              - type: markdown
                content: >-
                  **Tomorrow:** {{
                  states.sensor.bom_sydney_detailed_summary_1.state }}
                style: |
                  ha-card {
                    background: rgba(0,0,0,0);
                    box-shadow: white;
                    }
            type: vertical-stack
        type: horizontal-stack
8

Very cool.

I’m just in the process of setting mine up now

I did think about going the touch screen raspberry pi option but the price was a little high.

I ended up getting an Amazon Fire HD 10 tablet. 1920x1200 resolution IPS screen.
Install Fully Kiosk app (version especially for Fire tablets). Perfect setup so far. :+1:
https://www.fully-kiosk.com/en/

There are a couple of Aussie sellers with the latest v9 series.

1 Like