UI Enhancements

[tomas1]

I created GreaseMonkey script to create Hubitat UI a bit better. Script is here: https://raw.githubusercontent.com/surfingbytes/hubitat/master/hubitat-ui-enhancements.js . In GreaseMonkey, just create new script, copy/paste it and update ip address on line 5 to match your hub. I tested it in Firefox, but it should work in Chrome and TamperMonkey too, maybe with some slight changes.

Here is what it does:

1. Added "Hubitat - " to all page titles
When you write "hubitat" in your browser, it can suggest the url for you and you don't have to access it by ip address:

2. Added "Rules" menu
Rules from rule machine are now easily accessible, you can search in them by name (in app lists it doesn't work quite well), and most importantly, rules are grouped by rooms. Because Hubitat doesn't allow to assign rule to room, it takes it from rule name. If there is dash in rule name, it takes everything before dash, otherwise first word as room name.

3. Rule edit
I'm personally not a big fan of those dropboxes to select what action you want to edit/remove, or where you want to insert new one. So I added these buttons which appear on action hover. What I'd like to do later is to also add buttons for reorder - move action up or down. And maybe also to bring the controls to insert/edit action directly to the row where action is being inserted too, not sure how would that work out.
If these controls doesn't show up for you, try F5, sometimes it doesn't catch the right moment when actions are rendered, still have to figure this one out.

4. Graph
On device page, there is new "graph" button (would be much better to have edit/events/graph as tabs, but I kept it the way how hubitat has it). That button leads to page which shows graph of last 200 events for that device.
On original Events page, I moved the search box a bit higher so the event grid is fully visible on page without scrolling (this "space wasting" is spread across the whole UI, but hard to fix it everywhere with just js script).

5. Dashboard
I removed the double-title bar, and thanks to that, it now fits the exact same tiles on height as my mobile. Without this change, it fitted less and I had to scroll vertically.

6. Unicode for route info
This one unfortunatelly doesn't work, because the page /hub/zigbee/getChildAndRouteInfo is just plain text, not html page. That means it still looks like this:

[stevenkandres]

Looks cool, especially grouping rules and the rule editing options.

[Kulfsson]

I like the idea, especially the rule editing, but unfortunately I could not get this to work in Firefox nor Edge on Windows 11. Any idea of what could be wrong ?

[jlv]

Looks like there's a typo: The 'try' on line 292 doesn't have a matching 'catch' block.

But, I couldn't get it to work in Chrome and TamperMonkey.

[tomas1]

Yes, sorry, I removed some debug try/catches last minute and forgot this one. It's fixed now.

[tomas1]

It's now updated to work in Chrome/TamperMonkey

[danabw]

Totally new to this type of coolness.

Is it Chrome requires TamperMonkey and Firefox requires GreaseMonkey, or does it matter?

[jlv]

Yes, it works now. I'm just playing around with it now.

For other people: if you have multiple hubs, add multiple @include lines. If you access your hub by hostname, include those, too. E.g.,

[bptworld]

@danabw

Is it Chrome requires TamperMonkey

Not sure if it's 'required' but TamperMonkey is what I use with Chrome (on a Chromebook).

[jlv]

When I tried to open a graph on a device I got a popup with: ReferenceError: unsafeWindow is not defined

According to this, you need to grant access to unsafeWindow for TamperMonkey: https://github.com/Tampermonkey/tampermonkey/issues/148

Changing line 4 made it work:

And the result is truly wonderful. This is the temperature reported by an Iris contact.

[danabw]

Anyone else getting this error:

Doesn't seem like anything to worry about, but wanted to ask.

Just added this description and the warning goes away...

For other noobs...I was looking for how to "run" the script after creating it. DOH...realized the script runs automatically when you go to the HE hub URL you enter into the script when you create it. Don't need to look for any "run" option/button.

[danabw]

This is very nice - thanks for it.

Most of my rules are in RM legacy, as I haven't wanted to spend the time updating them to the current RM. Is there a way to have rules from previous RM versions displayed?

[bptworld]

@danabw

Most of my rules are in RM legacy

Hah! I don't use RM at all. Would love to see my Event Engine child apps like this!

[danabw]

Yes! That would be great. I have laundry monitor rules that I had already set up in RM and have been too lazy & risk-adverse (they are working, high WAF, can't screw them up!) to try to move them to EE or make any changes to them (Ogiewon wrote them for me! ). Also have a bunch of rules for my six fan lights to enable dimming control from Picos via ABC button app.

[jlv]

@danabw

Most of my rules are in RM legacy, as I haven't wanted to spend the time updating them to the current RM. Is there a way to have rules from previous RM versions displayed?

You can easily make it just show the Legacy rules instead by making this change, around line 40:

from
var ruleMachine = [...divs].find(div => div.children[0].innerText == 'Rule Machine');
to
var ruleMachine = [...divs].find(div => div.children[0].innerText == 'Rule Machine Legacy');

Its a bunch more work to get the two combined.

[bptworld]

@danabw

Yes! That would be great.

First attempt.... Failed! lol I'll keep trying. Trying to use this Enhancement as a guide and break out just the code for the nice groups of rooms.

edit: almost got it!

[danabw]

Thanks! If I want to I can just create two scripts, one for RM, one for RM Legacy. Thanks for sharing the required edits!

[jlv]

@danabw

Is there a way to have rules from previous RM versions displayed?

I got this working. This displays both.

If you replace lines 38-76 with this chunk, it will show the combination of both.

    var appTable = document.getElementById('app-table');
    var divs = appTable.getElementsByClassName('app-row-link');
    var ruleMachine = [...divs].find(div => div.children[0].innerText == 'Rule Machine');
    var ruleMachineId = ruleMachine.parentElement.getAttribute('data-id');

    var buttonsContainer = document.getElementById('buttonsContainer');
    buttonsContainer.children[0].remove();
    buttonsContainer.children[0].innerHTML = `<a href="/installedapp/createchild/hubitat/Rule-5.1/parent/${ruleMachineId}" class="btn btn-default btn-lg btn-block hrefElem mdl-button--raised mdl-shadow--2dp" style="text-align:left">
                                            <span class="he-add_2"></span> <span class="pre">Create New Rule</span>
                                        </a>`;

    //appTable.children[0].children[0].children[1].remove();
    appTable.children[0].style.display = 'none';

    var newBody = document.createElement("tbody");
    var lastRoom = '';

    var apps = ['Rule Machine Legacy', 'Rule Machine'];
    apps.forEach(app => {
        var appdata = [...divs].find(div => div.children[0].innerText == app);
        var rules = [...appdata.parentElement.parentElement.children].slice(1).map(rule => rule.children[2]);

        rules.forEach(rule => {
          if (rule) {
            var ruleName = rule.children[0].innerText;
            var splitter = ruleName.includes('-') ? '-' : ' ';
            var room = ruleName.split(splitter)[0].trim();

            if (room != lastRoom) {
              var trRoom = document.createElement("tr")
              trRoom.classList.add("group");
              trRoom.innerHTML = `<td style="display: none"></td><td><b>${room}</b></td>`;
              newBody.append(trRoom);
            }
            lastRoom = room;

            var tr = document.createElement("tr")
            tr.innerHTML = `<td style="display: none"></td><td><div style="padding-left: 15px">${rule.innerHTML}</div></td>`;
            newBody.append(tr);
          }
        });
    });
    var tbody = appTable.children[1];
    tbody.innerHTML = newBody.innerHTML;
  }
  else if (window.location.href.endsWith('/mainPage/selectActions')) {

However, the grouping into "Rooms" isn't quite right, since that depends upon the sorting of the individual rules.

[jlv]

And in my change above, if you add an extra app name into this line, it's child apps will also show up. E.g.,

var apps = ['Rule Machine Legacy', 'Rule Machine', 'Event Engine'];

(albeit that the grouping into "Rooms" by the first word of the rule name isn't quite right, since it depends upon the sorting of the individual list of child apps)

[danabw]

@jlv - trying out your code. Thanks.

NVM - ignore below...seems like those warnings were already there - just hadn't seen them before I was playing w/more of the code.

Getting a warning in the code - ignore it?

Oops, also this:

My line numbers don't match the original code as I added a description and second additional like to include my second hub's address.