-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (141 loc) · 10.3 KB
/
index.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Pixel Font creator</title>
<link rel="stylesheet" href="./style.css">
<script src="src/main.js" type="module"></script>
<script src="src/utils.js" type="module"></script>
<script src="src/base64.js" type="module"></script>
<script src="src/convert.js" defer type="module"></script>
<script src="src/import.js" defer type="module"></script>
<script src="src/resize.js" defer type="module"></script>
<script src="src/editor.js" defer type="module"></script>
<script src="src/preview.js" defer type="module"></script>
<script src="src/settings.js" defer type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
</head>
<body>
<div id="editor">
<canvas id="editor-canvas">Sorry, your browser needs to support canvases and javascript to see this!</canvas>
<div id="editor-toolbox">
<button id="button-undo" onclick="editor.editor_undo();">Undo</button>
<span title="Operations specify what to do when you click on a pixel with the 'Draw' mode.">Operation:</span>
<button id="button-xor" class="active" title="Toggles a pixel on or off. [1]">XOR</button>
<button id="button-one" title="Turns a pixel on. [2]">ONE</button>
<button id="button-zero" title="Turns a pixel off. [3]">ZERO</button>
<button id="button-select" title="Adds the pixel to the selection. [4]">SEL</button>
<button id="button-deselect" title="Removes the pixel from the seleciton. [5]">DESEL</button>
<span>Tool:</span>
<button id="button-draw" class="active" title="Allows you to draw pixels or add/remove pixels to the selection. [d]">Draw</button>
<button id="button-move" title="Moves the editor around. [p] or [Space+LMB]">Pan</button>
<button id="button-deselect-all" title="Clears the selection. [Shift+D]">Deselect all</button>
<button id="button-drag" title="Moves the selection on the editor. [t]">Drag</button>
<input type="text" placeholder="Jump to glyph..." id="jump-glyph" title="Type here a character or a unicode codepoint to jump to it.">
<span id="editor-info" class="loading">Loading information...</span>
</div>
</div>
<div id="resizer"><div></div></div>
<div id="manipulate">
<div id="settings" class="settings tabbed">
<div>
<a id="github-link" class="button" href="https://github.com/adri326/online-pixel-font-creator/">Github</a>
<div class="tab-titles">
<button class="active" onclick="this.switch_tab('tab-font'); resize_canvas();">Font</button>
<button class="" onclick="this.switch_tab('tab-glyph'); resize_canvas();">Glyph</button>
</div>
</div>
<div>
<div id="tab-font" class="tab shown">
<h2>Font name</h2>
<div title="The name of your font; choose a memorable one if you are going to use it as a system font.">Name: <input type="text" id="input-name" placeholder="My Amazing Font"></div>
<div title="Your name~">Author: <input type="text" id="input-author" placeholder="Anonymous"></div>
<div title="The style of the font is used to indicate the how bold or italic the font is.">Style: <input type="text" id="input-style" placeholder="Medium"></div>
<div></div>
<h2>Dimensions</h2>
<div class="pad-vertical">
Where to add blank pixels: <span class="button"><select id="select-resize-mode">
<option value="tl">Top-left</option>
<option value="tr">Top-right</option>
<option value="bl">Bottom-left</option>
<option value="br">Bottom-right</option>
</select><i>▼</i></span>
</div>
<div>
Width: <input type="text" id="input-width" class="small" placeholder="8" title="The height of a character, in pixels.">
Height: <input type="text" id="input-height" class="small" placeholder="10" title="The width of a character, in pixels.">
<button id="button-resize">Apply!</button>
</div>
<h2 title="This section lets you tweak how characters are spaced from each other. These are also shown as guides on the editor view.">Spacing</h2>
<div class="flex wrap">
<span title="The baseline is the line on which most of the characters sit. In pixels from the top of the picture.">Baseline: <input type="text" id="input-baseline" class="small" placeholder="8"></span>
<span title="The left offset defines the vertical line where the character's bounding box begins. Anything left to that line will overlap with the previous characters. Measured in pixels.">Left offset: <input type="text" id="input-left-offset" class="small" placeholder="0"></span>
<span title="How far up capital letters like 'T' go; relative to the baseline.">Ascend: <input type="text" id="input-ascend" class="small" placeholder="7"></span>
<span title="How far down letters like 'g' go; relative to the baseline.">Descend: <input type="text" id="input-descend" class="small" placeholder="-1"></span>
<span title="The horizontal spacing between two characters.">Spacing: <input type="text" id="input-spacing" class="small" placeholder="1"></span>
<span title="The width of the letter 'M'; use a multiple of this number as the font size to get a pixel-perfect result!">Em Size: <input type="text" id="input-em-size" class="small" placeholder="8"></span>
</div>
<h2>Saving/loading</h2>
<div>
<button id="button-save" title="Saves to the browser's local storage; it will survive a restart but it might not last forever!">Save (browser)</button>
<button id="button-load" title="Loads from the browser's local storage.">Load (browser)</button>
<button id="button-clear" title="Reload the page afterwards to create a font from scratch!">Clear save</button>
</div>
<div>
<button id="button-download" title="Download the font in a text format.">Download</button>
<button id="button-download-otf" title="Download the font in OTF format.">Download (OTF)</button>
<button id="button-upload" title="Upload a font from your computer!">Upload</button>
</div>
</div>
<div class="tab" id="tab-glyph">
<h2>Paste another glyph</h2>
<div>
<input type="text" id="input-paste-glyph" placeholder="Glyph or codepoint" title="Type here a character or a unicode codepoint to paste into the current glyph.">
<button id="button-paste-glyph">Paste glyph</button>
</div>
<h2>Glyph-specific dimensions</h2>
<div class="pad-vertical">
Where to add blank pixels: <span class="button"><select id="select-glyph-resize-mode">
<option value="tl">Top-left</option>
<option value="tr">Top-right</option>
<option value="bl">Bottom-left</option>
<option value="br">Bottom-right</option>
</select><i>▼</i></span>
</div>
<div>
Width: <input type="text" id="input-glyph-width" class="small" placeholder="8" title="The height of the current character, in pixels.">
Height: <input type="text" id="input-glyph-height" class="small" placeholder="10" title="The width of the current character, in pixels.">
<button id="button-glyph-resize">Apply!</button>
</div>
<div>
Baseline: <input type="text" id="input-glyph-baseline" class="small" placeholder="8" title="The baseline of the current character; in pixels measured from the top of the texture.">
Left offset: <input type="text" id="input-glyph-left-offset" class="small" placeholder="0" title="The left offset of the current character; in pixels measured from the left of the texture.">
</div>
</div>
</div>
</div>
<div id="preview">
<canvas id="preview-canvas"></canvas>
<textarea id="preview-prompt">The quick fox jumps over the lazy dog</textarea>
</div>
</div>
<div id="import-menu" class="hidden settings"><div>
<div class="flex-horizontal flex-end"><button id="import-menu-close" title="Closes this window.">Close</button></div>
<textarea id="paste-file" placeholder="Paste data here..."></textarea>
<div class="upload">
<label for="import-file" class="button">Or upload a file!</label>
<span id="import-status">No file selected</span>
<input type="file" id="import-file" class="hidden">
</div>
<h2>Import as:</h2>
<div class="flex-horizontal">
<button id="import-as-pixel-font" title="Load the data or file as a pfs file, which you can obtain with the 'Download' button.">Pixel font string (.pfs)</button>
<button id="import-as-truetype" title="Load the file as a truetype file (TTF, OTF or WOFF). Width, height and pixel size must be specified in the data section.">TrueType (.ttf, .otf or .woff)</button>
<button id="import-as-json-png" title="Import a json/png pair, the JSON to be imported is the same as YAL's tool's.">JSON/PNG</button>
</div>
<div class="error" id="import-error"></div>
</div></div>
</body>
</html>