npm - @armyc2.c5isr.renderer/mil-sym-ts-web - Versions diffs - 2.2.0 → 2.2.1 - Mend

@armyc2.c5isr.renderer/mil-sym-ts-web 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/test/singlePointTester3.html DELETED Viewed

@@ -1,751 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<!-- Meta line required for IE-->
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>single point tester</title>
-    <!-- Not necessary as fonts are body fonts set in renderer.css
-    <style type="text/css">
-    body
-    {
-        font-family: UnitFont, SinglePoint, TacticalGraphics;
-        font-size: 48pt;
-        padding: 25px;
-    }
-    </style> -->
-	<!-- ESBuild -->
-    <!-- <script src="dist/C5ISR2525.js" type="text/javascript" ></script> -->
-    <!-- Individual files -->
-    <!-- <script src="includes.js" type="text/javascript" ></script> -->
-    <!-- Web Pack -->
-    <script src="../dist/C5Ren.js" type="text/javascript" ></script>
-    <!-- modules only load from server, can't access from file system -->
-    <!--<script type="module">
-        import MilStdIconRenderer from './dist/bundle.js';
-   </script>  -->
-    <script type = "text/javascript">
-	var fontCheckTimer =  null;
-	var retries = 15;
-	var attempts = 0;
-        var _symbolID = null;
-        var _symStd = null;
-        var _modifiers = null;
-        var Modifiers = null;
-        //var C5Ren = null;
-        function populateModifiers()
-        {
-            var modifiers = new Map();
-            modifiers.set(C5Ren.Modifiers.H_ADDITIONAL_INFO_1, "H");//"!@#$%^&*()>?,.<\'\"=~`[]{}|\\/");
-            modifiers.set(C5Ren.Modifiers.H1_ADDITIONAL_INFO_2,"H1");
-            modifiers.set(C5Ren.Modifiers.AP_TARGET_NUMBER,"AP");
-            modifiers.set(C5Ren.Modifiers.AP1_TARGET_NUMBER_EXTENSION,"AP1");
-            modifiers.set(C5Ren.Modifiers.X_ALTITUDE_DEPTH,"0,10");//X
-            modifiers.set(C5Ren.Modifiers.K_COMBAT_EFFECTIVENESS,"100");//K
-            modifiers.set(C5Ren.Modifiers.Q_DIRECTION_OF_MOVEMENT,"45");//Q
-            modifiers.set(C5Ren.Modifiers.W_DTG_1,C5Ren.SymbolUtilities.getDateLabel(new Date()));//W
-            modifiers.set(C5Ren.Modifiers.W1_DTG_2,C5Ren.SymbolUtilities.getDateLabel(new Date()));//W1
-            modifiers.set(C5Ren.Modifiers.J_EVALUATION_RATING,"J");
-            modifiers.set(C5Ren.Modifiers.M_HIGHER_FORMATION,"M");
-            modifiers.set(C5Ren.Modifiers.N_HOSTILE,"ENY");
-            modifiers.set(C5Ren.Modifiers.P_IFF_SIF_AIS,"P");
-            modifiers.set(C5Ren.Modifiers.Y_LOCATION,"Y");
-            //if(symbol.getSymbolID().startsWith("G"))
-            modifiers.set(C5Ren.Modifiers.C_QUANTITY,"C");
-            modifiers.set(C5Ren.Modifiers.F_REINFORCED_REDUCED,"RD");//"(+)";//"RD";
-            modifiers.set(C5Ren.Modifiers.L_SIGNATURE_EQUIP,"!");
-            modifiers.set(C5Ren.Modifiers.AA_SPECIAL_C2_HQ,"AA");
-            modifiers.set(C5Ren.Modifiers.G_STAFF_COMMENTS,"G");
-            //symbol.symbolicon A
-            modifiers.set(C5Ren.Modifiers.V_EQUIP_TYPE,"V");
-            modifiers.set(C5Ren.Modifiers.T_UNIQUE_DESIGNATION_1,"T");
-            modifiers.set(C5Ren.Modifiers.T1_UNIQUE_DESIGNATION_2,"T1");
-            modifiers.set(C5Ren.Modifiers.Z_SPEED,"999");//Z
-            modifiers.set(C5Ren.Modifiers.R2_SIGNIT_MOBILITY_INDICATOR, "2");
-            modifiers.set(C5Ren.Modifiers.AD_PLATFORM_TYPE,"AD");
-            modifiers.set(C5Ren.Modifiers.AE_EQUIPMENT_TEARDOWN_TIME,"AE");
-            modifiers.set(C5Ren.Modifiers.AF_COMMON_IDENTIFIER,"AF");
-            modifiers.set(C5Ren.Modifiers.AO_ENGAGEMENT_BAR, "AO:AOA-AO");
-            modifiers.set(C5Ren.Modifiers.AR_SPECIAL_DESIGNATOR, "AR");
-            modifiers.set(C5Ren.Modifiers.AQ_GUARDED_UNIT, "AQ");
-            //modifiers.set(C5Ren.Modifiers.AS_COUNTRY, "USA");
-            //*/
-            //modifiers.set(C5Ren.Modifiers.CN_CPOF_NAME_LABEL,"~`"; //\"CPOF'D";//Z
-			//attributes
-			//modifiers.set(C5Ren.utilities.MilStdAttributes.LineColor,"#60FFFF00";
-			//modifiers.set(C5Ren.utilities.MilStdAttributes.FillColor,"#00FF00";
-            //modifiers.set(C5Ren.utilities.MilStdAttributes.Alpha,50;
-            //modifiers.set(C5Ren.utilities.MilStdAttributes.LineColor,"#FF00FF";
-			//modifiers.set(C5Ren.utilities.MilStdAttributes.FillColor,"#0000FF00");
-            //modifiers.set(C5Ren.utilities.MilStdAttributes.Alpha,50;
-			//modifiers.set(C5Ren.utilities.MilStdAttributes.TextColor,"#FF00FF";
-			//modifiers.set(C5Ren.utilities.MilStdAttributes.TextBackgroundColor,"#00FF00";
-            return modifiers;
-        }
-        function drawToCanvas(svg,x,y)
-        {
-            var canvas = document.getElementById('preview');
-            var ctx = canvas.getContext('2d');
-            var data = svg;
-            var DOMURL = window.URL || window.webkitURL || window;
-            var img1 = new Image();
-            var svg = new Blob([data], {type: 'image/svg+xml'});
-            var url = DOMURL.createObjectURL(svg);
-            img1.onload = function() {
-                ctx.drawImage(img1, x, y);
-                DOMURL.revokeObjectURL(url);
-            }
-            img1.src = url;
-        }
-        function render(symbolID, x, y)
-        {
-            var size = document.getElementById("tbSize").value;
-            var keepUnitRatio = document.getElementById("cbKeepUnitRatio").checked;
-            var showLabels = document.getElementById("cbLabels").checked;
-			var drawAsIcon = document.getElementById("cbDrawAsIcon").checked;
-            var scaleMainIcon = document.getElementById("cbScaleMainIcon").checked;
-            var modifiers = new Map();
-            if(showLabels === true)
-            {
-                modifiers = populateModifiers();
-            }
-            var attributes = new Map();
-            attributes.set(C5Ren.MilStdAttributes.PixelSize,new String(size));
-            attributes.set(C5Ren.MilStdAttributes.DrawAsIcon,new String(drawAsIcon));
-            attributes.set(C5Ren.MilStdAttributes.KeepUnitRatio,new String(keepUnitRatio));
-            RendererSettings.getInstance().setScaleMainIcon(scaleMainIcon);
-            //font change test
-            //RendererSettings.getInstance().setLabelFont("serif","bold",24);
-            //OutlineTest
-			//attributes.set(C5Ren.MilStdAttributes.OutlineColor]="#FF00FF";
-			//attributes.set(C5Ren.MilStdAttributes.OutlineWidth]=4;
-			//attributes.set(C5Ren.MilStdAttributes.OutlineAlpha]=0.5;
-            //attributes.set(C5Ren.MilStdAttributes.LineColor,"#00FF00");
-            //attributes.set(C5Ren.MilStdAttributes.FillColor,"#0000FF00");
-            //attributes.set(C5Ren.MilStdAttributes.IconColor,"#0000FF");
-            var si = C5Ren.MilStdIconRenderer.getInstance().RenderSVG(symbolID,modifiers,attributes);
-            //var si2 = C5Ren.MilStdIconRenderer.getInstance().RenderSVG("130310000016570000000000000000",modifiers,attributes);
-            var center = si.getSymbolCenterPoint();
-            var preview = document.getElementById("preview");
-            var ctx = preview.getContext('2d');
-            //SVG TEST
-            var svgImage = document.getElementById("SVGTest");
-                svgImage.width = si.getImageBounds().getWidth();
-                svgImage.height = si.getImageBounds().getHeight();
-                var data = si.getSVGDataURI();
-                svgImage.src = data;
-            //var si = C5Ren.MilStdIconRenderer.RenderSVG(symbolID,modifiers);
-            document.getElementById("contentSpan").innerHTML += si.getSVG();
-            //test urlEncode vs base64
-            //speedTestSVGConversion(si.getSVG());
-            try
-            {
-                x = x - center.getX();
-                y = y - center.getY();
-                //alert(x + " " + y);
-                drawToCanvas(si.getSVG(),x,y);
-                //ctx.drawImage(ii.getImage(), Math.ceil(x),Math.ceil(y));
-                var bounds = si.getImageBounds();
-                bounds.setRect(x,y,bounds.getWidth(),bounds.getHeight());
-                bounds.stroke(ctx);//*/
-            }
-            catch(err)
-            {
-                console.log(err);
-            }
-        }
-        function buildSymbolID(basicID)
-        {
-            if(basicID == null || basicID.length !== 8)
-            {
-                if(_symbolID && _symbolID.length === 8)
-                    basicID = _symbolID;//symbolID is basic code from TF or Unit Picker box
-                else
-                    basicID = "00000000";
-            }
-			var id = document.getElementById("lbVersion").value.split("-")[0];
-			id += document.getElementById("lbContext").value.split("-")[0];
-			id += document.getElementById("lbAffiliation").value.split("-")[0];
-			id += basicID.substring(0, 2);
-			id += document.getElementById("lbStatus").value.split("-")[0];
-			id += document.getElementById("lbHQTFD").value.split("-")[0];
-			id += document.getElementById("lbAmp").value.split("-")[0];
-			id += basicID.substring(2);
-			var s1m = document.getElementById("tbS1Mod").value;
-			if(s1m.length == 2)
-			{
-				id += s1m;
-			}
-			else
-				id += "00";
-			var s2m = document.getElementById("tbS2Mod").value;
-			if(s2m.length == 2)
-			{
-				id += s2m;
-			}
-			else
-				id += "00";
-			id += document.getElementById("lbS1").value;
-			id += document.getElementById("lbS2").value;
-			var fs = document.getElementById("lbFrame").value.split("-")[0];
-			if(parseInt(id.substring(0,2)) >= C5Ren.SymbolID.Version_2525E)
-				id += fs + "0000";//2525E has frame shape and 4 reserved positions
-			else
-				id += "00000";//2525D has 5 reserved positions
-			if(document.getElementById("cbLabels").checked)
-				id += "840";//country code USA
-			else
-				id += "000";//country code
-            document.getElementById("tbSymbolID").value = id;
-			return id;
-        }
-        function renderFE()
-        {
-            var lb = document.getElementById("lbU");
-            var lb2 = document.getElementById("lbTG");
-            lb2.selectedIndex = -1;
-            var id = lb.value;
-            if(id && id !== "")
-            {
-                _symbolID = id;
-            }
-            else
-            {
-                alert("Pick a symbol from the right list first.");
-            }
-            buildSymbolID(_symbolID);
-        }
-        function renderTG()
-        {
-            var lb = document.getElementById("lbTG");
-            var lb2 = document.getElementById("lbU");
-            lb2.selectedIndex = -1;
-            var id = lb.value;
-            if(id && id !== "")
-            {
-                _symbolID = id;
-            }
-            else
-            {
-                alert("Pick a symbol from the right list first.");
-            }
-            buildSymbolID(_symbolID);
-        }
-    function speedTestSVGConversion(svg)
-    {
-        var start = new Date().getTime();
-        for(var i = 0; i < 10000; i++)
-		{
-			encodeURIComponent(svg)
-		}
-        var end = new Date().getTime();
-		var time = end - start;
-		alert('encodeURIComponent: ' + (time/1000) + "; length: " + encodeURIComponent(svg).length);//*/
-        start = new Date().getTime();
-        for(var j = 0; j < 10000; j++)
-		{
-			btoa(svg)
-		}
-        end = new Date().getTime();
-		time = end - start;
-		alert('btoa: ' + (time/1000) + "; length: " + btoa(svg).length);//*/
-    }
-	function speedTest(type)
-	{
-		//PERFORMANCE TEST///////////////////////////
-		var start;
-		var end;
-		var modifiers;
-		//modifiers = populateModifiers();//render time increases with the number of modifiers
-		//modifiers["RENDER",false;//dimensions without labels
-		var apID = buildSymbolID();//"GFGPGPP---****X";//action point
-		var dmID = buildSymbolID();//"SUGDUSAT--MY***";//symbol with display modifiers, will add to render time
-		var plainID = buildSymbolID();//"SUGPUSAT----***";//plain symbol with no display modifiers
-		var id;
-        var msi = C5Ren.MilStdIconRenderer.getInstance();
-		if(type === 1)
-		{
-			id = plainID;
-			modifiers = new Map();
-		}
-		else if(type === 2)
-		{
-			id = dmID;
-			modifiers = new Map();
-		}
-		else if(type === 3)
-		{
-			id = dmID;
-			modifiers = populateModifiers();
-		}
-		//SVG Speed Test
-		start = new Date().getTime();
-        var attrib = new Map();
-        var si;
-		for(var j = 0; j < 1000; j++)
-		{
-			si = msi.RenderSVG(id,modifiers,attrib);
-		}
-		end = new Date().getTime();
-		time = end - start;
-        var svgImage = document.getElementById("SVGTest");
-            svgImage.width = si.getImageBounds().getWidth();
-            svgImage.height = si.getImageBounds().getHeight();
-            var data = si.getSVGDataURI();
-            svgImage.src = data;
-		alert('Render 1k SVG symbols (just SVG generation, not in browser rendering): ' + (time/1000));//*/
-	}
-    function versionChange()
-    {
-        buildSymbolID();
-        populateListBox();
-    }
-    function populateListBox()
-    {
-        var lbTG = document.getElementById("lbTG");
-        var lbU = document.getElementById("lbU");
-        var lbV = document.getElementById("lbVersion");
-        var version = parseInt(lbV.value.split('-')[0]);
-        console.log(lbTG.length);
-        while(lbTG.length > 1)
-        {
-            lbTG.remove(1);
-        }
-        while(lbU.length > 1)
-        {
-            lbU.remove(1);
-        }//*/
-        var tmpArrayTG = new Array();
-        var tmpArrayUnit = new Array();
-        var option = null;
-        var def = null;
-        var msi = null;
-        var list = C5Ren.MSLookup.getInstance().getIDList(version);
-        //put values in array and sort
-        for(var i=0; i< list.length; i++)//(const symbolID of list)
-        {
-            var symbolID = list[i];
-            msi = C5Ren.MSLookup.getInstance().getMSLInfo(symbolID,version);
-            if(msi != null && msi.getDrawRule() !== 0)
-            {
-                var ss = msi.getSymbolSet();
-                if(ss < 10)
-                ss = "0" + ss;
-                if(msi.getSymbolSet() === C5Ren.SymbolID.SymbolSet_ControlMeasure ||
-                    msi.getSymbolSet() === 45 || msi.getSymbolSet() === 46 || msi.getSymbolSet() === 47)
-                    tmpArrayTG.push([ss+'-'+msi.getName()+'-'+msi.getBasicSymbolID().substring(2),msi.getBasicSymbolID()]);
-                else
-                {
-                    tmpArrayUnit.push([ss+'-'+msi.getName()+'-'+msi.getBasicSymbolID().substring(2),msi.getBasicSymbolID()]);
-                }
-            }
-            else
-            {
-                //console.log("no MSInfo for: " + symbolID + " version: " + version);
-            }
-        }
-        tmpArrayTG.sort();
-        tmpArrayUnit.sort();
-        //add values to list box
-        for(var i=0; i<tmpArrayTG.length;i++)
-        {
-            option = new Option();
-            option.text = tmpArrayTG[i][0];
-            option.value = tmpArrayTG[i][1];
-            lbTG.add(option);
-        }
-        for(var i=0; i<tmpArrayUnit.length;i++)
-        {
-            option = new Option();
-            option.text = tmpArrayUnit[i][0];
-            option.value = tmpArrayUnit[i][1];
-            lbU.add(option);
-        }
-        lbTG.remove(1);
-        lbTG.onselect = renderTG;
-        lbTG.onchange = renderTG;
-        lbU.remove(1);
-        lbU.onselect = renderFE;
-        lbU.onchange = renderFE;
-    }
-    function clearCanvas()
-    {
-        var preview = document.getElementById("preview");
-        preview.onclick = canvasClick;
-        var ctx = preview.getContext('2d');
-        //outline the canvas
-        ctx.clearRect(0,0,650,300);
-        ctx.strokeStyle="#000000";
-        ctx.beginPath();
-        ctx.moveTo(0,0);
-        ctx.lineTo(650,0);
-        ctx.lineTo(650,300);
-        ctx.lineTo(0,300);
-        ctx.lineTo(0,0);
-        ctx.stroke();//*/
-    }
-    function canvasClick(e)
-    {
-        //alert("clicked");
-        //console.dir(e);
-        //e.clientX;
-        //e.clientY;
-        if(_symbolID === null)
-        {
-            alert("Choose a symbol from one of the lists");
-            return;
-        }
-        var id = buildSymbolID(_symbolID);
-        var preview = document.getElementById("preview");
-        var x = e.pageX - preview.offsetLeft;
-        var y = e.pageY - preview.offsetTop;
-        render(id,x, y);
-        /*
-        var att = new Map();
-        att.set("PIXELSIZE","50");
-        att.set("FILLCOLOR","#00FF00");
-        var LAA = "110325000015110016000000000000";
-        var si = C5Ren.SinglePointSVGRenderer.getInstance().RenderModifier(LAA,att);
-        console.log(si.getSVG());//*/
-    }
-    function setSpeedTestImages()
-    {
-        var msi = C5Ren.MilStdIconRenderer.getInstance();
-        //set speed test images
-        var ii1 = msi.RenderSVG("SUGPUSAT----***",null,null);
-        var img = document.getElementById("iST1");
-        img.src = ii1.toDataUrl();
-        img.width = ii1.getImageBounds().width;
-        img.height = ii1.getImageBounds().height;
-        var ii2 = msi.RenderSVG("SUGDUSAT--MY***",populateModifiers(),null);
-        var img2 = document.getElementById("iST2");
-        img2.src = ii2.toDataUrl();
-        img2.width = ii2.getImageBounds().width;
-        img2.height = ii2.getImageBounds().height;
-        //enable speed test buttons
-        var button = document.getElementById("btnST2");
-        button.disabled = false;
-        button.innerHTML = "Speed Test With Modifiers";
-        var button2 = document.getElementById("btnST1");
-        button2.disabled = false;
-        button2.innerHTML = "Speed Test";
-    }
-    function setup()
-    {
-        document.getElementById("btnST1").disabled = true;
-        //Assumes location page is running in
-        //C5Ren.initialize().then(function(results){document.getElementById("btnST1").disabled = false;preload();}).catch(error => {throw error;});
-        //Set location where renderer and files are
-        //C5Ren.initialize('/dist/').then(function(results){document.getElementById("btnST1").disabled = false;preload();}).catch(error => {throw error;});
-        //Tell the renderer specficially where the manifest file is in case the users process renamed it with a hash or something.
-        //C5Ren.initialize('/dist/manifest.json').then(function(results){document.getElementById("btnST1").disabled = false;preload();}).catch(error => {throw error;});
-        //no longer using init call
-        document.getElementById("btnST1").disabled = false;
-        preload();
-        /*if(C5Ren.isReady())
-        {
-            var mi = new C5Ren.MSInfo(13,"10", "Sustainment","TEST","","165700",null);
-            var si = new C5Ren.SVGInfo("10165700", new C5Ren.Rectangle2D(198,365,215,64),"<g id=\"10165700\"><text font-family=\"sans-serif\" stroke=\"red\" font-size=\"89\" x=\"192\" y=\"428\">MWR</text></g>");
-            C5Ren.MilStdIconRenderer.getInstance().AddCustomSymbol(mi,si);
-        }//*/
-    }
-	function preload()
-	{
-        //Add Custom Symbols
-            var miBase = C5Ren.MSLookup.getInstance().getMSLInfo("10160000",13);
-            var mi = new C5Ren.MSInfo(13,"10", "Sustainment","TEST","","165700",miBase.getModifiers());
-            var si = new C5Ren.SVGInfo("10165700", new C5Ren.Rectangle2D(198,365,215,64),"<g id=\"10165700\"><text font-family=\"sans-serif\" fill=\"red\" font-size=\"89\" x=\"192\" y=\"428\">MWR</text></g>");
-            C5Ren.MilStdIconRenderer.getInstance().AddCustomSymbol(mi,si);
-            Modifiers = C5Ren.Modifiers;
-			//var Color = new window.Color(255,255,0);
-			//testString = Color.toString();
-			//console.log(testString);
-            var msi = C5Ren.MilStdIconRenderer.getInstance();
-			var RendererSettings = C5Ren.RendererSettings.getInstance();
-            RendererSettings.setScaleMainIcon(true);
-            //populate sybol list boxes
-            var lbTG = document.getElementById("lbTG");
-            var lbU = document.getElementById("lbU");
-            var lbStatus = document.getElementById("lbStatus");
-            //lbStatus.selectedIndex = 1;
-            lbAffiliation.selectedIndex = 3;
-            populateListBox();
-            var preview = document.getElementById("preview");
-            preview.onclick = canvasClick;
-            var ctx = preview.getContext('2d');
-            //outline the canvas
-            ctx.strokeStyle="#000000";
-            ctx.beginPath();
-            ctx.moveTo(0,0);
-            ctx.lineTo(650,0);
-            ctx.lineTo(650,300);
-            ctx.lineTo(0,300);
-            ctx.lineTo(0,0);
-            ctx.stroke();//*/
-			//RendererSettings.setTextBackgroundMethod(RendererSettings.TextBackgroundMethod_NONE);
-			//RendererSettings.setTextBackgroundMethod(RendererSettings.TextBackgroundMethod_COLORFILL);
-			//RendererSettings.setTextBackgroundMethod(RendererSettings.TextBackgroundMethod_OUTLINE);
-			//RendererSettings.setTextBackgroundMethod(RendererSettings.TextBackgroundMethod_OUTLINE_QUICK);
-            RendererSettings.setOutlineSPControlMeasures(false);
-            //RendererSettings.setOperationalConditionModifierType(RendererSettings.OperationalConditionModifierType_SLASH);
-	}
-</script>
-</head>
-<BODY bgcolor="#5f95e9" onload="setup();">
-    <select id="lbTG" size="10" style="width: 300px;" >
-        <option>Single Point Tactical</option>
-        <option>Populating Values...</option>
-    </select>
-    <select id="lbU" size="10" style="width: 300px;" >
-        <option>Single Point Warfighting</option>
-        <option>Populating Values...</option>
-    </select>
-<br/>
-SVG Rendered to HTML5 Canvas:<br/>
-<canvas id="preview" width="650" height="300"></canvas>
-<br/>
-<!-- <button id="btnDrawTG" type='button' onclick='renderTG();'>Draw TG</button>
-<button id="btnDrawFE" type='button' onclick='renderFE();'>Draw FE</button> -->
-SymbolID: <input id="tbSymbolID" type="text" value="" maxlength="30" size="30" readonly>
-<br>
-Version: <select id = lbVersion onchange="versionChange();">
-    <option>11-2525D</option>
-    <option>13-2525E</option>
-</select>
-Context: <select id = lbContext onchange="buildSymbolID();">
-    <option>0-Reality</option>
-    <option>1-Exercise</option>
-	<option>2-Simulation</option>
-</select>
-Affiliation: <select id = lbAffiliation onchange="buildSymbolID();">
-    <option>0-Pending</option>
-    <option>1-Unknown</option>
-    <option>2-Assumed Friend</option>
-    <option>3-Friend</option>
-    <option>4-Neutral</option>
-    <option>5-Suspect/Joker</option>
-    <option>6-Hostile/Faker</option>
-</select>
-Status: <select id = lbStatus onchange="buildSymbolID();">
-    <option>0-Present</option>
-    <option>1-Planned/Anticipated/Suspect</option>
-    <option>2-Fully Capable</option>
-    <option>3-Damaged</option>
-    <option>4-Destroyed</option>
-    <option>5-Full to capacity</option>
-</select>
-S1: <select id = lbS1 onchange="buildSymbolID();">
-    <option>0</option>
-    <option>1</option>
-    <option>2</option>
-    <option>3</option>
-    <option>4</option>
-    <option>5</option>
-    <option>6</option>
-	<option>7</option>
-    <option>8</option>
-    <option>9</option>
-</select>
-S2: <select id = lbS2 onchange="buildSymbolID();">
-    <option>0</option>
-    <option>1</option>
-    <option>2</option>
-    <option>3</option>
-    <option>4</option>
-    <option>5</option>
-    <option>6</option>
-	<option>7</option>
-    <option>8</option>
-    <option>9</option>
-</select>
-<br>
-HQTFD: <select id = lbHQTFD onchange="buildSymbolID();">
-    <option>0-Unknown</option>
-    <option>1-Dummy</option>
-    <option>2-HQ</option>
-    <option>3-D/HQ</option>
-    <option>4-TF</option>
-    <option>5-D/TF</option>
-    <option>6-TF/HQ</option>
-	<option>7-D/TF/HQ</option>
-</select>
-Amplifier: <select id = lbAmp onchange="buildSymbolID();">
-    <option>00-Unknown</option>
-    <option>11-Team/Crew</option>
-    <option>12-Squad</option>
-    <option>13-Section</option>
-    <option>14-Platoon/detachment</option>
-    <option>15-Company/battery/troop</option>
-    <option>16-Battalion/squadron</option>
-	<option>17-Regiment/group</option>
-	<option>18-Brigade</option>
-	<option>21-Division</option>
-    <option>22-Corps/MEF</option>
-    <option>23-Army</option>
-    <option>24-Army Group/front</option>
-    <option>25-Region/Theater</option>
-    <option>26-Command</option>
-    <option>31-Wheeled Limited Cross County</option>
-    <option>32-Wheeled Cross Country</option>
-    <option>33-Tracked</option>
-    <option>34-Wheeled and Tracked</option>
-    <option>35-Towed</option>
-    <option>36-Rail</option>
-	<option>37-Pack Animals</option>
-	<option>41-Over Snow</option>
-	<option>42-Sled</option>
-	<option>51-Barge</option>
-	<option>52-Amphibious</option>
-	<option>61-Short Towed Array</option>
-	<option>62-Long Towed Array</option>
-	<option>71-Leader Individual</option>
-</select>
-S1Mod: <input id="tbS1Mod" type="text" value="00" maxlength="2" size="2" onchange="buildSymbolID();">
-S2Mod: <input id="tbS2Mod" type="text" value="00" maxlength="2" size="2" onchange="buildSymbolID();">
-Frame Shape: <select id = lbFrame>
-    <option>0-Unknown</option>
-    <option>1-Space</option>
-    <option>2-Air</option>
-    <option>3-Land Unit</option>
-    <option>4-Equip/Sea</option>
-    <option>5-Land Inst.</option>
-    <option>6-Dis. Ind.</option>
-	<option>7-Sea Sub.</option>
-    <option>8-Activity</option>
-    <option>9-Cyber</option>
-</select>
-Size: <input id="tbSize" type="number" value="100" style="width: 4em"><br/>
-Keep Unit Ratio: <input id="cbKeepUnitRatio" type="checkbox" checked><br/>
-Labels:  <input id="cbLabels" type="checkbox"><br/>
-Draw as Icon:  <input id="cbDrawAsIcon" type="checkbox"><br/>
-Scale Internal Symbol:  <input id="cbScaleMainIcon" type="checkbox" checked><br/>
-<button id="btnClear" type='button' onclick='clearCanvas();' >Clear Canvas</button>
-<br/>
-<!-- <button id="btnRender" type='button' onclick='testRender();' disabled>Loading Page</button>-->
- Speed test is only representative of the time taken to build the SVG string, not render.
-<br/>
-<button id="btnST1" type='button' onclick='speedTest(1);'>Speed Test</button><!-- Speed Test -->
-<button id="btnST2" type='button' onclick='speedTest(3);'>Speed Test with Modifiers</button><!-- Speed Test With Modifiers -->
-<!-- <img id="batch1" src="" alt="batch1" height="35" width="35">
-<img id="batch2" src="" alt="batch2" height="35" width="35"> -->
-<br/>
-<img id="SVGTest" src="" alt="svg from datauri" height="100" width="100">
-<br/>
-<span id='contentSpan'/>
-<!-- Export single point output to files -->
-<br/>
-<script src="exportspimages.js" type="text/javascript" ></script>
-<script src="../node_modules/jszip/dist/jszip.js"></script>
-<button id="btnExport" type='button' onclick='exportTestImages("SPImageTestJS.zip")'>Export test images</button>
-</BODY>
-</html>