React Dashboard

[william57m (William Mura)]

Hello,

The idea of this project is to have a wall mounted tablet running a dashboard to control my home.

The goal is really to have one screen without any menu so I can have a global view of the more important thing in the home: alarm, lights, camera and control them.

For that, as developer, I decided to implement a dashboard with ReactJS, which seems more convenient to me than dealing with lovelace. Also, the hass API in JS is really easy to use.

I don’t know exactly yet how I will run it at the end, but for now I’m using panel_custom, that’s also why I still have the HA sidebar on the left of my screenshot, I have to hide it, but I didn’t think yet how I will run this dashboard at the end that’s why I didn’t focus on these details. If someone has some ideas I’m listening.

As iOS, MacOS user, I chose an iOS/HomeKit inspiration, but it will still evolve a lot to be more accurate.
In the future I will probably extract the Cards/Modals/Components under a separate package so it can be reused more easily by anyone.

June 2020

In date of the June 28th, it’s still under development, here is a quick look of how it looks like for now

(You can notice that my cat is also tracked, for that I’m using a small beacon attached to its necklace)

June 2021

Using new React homekit components (GitHub - william57m/homekit-react-components: HomeKit and iOS widgets replica for web usage)

I will regularly update this post when I have some news.

[william57m (William Mura)]

After 1 year, I finally continued my work a bit, I extracted most of the components into a separate package

homekit-react-components

Repo: GitHub - william57m/homekit-react-components: HomeKit and iOS widgets replica for web usage
Doc: https://william57m.github.io/homekit-react-components

This package contains react components to build any kind of dashboard.

In my current repo I still have a layer wrapping those components to easily work with HA (I will soon publish a new package for that)

Dashboard

Here you can see how easy it is to build a Dashboard with those React components:

A lot of improvements / new components are still coming, but feel free to contribute to the homekit-react-components if you find that interesting.

[Vasco]

Looks amazing my friend! I love what you did to the left sidebar menu. Amazing!

I will have a look asap! I just seriously don’t have a clue (yet) as to how to build this. Guessing its no regulat ui-lovelace but some app? Please keep the updates coming! And hope you can write a little more detailed install guide

[william57m (William Mura)]

Thanks, here is the actual repository for the dashboard (GitHub - william57m/homeassistant-dashboard)
For now I’m running it locally on my Mac but once I’m ready to use it in “production” I will generate a build and put the files directly into my machine running homeassistant. If you follow the README it should be doable but for sure require some development skills to build your own dashboard, even if based on what I did it’s pretty easy to make your own, but I will continue to make that more clean and simple.

[greghesp]

I’ve been building something very very similar to thing. Almost the same look too funnily enough

I’m trying to make it dynamic though, loading the configuration from the yaml of panel_custom

I’ve just come back to working on it today, and for some reason though, I can’t get anything to load into my panel

EDIT: Just forked your repo @william57m
I’ve changed Dashboard.js to return just a div with some text in it, but Im also getting just a blank screen on yours too

My local IP at main.js loads up fine, and if i log out on the index.js file it logs out fine too

Is there something Im missing?

EDIT EDIT: Nevermind, got it working. Forgot the name of the panel_custom had to match the name of the custom element you define

[greghesp]

@william57m I’ve forked your repo, and have refactored it to use a yaml configuration for the panel, as well as using React Contexts rather than passing props everywhere, and also using i18next for language translations.
Still a WIP, but nearly there

greghesp/homeassistant-dashboard

I think there is a bug, or maybe a missing feature in your homekit-react-components though. Seems the icons aren’t getting vertically aligned properly, and the right margin is being ignored

[william57m (William Mura)]

@greghesp Really nice, I didn’t have much time to spend on that but my goal was definitely trying to make something more generic, I didn’t think to the yaml though it’s an elegant way to do it with HA, I also saw you implemented i18n for the text, nice!

Thanks for reporting the homekit-react-components issue, I will take a look.

[greghesp]

Think most of it is working now. Just need to implement the other cards you’ve got, and then figure out a way to do overrides where a device might not exist. As an example, my bedroom fan doesn’t actually have a state as its controlled by RF commands

