Announcement

Collapse
No announcement yet.

Sharing my icons with y'all...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Sharing my icons with y'all...

    Hello-

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

    Click image for larger version

Name:	Simple Lines 2020-06-11.png
Views:	190
Size:	790.5 KB
ID:	1392888

    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:
    Originally posted by ts1234 View Post
    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
    Last edited by B1Trash; June 11, 2020, 05:47 PM. Reason: 2020-06-11: Added Scenes 6-8 & Outside Temperatures (C & F)

    #2
    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:

    Click image for larger version  Name:	setup.png Views:	1 Size:	36.1 KB ID:	1257249

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

    Click image for larger version  Name:	status icon set.png Views:	1 Size:	27.4 KB ID:	1257251

    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).
    Last edited by B1Trash; November 6, 2018, 12:17 AM.

    Comment


      #3
      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:

      Click image for larger version  Name:	step 1.png Views:	2 Size:	127.5 KB ID:	1257253



      Click image for larger version  Name:	step 2-3.png Views:	3 Size:	80.2 KB ID:	1257255
      Click image for larger version  Name:	step 4.png Views:	2 Size:	99.8 KB ID:	1257257

      Click image for larger version  Name:	step 5.png Views:	2 Size:	109.8 KB ID:	1257258
      Click image for larger version  Name:	step 6.png Views:	2 Size:	78.8 KB ID:	1257256

      Click image for larger version  Name:	step 7.png Views:	2 Size:	138.4 KB ID:	1257259
      Last edited by B1Trash; November 4, 2018, 11:25 PM.

      Comment


        #4
        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.

        Code:
            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.
        Last edited by B1Trash; November 4, 2018, 11:23 PM.

        Comment


          #5
          Thank you very much for sharing this!

          Comment


            #6
            What an awesome thing to do, thank you.

            Comment


              #7
              Wow thank you !

              Comment


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

                Comment


                  #9
                  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
                  HS3PRO 3.0.0.500 as a Fire Daemon service, Windows 2016 Server Std Intel Core i5 PC HTPC Slim SFF 4GB, 120GB SSD drive, WLG800, RFXCom, TI103,NetCam, UltraNetcam3, BLBackup, CurrentCost 3P Rain8Net, MCsSprinker, HSTouch, Ademco Security plugin/AD2USB, JowiHue, various Oregon Scientific temp/humidity sensors, Z-Net, Zsmoke, Aeron Labs micro switches, Amazon Echo Dots, WS+, WD+ ... on and on.

                  Comment


                    #10
                    Originally posted by langenet View Post
                    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. Noting 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.
                    Last edited by rprade; November 5, 2018, 11:19 PM.
                    Randy Prade
                    Aurora, CO
                    Prades.net

                    PHLocation - Pushover - EasyTrigger - UltraECM3 - Ultra1Wire3 - Arduino

                    Comment


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

                      Comment


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

                        Comment


                          #13
                          Originally posted by langenet View Post
                          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,
                          Originally posted by rprade View Post
                          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.

                          Comment


                            #14
                            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.

                            Comment


                              #15
                              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
                              HS3PRO 3.0.0.500 as a Fire Daemon service, Windows 2016 Server Std Intel Core i5 PC HTPC Slim SFF 4GB, 120GB SSD drive, WLG800, RFXCom, TI103,NetCam, UltraNetcam3, BLBackup, CurrentCost 3P Rain8Net, MCsSprinker, HSTouch, Ademco Security plugin/AD2USB, JowiHue, various Oregon Scientific temp/humidity sensors, Z-Net, Zsmoke, Aeron Labs micro switches, Amazon Echo Dots, WS+, WD+ ... on and on.

                              Comment

                              Working...
                              X