Have questions? Stuck? Please check our FAQ for some common questions and answers.

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Glyph Service

GlyphService is an Angular Factory in the SVG module with the name glyph.js. It provides an API to load and inject custom glyphs (SVG path data) to be used in the client-side application. To use this API, see the documentation on injecting Angular services.

What is a glyph?

A glyph is an abstraction of an HTML SVG. An example of a glyph is below.

The red bird is the glyph. Glyphs are used throughout the client-side GUI for decoration and helpful indicators. They are drawn using SVG path data and colored/styled using CSS.

See All Glyphs for a list of all glyphs.

API Functions

NameSummary
clearClears the glyph library.
initInitializes the glyph library with default glyphs.
registerGlyphsRegister glyphs that each have their own custom viewbox.
registerGlyphSetRegister a set of glyphs that all share the same viewbox.
idsGet all of the glyph names/ids.
glyphGet a specific glyph's path data.
loadDefsLoad a set of glyph symbols into a SVG <defs> element.
addGlyphAdd a defined glyph to a specified SVG element.

Function Descriptions

clear

Clears the glyph library of all previously defined glyphs. This should only be used when cleaning up a session: use this sparingly!

Example UsageArguments
gs.clear();none

init

Initializes the glyph library with default glyphs. This should only be used when starting up a session: use this sparingly!

See all default glyphs below.

Example UsageArguments
gs.init();none

registerGlyphs

Register glyphs that each have their own custom viewbox.

Note: all glyph data must be a single path. See the Adding a Custom Icon tutorial for more information.

Example UsageArgumentsReturn Values
gs.registerGlyphs(data, overwrite);

data: an object that contains viewboxes and key-value pairings of name-path data for the custom glyph

overwrite: boolean that indicates whether duplicate glyph names in the library should be overwritten. True overwrites duplicates.

true if there were no issues adding glyph

false if there was

  • a missing viewbox
  • a duplicate glyph id and overwrite wasn't true

 

Example data format:

 

var data = {
	_foo: '0 0 10 10',
	foo: 'M2,4h6v2h-6z',
	_bar: '0 0 110 110',
	bar: 'M2.5,2.5h5v5h-5z'
};

 

The viewbox for a specific glyph should have the same name as the glyph, prefixed with an underscore ( _ ).

registerGlyphSet

ids

glyph

loadDefs

addGlyph

All Glyphs

The ONOS GUI comes with several built in glyphs that you can use. Here are pictures and names of them all.

 

 

  • No labels