[Custom Panel] Automations in a tree view

Share your Projects!
1

Hi,

I want to share my first version of a custom panel which shows automations in a tree view.
As there is currently no way to structure your automations (but requested often), I created a custom panel to show the automations in a tree view.

automation-tree-screenshot
automation-tree-screenshot1428Ă—582 45.4 KB

Because there are no folders, the tree is generated by splitting the name of the automations. For the image above, the default automation view contains these automations:

  • First Floor // Hallway // Lights // Enable by Motion
  • Frist Floor // Hallway // Control Heating
  • Outdoor // Garden // Watering

To add this to your Home Assistant, you have to follow some manual steps:

  1. Place the file automations-tree.js in /config/www/
  2. Add the following block to the configuration.yaml 
panel_custom:
  - name: automations-tree
    # url_path needs to be unique for each panel_custom config
    url_path: automations-tree
    sidebar_title: Automations
    sidebar_icon: mdi:robot
    module_url: /local/automations-tree.js
  1. If your Automations are not structured like Folder // Folder // AutomationName, adjust the divider variable in automations-tree.js.
  2. Restart Home Assistant

There might be some bugs, so if something is not working, feel free to message me or write here.

If someone wants to contribute, I’m happy to accept PRs on the GitHub project.

10 Likes
2

I like it generally.

My only suggestion would be to have it automatically collapsed upon click (or at least an option) so when you go to the link it by default shows only the top levels (ie. Automations/Master Bedroom, Automations/Outside, etc.)

The default auto-expand makes it cluttered I feel like and kind of defeats the purpose of it.

But thank you for the extension. It certainly represents an improvement upon the default way of doing things.

3

Hi,

the newest version has an option to set which levels should be expanded and which should be closed, when you open the panel.

Adjust in this line: ha-automations-tree-panel/automations-tree.js at 57b1d89a2357b2ca1af6486f6bafbae676d8f0a6 · DirkHeinke/ha-automations-tree-panel · GitHub

4

Hi!
Many thanks for this! I’m trying this and i have one question, though… this “default open level” seems that doesn’t work for me… let me know if i understand correct: i have all my automations in default location and i edit them via userUI (not direct yaml), so i must rename all my automations to: “firstfloor//kitchen/main_lights”, then “first_floor//master_bedroom//main_lights” etc - correct? If i do so i get fully open list even if i set “defaultOpenTreeDepth=0” …
what am i missing?
THX!

5

Hi, thank you for testing it out. I don’t really understand your problem. Perhaps you can provide two screenshots (one from automations and one from the tree)?

Another possible problem might be the browser cache. Perhaps you can try to reload the tree page without cache. In chrome that would be ctrl + click on the reload button.

6

That’s weird… i did countless HA restarts (after each js correction), countless cache refreshes - for that i usually press F12, right-click on “refresh” icon and click “clear cache and hard refresh” and additionally i presss CTRL+F5, but nothing helped. But just now my HA restarted (on OS level, total reboot of system) because i did an update on my Synology (HA runs inside VM) and now it works…
so i guess it was something on my HA which for some reason wasn’t corrected with HA restart. weird…
Anyway, very clever way of doing tree view, i must admit. First i thought that this works only for those who have automation on custom location, ordered in subfolders… this is really a great idea! Congrats!

1 Like
7

Hey Dirk, nice job on this one I really like it!

8

(this replaces my previous post)

THANK YOU.

I could not resist and managed to get hold of a computer to test it. It is fantastic. The fact that you actually get to the UI version after clicking on an entry is wonderful.

Would it be possible to have a more compact version of the tree? (so that there is less white space inside a block) to get more information per visible page? EDIT: I will make a PR for that. PR at added elements height customization by wsw70 · Pull Request #4 · DirkHeinke/ha-automations-tree-panel · GitHub

Thanks for that. I do not have my laptop handy now so I cannot test so I have a question: when clicking on an automation you edit the YAML file, right? There is no more the ability to use the UI editor.

Also, other actions are not available ( execute, disable, …).

I just wanted to make sure I understand the panel functionality. Thanks!

EDIT: after reading the Github readme, I realized they this panel shows existing automations from the UI in a tree, but does not allow to interact with them, right,? In other words, there is no action after clicking “Watering” in your example?

I really wish I had my computer now :slight_smile:

1 Like
9

This is interesting - I have the same problem as you. Without restarting HA I could modify the JS file directly, and a simple refresh was taking the changes into consideration, except for the depth setting.
After restarting HA I still do not get the depth setting right.

I did a PR for an extra functionality so I restarted/reloaded countless times as well.

I will wait some time in case there is some HA caching (wild guessing, I do not really see whee this could be) and investigate further.

EDIT: it works now

1 Like
10

For me the changes apply direct when I have the Chrome Dev Panel open (F12) and set it to “disable cache”. If I don’t use the dev panel, it does not refresh the value. So it’s most likely a browser cache problem.
But as I’m also new to HA development, I don’t know if there is an easy way to fix it. Maybe if we add the config options to the panel in yaml. Then it should not be cached by the browser, but I think you always have to restart HA.

11

I really like the way all aautomations are placed in this tree format. Alrhough i cannot get old automations away. They are stored somehow and then it shows up here. Anyone know how to get rid of it ?

12

What do you mean “old automations” ? There are only “automations”, nothing else… If you don’t use it, delete it. If you use it, rename it and it will show in a tree view. I renamed all my existing automations and they all appear in a tree.

13

Right, so i would assume as well.

See this image:

image
image707Ă—498 5.23 KB

image
image1401Ă—862 36.5 KB

none of the automations i made with _ exist anymore == deleted…

14

First picture is true…you must have all automations in “automation.yaml” in order to be editable from UI. Do you have automations sorted in folders? I guess that you’ll have to move them into single yaml for this javascript to work…
If deleted automations are stil there…hm…did you restart HA and cleared browser’s cache?

15

I dont have any other automations in any other files anymore but that file was deleted like a few months before i did this.
And yes the cache light be involver in it for the deleted ones

16

This is awesome… I am very surprised more people arent talking about this!

Thanks for you work and sharing this

17

Im having loads of fun with this

image

18

How do you insert icon in the name?

19

go here
https://emojipedia.org/

pick anything you want…
click the copy button and paste it as if you are pasting text
:bangbang:

1 Like