In this tutorial we will show how to add custom module icon.

Sometimes we want to add custom icon to our module visualization in user interface. There are predefined icons for different module types, but we can change module icon if we want to replace it with our custom icon.

In first step we create icon in size 128 x 128 px. PNG picture format is recommended with transparent background. Use your faworite photo editor program (Photoshop,..). If we need two state icons we create one more icon for second state. Second icon name is with suffix 1. For example if we name first icon radiator.png, second icon is radiator1.png.

Here are examples of two icons:

  

Next we save icons in correct folder on EasyIoT server. Go in easyioy/html/images/custom folder and save new icons there.

In next step we configure custom icons in node. Go in Web interface Configure->Groups and modules and select one group. In group select module and go to module properties.

Now add property with name Settings.Icon and value is name of icon. In our case radiator.png. 

If our module uses two states, add second icon under name Settings.Icon1.

 

And that's it. Now you can see custom icon in user interface.

 

See more tutorials at ​http://iot-playground.com/build​

 

Buying guide

To support this site and EasyIoT framework development please buy in our store.

RASPBERRY PI 3 - Model B. 1GB RAM

New Raspberry Pi 3

Raspberry Pi 512MB Model B +

Raspberry Pi Model B+, ARM1176JZF-S Running at 700MHz, 512MB RAM.

Raspberry Pi 3 Ultimate Starter Kit - Wifi, HDMI, Breadboard, SD Card

Everything you need to build basic EasyIoT server on Raspberry Pi platform.

MICRO SD 64GB 32GB 16GB MEMORY CARD

USB STICK SIM Modem 7.2MBPS 3G Wireless USB Dongle

To control EasyIoT server by SMS message.

Acrylic Case Clear Transparent Shell Enclosure Computer Box Kit For Raspberry Pi

Acrylic Case Shell Enclosure for Raspberry Pi B+

Raspberry Pi to NRF24l01+ Shield EasyIoT server compatibile

Raspberry Pi to NRF24l01+ Shield EasyIoT server compatibile, Raspberry Pi, Raspberry PI B, Raspberry Pi 2

Prototyping Shield Module For Raspberry Pi

To build custom sensors and NRF24L01 transmitter/receiver on Raspberry Pi.

NRF24L01+PA+LNA SMA Antenna Wireless Transceiver communication module 2.4G

5V 2A Charger Micro USB

For Raspberry Pi or sensor modules, cheap and easy power solution.

USB Wifi Dongle Adapter 802.11n for for Raspberry Pi Model B+ B

No need for network cables on EasyIoT server. Use WiFI USB dongle.

 

 


Comments   

#3 bella 2017-01-06 04:14
1234Quoting DarioCdj:
Icon1 doesn't work... i've done it in Gas Sensor but always Sensor.Icon appear when state change....
Quoting Oscar Alvarez Valle:
Works!. :-) Thank tou EasyIoT I'd like also to have 3 states to assign one icon to Up, Stop and Up in Roller shutter control, instead boxes Down, Stop and Up
+1 #2 DarioCdj 2015-06-21 00:19
Icon1 doesn't work... i've done it in Gas Sensor but always Sensor.Icon appear when state change....
+2 #1 Oscar Alvarez Valle 2015-05-01 10:50
Works!. :-) Thank tou EasyIoT
I'd like also to have 3 states to assign one icon to Up, Stop and Up in Roller shutter control, instead boxes Down, Stop and Up

You have no rights to post comments