The Home Assistant web UI can definitely look pretty - but for many the whole point of Home Assistant is to rarely have to see the web UI. The problem is that without it, you won’t have access to temperature sensors, humidity sensors, calendar events and so on and so forth. Unless you’re willing to mount an always-on tablet, or notify yourself every 15 minutes, you’re stuck with having to open the web UI if you want to monitor some entity states. Until now!
HassTabs is a (work in progress) Chrome extension that will allow you to display entity states, attributes and template data, as well as perform service calls. It is admittedly in early development yet, and I could definitely use some help with it, but it’s taking shape and I am confident I can finish it myself given enough time.
Here is a gif showcasing the current state of the extension. The displayed text is the current state of a given entity. As you can see, it’s draggable, and when it flashes that’s me refreshing the page to demonstrate that its position will be remembered (and synchronized across devices). For now there’s no simple way of adding your own entities, but there will be in another update or two. If you wanna play around with the extension in its current state, check it out on GitHub (link and details below).
Check out HassTabs on GitHub! Instructions for downloading are in the master branch README (visible if you click the link). However - the master branch is currently a very basic version. I created another branch called design_testing to experiment with design and functionality - and this version is currently a lot more functional. So basically if you want to try what’s shown in the gif, follow the master branch instructions but download the design_testing branch files.
To configure entitiy states to be displayed, edit index.html and add your entities inside the <div id="userContent"> tag. You’ll see that there’s already a div there (which I used for testing). As you can see, it’s id is the entity id of the entity I’m displaying information about. Change this id to an entity id of your own, and add more divs in the same way if you want to.eep in mind that as things are, the code expects the entity to have a state as well as the unit_of_measurement attribute. If you add something that doesn’t, it’ll probably show as “undefined”.
Lastly, some technical info that’s currently not in the readme:
The idea is that whenever you pick and add an entity for display, a script creates (and saves) a div element which has the same id as the entity_id of the entity you added. Now each time the document loads, it’ll load all entities from your Home Assistant instance, and for each one check if there’s an element whose id corresponds with the entity id of your entities. If so - add some text (state and unit of measurement for now) to said div. This might not be the most efficient way to do things, but it works for now!
Again - I could definitely use some help here, and pull requests are therefore very welcome. I have little experience with Javascript and have to learn as I go along. This also means that a lot of my code is based on online examples, and this tends to get messy in the long run. The sooner someone could trim and clean my code, the better.
Let me know what you think!