Home Panel - A touch-compatible webapp for controlling the home

hassio-repository
hassio-addon
Tags: #<Tag:0x00007f20587686d8> #<Tag:0x00007f2058768278>
#1

Home Panel

GitHub Release License pipeline status Waffle.io - Columns and their card count

Docker Version Docker Layers Docker Pulls Anchore Image Overview

A touch-compatible web-app for controlling the home. Integrates with Home Assistant as an alternative / additional frontend.

Features

  • Card based user interface with support for HASS entities, links and cameras.
  • Supports and can be used as alternate / additional frontend for Home Assistant
  • Supports MJPEG and related image-based camera/image feeds (can also be used as a photo frame)
  • Light control with brightness, temperature, color, effects etc. support
  • Supports Radio playback from TuneIn API
  • Add weather and weather icons using Home Assistantā€™s Dark Sky component
  • Made for touch screens with a sideways scrolling Material Design interface. (Compatible with desktops as well)

Demo

You can use a demo of this app here.

To run this, you must have a secure instance of Home Assistant. Meaning Home Assistant has SSL / HTTPS enabled.

Docs

Setup and configuration is available here

Links

Support / Discussion

Contribution Guidelines

Code of Conduct

Screenshots

Light Theme Screenshot
light-theme.png1920x1080

More Info Light Screenshot
more-info-light.png1920x1080

Dark Theme Screenshot
dark-theme.png1920x1080

More Info Dark Screenshot
more-info-dark.png1920x1080

Radio Screenshot
radio.png1920x1080

Docs

Setup and configuration is available here

GitHub Repository

Contributing

You are welcome to edit, fork and create pull requests as you like.

  • If you make a change, make sure to refer to any issues that it fixes.

  • Make sure you have used linters and tested what you have added/changed
    works.

  • Any pull request will be verified by the bots, so make sure you fix any
    issues the bots find.

  • I, and any other users I approve will be able to merge your changes so
    be patient.

    Docs

    Feel free to improve documentation as you like by making a pull request in /docs. Once merged into the master branch, the GitLab CI server will update the docs in the gh-pages branch.

In wall touch screen android
#2

Release 0.4.0

Full Changelog

