Jump to: navigation, search

Difference between revisions of "Icon Font"

(→‎Available Icons: added link to new article on custom icons in xamarin)
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
'''UBIK-Standard.ttf''' is a custom set of font icons developed primarily for use on the Xamarin Client, due to concerns over the legality of using Microsoft's Segoe MDL2 Assets icon font file on non-Windows platforms (ie. Android and iOS). Apart from this legal concern, having a standardized font icon set will contribute to having a more consistent look across the various platforms, clients, once UBIK-Standard.ttf becomes more widely used in both standard builds, and individual customizings.
+
'''UBIK-Standard.ttf''' is a custom set of font icons developed primarily for use on the Xamarin Client, due to concerns over the legality of using Microsoft's Segoe MDL2 Assets icon font file on non-Windows platforms (ie. Android and iOS). Apart from this legal concern, having a standardized font icon set will contribute to having a more consistent look across the various platforms and clients as UBIK-Standard.ttf becomes more widely adopted.
  
−
{{Hint|The latest font set can be downloaded directly from the [[File:UBIK-Standard.zip]] file.}}
+
{{Hint|The latest font set can be downloaded directly from here using the [[File:UBIK-Standard.zip]] file.}}
 +
 
 +
{{Attention|UBIK-Standard is an <I>Icon Font</I>. For Xamarin, the standard Text Font is [https://rsms.me/inter/ Inter], which is included in the resources and thus available to use immediately.}}
 +
 
 +
{{Attention|UBIK-Standard is currently only supported for the Xamarin client.}}
 +
 
 +
==Usage==
 +
UBIK-Standard.ttf is currently only supported for the Xamarin client.
 +
 
 +
===Xamarin Client===
 +
The first full version of the icon set was completed in September 2019. The tables on this page show the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code suffix, both of which can be used to call the icons using XAML.
 +
 
 +
Using XAML, Glyphs can be called in two ways. One method is to use the Hex Code, and another is the In-App Name. Of these two methods, the recommended method is to use the In-App Name, as it uses a natural language attribute as opposed to a glyph code, making it more immediately apparent which icon is being requested by the code.
 +
 
 +
The two below examples show how one might use both methods to create a User symbol.
 +
 
 +
<br>
 +
====In-App Name Usage====
 +
In the below example, <code>Glyph="{x:Static resources:UBIKIcons.User}"</code> is used to call the <I>User</I> symbol.
 +
<syntaxhighlight lang="xml">
 +
<ContentView
 +
    xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" >
 +
 
 +
<controls:GlyphLabel
 +
    Glyph="{x:Static resources:UBIKIcons.User}"
 +
                            HorizontalOptions="Center"
 +
                            PrimaryColor="{DynamicResource UBIKLightTextColor}"
 +
                            Style="{DynamicResource HeaderSymbolStyle}"
 +
                            VerticalOptions="Center" />
 +
</syntaxhighlight>
 +
 
 +
<br>
 +
====Hex Code Usage====
 +
In the below example, the attribute <code>Glyph=</code> and the following Hex Code is used to call the <I>User</I> icon. These Hex codes can be found using a Character Map program, or by searching through the icon tables below.
 +
 
 +
<syntaxhighlight lang="xml">
 +
<ContentView
 +
    xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" >
 +
 
 +
<controls:GlyphLabel Glyph="&#x22;" HorizontalOptions="Center"  />
 +
</syntaxhighlight>
 +
 
 +
====Directly Accessing Icons====
 +
The icons can also be used like every other font by setting the <code>FontFamily</code> attribute. For example:
 +
 
 +
<syntaxhighlight lang="xml">
 +
<ContentView
 +
    xmlns:resources="clr-namespace:UBIK.CPL.Resources;assembly=UBIK.CPL">
 +
   
 +
    <Label HorizontalOptions="Center"
 +
        HorizontalTextAlignment="Center"
 +
        Text="{x:Static resources:UBIKIcons.User}"
 +
        FontFamily="{x:Static UBIKSymbols}"
 +
        VerticalOptions="Center"
 +
        VerticalTextAlignment="Center" />
 +
 
 +
<!-- ... -->
 +
 
 +
</ContentView>
 +
</syntaxhighlight>
 +
 
 +
 
 +
== Available Icons==
 +
There are two options available to a customizer wishing to browse available icons.
 +
{{Hint|If a required icon is not found in UBIK, it is instead possible to [[Xamarin_XAML#Custom_Icons|render custom icons using Path data]].}}
 +
 
 +
'''The best way''' is to download and unzip  the [[File:UBIK-Standard.zip]] file. Once unzipped, open the "demo" webpage file to view all icons, as well as the [[Icon_Font#In-App_Name_Usage|human readable labels]] you can use to render them in your UI. Because the demo webpage does not provide a good overview of all the icons, it is possible to combine this approach with the second one described below using that to browse the icons, and then this method to retrieve the human readable labels for the icons you wish to use.
 +
<br>
 +
 
 +
 
 +
The second way requires installation of the [https://apps.microsoft.com/detail/9wzdncrdxf41?hl=en-US&gl=US| Character Map] tool from Microsoft. This can be used to browse the characters of all the fonts installed on your machine, so to use this method you should certainly download and install the latest version of UBIK-Standard.ttf above. The downside of using this method is that you don't have access to the human readable labels using this app.
 +
{{Attention|Note that icons installed on your machine are not necessarily available to customers, as they only have access to the icons delivered through UBIK, which is version-dependent.}}
 +
 
 +
<br>
 +
 
 +
[[Category:Pages with broken file links|Icon Font]]
  
 
== Known Issues ==
 
== Known Issues ==
−
The development of the custom icon font on the Xamarin client was hampered significantly by unexpected icon substitutions, which appeared to be vender/device-specific. To avoid this issue, the individual icons in the text file were mapped to the Hex codes used by the most basic alphabet and symbol characters.
+
===Xamarin Client===
 +
The development of the custom icon font on the Xamarin client was hampered significantly by unexpected icon substitutions, which appeared to be vendor/device-specific. To avoid this issue, the individual icons in the text file were mapped to the Hex codes used by the most basic alphabet and symbol characters.
 +
 
 +
A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf for icons when the user switched tabs, leaving UBIK running in the background. In these cases, circular icon containers became square when switching back to the app, and the icon glyphs were no longer visible. However, using the <i>GlyphButton</i> and <i>GlyphLabel</i> elements (as opposed to simply <i>Button</i> and <i>Label</i>) seems to prevent this issue.
 +
 
 +
 
 +
==Creation==
 +
The process for creating icons is documented here.
 +
 
 +
===Step 01: Asset Creation===
 +
The first step is to find similar, open-source icons to tweak. [https://themes-pixeden.com/font-demos/7-stroke/ Pixeden], [https://lineicons.com/icons/ LineIcons], or [https://linea.io/ LineA], are good starting points, as they have a similar style.
 +
 
 +
When tweaking (for example, in Adobe Illustrator), use a stroke width of 3 for the base line thickness.
  
−
A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf in FontIcons, and while using the "Label=" attribute. -Ask Liang-
+
It is good practice to produce three sets of .SVGs; a stroke version, an expanded version, and a final version. The stroke version is more easily edited, but the lines must be 'expanded' in Illustrator to be imported as icons. Finally, duplicate the expanded version, and name it using the following syntax:
 +
<code>001#ubik-U0x26</code>
  
−
== Original Set ==
+
* The first number is used to keep the icon list orderly.
−
The first full version of the icon set was completed in September 2019. The following table shows the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code, both of which can be used to call the icons using XAML.
+
* Add as many tags as desired using the # as separators. For example, a check mark icon may be listed as #ok#confirm#check. The - ends the tag portion of the syntax.
 +
* The glyph code assigns the icon to a certain space on the character map. As different device vendors block different glyph code sets for different uses, it is good practice to overwrite the basic alphabet, numbers, and symbols, to ensure the icons work on a large range of devices. Starting from 21, glyph codes may use numbers, or letters from 2A (2 here being an example) to 2F.
  
−
===ICONS===
+
===Step 02: TTF Generation===
−
{| class="wikitable" | width = "100%"
+
[https://icomoon.io/app/ IcoMoon] is a useful online tool for generating the icon font, that can then be installed on a device or packaged into the client resources.
−
|-
+
−
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
+
−
|-
+
−
|[[File:UBIKstandard_home-ubik.png|64 px|center]] || ''Ubik'' - Scalable UBIK logo for use on the splash screen. || Ubik || hex
+
−
|-
+
−
| [[File:UBIKstandard_home-service-group.png|64 px|center]] || ''Service'' - The customer profile. || Service|| hex
+
−
|-
+
−
| [[File:UBIKstandard_home-user-name.png|64 px|center]] || ''User'' || User || hex
+
−
|-
+
−
| [[File:UBIKstandard_home-password.png|64 px|center]] || ''Password'' || Password || hex
+
−
|-
+
−
| [[File:UBIKstandard_home-log-in.png|64 px|center]] || ''Log In'' || Login || hex
+
−
|-
+
−
| [[File:UBIKstandard_home-log-out.png|64 px|center]] || ''Log Out'' || Logout || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-navigation-hamburger.png|64 px|center]] || ''Navigation'' - Global navigation or Hamburger Button || Navigation|| hex
+
−
|-
+
−
| [[File:UBIKstandard_global-more-actions.png|64 px|center]] || ''More Actions'' || Actions || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-home.png|64 px|center]] || ''Home'' || Home || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-scan.png|64 px|center]] || ''Scan'' || Scan || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-poi.png|64 px|center]] || ''POI'' - NOT YET CREATED ||  || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-settings.png|64 px|center]] || ''Settings'' || Settings || hex
+
−
|-
+
−
| [[File:UBIKstandard_global-search.png|64 px|center]] || ''Search'' || Search || hex
+
−
|-
+
−
| [[File:UBIKstandard_sync-online.png|64 px|center]] || ''Syncmode-'' - Fully automated || Online|| hex
+
−
|-
+
−
| [[File:UBIKstandard_sync-manual.png|64 px|center]] || ''Syncmode'' - Automatic downloads / manual uploads || Manual|| hex
+
−
|-
+
−
| [[File:UBIKstandard_sync-offline.png|64 px|center]] || ''Syncmode'' - No Automatic uploads or downloads || Offline|| hex
+
−
|-
+
−
| [[File:UBIKstandard_home-start-children.png|64 px|center]] || ''Start / Objects / Children'' - Symbol used to signify an object hierarchy. Thus used as the Start symbol, and for the Children tab just under the object title in the Header. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_tab-properties.png|64 px|center]] || ''Properties'' - Used for Properties tab just under the object title in the Header. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_tab-documents.png|64 px|center]] || ''Documents'' - Used for Properties tab just under the object title in the Header. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_tab-document-viewing.png|64 px|center]] || ''Document being Viewed'' - Used in place of the Children tab (first position) when a document is being viewed. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-changed.png|64 px|center]] || ''Uncommitted Changes'' - Used to show an item has alterations which have not yet been committed to the server (for example, in offline mode). || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-changes-VARIANT.png|64 px|center]] || ''Uncommitted Changes / Variant'' - An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-technical-alert.png|64 px|center]] || ''Technical Alert'' - Use to show that one or more children within the branch have an active Technical Alert status. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_organizational-in-progress.png|64 px|center]] || ''ORG Ongoing'' - Used to show that one or more of the tasks underneath this object are still in progress. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_organizational-complete.png|64 px|center]] || ''ORG Ongoing'' - Used to show that all the tasks underneath this object have been completed, and the ORG Status has been confirmed. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-download-or-downloaded.png|64 px|center]] || ''Downloaded'' - Used to show that a branch download has occurred, making this object available offline. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-downloaded-VARIANT.png|64 px|center]] || ''Downloaded'' An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-locked.png|64 px|center]] || ''Locked'' || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''Deleted''- Can be used both as a Delete action, as well as to indicate an as-yet uncommitted Deleted status (for example, in offline mode).  || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_action-add.png|64 px|center]] || ''Add'' - Generic icon for adding something. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_action-photo.png|64 px|center]] || ''Add Photo'' || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Discard / Cancel'' - Generally used to trigger a cancelling of uncommitted changes, such as discarding an object from your local database (to update it), or to cancel without saving changes in an editor. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_action-or-editor-revert.png|64 px|center]] || ''Revert / Reset'' - Generally used to trigger a discarding of uncommitted changes, such as on a child object, or to reset to a default value in an editor. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_action-download.png|64 px|center]] || ''Download'' - Action to trigger a Branch Download. Is quite similar to the above Downloaded Variant symbol, and may be used interchangeably. || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_action-use-location.png|64 px|center]] || ''Use Geo Location'' || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Confirm'' || inappName || hex
+
−
|-
+
−
| [[File:UBIKstandard_editor-edit.png|64 px|center]] || ''Edit'' || inappName || hex
+
−
|-
+
−
|}
+
  
