查看“自定义Web界面图标”的源代码

Domoticz内置了一些图标供Web界面使用。不过，你可能希望用一些个性化图标(例如你的手机图标)，此页面介绍如何实现。<br>

=#2215版开始可以上传自定义图标=

你可以将你自制的图标包发送到:<br>
 domoticzicons@gmail.com<br>

每个图标包的格式应该是一个包含以下四个文件的zip压缩包：3种不同版本/尺寸的PNG图标文件，以及图标描述文本文件，具体信息请查看下方介绍。

在创建自己的图标之前，您可能需要首先检查目前的图标在线存储库:<br>
[https://drive.google.com/folderview?id=0B-ZLFoCiqzMRSkFaaWdHV1Qxbm8&usp=sharing '''Domoticz Icons''''] <br>

论坛中也有相关主题:<br>
[http://www.domoticz.com/forum/viewtopic.php?f=8&t=5024 '''Custom Icons''']<br>

=自制图标=
有一个非常简单的方法来创建漂亮的开关图标:<br>
[http://domoticz-icon.aurelien-loyer.fr/ 在线生成 <br>]
*本教程使用Paint.NET(基于.NET框架)，只适用与windows用户，其它操作系统可以使用[http://www.gimp.org/downloads/ '''GIMP''']，当然你可以使用其它顺手的工具，比如Photoshop等。
*In this example we're going to use the Domoticz logo used on the Wiki page; [https://pbs.twimg.com/profile_images/378800000268772392/de360182af3accd41f76d04bca24a516_400x400.png  '''DOMOTICZ_LOGO''']<br>
*It's best to save the created images in a separately-created folder
*Be sure to save (CTRL + S) your image multiple times throughout the editing. This way you won't have to start all over again if something goes wrong.

'''1.''' <br>
Download and install [http://www.getpaint.net/download.html '''Paint.NET'''] <br><br>
'''2.''' <br>
Launch the Paint.NET application<br><br>
'''3.''' <br>
Search for the correct image/icon of your choice on the internet. Most of the images are larger than the 48x48 dimensions we need. Since we probably are going to do some editing, don't pick any image smaller than 250x250. Otherwise most of the details will be lost after resizing. <br><br>
'''4.''' <br>
Open the image (Domoticz Logo)<br><br>
'''5.''' <br>
Delete the areas of the image you don't want to use. In this case the white corners.<br>
This is easily done by using the Magic Wand tool. Just click the Magic Wand tool and then click on the white corner in the image. The entire white area is now selected. [http://s16.postimg.org/lhgxmpj5h/Icon_Editing_1.png '''Click for Example''']<br>
It's possible to select multiple items bij holding the CTRL button. You can delete a selected-area by pressing the DELETE button on your keyboard.<br>
You can now see that the background is transparent because of the checkered pattern. If you repeat this step for all 4 corners you'll end up with only the Domoticz logo on a transparent background.<br>
[http://s7.postimg.org/ox8jv7ywr/Icon_Editing_2.png '''Click for Example''']
<br><br>
'''6.''' <br>
Now we have the correct image details but still with the wrong size.<br>
Resize the image through the resize menu;  Image - Resize  (CTRL + R). <br>
Resize ''By absolute size''. This way you can enter the exact pixels for your image; Width: 48 pixels, Height: 48 pixels.<br>
Click the OK button;  Voila! Your image has been resized.<br>
[http://s12.postimg.org/i64yed0nx/Icon_Editing_3.png '''Click for Example''']
<br><br>
'''7.''' <br>
We can use the current image as the 'ON' image.
Save (As) the image as a .PNG file (default) and name it;  ''domoticz48_On.png''
*On the Save Configuration screen use the 'Auto-detect'
<br>
'''8.''' <br>
Since we still have the 'ON' image opened we now can make the small image (16x16) used on your floorplan.
Again use the resize menu (CTRL + R) only this time resize the image to:  Width: 16 pixels, Height: 16 pixels
Save (As) the image as a .PNG file (default) and name it;  ''domoticz.png''
<br><br>
'''9.''' <br>
We now want to create the exact same 48x48 icon but it must look like an 'Off' status. The best way to do this is by making it grey style and/or adjusting the Brightness/Contrast. <br>
Use the "History" window to go back through the editing step(s) to the point at which you are back in the 48x48 pixel image. (Or open the ''Domoticz48_On.png'' file again)<br>
Go to the ''Adjustments''-menu and select ''Black and White'' (CTRL + SHIFT + G)<br>
If you are happy with the result just save (as) the image as;  ''domoticz48_Off.png''. 
Otherwise you can adjust the image by using the ''Brightness / Contrast'' setting and afterwards save the image.<br>
[http://s7.postimg.org/6o1s0wtx7/Icon_Editing_4.png '''Click for Example''']
<br><br>
'''10.''' <br>
Almost there; We need to create the ''icons.txt'' file.
In this case it looks as follows;
<syntaxhighlight lang="bash">
Domoticz;Domoticz;Domoticz Logo
</syntaxhighlight>
You'll eventually end up with 4 files;
* Domoticz.png
* Domoticz48_On.png 
* Domoticz48_Off.png 
* icons.txt
<br>
[http://s18.postimg.org/qm68rvkp5/Icon_Editing_5.png '''Click for Example''']
<br>
<br>
'''11.''' <br>
'''Final step'''<br>
Add all 4 files to a ZIP file;  Select all 4 files, right-click your mouse button and select:  Send To - Compressed (zipped) folder.
You can now use this Zipped folder with your freshly-created logo in Domoticz by uploading it in the Setup--Custom Icon -menu.
<br><br>
*Note:<br>This is a very basic and easy-to-edit logo. If you play with the different options in Paint.NET you'll eventually start using the other selection tools, erasers, clone stamps and of course;  LAYERS! It all comes down to your own creativity and imagination.
<br>

=Format of the icons=
The icons for the dashboard are .PNG files, resolution 48x48 pixels. You can find icons on many sites, or make them yourself<br>
Icons with a transparent background are preferred.

Have a look at https://www.iconfinder.com and http://www.iconspedia.com for some nice icons.<br>
Pay attention that most of them are only licensed free for limited home use. So spreading/distributing them yourself is usually not allowed (even after editing!).

=Editing icon description file=
When you are done uploading images, go one level up, to <code>/home/pi/domoticz/www/</code><br>
Find the file 'switch_icons.txt' and open it.<br>
Scroll to the end of the file, and add a line for each icon you want to add.<br>
I have added an icon for an iPhone so my 'switch_icons.txt' looks like this:
 <syntaxhighlight lang="bash">
Light;Light/Switch;A Lamp or Switch
WallSocket;Wall Socket;Power Wall Socket
TV;Television;Television Screen
Harddisk;Hard disk;Hard disk drive
Printer;Printer;Printer
Amplifier;Amplifier;Device that controls audio
Computer;Computer;Personal Computer System
Fan;Fan;Airflow Producer
Speaker;Speaker;Audio Speaker
Generic;Generic;Generic On/Off switch
Fireplace;Fireplace;Fireplace
Water;Water;Water
Media;Media Player;Multi Media player
Alarm;Alarm;Alarm
iPhone;iPhone;iPhone virtual device
</syntaxhighlight>
The last 'iPhone' line is what i added.<br>
First column is filename, second column is iconname in interface, third column is icon description

=重启Domoticz=
<syntaxhighlight lang="bash">
sudo service domoticz.sh restart
</syntaxhighlight>

=Selecting the icon you've created=
When you navigate to the Domoticz web-interface, edit a switch. If you performed all the steps correctly, your custom icon(s) should now be visible!
=Backup=
If the icons you have made are working correctly, it is advisable to make a backup of the icons together with the modified icon-description file (switch_icons.txt). Otherwise they might be accidentally overwritten when you update Domoticz.
<br>
<br>

[[Category:Domoticz]]
[[Category:手册]]
[[Category:设置]]
[[Category:皮肤]]