Changed

  • :sparkles: add link support (#17)
  • :sparkles: radio support (#15)
  • :books: update docs
  • :arrow_up: update packages

This release adds the requirement of https://github.com/timmo001/home-panel-api

#3

HASS.io Addon

Now I am happy with security and the app has a decent amount of features, I am going to look into creating an addon for hass.io

See progress on this on the issue page:

#4

Release 0.4.1

Full Changelog

Changed

  • :rocket: fix ci build
  • :books: change to mkdocs
  • :boat: shrink container by cleaning yarn cache
  • :fire: fix missing entity or missing config
#5

Hi @timmo001 ,

SSL is mandatory? tried to install with flag REACT_APP_HASS_SSL=ā€˜falseā€™ and after 30 secs, the docker stops running

#6

Hi @revin,

SSL isnā€™t mandatory, however is recommended when using Home Panel in a production environment

Can you post the logs?

If using docker-compose:

docker-compose logs -f

or docker:

docker logs -f NAME_OF_CONTAINER
#7

Hi @timmo001,

The detail error is:

nginx: [emerg] BIO_new_file("/ssl/fullchain.pem") failed (SSL: error:02FFF002:system library:func(4095):No such file or directory:fopen('/ssl/fullchain.pem', 'r') error:20FFF080:BIO routines:CRYPTO_internal:no such file)

Here you have the fulllog:

https://pastebin.com/mDmrHv1E

It seems that I donā€™t write the correct syntax to avoid SSL. This is the full docker instruction:

docker run -d --name="panel" -e REACT_APP_HASS_HOST='192.168.1.210' -e REACT_APP_HASS_PASSWORD='API_PASSWORD' -e REACT_APP_HASS_SSL='false' -p 8234:443 -v /docker/panel/ssl:/ssl -v /docker/panel/config.json:/usr/src/app/config.json timmo001/home-panel

Thanks!

#8

Ah glad you managed to fix it.

I will add some examples for those who donā€™t want to use ssl to the docs

#9

Hi @timmo001

Sorry but english itā€™s not my native language and I didnā€™t explain well.

I wanted to explain that the sintax that Iā€™m using itā€™s not the correct to avoid SSL. Iā€™m still not able to start the docker.

I also tried with the -e REACT_APP_HASS_SSL='false' option but I get the same error.

#10

Looks like there is an issue with the nginx config file that is copied on build. I have found the issue in the dockerfile and and fixed it.

This will be available in the next release, coming in the next few hours. Thanks for the heads up @revin!

#11

Good news!

Thanks @timmo001

#12

Release 0.4.2

Full Changelog

Changed

  • :hammer: fix radio hidden position
  • :hammer: fix theme selection
  • :sparkles: added screenshots and more examples to docs
  • :rocket: temporary fix for #28
  • :boat: fix docker for non ssl setups
  • :books: update docs to include unsecure examples
#13

Hi @timmo001

Just Installed 0.4.3. Specifying -p 8234:443 option, I canā€™t connect to the app. Iā€™ve used the --net=host option and now is able to bind to port 80

now I can see the app but Iā€™m stuck on ā€œattemting to connect to Hassā€.

Is it possible to see the apps logs? with docker logs only get the info until the nginx start process.

Thanks!

#14

Iā€™ve been working on it and now Iā€™m able to start on 8234 port without --net option but Iā€™m stuck on ā€œattemting to connect hassā€

I 've tried with -e REACT_APP_HASS_HOST='192.168.1.210' and -e REACT_APP_HASS_HOST='192.168.1.210:8123' but i get the same error.

#15

Hi @revin,

If you are using Chrome, you can press F12 to bring up the developer console, which will give you any errors that arise.

You might want to try setting REACT_APP_HASS_SSL='true' since the secure option is likely the default with HASS now

#16

You pointed on th right direction

WebSocket connection to 'wss://192.168.1.210:8123/api/websocket?latest' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

Will try later to generate a certificate and build with SSL option. Iā€™d prefer to stay out SSL configs as I manage them from another nginx and FW.

#17

Hope the hassio addon Is ready soon

#18

Release v0.4.4

Full Changelog

Changed

  • :arrow_up: upgrade packages
  • :hammer: remove redundant code
  • :boat: remove useless build step
  • :boat: add api to compose file
  • :books: update docs
  • :framed_picture: optimised images

Keep an eye on the issue page for updates on the HASS.io addon:

#19

Release v0.4.5

Full Changelog

Changed

  • :hammer: allow for hassio ws proxy

This is a small change to allow for the use of hassioā€™s websocket proxy in the effort to create the hassio addon

#20

Any chance of making this work with a non-SSL HomeAssistant setup? Iā€™m getting the same issue as above where it canā€™t get past ā€œAttempting to connect to HASSā€¦ā€

Checking in the JS Console I see it fails to connect to wss://ā€¦

Hereā€™s the logfile from docker, as you can see, the build realizes I donā€™t want the SSL config, but in the actual page code, the check of process.env.REACT_APP_HASS_SSL still seems to return true.

,
Copy disabled SSL nginx config,
Copy config..,
,
Build app..,
yarn run v1.7.0,
$ react-scripts build --production,
Creating an optimized production build...,
Compiled successfully.,
,
File sizes after gzip:,
,
  213.59 KB  build/static/js/main.8047b977.js,
  20.91 KB   build/static/css/main.12aa7665.css,
,
The project was built assuming it is hosted at the server root.,
You can control this with the homepage field in your package.json.,
For example, add this to build it for GitHub Pages:,
,
  "homepage" : "http://myname.github.io/myapp",,
,
The build folder is ready to be deployed.,
You may serve it with a static server:,
,
  yarn global add serve,
  serve -s build,
,
Find out more about deployment here:,
,
  http://bit.ly/2vY88Kr,
,
Done in 37.69s.,
,
Move build files to html directory..,
,
Run nginx server..,