Jump to: navigation, search

Difference between revisions of "Icon Font"


(Added a section describing how to create icons, as I had a hard time remembering the process - REP.)
(Basic Icons)
Line 116: Line 116:
 
| [[File:UBIKstandard_global-scan.png|64 px|center]] || ''Scan'' || Scan || <code>&#x 2B;</code>
 
| [[File:UBIKstandard_global-scan.png|64 px|center]] || ''Scan'' || Scan || <code>&#x 2B;</code>
 
|-
 
|-
| [[File:UBIKstandard_global-poi.png|64 px|center]] || ''POI'' - NOT YET CREATED ||  || <code>&#x 2C;</code>  
+
| [[File:Global-poi.png|64 px|center]] || ''POI'' - Included in update 1.1 ||  || <code>&#x 2C;</code>  
 
|-
 
|-
 
| [[File:UBIKstandard_global-settings.png|64 px|center]] || ''Settings'' || Settings || <code>&#x 2D;</code>
 
| [[File:UBIKstandard_global-settings.png|64 px|center]] || ''Settings'' || Settings || <code>&#x 2D;</code>
 
|-
 
|-
 
| [[File:UBIKstandard_global-search.png|64 px|center]] || ''Search'' || Search || <code>&#x 2E;</code>
 
| [[File:UBIKstandard_global-search.png|64 px|center]] || ''Search'' || Search || <code>&#x 2E;</code>
 +
|-
 +
| [[File:Global-map.png|64 px|center]] || ''Map'' - Included in update 1.1 ||  || <code>&#x 2F;</code>
 
|-
 
|-
 
| [[File:UBIKstandard_sync-online.png|64 px|center]] || ''Syncmode-'' - Automatic uploads and downloads || Online || <code>&#x 30;</code>
 
| [[File:UBIKstandard_sync-online.png|64 px|center]] || ''Syncmode-'' - Automatic uploads and downloads || Online || <code>&#x 30;</code>
Line 129: Line 131:
 
|-
 
|-
 
|}
 
|}
 +
 +
[[Category:Pages with broken file links|Icon Font]]
  
 
===Objects Pages / Tabs===
 
===Objects Pages / Tabs===

Revision as of 12:42, 7 October 2020

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.

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.

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>


Icon Tables

IC Attention.pngWikiFormatting prevents the entire Hex Code from being displayed in the tables, so a space was used to break the glyph code. Please remove the space when using the Hex Codes from the table.

Basic Icons

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard home-ubik.png
Ubik - Scalable UBIK logo for use on the splash screen. Ubik &#x 26;
UBIKstandard home-service-group.png
Service - The customer profile. Service &#x 21;
UBIKstandard home-user-name.png
User User &#x 22;
UBIKstandard home-password.png
Password Password &#x 23;
UBIKstandard home-log-in.png
Log In Login &#x 24;
UBIKstandard home-log-out.png
Log Out Logout &#x 25;
UBIKstandard global-navigation-hamburger.png
Navigation - Global navigation or Hamburger Button Navigation &#x 28;
UBIKstandard global-more-actions.png
More Actions Actions &#x 29;
UBIKstandard global-home.png
Home Home &#x 2A;
UBIKstandard global-scan.png
Scan Scan &#x 2B;
Global-poi.png
POI - Included in update 1.1 &#x 2C;
UBIKstandard global-settings.png
Settings Settings &#x 2D;
UBIKstandard global-search.png
Search Search &#x 2E;
Global-map.png
Map - Included in update 1.1 &#x 2F;
UBIKstandard sync-online.png
Syncmode- - Automatic uploads and downloads Online &#x 30;
UBIKstandard sync-manual.png
Syncmode - Automatic downloads / manual uploads Manual &#x 31;
UBIKstandard sync-offline.png
Syncmode - No Automatic uploads or downloads Offline &#x 32;

Objects Pages / Tabs

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard home-start-children.png
Start / Objects / Children - Symbol used to signify an object hierarchy. Thus used after logging in as the Start symbol, as well as for the Children tab just under the object title in the Header. Children, Start &#x 4A;
UBIKstandard tab-properties.png
Properties - Used for Properties tab just under the object title in the Header. Properties &#x 4B;
UBIKstandard tab-documents.png
Documents - Used for Properties tab just under the object title in the Header. Documents &#x 4C;
UBIKstandard tab-document-viewing.png
Document being Viewed - Used in place of the Children tab (first position) when a document is being viewed. DocumentView &#x 4D;

