自定义Web界面图标：修订间差异

来自Domoticz
无编辑摘要
 
（未显示1个用户的2个中间版本）
第1行： 第1行：
Domoticz内置了一些图标供Web界面使用。不过，你可能希望用一些个性化图标(例如你的手机图标)，此页面介绍如何实现。<br>
Domoticz内置了一些图标供Web界面使用。不过，你可能希望用一些个性化图标(例如你的手机图标)，此页面介绍如何实现。<br>
注意：Domotiz升级会导致自定义图标被删除，所以升级前请先备份！


=#2215版开始可以上传自定义图标=
=#2215版开始可以上传自定义图标=
第18行： 第19行：
[http://domoticz-icon.aurelien-loyer.fr/ 在线生成 <br>]
[http://domoticz-icon.aurelien-loyer.fr/ 在线生成 <br>]
*本教程使用Paint.NET(基于.NET框架)，只适用与windows用户，其它操作系统可以使用[http://www.gimp.org/downloads/ '''GIMP''']，当然你可以使用其它顺手的工具，比如Photoshop等。
*本教程使用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>
*在这个例子中，我们将使用Domoticz的logo来示例，文件位于官方Wiki; [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.
*确保在整个编辑过程中及时保存你的文件 (快捷键CTRL + S). 以免发生错误的时候全部重新开始.


'''1.''' <br>
'''1.''' <br>
Download and install [http://www.getpaint.net/download.html '''Paint.NET'''] <br><br>
下载并安装 [http://www.getpaint.net/download.html '''Paint.NET'''] <br><br>
'''2.''' <br>
'''2.''' <br>
Launch the Paint.NET application<br><br>
启动 Paint.NET <br><br>
'''3.''' <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>
在网上搜索合适的图标文件. 大部分文件会大于我们需要的48x48像素.考虑到我们可能会对图片文件进行一些编辑, 选择的图片不要小于 250x250像素， 以免裁切尺寸后丢失细节. <br><br>
'''4.''' <br>
'''4.''' <br>
Open the image (Domoticz Logo)<br><br>
打开图片(Domoticz Logo)<br><br>
'''5.''' <br>
'''5.''' <br>
Delete the areas of the image you don't want to use. In this case the white corners.<br>
删除图片中你不想要的部分，在这个例子中指的是拐角白色的部分.<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>
. [http://s16.postimg.org/lhgxmpj5h/Icon_Editing_1.png '''Click for Example''']<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>
按住Ctrl键的同时再点击选择区域可以实现多重区域选择，按下键盘上的Delete键你就可以删除选择的区域。<br>
现在你会看到背景变成透明了，透明部分会以棋盘格显示.如果你重复这个操作，把四个拐角全部处理完毕这样我们就得到了一个背景完全透明的Domoticz图标。<br>
[http://s7.postimg.org/ox8jv7ywr/Icon_Editing_2.png '''Click for Example''']
[http://s7.postimg.org/ox8jv7ywr/Icon_Editing_2.png '''Click for Example''']
<br><br>
<br><br>
'''6.''' <br>
'''6.''' <br>
Now we have the correct image details but still with the wrong size.<br>
现在我们得到了正确的图片细节，但是尺寸还是不对。。<br>
Resize the image through the resize menu;  Image - Resize  (CTRL + R). <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>
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>
Click the OK button;  Voila! Your image has been resized.<br>
第85行： 第87行：
<br>
<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>
图标均为.PNG文件, 分辨率48x48px(像素)。你可以在其它网站中查找图标或者自己画一个。<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>
推荐图标库 http://www.easyicon.net/ https://www.iconfinder.com http://www.iconspedia.com <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!).
请注意，大部分在线图标都有版权，请不要随意传播分发(即使是修改后)！


=编辑图标描述文件=
=编辑图标描述文件=
第124行： 第126行：
=Selecting the icon you've created=
=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!
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.
自定义图标设置好以后，别忘了备份所有图标的图片文件跟图标描述文件(switch_icons.txt)，因为Domoticz升级时自定义图标会丢失。
<br>
<br>
<br>
<br>

2017年7月6日 (四) 09:57的最新版本

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

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

你可以将你自制的图标包发送到:

domoticzicons@gmail.com

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

在创建自己的图标之前，您可能需要首先检查目前的图标在线存储库:
Domoticz Icons'

论坛中也有相关主题:
Custom Icons

自制图标

有一个非常简单的方法来创建漂亮的开关图标:
在线生成

  • 本教程使用Paint.NET(基于.NET框架)，只适用与windows用户，其它操作系统可以使用GIMP，当然你可以使用其它顺手的工具，比如Photoshop等。
  • 在这个例子中，我们将使用Domoticz的logo来示例，文件位于官方Wiki; DOMOTICZ_LOGO
  • 最好将制作的图标文件放在另外一个独立的文件夹。
  • 确保在整个编辑过程中及时保存你的文件 (快捷键CTRL + S). 以免发生错误的时候全部重新开始.

1.
下载并安装 Paint.NET

2.
启动 Paint.NET

3.
在网上搜索合适的图标文件. 大部分文件会大于我们需要的48x48像素.考虑到我们可能会对图片文件进行一些编辑, 选择的图片不要小于 250x250像素， 以免裁切尺寸后丢失细节.

4.
打开图片(Domoticz Logo)

5.
删除图片中你不想要的部分，在这个例子中指的是拐角白色的部分.
使用魔棒工具很容易实现这个操作. 只需要点击魔棒图标然后，点击拐角白色的部分，这样整个白色的区域就被选定了 . Click for Example
按住Ctrl键的同时再点击选择区域可以实现多重区域选择，按下键盘上的Delete键你就可以删除选择的区域。
现在你会看到背景变成透明了，透明部分会以棋盘格显示.如果你重复这个操作，把四个拐角全部处理完毕这样我们就得到了一个背景完全透明的Domoticz图标。
Click for Example

6.
现在我们得到了正确的图片细节，但是尺寸还是不对。。
通过缩放菜单调整图片大小，Image - Resize (CTRL + R).
Resize By absolute size. This way you can enter the exact pixels for your image; Width: 48 pixels, Height: 48 pixels.
Click the OK button; Voila! Your image has been resized.
Click for Example

7.
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'


8.
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

9.
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.
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)
Go to the Adjustments-menu and select Black and White (CTRL + SHIFT + G)
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.
Click for Example

10.
Almost there; We need to create the icons.txt file. In this case it looks as follows; 

Domoticz;Domoticz;Domoticz Logo

You'll eventually end up with 4 files;

  • Domoticz.png
  • Domoticz48_On.png
  • Domoticz48_Off.png
  • icons.txt


Click for Example

11.
Final step
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.

  • Note:
    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.


图标格式

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

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

编辑图标描述文件

图标描述文件位于/home/pi/domoticz/www/switch_icons.txt
此文件用来描述特定图标。
将新图标的描述加入最后一行。
例如新增一个名为iPhone.png的图标，描述文件如下: 

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

最后一行的'iPhone'就是新增的图标的描述文件。
第一个参数是图标文件名，第二个参数是用于显示在网页中的名字，第三个参数是图标介绍。

重启Domoticz

sudo service domoticz.sh restart

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升级时自定义图标会丢失。

取自“https://www.domoticz.cn/wiki/index.php?title=自定义Web界面图标&oldid=201”