UI Enhancements

🚧 Developers
34

eslint is just being extra pedantic. That's not an error, but a style warning. You can safely ignore them.

The problem it's trying to prevent is when you have code like this (line 18):

if (!document.title.includes('Hubitat'))
    document.title = `Hubitat - ${document.title}`;

and you need to add an extra line into the statement protected by the if clause. If you just blindly add the line, then it's a bug. It looks right because of the indentation, but it's not.

if (!document.title.includes('Hubitat'))
    document.title = `Hubitat - ${document.title}`;
    document.foobar = `Haha`;         // BUG this line will always be executed

You avoid the bug by adding braces when you add a line:

if (!document.title.includes('Hubitat')) {
    document.title = `Hubitat - ${document.title}`;
    document.foobar = `Haha`;
}

By suggesting (forcing) you to always use braces { } to bracket the statement after the if clause, you can't accidentally introduce this bug. So if you start with this:

if (!document.title.includes('Hubitat')) {
    document.title = `Hubitat - ${document.title}`;
}

Then it is easy to add a line, without needing to inspect the surrounding code.

if (!document.title.includes('Hubitat')) {
    document.title = `Hubitat - ${document.title}`;
    document.foobar = `Haha`;
}

This is defensive programming.

6 Likes
35

I LOVE the sorting of the rules...

2 Likes
36

What does the table section with Rule Machine in the Apps page look like? This code just reformats that, using the rule name up to the first space (or dash) as the "Room" grouping.

37

Reminds me of a friend who was doing LISP programming years ago...he said LISP stood for "Lots of Idiotic Stupid Parentheses." :slight_smile:

2 Likes
38

Full-bracing is a common style convention in many languages derived from C (C++, C#, Perl, Java, etc). Avoiding this sort of bug is the basis for Python, which does away with braces completely and uses the indentation to decide code flow.

4 Likes
39

All of these are now solved in the script in git (first post).

1 Like
40

New version includes Rule Machine Legacy together with Rule Machine in "Rules" menu, and also makes it easy for anyone to add more apps there:

image
image1695×97 5.33 KB

Found a better place for it. Got inspired by Google home, who puts the location/hub name as the largest title when you open the app, so I put it to the top right corner:

image

4 Likes
41

image
image1177×919 148 KB

a number is missing though, the update has improved things from last night though.

Some of the BIN ones must be the top blank ones

image
image1722×909 44.6 KB

image
image1680×884 71.4 KB

image
image1685×900 71.4 KB

image
image1676×890 60.2 KB

image
image1685×500 37.5 KB

42

Very cool...you are really adding value, quite nice!!

And this "simple" change is one of my favorites...been asking for a better display location for this for a long time, and now we have it! :slight_smile:

image

5 Likes
43

For the 2.3.1 beta, I needed to change line 59 to

document.getElementsByClassName('mdl-layout__header-row')[0].firstChild.nextSibling.innerHTML = 'Rules';

I fear this change is not backwards-compatible to 2.3.0 and earlier.

(Also, when you make further edits, please change the version number)

1 Like
44

Thanks, I don't have access to beta, but I updated header lookup. It still works in current HE version, and I think it might work in beta too. I also fixed bug when Hubitat changes page title in h5 on same pages, which overwrites "hub location" (and updated version number).

45

Nope, that didn't work. This is what it looks like now:

image
image998×240 23.3 KB

This works for line 67 with 2.3.1 beta:

document.getElementById('divHeaderPageName').innerHTML = 'Rules';

(I don't know if divHeaderPageName is defined in prior releases; I need to turn on my other hub to check)

46

It just started. They had a call for beta testers here; if you want to join the beta, you probably still can.

47

This is 2.3.0, and that id does not exist.

image
image1034×158 13.7 KB

48

Any chance you could work your magic on the File Manager screen, to sort the files, at least in alphabetical order. An option to select alphabetical or date modified would be even nicer, but I would settle for any sense of order.

Thanks,
Simon

49

I cant get edit rules to work. I am using chrome and tampermontky
Thanks

50

I'm traveling for about a month, so will be able to look at it only after that. Didn't get my vpn set up in time unfortunately. I though the edit rules is fixed, but if not, try to hit F5 on that page, it helped me before that fix.

1 Like
51

I updated the script to work with Hubitat 2.3.1:

  • Rules menu (point 2 from first post) works again
  • Code to move Location from bottom left corner to upper right is removed, as it looks like this is now implemented directly in Hubitat.
3 Likes
52

I noticed two things broken with 2.3.2:

  • the Rules menu is missing again
  • the device Graph link is broken (it looks like it copies the URL from the previous button, and they added a new Log button after Events).

Quick fix for the Graph link is to change line 99 like this (although this will only work for 2.3.2 and later):

 var href = navigation.children[navigation.children.length - 1].href;

to

 var href = navigation.children[navigation.children.length - 2].href;

(and while posting this, the forum told me: "You’ve posted more than 29% of the replies here, is there anyone else you would like to hear from?")

1 Like
53

I just found this post. Thanks OP, very nice changes. I created a fork which fixes the Rules menu on v2.3.4 along with a couple other improvements. I may add more in the future...

  • Icon on Rules page toggles the grouping originally done by the OP (value is persisted)
  • Rules page no longer shows non-rules
  • Fixed add button and added one for the basic engine as well
  • Tried to make it a little more robust in the places I touched.

Might be useful to others.
https://raw.githubusercontent.com/pfleenor/hubitat-ui/master/hubitat-ui-enhancements.js

2 Likes