IntegerGlass/Tools/VectorImageEditor/index.html at master · GitMoDu/IntegerGlass · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>INTEGERGLASS Vector Editor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="workspace">
    <aside class="panel controls-panel">
      <section>
        <div class="section-heading"><h1>INTEGERGLASS Vector Editor</h1><button id="resetButton" type="button" class="quiet">Reset</button></div>
        <h2>Vector model</h2>
        <label>Encoding
          <select id="modelSelect">
            <option value="8">Image15x15 (1 byte)</option>
            <option value="65">Image255x255 (2 bytes)</option>
          </select>
        </label>
        <div class="model-info" id="modelInfo"></div>
      </section>

      <section>
        <h2>Tools</h2>
          <div id="toolPalette" class="tool-palette" aria-label="Geometry editing tools"></div>
        <div class="setting-group"><h2>Stroke scaling</h2><label>UQ0.7 scalar (0–128)<output id="thicknessFractionValue">64</output><input id="thicknessFraction" type="number" min="0" max="128" value="64"><input id="thicknessFractionSlider" type="range" min="0" max="128" value="64"></label></div>
        <div class="setting-group"><h2>Edge inset</h2><label>Source coordinate units<output id="insetValue">1</output><input id="inset" type="number" min="0" max="14" value="1"><input id="insetSlider" type="range" min="0" max="14" value="1"></label></div>
      </section>

      <section>
        <h2>Tracing reference</h2>
        <label>Image<input id="traceImageInput" type="file" accept="image/*"></label>
        <div class="trace-options">
          <label class="check-label"><input id="traceVisible" type="checkbox" checked> Show image</label>
          <label>Layer
            <select id="traceLayer"><option value="background">Background</option><option value="foreground">Foreground</option></select>
          </label>
          <label>Opacity<output id="traceOpacityValue">50%</output><input id="traceOpacity" type="range" min="0" max="100" value="50"></label>
        </div>
        <button id="traceClearButton" type="button" class="quiet">Clear reference</button>
      </section>

      <section>
        <div class="section-heading"><h2>Palette</h2><span id="paletteCount"></span></div>
        <div id="paletteList" class="palette-list" aria-label="Editable color palette"></div>
        <button id="addPaletteButton" type="button">Add color</button>
      </section>

      <section>
        <h2>Packed data</h2>
        <textarea id="packedInput" spellcheck="false" placeholder="0x00, 0x18, 0xA4... or decimal values"></textarea>
        <div class="button-row">
          <button id="importButton" type="button">Import packed</button>
          <button id="copyPackedButton" type="button">Copy packed</button>
        </div>
        <label>C++ declaration name<input id="assetName" type="text" value="MyVector"></label>
        <textarea id="cppOutput" readonly spellcheck="false"></textarea>
        <button id="copyCppButton" type="button">Copy C++ preview</button>
      </section>
    </aside>

    <section class="content">
      <section class="panel settings-panel">
        <div class="setting-group">
          <h2>Canvas size</h2>
          <div class="inline-fields"><label>Width<input id="canvasWidth" type="number" min="1" max="255" value="15"></label><label>Height<input id="canvasHeight" type="number" min="1" max="255" value="15"></label></div>
        </div>
        <div class="setting-group dynamic-preview-panel">
          <div class="preview-title"><h2>Dynamic output</h2></div>
          <div class="inline-fields"><label>Width<input id="outputWidth" type="number" min="2" max="512" value="128"></label><label>Height<input id="outputHeight" type="number" min="2" max="512" value="128"></label></div>
          <label>Scale both axes<output id="outputScaleValue">128×</output><input id="outputScaleSlider" type="range" min="2" max="512" value="128"></label>
          <label class="check-label"><input id="outputCanvasRatio" type="checkbox"> Preserve canvas ratio while scaling</label>
        </div>
        <section class="output-preview native-output-preview"><div class="preview-title"><h2>Native output</h2><span id="nativeDimensions"></span></div><div id="nativePreview" class="canvas-wrap native-wrap"><canvas id="nativeCanvas"></canvas></div></section>
        <span id="status" class="status" role="status"></span>
      </section>
      <section class="panel output-preview dynamic-output-preview">
        <div class="preview-title"><h2>Dynamic output</h2><span id="dynamicDimensions"></span></div>
        <div id="dynamicPreview" class="canvas-wrap dynamic-wrap"><canvas id="dynamicCanvas"></canvas></div>
        <p>Aliased output at the largest integer scale that fits this pane.</p>
      </section>
      <section class="panel nodes-panel">
        <div class="section-heading"><h2>Nodes</h2><span id="nodeCount"></span></div>
        <div id="nodeEditor" class="node-editor" aria-live="polite"></div>
        <div id="nodeList" class="node-list" aria-label="Vector nodes"></div>
        <div class="node-toolbar">
          <button id="addButton" type="button">Insert node</button>
          <button id="duplicateButton" type="button">Duplicate</button>
          <button id="deleteButton" type="button" class="danger">Delete</button>
        </div>
      </section>
    </section>
  </main>
  <script src="editor-config.js"></script>
  <script src="editor-ui.js"></script>
  <script src="editor-data.js"></script>
  <script src="editor-scale.js"></script>
  <script src="vector-renderer.js"></script>
  <script src="app.js"></script>
</body>
</html>