Child-Object Status Indicators

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard child-changed.png
Uncommitted Changes - Used to show an item has alterations which have not yet been committed to the server (for example, in offline mode). Changes &#x 41;
UBIKstandard child-changes-VARIANT.png
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. ChangesAlt &#x 40;
UBIKstandard child-technical-alert.png
Technical Alert - Use to show that one or more children within the branch have an active Technical Alert status. Technical &#x 43;
UBIKstandard organizational-in-progress.png
Organizational Status: Ongoing - Used to show that one or more of the tasks underneath this object are still in progress. OrgOngoing &#x 44;
UBIKstandard organizational-complete.png
Organizational Status: Complete - Used to show that all the tasks underneath this object have been completed, and the ORG Status has been confirmed. OrgComplete &#x 45;
UBIKstandard child-download-or-downloaded.png
Downloaded - Used to show that a branch download has occurred, making this object available offline. Downloaded &#x 48;
UBIKstandard child-downloaded-VARIANT.png
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. DownloadedAlt &#x 46;
UBIKstandard child-locked.png
Locked Locked &#x 47;
UBIKstandard child-deleted-or-action-delete.png
Deleted- Indicates an as-yet uncommitted Deleted status (for example, in offline mode). Deleted &#x 52;

Properties

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard document-online-linked.png
Online/Linked Document - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. OnlineDoc &#x 66;
UBIKstandard property-signal-good.png
Live Value Signal: Good SignalGood &#x 63;
UBIKstandard property-signal-ok.png
Live Value Signal: Ok SignalOK &#x 64;
UBIKstandard property-signal-bad.png
Live Value Signal: Ok SignalBad &#x 65;
UBIKstandard property-read-only.png
Read Only Property PropReadOnly &#x 60;
UBIKstandard property-editable.png
Editable Property PropEdit &#x 61;
UBIKstandard property-list-editable.png
Editable List PropEditList &#x 62;


Actions

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard action-add.png
Add - Generic icon for adding something. Add &#x 50;
UBIKstandard action-photo.png
Add Photo Photo &#x 51;
UBIKstandard child-deleted-or-action-delete.png
Delete- Indicates an as-yet uncommitted Deleted status (for example, in offline mode). Delete, Deleted &#x 52;
UBIKstandard editor-cancel-or-action-discard.png
Discard - Discard object from local database. Discard, Cancel &#x 53;
UBIKstandard action-or-editor-revert.png
Revert - Discard uncommitted changes. Revert, Reset &#x 54;
UBIKstandard action-download.png
Download - Action to trigger a Branch Download. Download &#x 55;
UBIKstandard action-use-location.png
Use Geo Location UseLocation &#x 56;

Editors

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard editor-confirm.png
Confirm Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard action-or-editor-revert.png
Revert Revert, Reset &#x 54;
UBIKstandard editor-cancel-or-action-discard.png
Cancel - Exit editor without saving changes. Cancel &#x 53;
UBIKstandard navigation-right.png
GUID: Go To GoTo, Right &#x 5B;
UBIKstandard editor-edit.png
GUID: Edit Edit &#x 5C;
UBIKstandard child-deleted-or-action-delete.png
GUID: Delete Delete, Deleted &#x 52;

Task Actions

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard editor-confirm.png
Task Yes Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard editor-cancel-or-action-discard.png
Task No Discard, Cancel &#x 57;
UBIKstandard editor-confirm.png
Task Finished Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard editor-NA.png
Task NA Task NA &#x 6A;


Generic Navigation

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard navigation-right.png
Right Right, GoTo &#x 5B;
UBIKstandard navigation-left.png
Left Left &#x 5D;
UBIKstandard navigation-up.png
Up Up &#x 5E;
UBIKstandard navigation-down.png
Down Down &#x 5F;

Additions / 2020-09-24

Icon Casual Name / Description In-App Name Hex Code
Property-good.png
Good Good, ThumbsUp &#x 6B;
Property-bad.png
Bad Bad, ThumbsDown &#x 6C;
Property-indeterminate.png
Indeterminate GoodBad, Thumbs &#x 6D;
Global-map.png
Map Map &#x 2C;
Global-poi.png
POI POI &#x 2D;


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.