Simplistic configuration UI


#1

Since there currently is no nice way to edit the yaml-files HASS is using through the HASS frontend, I’ve code-snippet-patchworked this small webapp. It’s essentially an embedded Ace editor, which has syntax hightlighting for yaml (and a ton of other features you can turn on and off). Of course there’s also an integrated file browser to select whatever file you want to edit. When you’re done with editing the file, click the save-button and it will replace the original.
Thanks to the help of JT Martinez this tool now presents itself in Material Design.

This is a little webapp that doesn’t require any Python packages outside of the standard library (except GitPython if you want git integration), and all in a single file to make it easy to deploy. Some Java Script libraries are included via CDN, so you’ll have to be online for this to work.

Visit the repo at hass-poc-configurator if you are interested in trying this out. :slight_smile:
Feel free to open issues if you find something not working as expected, or if you have feature requests you think would make this app even better.

Current release: 0.1.5 (2017-02-28)

And to save you some time to decide if it’s woth trying it out, here’s a screenshot how it looks like embedded using the panel_iframe component:


Configuration.yaml
Configuration GUI
Easiest way to read configuration files from remote on a smartphone?
Getting frustrated
#2

This looks awesome but I don’t think it will work as an iframe panel for me as I use SSL. Any ideas on how to make that work or will SSL not be an issue since it’s in the .homeassistant directory? (I haven’t tested this yet.)


#3

Nice idea and I like it but when I tried I got this error:

[email protected]:/home/homeassistant/.homeassistant $ sudo ./configurator.py
./configurator.py: 6: ./configurator.py: Syntax error: newline unexpected

Should I mess with the .py?


#4

@rpitera
I’m not sure about that. I didn’t take care of SSL, since for me this is only supposed to work from inside my network, and within that I don’t require SSL. In general I don’t see a problem since an iframe can include whatever is desired. However I must admit that I don’t know if browsers have some policy to not include content from sources with different encryption-setups.
It would be nice if you just try it out and report if there’s any problem with this. :slight_smile:
Edit: just read the documentation for the component. You are right, it won’t work with SSL. But since you don’t have to embed it like this (it’s a standalone process that even works if HASS is dead after all), you still can access it directly.

@vnguyen972
Not sure what the problem is. Could it be, that you use Windows and you’ve copied the content of configurator.py into the clipboard and then pasted it into an editor on that machine? Windows and Linux handle newline-characters differently, so maybe they have been introduced into the code by your process.


#5

I did dl the py file on windows machine first, then ftp to my pi.

Let me try to skip windows.


#6

So I got it running but HA restarted and I see the Configurator iFrame but nothing show… probably because I’m using SSL ???


#7

Yeah; iframes won’t show non SSL and SSL pages together.


#8

Just in case anybody cares:
I’ve made some improvements (even though I’ve stated I wouldn’t do that).

  1. The list of files is now sorted alphabetically
  2. HASS’ /api/bootstrap is now queried when the page loads. The data is used to creat some dropdown elements from which you can select available entites, services etc. Selecting one of these entries will automatically insert the correct value at the current cursor position within the editor. This hopefully saves some copy/paste time.

Unfortunately, the HASS-API doesen’t really present all platforms / events / triggers that are available. Or at least not in a way that’s easy to visualize. So sun.sunrise for example is missing. I guess the API has to be extended to publish such information. Hence the trigger platforms and conditions are hardcoded.

Hope this helps someone.


#9

Trying to get this working on my HASS setup that is running on windows and its not showing the tree of files in the web GUI. it shows a blank editor with drop downs but not files to edit. Configurator.py is in my HASS directory and is running. In the console window I do notice it is saying “HTTP ERROR 401: Unaurthorized”. Hopefully you can point me in the right direction. Thank you.


#10

Honestly, I’ve never tried using this on Windows. It’s primarily targeted at Linux.
However, I gave it a try, and what I found out:

  • It doesen’t work using the Bash Windows 10 has (if it’s installed)
  • It doesen’t work using regular cmd
  • It works using cmd when started with administrative privileges
  • But: it only works if I point the BOOTSTRAPAPI variable in configurator.py at my pi, since there is no HASS running on my windows machine

The output I get without changing the URL for the API is the same as in your screenshot. So I assume in your case the server in unable to fetch data from the API. Although in your case the 401 error suggests, that the authentication is the problem. I haven’t implemented authentication. But if the API supports authentication with URL-parameters, you could modify the one you have in your code.
So:

BOOTSTRAPAPI = "http://127.0.0.1:8123/api/bootstrap"

would become something like:

BOOTSTRAPAPI = "http://127.0.0.1:8123/api/bootstrap?api_password=abcdef"

