Sharing my icons with y'all...

[B1Trash]

Hello-

I created a set of status graphic icons that I would like to share with the HS community.



My goal was to build a family of icons with a consistent design style that draws on Google's material design philosophy. I rendered the icons at 256px which scales very nicely to the 32px size that HS3 uses on the web interface. Every icon in the Contemporary set (as of this posting) maps one-for-one to an icon in the Simple Lines set.

I built these icons for my use case and I am happy to share them with you. The colors I chose are a bit brighter than the contemporary palette and use long shadows to make sure the icons can pop even against the lighter colors. Here is my going-in argument on the use of colors:

Grey – Indicates normal or off… blends into the background when attention is not needed
Yellow – Lighting: Note that the default on & off icon images are lights, not a power symbol.
Green – Safe: Security System armed or locked
Orange – Caution: Attention needed or zone open
Red – Warning: Alerts & Alarms
Blue – On: I wanted to use green, but used blue instead to differentiate from security systems
Black – Off: I wanted to quickly be able to see the state of my wall dimmer scenes. I mapped blue to the “on” scenes and black to the “off” scenes. I also included icons in black for things that have an off state.
Purple – Media: It’s the color that the contemporary icon set uses. I adjusted the color slightly to integrate with the palette I used.

Many of the icons have multiple colors for use in whatever scenarios you may find. For instance, the default central scene icons are the base light grey, but for my switches I went through and mapped all “on” scenes to blue icons and “off” scenes to black icons. This allows me to tell the current scene at glance, and I don’t have to read the actual status to tell if it was toggled on or off.

Here is the link to the files:

https://drive.google.com/open?id=1d0...-fCI9L6Qto5d4k

Inside, there is a folder labeled Simple Lines Icons along with some instructions to get you going.

Looks like there may be a trick to downloading the icons:

Note: I don't use google drive much and trying to zip them from your drive location always just stalled. I used the menu option move them to my directory and then zipped them for download from there. That may be something everyone else knows, but it took me a bit to figure out.

Enjoy!
-Jon

