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

Domoticz内置了一些图标供Web界面使用。不过，你可能希望用一些个性化图标(例如你的手机图标)，此页面介绍如何实现。<br>
注意：Domotiz升级会导致自定义图标被删除，所以升级前请先备份！

=#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等。
*在这个例子中，我们将使用Domoticz的logo来示例，文件位于官方Wiki; [https://pbs.twimg.com/profile_images/378800000268772392/de360182af3accd41f76d04bca24a516_400x400.png  '''DOMOTICZ_LOGO''']<br>
*最好将制作的图标文件放在另外一个独立的文件夹。
*确保在整个编辑过程中及时保存你的文件 (快捷键CTRL + S). 以免发生错误的时候全部重新开始.

'''1.''' <br>
下载并安装 [http://www.getpaint.net/download.html '''Paint.NET'''] <br><br>
'''2.''' <br>
启动 Paint.NET  <br><br>
'''3.''' <br>
在网上搜索合适的图标文件. 大部分文件会大于我们需要的48x48像素.考虑到我们可能会对图片文件进行一些编辑, 选择的图片不要小于 250x250像素， 以免裁切尺寸后丢失细节. <br><br>
'''4.''' <br>
打开图片(Domoticz Logo)<br><br>
'''5.''' <br>
删除图片中你不想要的部分，在这个例子中指的是拐角白色的部分.<br>
使用魔棒工具很容易实现这个操作. 只需要点击魔棒图标然后，点击拐角白色的部分，这样整个白色的区域就被选定了
. [http://s16.postimg.org/lhgxmpj5h/Icon_Editing_1.png '''Click for Example''']<br>
按住Ctrl键的同时再点击选择区域可以实现多重区域选择，按下键盘上的Delete键你就可以删除选择的区域。<br>
现在你会看到背景变成透明了，透明部分会以棋盘格显示.如果你重复这个操作，把四个拐角全部处理完毕这样我们就得到了一个背景完全透明的Domoticz图标。<br>
[http://s7.postimg.org/ox8jv7ywr/Icon_Editing_2.png '''Click for Example''']
<br><br>
'''6.''' <br>
现在我们得到了正确的图片细节，但是尺寸还是不对。。<br>
通过缩放菜单调整图片大小，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>

=图标格式=
图标均为.PNG文件, 分辨率48x48px(像素)。你可以在其它网站中查找图标或者自己画一个。<br>
图标建议使用透明背景。

推荐图标库 http://www.easyicon.net/ https://www.iconfinder.com  http://www.iconspedia.com <br>
请注意，大部分在线图标都有版权，请不要随意传播分发(即使是修改后)！

=编辑图标描述文件=
图标描述文件位于<code>/home/pi/domoticz/www/switch_icons.txt</code><br>
此文件用来描述特定图标。<br>
将新图标的描述加入最后一行。<br>
例如新增一个名为iPhone.png的图标，描述文件如下:
 <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;My iPhone
</syntaxhighlight>
最后一行的'iPhone'就是新增的图标的描述文件。<br>
第一个参数是图标文件名，第二个参数是用于显示在网页中的名字，第三个参数是图标介绍。

=重启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!
=备份!重要!=
自定义图标设置好以后，别忘了备份所有图标的图片文件跟图标描述文件(switch_icons.txt)，因为Domoticz升级时自定义图标会丢失。
<br>
<br>

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