But I don’t know if it actually is done that way. Maybe someone here knows how to do that. Or you could reconfigure HASS to not require authentication for local connections. I think this is how it would be done:

http:
  api_password: !secret http_password
  trusted_networks:
    - 127.0.0.1
    - ::1

#11

Thanks for the fast response! Adding the trusted IP did the trick! Everything works like a charm now! Great addition!


#12

I’d love to see this added into HA so that it would work within SSL setups. Maybe you should do a pull request and see if this could be integrated.


#13

The way it’s currently done doesen’t at all comply to the way the “site” in HASS are done, and I don’t have any experience with these Polymer panels. :-/

But thinking of it, there might be a workaround. If you have a setup with SSL, you probably already have some sort of reverse proxy running. Wouldn’t it be possible to create a virtualhost in nginx / apache that wraps my webapp in SSL? I know the SSL wrapping can be done that way. But would the panel_iframe start working then?


#14

No idea. I’m running with port forwarding. NGINX is above my head right now and adds a layer of complexity that I don’t really feel I need. So I couldn’t tell you, but maybe someone else will see this and comment.


#15

I’ve added SSL support (among other minor improvements). If you don’t minde it would be nice if you could check out if it’s working for you now with the panel_iframe. :slight_smile:

At the top (of the py file) there’s now an area where some more settings can be specified, including SSL certificate and SSL key. If you want to restart HASS with the button you also have to set the API password.


#16

I’ll give this a shot. I’m currently testing something for another dev (seem to be getting a lot of beta offers!) but as soon as I am done, I will give this a shot and let you know what I find.


#17

Since there’s been a holdup on my other project I decided to try this out. Here’s what I found so far:

1 - It’s not indicated anywhere that the options for the SSL_CERTIFICATE, SSL_KEY and HASS_API_PASSWORD should be entered in quotes. Need to include that in a comment above the entry since you are using the value None as a placeholder and this wasn’t obvious.

2 - Had to set up port forwarding on 3218 for this to work with my normal SSL URL if I wanted to go to it via
"https://myddnsURL:3218"

3 - Installed screen as directed; it installed correctly but CTRL+A and CTRL+D don’t seem to do anything at all. I’m using the standard putty app on Win 10. I suppose I can run it in a terminal window in the meantime on one of my spare machines, but I’m not familiar with screen so not sure how it’s supposed to work. Maybe this would work as a cron job?

More when I see how it works within the ipanel; I’m restarting HA now.

EDIT:

OK, works great in the ipanel. Really looks like part of the system too!

4 - I like the buttons for help and components; I really think this is a great idea. You may want to allow for users to add one or two buttons for their own links as an option.

5 - I’m not sure what fold does, even after reading the description.

6 - I also like the selectors for putting things into the configs as this will make writing new automations a lot easier. But I think you’re going to need to make absolutely clear what these do and/or provide a confirmation (maybe one that can be turned off in the options but is set as “on” for the default.

Otherwise I can see a lot of users complaining that somehow, installing this “screwed up their configs” simply because they were playing around with them and didn’t realize they were inserting stuff. You have to protect people from themselves when you write something like this, I think.


#18

Remove the port forwarding ASAP. There’s no authentication, so anyone accessing your IP at the forwarded port has access to your configuration. Should have pointed that out earlier.


#19

That’s too bad, because without that it doesn’t work at all. If you could have it authenticate internally if requested from HA but create a standard authentication dialog if requested as a direct URL I think I’d be using this all the time.

That and running it as a service.


#20

As for the rest:

  1. Well, it’s a Python file after all. But you are right, I can’t assume people know the Python syntax.
  2. Regarding your reply: What happens if you configure it using the internal IP? I expected that it should work then. It’s SSL like the HASS frontend. The only thing that comes to my mind would be a problem with the SSL verification caused by not accessing the panel via the hostname.
  3. Hhmm, not sure how putty behaves in this case. If you have Win10 I would recommend installting the bash. Best way I have ever used SSH from Windows. Anyways, I’ve got pointed to the right direction to make this a systemd service. That would be the cleaner solution.
  4. Hhmm, the way it’s done currently is not all that flexible. Fitting all this into a single file limits complexity. But I’ll keep that suggestion in mind.
  5. Don’t know how to explain in english. Uhm, it kind of compresses the visible content. You see the line numbers on the left site? On some lines you can see a little triangle. Clicking that folds the element that’s on that line. Like, uhm, if you have a list of automations, they’re all condensed into on line, just keeping the first line visible.
  6. I have updated the readme in the repo a couple hours ago, and there it says Selected element gets inserted into the editor at the last cursor position.. Help in rephrasing much appreciated.

I’ll have a look at adding optional authentication. Should be doable.

And thanks a lot for the feedback.