IntegerGlass/Tools/FontEditor/Bitmap/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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>INTEGERGLASS Bitmap Font 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 Bitmap Font Editor</h1><button id="resetButton" type="button" class="quiet">Reset</button></div>
        <h2>Atlas</h2>
        <div class="inline-fields"><label>Maximum width<input id="glyphWidth" type="number" min="1" max="32" value="5"></label><label>Height<input id="glyphHeight" type="number" min="1" max="32" value="5"></label></div>
        <label>Space width<input id="spaceWidth" type="number" min="0" max="32" value="1"></label>
        <label>Color format<select id="colorFormat"><option value="rgb332">RGB332 (ContactChromatic)</option><option value="rgb565">RGB565 (16-bit)</option><option value="rgb888">RGB888 (24-bit)</option></select></label>
        <label><input id="subpixelPreview" type="checkbox"> Show RGB sub-pixels</label>
        <label>Selected color<input id="selectedColor" type="color" value="#ffffff"><span id="selectedColorValue" class="model-info"></span></label>
        <div id="colorPalette" class="color-palette" aria-label="RGB332 HSV-organized color palette"></div>
        <label>Asset name<input id="assetName" type="text" value="MyBitmapFont"></label>
        <div id="atlasSize" class="model-info"></div>
        <div id="atlasInfo" class="model-info"></div>
      </section>
      <section>
        <h2>Bitmap atlas source</h2>
        <textarea id="atlasSourceInput" spellcheck="false" placeholder="// Bitmap Atlas: Width: 5 Height: 5 Format: RGB332"></textarea>
        <div class="button-row"><button id="importButton" type="button">Import C++ atlas</button><button id="copySourceButton" type="button">Copy C++ source</button></div>
      </section>
      <section>
        <h2>Bitmask atlas source</h2>
        <textarea id="bitmaskSourceInput" spellcheck="false" placeholder="// Atlas: MaxWidth: 5 Height: 5 SpaceWidth: 1"></textarea>
        <div class="button-row"><button id="importBitmaskButton" type="button">Import bitmask glyphs</button></div>
      </section>
    </aside>
    <section class="content">
      <section class="panel output-preview">
        <div class="preview-title"><h2>Glyph preview</h2><span id="glyphInfo"></span></div>
        <label>Glyph width<input id="selectedGlyphWidth" type="number" min="1" max="32" value="5"></label>
        <div class="canvas-wrap"><canvas id="previewCanvas"></canvas></div>
        <div class="pixel-editor" id="pixelEditor" aria-label="Bitmap pixel editor"></div>
        <div class="button-row"><button id="removeGlyphButton" type="button" class="quiet">Remove glyph</button></div>
      </section>
      <section class="panel nodes-panel">
        <div class="section-heading"><h2>Glyphs</h2><span id="glyphCountInfo"></span></div>
        <div id="glyphList" class="glyph-keyboard" aria-label="Bitmap glyph keyboard"></div>
      </section>
      <section class="panel text-previews-panel">
        <div class="section-heading"><h2>Font previews</h2><span>Rendered from the current bitmap atlas</span></div>
        <div id="textPreviews" class="text-previews"></div>
      </section>
      <section class="panel output-preview">
        <div class="preview-title"><h2>Bitmap output</h2><span id="status" class="status"></span></div>
        <textarea id="cppOutput" readonly spellcheck="false"></textarea>
        <button id="copyCppButton" type="button">Copy C++ atlas</button>
        <h2>Font declaration</h2>
        <textarea id="fontOutput" readonly spellcheck="false"></textarea>
        <button id="copyFontButton" type="button">Copy font declaration</button>
      </section>
    </section>
  </main>
  <script src="../shared/atlas-model.js"></script>
  <script src="../shared/atlas-source.js"></script>
  <script src="../shared/editor-ui.js"></script>
  <script src="../shared/bitmap-model.js"></script>
  <script src="../shared/bitmap-source.js"></script>
  <script src="defaults.js"></script>
  <script src="../shared/bitmap-declaration.js"></script>
  <script src="app.js"></script>
</body>
</html>