−
===CHILD PAGE===
+
* Import Icons (top left) - Use this button to import an already existing font file, when creating additions, for example.
−
{| class="wikitable" | width = "100%"
+
* On the Selection tab (bottom center), ensure that the desired set is fully selected, and shown with an orange outline.
−
|-
+
* On the Generate Font tab (bottom right), double check the generated tags for the icons. The settings button beside the download button allows you to edit the font file name and version.
−
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
+
* The download button exports the .ttf, among other resources, in a .ZIP, that is then downloaded.
−
|-
+
−
| [[File:.png|64 px|center]] || ''name'' || inappName || hex
+
−
|-
+
−
|}
+
  
 
[[Category:Pages with broken file links|Icon Font]]
 
[[Category:Pages with broken file links|Icon Font]]

Latest revision as of 11:22, 21 August 2024

UBIK-Standard.ttf is a custom set of font icons developed primarily for use on the Xamarin Client, due to concerns over the legality of using Microsoft's Segoe MDL2 Assets icon font file on non-Windows platforms (ie. Android and iOS). Apart from this legal concern, having a standardized font icon set will contribute to having a more consistent look across the various platforms and clients as UBIK-Standard.ttf becomes more widely adopted.

IC Hint square.pngThe latest font set can be downloaded directly from here using the UBIK-Standard.zip file.
IC Attention.pngUBIK-Standard is an Icon Font. For Xamarin, the standard Text Font is Inter, which is included in the resources and thus available to use immediately.
IC Attention.pngUBIK-Standard is currently only supported for the Xamarin client.

