Appboard/2.5/builder/custom icons: Difference between revisions
imported>Jason.nicholls No edit summary |
imported>Jason.nicholls |
||
(8 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
== Icon Chooser == | == Icon Chooser == | ||
When configuring a widget that supports icons the ''Icon Chooser'' is used to make a selection, as shown below | When configuring a widget that supports icons the ''Icon Chooser'' is used to make a selection, as shown below. The ''Keyword Search'' can be used to search through tags associated with each icon. This will be explained in the sections below detailing how to add custom icons. | ||
[[File:appboard-2.4-icon-chooser.png|frame|center|Icon Chooser dialog]] | [[File:appboard-2.4-icon-chooser.png|frame|center|Icon Chooser dialog]] | ||
{{Note|The Google Map widget and Vector Map widgets have a specific set of icons only used for those widgets. The list of images that appear in the Icon Chooser will differ when editing those widgets.}} | |||
== Custom Icons == | |||
To make icons available to AppBoard they must be registered in the Icon Registry which is loaded on startup. The basic process for adding custom icons is: | |||
# Copy the icon/image files onto the AppBoard server. | |||
# Create an icon registry file for the custom icons, and copy this to the server. | |||
# Include the custom icon/image files and icon registry file in full archives. | |||
=== Copying Icons to the Server === | |||
# Create a directory for the custom icons, this has to be under the <tt>visualizer</tt> directory, but it is recommended to create a custom directory for all custom icons such as: | |||
#: <tt>[INSTALL_HOME]/server/enportal/visualizer/assets/custom/icons/</tt> | |||
# Copy all the icon/image files into this directory on the AppBoard server ensuring to set the correct ownership and permissions for AppBoard to access the files. | |||
=== Icon Registry Files === | |||
AppBoard maintains the icon registry in the following directory: <tt>[INSTALL_HOME]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/iconregistry</tt>. All <tt>csv</tt> files in this directory are loaded and by default the following files are included with the install - these should not be edited: | |||
* <tt>backgrounds.csv</tt>: images used for backgrounds with the Diagrammer widget. | |||
* <tt>base.csv</tt>: the broad set of generic icons used by most widgets. | |||
* <tt>custom_military.csv.disabled</tt>: supplementary military focused icons, disabled by default (remove .disabled to have this loaded). | |||
* <tt>mapBadge.csv</tt>: images used for the Vector Map iconic badges. | |||
* <tt>mapIcon.csv</tt>: images used for the Google Map widget. | |||
* <tt>patterns.csv</tt>: pattern images used in various chart widgets for filled areas. | |||
To add custom icons you must: | |||
# Create a new registry <tt>.csv</tt> file with the correct fields and values for each of the custom icons added to the server. This should have a filename that differs from the set of shipped registry files listed above. See further down for the format of this file. | |||
# Copy this file into the icon registry directory, for example: | |||
#: <tt>[INSTALL_HOME]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/iconregistry/custom_icons.csv</tt> | |||
# At this point the AppBoard server can be restarted and if there are no issues the new icons should be available! | |||
==== Registry Format ==== | |||
This table describes the <tt>csv</tt> format as used by the icon registry. All fields are required and errors may result in failure to process the entire registry. A good idea is to also look at the default <tt>base.csv</tt> file as an example. | |||
{|class='wikitable' | |||
!# | |||
!Field | |||
!Type | |||
!Description | |||
|- | |||
|align='right'|1 | |||
|<tt>type</tt> | |||
|string | |||
|Should always be set to <tt>base</tt>. | |||
|- | |||
|align='right'|2 | |||
|<tt>style</tt> | |||
|string | |||
|This column is optional, if included set to <tt>3d</tt>. | |||
|- | |||
|align='right'|3 | |||
|<tt>id</tt> | |||
|string | |||
|Internal unique identifier across all icon registry files. | |||
|- | |||
|align='right'|4 | |||
|<tt>label</tt> | |||
|string | |||
|The label shown in the user interface, such as in the Icon Chooser. | |||
|- | |||
|align='right'|5 | |||
|<tt>rasterPath</tt> | |||
|string | |||
|This is the path to the icon file location relative to the <tt>visualizer</tt> directory on the server. So for example using the recommended directory from above: <tt>assets/custom/icons/office.png</tt> | |||
|- | |||
|align='right'|6 | |||
|<tt>vectorPath</tt> | |||
|string | |||
|This can be left blank in most instances unless producing vector <tt>swf</tt> icons. Otherwise it should provide a path relative to the <tt>visualizer</tt> directory as with the rasterPath. | |||
|- | |||
|align='right'|7 | |||
|<tt>width</tt> | |||
|integer | |||
|Width of the icon in pixels. | |||
|- | |||
|align='right'|8 | |||
|<tt>height</tt> | |||
|integer | |||
|Height of the icon in pixels. | |||
|- | |||
|align='right'|9 | |||
|<tt>centerX</tt> | |||
|integer | |||
|The x-axis center point. Not all images have a center in the middle of the image, so for correct placement set the image center correctly. | |||
|- | |||
|align='right'|10 | |||
|<tt>centerY</tt> | |||
|integer | |||
|As above for the y-axis center point. | |||
|- | |||
|align='right'|11 | |||
|<tt>tags</tt> | |||
|string | |||
|Set of space separated tags to allow for easy searching in the Icon Chooser when large numbers of icons are available. | |||
|} | |||
=== Including in Backups === | |||
Finally the last step is to ensure all icon files and the custom icon registry file are included in full backups. This is to make sure that when restoring the system, or migrating from one environment to another, that the custom icons will be included. | |||
See the [[appboard/2.5/admin/backup_and_recovery#Customizing_the_Export|Customizing the Export]] section on the Backup & Recovery page for more information. |
Latest revision as of 07:18, 30 July 2014
Overview
Icons are a fundamental concept shared throughout AppBoard in many different visualizations such as lists, tables, and maps. AppBoard ships with a broad set of generic icons and this page details how to add additional icons.
Please note this page refers to icons as defined by setting a Default Icon or via Icon Filters. Status Shapes are not icons as such but automatically rendered shapes with colour tints applied. The set of shapes is defined in code and not user extensible.
Icon Chooser
When configuring a widget that supports icons the Icon Chooser is used to make a selection, as shown below. The Keyword Search can be used to search through tags associated with each icon. This will be explained in the sections below detailing how to add custom icons.
Custom Icons
To make icons available to AppBoard they must be registered in the Icon Registry which is loaded on startup. The basic process for adding custom icons is:
- Copy the icon/image files onto the AppBoard server.
- Create an icon registry file for the custom icons, and copy this to the server.
- Include the custom icon/image files and icon registry file in full archives.
Copying Icons to the Server
- Create a directory for the custom icons, this has to be under the visualizer directory, but it is recommended to create a custom directory for all custom icons such as:
- [INSTALL_HOME]/server/enportal/visualizer/assets/custom/icons/
- Copy all the icon/image files into this directory on the AppBoard server ensuring to set the correct ownership and permissions for AppBoard to access the files.
Icon Registry Files
AppBoard maintains the icon registry in the following directory: [INSTALL_HOME]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/iconregistry. All csv files in this directory are loaded and by default the following files are included with the install - these should not be edited:
- backgrounds.csv: images used for backgrounds with the Diagrammer widget.
- base.csv: the broad set of generic icons used by most widgets.
- custom_military.csv.disabled: supplementary military focused icons, disabled by default (remove .disabled to have this loaded).
- mapBadge.csv: images used for the Vector Map iconic badges.
- mapIcon.csv: images used for the Google Map widget.
- patterns.csv: pattern images used in various chart widgets for filled areas.
To add custom icons you must:
- Create a new registry .csv file with the correct fields and values for each of the custom icons added to the server. This should have a filename that differs from the set of shipped registry files listed above. See further down for the format of this file.
- Copy this file into the icon registry directory, for example:
- [INSTALL_HOME]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/iconregistry/custom_icons.csv
- At this point the AppBoard server can be restarted and if there are no issues the new icons should be available!
Registry Format
This table describes the csv format as used by the icon registry. All fields are required and errors may result in failure to process the entire registry. A good idea is to also look at the default base.csv file as an example.
# | Field | Type | Description |
---|---|---|---|
1 | type | string | Should always be set to base. |
2 | style | string | This column is optional, if included set to 3d. |
3 | id | string | Internal unique identifier across all icon registry files. |
4 | label | string | The label shown in the user interface, such as in the Icon Chooser. |
5 | rasterPath | string | This is the path to the icon file location relative to the visualizer directory on the server. So for example using the recommended directory from above: assets/custom/icons/office.png |
6 | vectorPath | string | This can be left blank in most instances unless producing vector swf icons. Otherwise it should provide a path relative to the visualizer directory as with the rasterPath. |
7 | width | integer | Width of the icon in pixels. |
8 | height | integer | Height of the icon in pixels. |
9 | centerX | integer | The x-axis center point. Not all images have a center in the middle of the image, so for correct placement set the image center correctly. |
10 | centerY | integer | As above for the y-axis center point. |
11 | tags | string | Set of space separated tags to allow for easy searching in the Icon Chooser when large numbers of icons are available. |
Including in Backups
Finally the last step is to ensure all icon files and the custom icon registry file are included in full backups. This is to make sure that when restoring the system, or migrating from one environment to another, that the custom icons will be included.
See the Customizing the Export section on the Backup & Recovery page for more information.