Updates:
2020-06-11: Added Scenes 6-8 & Outside Temperatures (C & F)
2022-01-03: Added Network, Ethernet, POE, Printer & WiFi
2022-05-30:
Added unlock.png to the Simple Lines (it's why there was one less between the two folders... same icon as unlock.gif)
Added Outside Temperature down to -40 (C & F)
Added 4 new season icons
Added gate and shed icons
Added new colors such that all appliance, fan, network and utility icons have grey, red, yellow, blue and green.

[B1Trash]

How to Install a Custom Status Icon Set

To install a custom status icon set, copy the icon folder (i.e. “Simple Lines Icons”) into the hs3\HomeSeer\html\images\HomeSeer folder. The setname.txt file in that folder tells HomeSeer the name of the set. If you want to change the name of the Status Icon Set then you can edit the name in this file.

To enable this set, go to Tools -> Setup:



Then go to the custom tab and choose the icon set from the Status Icon Set menu dropdown:



How it works: The default folder that HS3 pulls status icons from is:

hs3\HomeSeer\html\images\HomeSeer\status

If you load a custom status icon set using the above method, HS3 will copy the files from the original folder to the status folder. If you wish to switch to another icon set, you can redo the previous procedure and HS3 will copy the contents from that icon set into the status folder. Note that it will not remove icon files, only overwrite them. So, if your new set has fewer icons than the one it replaced, you will have icons from both sets (all of the icons from the new set and whatever it didn’t replace from the old set).

[B1Trash]

Changing an Icon for a Device Status

Let's say you want a different icon than the default to show up for a specific device's specific status. It's easy to change:

[B1Trash]

While the process of changing a single status icon for a single device is simple, it is time consuming and repetitive. I personally have turned to scripting to make my life easier. Here is a sample of what I use to do my HS-WD100 & HS-WS100 switch central scene devices. Note that I also changed the status labels in the script as well. I am not a professional programmer and do not do error handling. You can use this as a starting off point, but use at your own risk.

    Public Sub Set_Status_and_Graphics_Switch_Central_Scene(Parameter As String)
        '' This routine changes both the value-status pairs and value-graphics pairs for a HS-WX100 Switch
        '' The parameter is a list of reference IDs seperated by a semicolon (";")
        '' No modifications necessary if you are using the Simple Lines Icon pack installed using the custom staus icons method on the setup page
        '' This script is provided as is and with no implied warranty... there is no error handling and you will reset whatever devices you put in... Please be careful if you choose to use it!

        'Variable Declarations
        Dim StatusPair(9) As VSPair
        Dim GraphicsPair(9) As VGPair
        Dim NewStatus As String = ""
        Dim Path As String = "/images/HomeSeer/status/"    'folder path
        Dim FileName As String = ""
        Dim FileSuffix As String = ""
        Dim TapType As Integer
        Dim TopBottom As Integer
        Dim Index As Integer = 0
        Dim MyDevices() As String
        MyDevices = Parameter.ToString.Split(";")

        'For loops to load Status Text and Graphics Paths into templates
        For TopBottom = 1 To 2
            For TapType = 0 To 4
                StatusPair(Index) = New VSPair(HomeSeerAPI.ePairStatusControl.Status)
                StatusPair(Index).PairType = VSVGPairType.SingleValue
                StatusPair(Index).Value = TopBottom * 1000 + TapType
                GraphicsPair(Index) = New VGPair
                GraphicsPair(Index).PairType = StatusPair(Index).PairType
                GraphicsPair(Index).Set_Value = StatusPair(Index).Value
                Select Case TopBottom
                    Case 1
                        NewStatus = "Top "
                        FileSuffix = "-On.png"
                    Case 2
                        NewStatus = "Bottom "
                        FileSuffix = "-Off.png"
                End Select
                Select Case TapType
                    Case 0
                        NewStatus = NewStatus & "x1"
                        FileName = "Scene-Pressed-1"
                    Case 1
                        NewStatus = NewStatus & "Released"
                        FileName = "Scene-Released"
                    Case 2
                        NewStatus = NewStatus & "Held"
                        FileName = "Scene-Held"
                    Case 3
                        NewStatus = NewStatus & "x2"
                        FileName = "Scene-Pressed-2"
                    Case 4
                        NewStatus = NewStatus & "x3"
                        FileName = "Scene-Pressed-3"
                End Select
                StatusPair(Index).Status = NewStatus
                GraphicsPair(Index).Graphic = Path & FileName & FileSuffix
                Index += 1
            Next TapType
        Next TopBottom

        ' For loop to load templates into HS devices
        For Each MyDevice As String In MyDevices
            'Clear out existing status & graphics
            hs.DeviceVSP_ClearAll(MyDevice, True)
            hs.DeviceVGP_ClearAll(MyDevice, True)
            ' Load templates
            For i = 0 To 9
                hs.DeviceVSP_AddPair(MyDevice, StatusPair(i))
                hs.DeviceVGP_AddPair(MyDevice, GraphicsPair(i))
            Next
            hs.WriteLog("Info", hs.DeviceVSP_CountStatus(MyDevice) & " status text & graphic changes made on device #" & MyDevice)
        Next

    End Sub

Again, you don't have to use this code, but it has made my life so much easier. Also, if you're going to be doing any scripting at all, I would recommend using tenscripting. It is such a valuable resource.

[mbdirtfarmer]

Thank you very much for sharing this!

[Fellhahn]

What an awesome thing to do, thank you.

[Guest]

Wow thank you !

[Wade]

A lot of work there and a great looking set of icons. Thank you for sharing.

[langenet]

For sure a lot of work and your contribution is much appreciated. My concern however is if any icon changes are made at a current version, that one would have to go through this all over on successive HS versions. Do these changes persist or how is this handled?

Robert

[randy]

For sure a lot of work and your contribution is much appreciated. My concern however is if any icon changes are made at a current version, that one would have to go through this all over on successive HS versions. Do these changes persist or how is this handled?

Robert

Here is how I handled it when Homeseer released the new Contemporary icon set. When they reIeased the new Contemporary icon set they also created a mechanism to switch among different icon sets. I initially based my system on the new Contemporary icons.

1. I created a new directory “My Custom” under HomeSeer HS3\html\images\HomeSeer
2. Then I created a text file “setname.txt” with a single line in it “My Custom”. This is the mechanism that HomeSeer uses to populate the choices among icon sets in Setup under Custom. Now I have “Classic”, “Contemporary” and “My Custom” as choices. You can create as many different icon sets as you want using this method.
3. Then I copied the contents of the Contemporary directory into “My Custom” as a starting point, then added any new icons to that folder. If I want to replace a default HomeSeer icon, I use the same name and type. Be aware that HomeSeer has used .png files for the new Contemporary icon set, but renamed them with a .gif extension to accommodate legacy hard coded icons. Browsers don’t seem to be bo5hered by an incorrect extension, they still render correctly.
4. As I add icons I copy them to the “Status” as well as “My Custom”. Alternately you could just place them in My Custom and toggle between Contemporary and My Custom in setup.

When you select an icon set under setup the entire contents of that directory is copied to Status, overwriting any same named files. When you upgrade HS3 any icon changes are only written to the Contemporary directory and the icon set selection is set to Contemporary. Nothing is ever done with any other icon directories. After an upgrade, I simply select My Custom and I am back to where I was.

This is how B1Trash described it at the top. I posted all of this years ago, but I cannot find that post.

[B1Trash]

Randy, your posts are probably 75% of why I understand all of this. (I gotta leave some room for the others!)

[B1Trash]

Robert, give me a bit to formulate a good reply to you.

[B1Trash]

For sure a lot of work and your contribution is much appreciated. My concern however is if any icon changes are made at a current version, that one would have to go through this all over on successive HS versions. Do these changes persist or how is this handled?

Robert

Ok Robert-

What Randy said 100%. Let me add my $.02...

I use a Zee S2 and I run it headless. I do on occasion hook it up to a monitor and keyboard, but this is rare. I use FileZilla to FTP files into the machine. However, due to Linux permissions I can't just go dropping files anywhere I want. The "status" folder is write-protected for me, so I can't just drop image files in. I can drop them into a folder as Randy described above. Since I can't put them into the "status" folder directly, I use the web interface to do so. As Randy said,

As I add icons I copy them to the “Status” as well as “My Custom”. Alternately you could just place them in My Custom and toggle between Contemporary and My Custom in setup

This is the exact procedure I use when creating new icons.

When I update HS3, I toggle from the Contemporary icons back to my icons on the Custom tab. Pretty simple.

That isn't the whole story though... I have gone through and customized many of the devices status labels and graphics as I outlined in post #3. There are certain occurrences that may reset them back to default values. For instance, for my thermostat the default temperature icons did nothing for me. My house temp never goes below 60 or above 79. The thermometer scale is useful for outdoor temps, but not so much for indoor temps. So I created the numbers. Adding them in one-by-one would have been painful (x6 devices!) so I used a script to change the labels and graphics. Every time I update my Ecobee plugin, the devices revert back to their original labels and icons. When this happens, I go back to my script and run it over again and I am back in business.

Is it an uphill battle? Sometimes. But once my script is set up, it's a matter of simply running one event to fix the icons back.

[Paroxysm]

B1Trash, Haven't done much other than suck knowledge from these forums as best I can but just want to say thankyou for sharing this.

[langenet]

Thanks B1Trash.. and Randy. I'll take a closer look at this implementation. Again, your contributions to HS are extremely well received and appreciated!

Robert