Usage

UBIK-Standard.ttf is currently only supported for the Xamarin client.

Xamarin Client

The first full version of the icon set was completed in September 2019. The tables on this page show the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code suffix, both of which can be used to call the icons using XAML.

Using XAML, Glyphs can be called in two ways. One method is to use the Hex Code, and another is the In-App Name. Of these two methods, the recommended method is to use the In-App Name, as it uses a natural language attribute as opposed to a glyph code, making it more immediately apparent which icon is being requested by the code.

The two below examples show how one might use both methods to create a User symbol.


In-App Name Usage

In the below example, Glyph="{x:Static resources:UBIKIcons.User}" is used to call the User symbol.

<ContentView
   xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" >

<controls:GlyphLabel
   Glyph="{x:Static resources:UBIKIcons.User}"
                           HorizontalOptions="Center"
                           PrimaryColor="{DynamicResource UBIKLightTextColor}"
                           Style="{DynamicResource HeaderSymbolStyle}"
                           VerticalOptions="Center" />


Hex Code Usage

In the below example, the attribute Glyph= and the following Hex Code is used to call the User icon. These Hex codes can be found using a Character Map program, or by searching through the icon tables below.

<ContentView
   xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" >

<controls:GlyphLabel Glyph="&#x22;" HorizontalOptions="Center"  />

