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
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
Comment