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

Tags: #<Tag:0x00007f3f15ba0f08> #<Tag:0x00007f3f15ba0dc8>
#1

Home Panel

GitHub Release Project Stage License

GitLab CI Project Maintenance GitHub Activity

Docker Version Docker Layers Docker Pulls

Supports armhf Architecture Supports aarch64 Architecture Supports amd64 Architecture Supports i386 Architecture

Buy me a coffee

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

banner

Features

  • Supports Home Assistant entities, MJPEG camera feeds, iFrames, and
    more.
  • Made for touch screens and desktops with a sideways scrolling Material Design
    interface.
  • Fully customizable interface.
  • Custom theme support.
  • Full in application configuration UI. (as well as raw config support)

Documentation / Setup

Setup and configuration for the app is available here

Links

Support / Discussion

Contribution Guidelines

Code of Conduct

Screenshots

Light Theme Screenshot
light-theme.png1920Ɨ1080

Midnight Theme Screenshot
midnight-theme.png1920Ɨ1080

Forest Theme
forest-theme.png1920Ɨ1080

More Info Dark Screenshot
more-info-dark.png1920Ɨ1080

License

MIT License

Copyright Ā© 2018-2019 Timmo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the ā€œSoftwareā€), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ā€œAS ISā€, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

11 Likes
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!

1 Like
#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.

1 Like
#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.

1 Like
#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:

1 Like
#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

1 Like
#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..,