Directly Accessing Icons

The icons can also be used like every other font by setting the FontFamily attribute. For example:

<ContentView
   xmlns:resources="clr-namespace:UBIK.CPL.Resources;assembly=UBIK.CPL">
   
    <Label HorizontalOptions="Center"
       HorizontalTextAlignment="Center"
       Text="{x:Static resources:UBIKIcons.User}"
       FontFamily="{x:Static UBIKSymbols}"
       VerticalOptions="Center"
       VerticalTextAlignment="Center" />

<!-- ... -->

</ContentView>


Available Icons

There are two options available to a customizer wishing to browse available icons.

IC Hint square.pngIf a required icon is not found in UBIK, it is instead possible to render custom icons using Path data.

The best way is to download and unzip the UBIK-Standard.zip file. Once unzipped, open the "demo" webpage file to view all icons, as well as the human readable labels you can use to render them in your UI. Because the demo webpage does not provide a good overview of all the icons, it is possible to combine this approach with the second one described below using that to browse the icons, and then this method to retrieve the human readable labels for the icons you wish to use.


The second way requires installation of the Character Map tool from Microsoft. This can be used to browse the characters of all the fonts installed on your machine, so to use this method you should certainly download and install the latest version of UBIK-Standard.ttf above. The downside of using this method is that you don't have access to the human readable labels using this app.

