Announcement

Collapse
No announcement yet.

How to make your own custom tiles

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

  • How to make your own custom tiles

    I hope I'm not speaking out of turn, and wposner will be able to correct me, but if you want to make you own custom tiles it's pretty easy to do:

    1) Copy a component folder of the tile type you wish to customize. I'm my case I copied the folder 'hstextstatusdevice' and renamed it 'hsenergystatusdevice'.
    2) Edit the .js file in the new folder and rename all references to the tile type in the file. So I my case I renamed hstextstatusdevice to hsenergystatusdevice keeping the case sensitivity.
    3) Add the new tile type to the knockout section of startup.js in the apps folder. I my case I added ko.components.register('hsenergystatusdevice', { require: 'components/hsenergystatusdevice/hsenergystatusdevice' });

    Now force a cache reload in your browser (e.g. for Chrome press F12 (developer console) then Ctrl & left click the reload icon selecting "empty cache and hard reload"). This will force your browser to reload the all the .js files.

    You can now use your new competent/tile in your pages. You can modify the .js file in your new component folder as needed (e.g. change colors etc).

    I modified the new hsenergystatusdevice.js so that the background color of the tile changes based on how many watts my energy devices are using.

    Hope this helps some people with this very cool UI that wposner has developed. Props to him.

    M
    iCore5 Win 10 Pro x64 SSD

    HS3 Pro Edition 3.0.0.435 Windows

    BLOccupied:,Device History:,Yamaha:,UltraMon3:,mcsXap:,Restart:,UltraNetatmo3:, UltraM1G3:,Ultra1Wire3:,BLBackup:,Harmony Hub:,DoorBird:,UltraECM3:,Nanoleaf 3P:,UltraRachio3:,Z-Wave:,SDJ-Health:,BLGarbage:,Blue-Iris:,Chromecast:,Pushover 3P:,EasyTrigger:

  • #2
    Originally posted by mminehan View Post
    I hope I'm not speaking out of turn, and wposner will be able to correct me, but if you want to make you own custom tiles it's pretty easy to do:

    1) Copy a component folder of the tile type you wish to customize. I'm my case I copied the folder 'hstextstatusdevice' and renamed it 'hsenergystatusdevice'.
    2) Edit the .js file in the new folder and rename all references to the tile type in the file. So I my case I renamed hstextstatusdevice to hsenergystatusdevice keeping the case sensitivity.
    3) Add the new tile type to the knockout section of startup.js in the apps folder. I my case I added ko.components.register('hsenergystatusdevice', { require: 'components/hsenergystatusdevice/hsenergystatusdevice' });

    Now force a cache reload in your browser (e.g. for Chrome press F12 (developer console) then Ctrl & left click the reload icon selecting "empty cache and hard reload"). This will force your browser to reload the all the .js files.

    You can now use your new competent/tile in your pages. You can modify the .js file in your new component folder as needed (e.g. change colors etc).

    I modified the new hsenergystatusdevice.js so that the background color of the tile changes based on how many watts my energy devices are using.

    Hope this helps some people with this very cool UI that wposner has developed. Props to him.

    M

    Thank you! I'm very glad people are using the UI and starting to expand upon it. Nice idea of binding the tile color to give a visual indicator of high energy usage!

    Comment

    Working...
    X