Dynamic Template Symbols Instantiation (an alternative to Canvas and DOM manipulation)

[gaperton]

This feature will resolve one of the major restrictions of the SDK. Currently, there is no way to draw arbitrary elements on the screen which makes it hard to impossible to implement features like the GPS route. The solution described below heavily relies on the existing DOM API and should take considerably less effort to implement than the full-featured canvas.

Dynamic Template Symbols instantiation

An ability to programmatically instantiate the template symbol defined in *.gui file and insert it into the SVG container element would both resolve the "canvas" problem and make an existing templates symbols concept way more useful than they are right now.

Restricting the functionality just to the template symbols and specific container element (in the similar way as it's done with TileList) should help to avoid massive changes to API and keep an implementation simpler. Also, it should be far more efficient than the raw DOM manipulation which is important for the device with constrained resources as Ionic.

// Instantiate the symbol from the template
const s = document.obtainSymbol( 'symbol-id' );

// Set symbol's attributes...
s.attr1 = value1;
s.attr2 = value2;
...

// Works the same as <set /> tag
s.set( 'child-id', 'attr1', value );
...

// Get reference to the canvas tag.
const canvas = document.getElementById( 'my-canvas' );

// Same as document.insertTile
const addedNode = document.insertSymbol( s, 0 );

// Remove it.
addedNode.remove();

// Clean the canvas.
canvas.clean();

It would be preferable that it would just work for the "svg" tag.vBut it might be okay if just the special tag for the for the container element will be used in the same way as the TileList:

<use id="my-canvas" href="#symbols-canvas" height="100%" width="100%">

[SunsetRunner]

Nice suggestion, thanks for sharing. We look forward to hearing what other community member think.