IC Attention.pngNote that icons installed on your machine are not necessarily available to customers, as they only have access to the icons delivered through UBIK, which is version-dependent.


Known Issues

Xamarin Client

The development of the custom icon font on the Xamarin client was hampered significantly by unexpected icon substitutions, which appeared to be vendor/device-specific. To avoid this issue, the individual icons in the text file were mapped to the Hex codes used by the most basic alphabet and symbol characters.

A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf for icons when the user switched tabs, leaving UBIK running in the background. In these cases, circular icon containers became square when switching back to the app, and the icon glyphs were no longer visible. However, using the GlyphButton and GlyphLabel elements (as opposed to simply Button and Label) seems to prevent this issue.


Creation

The process for creating icons is documented here.

Step 01: Asset Creation

The first step is to find similar, open-source icons to tweak. Pixeden, LineIcons, or LineA, are good starting points, as they have a similar style.

When tweaking (for example, in Adobe Illustrator), use a stroke width of 3 for the base line thickness.

It is good practice to produce three sets of .SVGs; a stroke version, an expanded version, and a final version. The stroke version is more easily edited, but the lines must be 'expanded' in Illustrator to be imported as icons. Finally, duplicate the expanded version, and name it using the following syntax: 001#ubik-U0x26

  • The first number is used to keep the icon list orderly.
  • Add as many tags as desired using the # as separators. For example, a check mark icon may be listed as #ok#confirm#check. The - ends the tag portion of the syntax.
  • The glyph code assigns the icon to a certain space on the character map. As different device vendors block different glyph code sets for different uses, it is good practice to overwrite the basic alphabet, numbers, and symbols, to ensure the icons work on a large range of devices. Starting from 21, glyph codes may use numbers, or letters from 2A (2 here being an example) to 2F.

Step 02: TTF Generation

IcoMoon is a useful online tool for generating the icon font, that can then be installed on a device or packaged into the client resources.

  • Import Icons (top left) - Use this button to import an already existing font file, when creating additions, for example.
  • On the Selection tab (bottom center), ensure that the desired set is fully selected, and shown with an orange outline.
  • On the Generate Font tab (bottom right), double check the generated tags for the icons. The settings button beside the download button allows you to edit the font file name and version.
  • The download button exports the .ttf, among other resources, in a .ZIP, that is then downloaded.
Retrieved from "https://wiki.augmensys.com/index.php?title=Icon_Font&oldid=27157"