UI Enhancements

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

1 Like

It's now updated to work in Chrome/TamperMonkey

1 Like

Totally new to this type of coolness.

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

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.,
image

1 Like

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

1 Like

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:
image

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

2 Likes

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. :slight_smile:

2 Likes

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?

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

1 Like

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! :slight_smile: ). Also have a bunch of rules for my six fan lights to enable dimming control from Picos via ABC button app.

1 Like

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.

1 Like

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! :grin:

2 Likes

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

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.

1 Like

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)

1 Like

@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.

Both of those warnings are outside my changes. And you can safely ignore them anyway; eslint is a static checker, and doesn't understand loaded code. E.g., moment and Highcharts come from the @require blocks at the top of the file.

1 Like

BINGO!

Works - can see all my rules! :smiley:

Thanks very much!

1 Like

So can confirm it works on "Violent Monkey" as well!! Very cool - graphs look great.

I have multiple hubs and have a simple VM script to change the body background depending on my hub. Helps distinguish which hub I'm on. This would be a nice add on I think..

Thank you very much @tomas1! Awesome job.

Question, could the Hub name be added somewhere that is always visible (unlike the spot HE decided to put it. :wink:). My thoughts were lower right hand corner, where the 'Terms of service, Documentation, ext' is located.

I actually liked the Rules portion so much, I created an Event Engine version. Those that use EE can find the link in the 1st post of the EE thread.

1 Like