emblem-generator
Version:
Generate SVG emblems
69 lines (58 loc) • 2.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emblem Generator Example</title>
<script type="text/javascript" src="emblem-generator.js"></script>
<script type="text/javascript" src="customAssets.js"></script>
</head>
<body>
<h2>Emblem Generator Example</h2>
<div id="emblem-div"></div>
<textarea name="" id="data" cols="30" rows="10"></textarea>
<br>
<button id="generateBtn">Generate</button>
<div id="info">
<h4>Change the emblem data in the textarea above then click "generate"</h4>
<ul>
<li>Available background IDs: [0, 1, 2, 3, 4]</li>
<li>Available foreground IDs: ["cup", "pyramid", "star", "turtle"]</li>
<li>Available flags: ["FlipBackgroundVertical", "FlipBackgroundHorizontal", "FlipForegroundVertical", "FlipForegroundHorizontal"]</li>
<li>
Available color value types:
<ul>
<li>Hexadecimal - ex: #ff0000</li>
<li>RGB - ex: rgb(45,75,124)</li>
<li>HLS - ex: hsl(45,100,50)</li>
</ul>
</li>
<li>Opacity level: from 0 (transparent) to 1 (opaque)</li>
</ul>
</div>
<script>
var myAssets = {
defs: assets.defs,
bg_defs: assets.bg_defs
};
var emblemData = {
"background_id":2,
"foreground_id":"star",
"flags":[],
"background_color":'#ff0000',
"foreground_primary_color":'rgb(45,75,124)',
"foreground_secondary_color":'hsl(45,100,50)',
"black_opacity":1
};
var emblemGenerator = new EmblemGenerator();
emblemGenerator.init('emblem-div', 256, myAssets, 'transparent');
emblemGenerator.drawEmblemObj(emblemData);
var textarea = document.getElementById('data');
textarea.innerText = JSON.stringify(emblemData);
var generateBtn = document.getElementById('generateBtn');
generateBtn.onclick = function() {
var data = JSON.parse(textarea.value)
emblemGenerator.drawEmblemObj(data);
}
</script>
</body>
</html>