Config is pretty straight forwards, and the people information is taken from Home Assistant users without the need for configuration

    config:
      sidebar_panels:
      - type: time
      - type: date
      - type: weather
        cities:
          - London
          - Manchester
          - Glasgow
      - type: notifications
      - type: alarm
        alarm_state: alarm_control_panel.texe_downstairs
        alarm_panels:
          - alarm_control_panel.texe_upstairs
          - alarm_control_panel.texe_downstairs
        arm_away_panels:
          - alarm_control_panel.texe_upstairs
          - alarm_control_panel.texe_downstairs
        arm_night_panels:
          - alarm_control_panel.texe_downstairs
        sensors:
          - binary_sensor.texe_cloakroom_pir
          - binary_sensor.texe_front_door
          - binary_sensor.texe_kitchen_window
          - binary_sensor.texe_landing_pir
          - binary_sensor.texe_lounge_pir
          - binary_sensor.texe_office_pir
          - binary_sensor.texe_patio_doors
          - binary_sensor.texe_toilet_window
          - binary_sensor.texe_utility_door
      main_panels:
        - title: Office
          side: left
          cards:
            - entity: light.desk
            - entity: light.ceiling_lights
            - entity: light.shelf
            - entity: light.office_drawers
            - entity: climate.office
        - title: Living Room
          side: left
          cards:
            - entity: light.tripod
            - entity: light.phone_table
            - entity: light.tv_unit
            - entity: light.crate_lamp
            - entity: light.living_room_ceiling_lights
        - title: Master Bedroom
          side: left
          cards:
            - entity: light.bed
            - entity: light.greg_bedside
            - entity: scene.bedroom_rach_nightlight
            - entity: scene.bedroom_turn_off
        - title: Misc
          side: left
          cards:
            - entity: climate.nest
        - title: Cameras
          side: right
          cards:
            - entity: camera.back_garden
            - entity: camera.driveway
            - entity: camera.nest_hello

One issue I have noticed though is that for your Thermostat Card, not all climate entities has the same attribute names, so need a way to pass them through

[Gulivertx]

hello there,

Nice work !
As a developer I’m very interested by building a dashboard with React. I would like to use Typescript / React / Redux.

I looked after your projects and feel like there will have better way, maybe I’m wrong as I do not know about home-assistant dev.
So my question would be: Why do not going out of lovelace by building a complete standalone dashboard using the Rest and Websocket API ?

I was thinking about building something with Next.js (which I never tried right now, but I know quite well React / Redux).

What do you think about ?

[william57m (William Mura)]

Hi @Gulivertx ,

I’m not using lovelace at all, it’s a custom panel (Creating custom panels | Home Assistant Developer Docs), the advantage of such solution is that I directly have access to the HA API through the hass object, this app is served and used by HA directly on my Raspberry Pi. The final goal is to display that on a tablet on a wall so I can easily hide the sidebar from HA if that’s the issue.

The goal is not to run this app standalone, however I guess it would be easily doable by using the REST or Websocket API from HA.

There are always better way to do something and I’m really open to suggestion if you have, it’s still a WIP so it’s not perfectly clean at the moment, but the separation of concerns are pretty clear now, all the logic of dealing with the data from HA is in the hass-homekit-react-components directory (which is going to be extracted in a separate repo), as I said it’s still a WIP and the way I deal with hass could be better at the moment even if I don’t really see the need for Redux. However, dealing with a REST or Websocket API would be more “complex” codewise than a simple function call on the hass object, so, in this case, Redux would indeed makes sense.

Next.js is good if you want to build a more complex application as it comes with a lot of features (routing, i18n, SSR… for example), but there is absolutely no need for a single page app, you have to considerate what you want to build.

[Gulivertx]

@william57m thank’s for your reply.

My goal is exactly the same as you, but maybe with a difference. I would like to have multiple views.

It was not my idea to said that using a standalone app or something else that you did was better. That was just an idea and I was thinking why you choose this way and not another one

The idea by using Next.js was only in the case of building a complete new “lovelace” app. With exactly what you said, SSR, routes and dealing with HA throw APIs.

I would like to use Redux because I don’t like to work with React context API to manage a complete state. And passing props to children to children to children is for me something that I have to avoid to keep a more understandable app when there is more and more components and sub-component.
I prefer to have a centralised store which is there to manage all state of the app (this is just my own feeling and how I’m habit to work usually with React).

I will try your project and why not, also take part of it

[greghesp]

@Gulivertx @william57m

I’m 95% done in implementing the YAML configuration, and using React Contexts for the HA entity information. For such a basic implementation, Redux is a tad overkill imo, as there isn’t really any statement, since HA passes everything through when it updates. HA is really the state engine, you just need a way to grab it so Contexts are perfect.

I will submit a PR if you want @william57m, however I have a few issues with some of the cards from homekit-react-components. Are you able to share how you’re developing it, as I’ve tried several ways, but cannot get the version I build working with the dashboard. I think its something to do with it using its own instance of React, rather than using the one the dashboard is built with.

I did make a github issue for it: Contribution Errors · Issue #11 · william57m/homekit-react-components · GitHub

[mhackdo18]

Hi ca u post yung config file super thaaanks

[SalmaHassan]

very very nice