These are some of the GUI hacks I applied to Homeseer 4.

“Changing the HS4 user interface? Why would you do that?“

Well, because it is horrible.
The bad thing is that I have asked for many of these things multiple times and they are EXTREMELY easy to fix, especially for a developer (which I’m not). And that takes me to the root cause of this problem: Homeseer doesn’t even recognise that this is a problem.

Well, glad there’s people who give me ideas that led to these changes.

This modification plus EXTRA updates for devices/events pages are available:
HS4 Hacks Part 2 post.
This post also includes before and after screenshots.

So the advice is: below you can see how I made some changes, but the post mentioned above has these changes + a lot more.

Event Icons

The event icons are grey, boring and not easy to distinguish. So with the CSS below you can safely change them. Why? Because the changes are made in the custom.css file which is not overwritten by software updates.

Note that changes to the custom.css file will NOT be overwritten by software updates.

HS: 4.1.x
FILE: /html/custom.css

/* DJ: EVENTS pages - giving action icons colors */
.fa-edit {
color: blue;
}
.fa-save {
color: green;
}
.fa-sticky-note {
color: black;
}
.fa-check {
color: grey;
}
.fa-trash-alt {
color: red;
}
.fa-running {
color: purple;
}
.fa-ban {
color: red;
background-color: yellow;
}

BEFORE

AFTER

Device view

Filtering in the device view is horrible. The save button is all the way at the bottom. So I looked at the code and found it easy to modify. Here you go!

NOTE: Changes to this file WILL be overwritten by software updates.

HS: 4.1.9
FILE: /html/devices.html

Add save button to location1 filter

Right below this line:

<button type="button" onclick="location1_all_click();" id="clear_location1" class="btn btn-default">SELECT ALL</button>

insert this code:

<!-- **DJ** add save button at the top of the location1 filterbox -->
<button type="button" class="btn btn-default" data-dismiss="modal" action="select_location1">Save</button>

Add save button to location2 filter

Right below this line:

<button type="button" onclick="location2_all_click();" id="clear_location2" class="btn btn-default">SELECT ALL</button>

add this code:

<!-- **DJ** add save button at the top of the location2 filterbox -->
<button type="button" class="btn btn-default" data-dismiss="modal" action="select_location2">Save</button>

RESULT

Add save button to Category filter

My category list is quite small so i haven’t done this for the category filter. It is just as easy as updating the location filters.

Event List

Inactive events are way to visible in the event list. Therefore I wanted them to appear in a different color. Here you go!

NOTE: changes to this file WILL be overwritten by software updates.

HS: 4.1.9
FILE: /html/events.html

Right below this line:

<a href="/events.html?ref={{ev.ev_ref}}&subpage=event.html" class="list-group-item list-group-item-action">
<div class="row">

replace this code:

<div class="col-sm-8 event-list-name">{{ev.name}}</div>

with this code:

<!-- **DJ** disabled events should look different -->
{{if event_enabled ev.ev_ref}}
    <div class="col-sm-8 event-list-name">{{ev.name}}</div>
{{else}}
    <div class="col-sm-8 event-list-name"><span style="color:lightgrey;">{{ev.name}}</span></div>
{{end}}
<span style="color: #808080;"><!-- ____________end____________ --></span>

BEFORE

AFTER

Note that there’s no guarantees – go and see your doctor in case of problems.