index.html 18.8 KB
Newer Older
Christian Winter's avatar
Christian Winter committed
1
<html>
2
<head>
3
    <title>Emblem</title>
Christian Winter's avatar
Christian Winter committed
4 5 6 7 8 9 10
	<meta name="description" content="Emblem is a simple vector graphics editor running inside your browser.
		It can be used as a level design pre-production tool.
		Drawings are saved as SVG files and can be exported as PNGs."
	>
	<meta name="keywords" content="Vector graphics editor, svg, level design, level editor, pixel packers, level design, pre-production">
	<meta name="author" content="Christian Winter">

11
    <link rel="shortcut icon" href="images/favicon.ico">
Christian Winter's avatar
Christian Winter committed
12

13 14 15
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Christian Winter's avatar
Christian Winter committed
16

17 18
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

19 20
    <script src="scripts/Preferences.js"></script>

21
    <script src="scripts/Cursor.js"></script>
22
    <script src="scripts/Brush.js"></script>
23

24 25 26
    <script src="scripts/objects/EObject.js"></script>
    <script src="scripts/objects/Rectangle.js"></script>

27 28
    <script src="scripts/filestructure/Line.js"></script>
    <script src="scripts/filestructure/Vector2.js"></script>
29
    <script src="scripts/filestructure/LineEnding.js"></script>
30
    <script src="scripts/filestructure/Bounds.js"></script>
31
    <script src="scripts/filestructure/Transform.js"></script>
Christian Winter's avatar
Christian Winter committed
32
    <script src="scripts/filestructure/Instance.js"></script>
33

34
    <script src="scripts/input/Key.js"></script>
35

36
    <script src="scripts/states/State.js"></script>
37
    <script src="scripts/states/PrefabBrushState.js"></script>
38
    <script src="scripts/states/InputRecorderState.js"></script>
39
    <script src="scripts/states/BoxSelectionState.js"></script>
40
    <script src="scripts/states/BrushSelectionState.js"></script>
41
    <script src="scripts/states/ContinuousDrawingState.js"></script>
42 43 44 45 46
    <script src="scripts/states/DrawingState.js"></script>
    <script src="scripts/states/IdleState.js"></script>
    <script src="scripts/states/MoveLinesState.js"></script>
    <script src="scripts/states/PanState.js"></script>
    <script src="scripts/states/ZoomState.js"></script>
47 48
    <script src="scripts/states/RotateState.js"></script>
    <script src="scripts/states/ScaleState.js"></script>
49
    <script src="scripts/states/MeasureState.js"></script>
50

Christian Winter's avatar
Christian Winter committed
51
    <script src="scripts/managers/Camera.js"></script>
52 53
    <script src="scripts/input/Input.js"></script>
    <script src="scripts/input/CanvasKeyHandler.js"></script>
54
    <script src="scripts/Utilities.js"></script>
55

56 57 58 59 60
    <script src="scripts/actions/ActionHistory.js"></script>
    <script src="scripts/actions/CreateLineAction.js"></script>
    <script src="scripts/actions/DuplicateLinesAction.js"></script>
    <script src="scripts/actions/MoveAction.js"></script>
    <script src="scripts/actions/SelectLinesAction.js"></script>
61

62
    <script src="scripts/filestructure/File.js"></script>
63
    <script src="scripts/filestructure/Layer.js"></script>
64
    <script src="scripts/filestructure/Data.js"></script>
65
    <script src="scripts/saving/Saver.js"></script>
Christian Winter's avatar
Christian Winter committed
66

67
    <script src="scripts/managers/Renderer.js"></script>
68 69
    <script src="scripts/managers/SceneRenderer.js"></script>
    <script src="scripts/managers/PrefabEditorRenderer.js"></script>
70
    <script src="scripts/managers/GUI.js"></script>
Christian Winter's avatar
Christian Winter committed
71
    <script src="scripts/managers/QuicktipManager.js"></script>
72

73
    <script src="scripts/saving/Exporter.js"></script>
Christian Winter's avatar
Christian Winter committed
74
    <script src="scripts/Color.js"></script>
75
    <script src="scripts/Settings.js"></script>
76
    <script src="scripts/LineManipulator.js"></script>
77
    <script src="scripts/managers/Logic.js"></script>
78
    <script src="scripts/managers/Selection.js"></script>
Christian Winter's avatar
Christian Winter committed
79
    <script src="scripts/filestructure/SelectionData.js"></script>
80

81 82
    <script src="scripts/grids/GridManager.js"></script>
    <script src="scripts/grids/RectangleGrid.js"></script>
83
    <script src="scripts/grids/TriangleGrid.js"></script>
Moritz Kertesz's avatar
Moritz Kertesz committed
84
    <script src="scripts/grids/PolarGrid.js"></script>
85

86 87
    <script src="scripts/PrefabManager.js"></script>
    <script src="scripts/Prefab.js"></script>
88 89

    <script src="scripts/View.js"></script>
Christian Winter's avatar
Christian Winter committed
90 91
    <script src="scripts/SceneView.js"></script>
    <script src="scripts/PrefabEditorView.js"></script>
92
    <script src="scripts/rendering/FinalRenderView.js"></script>
93

94
    <script src="scripts/Globals.js"></script>
95 96 97 98


    <script src="scripts/Application.js"></script>
    <script>
Christian Winter's avatar
Christian Winter committed
99
        var Application;
100
        function onLoad() {
Christian Winter's avatar
Christian Winter committed
101
            Application = new App();
Christian Winter's avatar
Christian Winter committed
102
            Application.start();
103
        }
Christian Winter's avatar
Christian Winter committed
104
        var logActive = true;
105 106 107 108
        function log(obj) {
            if (logActive)
                throw(obj)
        }
109

110
        /* / // // // // // // // // //
111
        /// // // // // // // // // // /
112
        // // //  T E S T I N G // // //
113 114 115
        / // // // // // // // // // ///
         // // // // // // // // // //*/

116

117 118 119 120 121





122
    </script>
123
</head>
124
<body onload="onLoad();">
125
    <div id="menubar">
126
        <div class="floatLeft">
127
            <!--
128 129 130
            <div class="menuentry">File</div>
            <div class="menuentry">Edit</div>
            <div class="menuentry">Settings</div>
131
            -->
132 133
        </div>
        <div class="floatRight">
134
            <div class="menuentry"><a href="https://www.reddit.com/r/pixelpackers/" target="_blank">Subreddit</a></div>
Christian Winter's avatar
Christian Winter committed
135
            <div class="menuentry" onclick="GUI.quicktipManager.menuButtonPressed()">Quick Tip</div>
Christian Winter's avatar
Christian Winter committed
136
            <div class="menuentry"><a href="https://plus.google.com/b/102627916314585559076/102627916314585559076" target="_blank">News</a></div>
Christian Winter's avatar
Christian Winter committed
137 138 139
            <div class="menuentry"><a href="https://gitlab.com/BeayemX/Emblem/wikis/home" target="_blank">Help</a></div>
            <div class="menuentry"><a href="https://gitlab.com/BeayemX/Emblem/issues" target="_blank">Feedback</a></div>
            <div class="menuentry"><a href="https://gitlab.com/BeayemX/Emblem" target="_blank">About</a></div>
140
        </div>
141
    </div>
Christian Winter's avatar
Christian Winter committed
142
    <div id="toolbar" style="visibility:hidden">
143 144 145 146 147
        <button type="button" class="toolbutton" onclick="Application.currentView.logic.setWaitingState(new MoveLinesState());">G</button>
        <button type="button" class="toolbutton" onclick="Application.currentView.logic.setWaitingState(new RotateState());">R</button>
        <button type="button" class="toolbutton" onclick="Application.currentView.logic.setWaitingState(new ScaleState());">S</button>
        <button type="button" class="toolbutton" onclick="Application.currentView.logic.setWaitingState(new BoxSelectionState());">B</button>
        <button id="selected" type="button" class="toolbutton" onclick="Application.currentView.logic.setWaitingState(null);Application.currentView.logic.setState(new IdleState());">Esc</button>
Christian Winter's avatar
Christian Winter committed
148
    </div>
149

Christian Winter's avatar
Christian Winter committed
150
    <div id="leftarea" class="toolarea">
151 152

        <div class="toolcategory">
153 154 155 156 157 158 159
            <p  class="foldingHeader">File</p>
            <div class="toolcategorycontainer">
                <button type="button" onclick="Saver.autoSave(); Saver.newFile()">New file</button>
                <button type="button" onclick="Exporter.exportAsSVG()">Save as SVG</button>
                <button type="button" onclick="Preferences.clear()">Clear preferences</button>
                <button type="button" onclick="Saver.loadAutoSave()">Restore last session</button>
            </div>
Christian Winter's avatar
Christian Winter committed
160 161 162
        </div>

        <div class="toolcategory">
163 164 165 166 167 168 169 170 171 172
            <p  class="foldingHeader">Render</p>
            <div class="toolcategorycontainer">

                <table id="renderSettings">
                    <colgroup>
                        <col width="1%" />
                        <col width="1%" />
                    </colgroup>
                    <tr title="Left of the rendered image">
                        <td>Left</td>
Christian Winter's avatar
Christian Winter committed
173
                        <td><input id="artBoundsLeft" type="number" value="0" onchange="Preferences.artBounds.left = +value; Application.redrawAllViews();"></td>
174 175 176
                    </tr>
                    <tr title="Top of the rendered image">
                        <td>Top</td>
Christian Winter's avatar
Christian Winter committed
177
                        <td><input id="artBoundsTop" type="number" value="0" onchange="Preferences.artBounds.top = +value; Application.redrawAllViews();"></td>
178 179 180
                    </tr>
                    <tr title="Width of the rendered image">
                        <td>Width</td>
Christian Winter's avatar
Christian Winter committed
181
                        <td><input id="artBoundsWidth" type="number" min="1" value="1" onchange="Preferences.artBounds.width = +value; Application.redrawAllViews();"></td>
182 183 184
                    </tr>
                    <tr title="Height of the rendered image">
                        <td>Height</td>
Christian Winter's avatar
Christian Winter committed
185
                        <td><input id="artBoundsHeight" type="number" min="1" value="1" onchange="Preferences.artBounds.height = +value; Application.redrawAllViews();"></td>
186 187 188 189 190 191 192
                    </tr>
                    <tr title="Scale of the rendered image">
                        <td>Scale factor</td>
                        <td><input id="renderScaleFactor" type="number" min="1" value="1" onchange="Preferences.renderScaleFactor = +value; Preferences.artBounds.adjustDisplayedResolution();"></td>
                    </tr>
                    <tr title="Render guide-layers">
                        <td>Render guide layers</td>
193
                        <td><input id="renderGuideLayers" type="checkbox" onchange="Preferences.adjustRenderGuideLayers(this.checked)" /></td>
194 195 196 197 198 199 200 201
                    </tr>

                    <tr title="Resolution">
                        <td colspan="2" id="renderResolution"></td>
                    </tr>
                </table>
                <button type="button" onclick="Exporter.renderPNG()">Render</button>
            </div>
202 203 204
        </div>

        <div class="toolcategory">
Christian Winter's avatar
Christian Winter committed
205
            <p class="foldingHeader">Tools</p>
206 207 208 209 210 211 212 213 214 215 216
            <div class="toolcategorycontainer">

                <button type="button" onclick="LineManipulator.subdivide()">Subdivide</button>
                <button type="button" onclick="LineManipulator.scaleSelection(new Vector2(-1, 1));">Mirror Horizontally</button>
                <button type="button" onclick="LineManipulator.scaleSelection(new Vector2(1, -1));">Mirror Vertically</button>
                <button type="button" onclick="LineManipulator.rotateSelectionBy(90)">Rotate CW</button>
                <button type="button" onclick="LineManipulator.rotateSelectionBy(-90)">Rotate CCW</button>
                <button type="button" onclick="LineManipulator.scaleSelection(2)">Double Size [+]</button>
                <button type="button" onclick="LineManipulator.scaleSelection(0.5)">Half Size [-]</button>
                <button type="button" onclick="LineManipulator.growSelection()">Grow Selection</button>
                <button type="button" onclick="LineManipulator.selectLinked()">Select Linked [L]</button>
217
                <button type="button" onclick="Application.currentView.selection.snapToGrid()">Snap selection to grid [Shift+S]</button>
218
            </div>
Christian Winter's avatar
Christian Winter committed
219 220 221
        </div>


222
        <div class="toolcategory dev">
223 224 225 226 227 228 229
            <p  class="foldingHeader">Other Stuff</p>
            <div class="toolcategorycontainer">

                <button type="button" onclick="Utilities.makeSketchy(new Vector2(2, 2), new Vector2(3, 3), null, null)">Sketch Selection(Pos)</button>
                <button type="button" onclick="Utilities.makeSketchy(null, null, 2, 1)">Sketch Selection(1)</button>
                <button type="button" onclick="Utilities.makeSketchy(null, null, 2, 5)">Sketch Selection(5)</button>
            </div>
230
        </div>
Christian Winter's avatar
Christian Winter committed
231

Christian Winter's avatar
Christian Winter committed
232

Christian Winter's avatar
Christian Winter committed
233
    </div>
Christian Winter's avatar
Christian Winter committed
234 235
    <div id="prefabarea" class="toolarea">
        <div id="prefabList">
236
            <div class="toolcategory">
237
                <p class="foldingHeader">Prefabs</p>
Christian Winter's avatar
Christian Winter committed
238 239 240
                <div class="toolcategorycontainer">
                    <button type="button" onclick="PrefabManager.createNewPrefab()">Create new Prefab</button>
                    <button type="button" onclick="PrefabManager.createNewPrefabFromSelection()">Create Prefab from selection</button>
241
                    <button type="button" onclick="PrefabManager.convertSelectedInstancesToLines()">Convert selected instances to lines</button>
Christian Winter's avatar
Christian Winter committed
242 243 244 245 246 247
                    <div class="toolcategorycontainerlist" id="prefabsDiv">
                    </div>
                    <button type="button" id="onlyTransformPrefabInstancePositionToggle" onclick="GUI.onlyTransformPrefabInstancePositionTogglePressed()">Only manipulate positions</button>
                </div>
            </div>
        </div>
Christian Winter's avatar
Christian Winter committed
248 249
        <div id="prefabEditor">
        </div>
Christian Winter's avatar
Christian Winter committed
250 251 252
    </div>

    <div id="sceneView"></div>
Christian Winter's avatar
Christian Winter committed
253 254 255
    <canvas id="offscreenCanvas" width="0" height="0"></canvas>
    <div id="stats" class="stats"></div>
    <div id="rightarea" class="toolarea">
Christian Winter's avatar
Christian Winter committed
256

257
        <div class="toolcategory">
258 259 260 261 262 263 264
            <p  class="foldingHeader">Grid</p>
            <div class="toolcategorycontainer">
                <select id="gridTypeSelection" onchange="GridManager.setGridType(value);">
                    <option value="0">Rectangle grid</option>
                    <option value="1">Triangle grid</option>
                    <option value="2">Polar grid</option>
                </select>
265
                <button type="button" onclick="Application.toggleGridVisiblity(this)">Hide grid</button>
266 267 268
                <button type="button" onclick="GridManager.resetGrid();">Reset grid</button>
                <div id="gridSettings"></div>
            </div>
Christian Winter's avatar
Christian Winter committed
269
        </div>
270

271
        <div class="toolcategory" id="linesettings">
272 273 274 275 276 277 278 279 280 281
            <p  class="foldingHeader">Line Settings</p>
            <div class="toolcategorycontainer">
                <table id="lineSettings">
                    <colgroup>
                        <col width="1%" />
                        <col width="8%" />
                    </colgroup>

                    <tr title="Color">
                        <td>Color</td>
282
                        <td><input type="color" id="lineColor" name="color" onchange="Application.setCurrentLineColor(Color.hexToColor(value));"></td>
283 284 285 286
                    </tr>

                    <tr title="Alpha value of the line color">
                        <td>Opacity</td>
287
                        <td><input type="range" id="lineAlpha" name="a" min="0" max="1" step="0.05" value="1" onchange="Application.setCurrentLineAlpha(+value);"></td>
288 289 290
                    </tr>
                    <tr title="Line thickness in px">
                        <td>Size</td>
291
                        <td><input type="number" id="lineThickness" name="Line thickness" min="1" max="25" value="1" onchange="Application.setCurrentLineThickness(+value);"></td>
292 293 294 295 296
                    </tr>
                </table>
            </div>
        </div>

Christian Winter's avatar
Christian Winter committed
297
        <div class="toolcategory">
298 299
            <p  class="foldingHeader">Layers</p>
            <div class="toolcategorycontainer">
300
                <button type="button" onclick="Application.file.createNewLayer(true)">Create new Layer</button>
301

302 303 304
                <div class="toolcategorycontainerlist" id="layersDiv">
                </div>
            </div>
Christian Winter's avatar
Christian Winter committed
305 306 307
        </div>


308
        <div class="toolcategory">
309 310 311
            <p  class="foldingHeader">Settings</p>
            <div class="toolcategorycontainer">

312
                <select id="qualitySelection" onchange="Preferences.setQualitySetting(value);" title="Displayed line quality">
313 314 315 316
                    <option value="quality">Best Quality</option>
                    <option value="speed">Good Quality</option>
                    <option value="mono">High Speed</option>
                </select>
317

318 319 320
                <button type="button" id="lineHandlesToggle" onclick="GUI.lineHandlesTogglePressed();">Handles</button>
                <button type="button" id="cutLinesToggle" onclick="GUI.cutLinesTogglePressed()">Line cutting</button>
                <button type="button" id="gridSnapToggle" onclick="GUI.gridSnapTogglePressed()">Grid snapping</button>
321
                <button type="button" id="use2DCursorToggle" onclick="GUI.use2DCursorTogglePressed()">Use Pivot</button>
322 323 324 325 326 327

                <select id="rmbSelectionType" onchange="Preferences.setRMBSelectionType(value);" title="Right click drag selection type">
                    <option value="box">Box selection</option>
                    <option value="brush">Brush selection</option>
                </select>

328 329
                <button type="button" id="selectVerticesToggle" onclick="GUI.selectVerticesTogglePressed()">Select vertices</button>
                <button type="button" id="selectEdgesToggle" onclick="GUI.selectEdgesTogglePressed()">Select edges</button>
Christian Winter's avatar
Christian Winter committed
330
                <button type="button" id="showRenderPreviewToggle" onclick="GUI.showRenderPreviewToggleTogglePressed()">Show render preview</button>
Christian Winter's avatar
Christian Winter committed
331

332
            </div>
333 334
        </div>

Christian Winter's avatar
Christian Winter committed
335
        <div class="toolcategory beta">
336
            <p  class="foldingHeader">Line Manipulation</p>
337 338 339 340
            <div class="toolcategorycontainer">
                <button type="button" id="mirrorXToggle" onclick="GUI.mirrorXTogglePressed();">MirrorX</button>
                <button type="button" id="mirrorYToggle" onclick="GUI.mirrorYTogglePressed();">MirrorY</button>
            </div>
341 342 343
        </div>

        <div class="toolcategory">
344 345 346 347 348
            <p  class="foldingHeader">Developer</p>
            <div class="toolcategorycontainer">
                <button type="button" id="devModeToggle" onclick="GUI.devModeTogglePressed()">Developer Mode</button>
                <div id="logo"><a href="https://gitlab.com/BeayemX/Emblem" target="_blank"><img src="images/favicon.ico" /></a></div>
                <p id="description">Emblem<br />by <br />Pixel Packers</p>
Christian Winter's avatar
Christian Winter committed
349
            </div>
350
        </div>
351
    </div>
352

353 354 355 356
    <div id="statusbar">
        <div id="statusbarentryleft" class="statusbarentry"></div>
        <div id="statusbarentryright" class="statusbarentry"></div>
    </div>
Christian Winter's avatar
Christian Winter committed
357 358

    <div id="renderPreview"></div>
Christian Winter's avatar
Christian Winter committed
359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377
    <div id="quicktip" style="visibility: hidden;">
        <div id="quicktipHeader">Did you know?</div>
        <table>
            <colgroup>
                <col width="33%" />
                <col width="33%" />
                <col width="33%" />
            </colgroup>
            <tr>
                <td colspan="3" id="quicktipContainer">Did you know</td>
            </tr>
            <tr>
                <td><input type="button" value="OK" onclick="GUI.quicktipManager.okButtonPressed()"/></td>
                <td><input type="button" value="Next tip" onclick="GUI.quicktipManager.nextTipPressed()"/></td>
                <td><input type="button" value="Don't show again" onclick="GUI.quicktipManager.dontShowAgainPressed()"/></td>
            </tr>
        </table>

    </div>
378 379 380 381 382 383 384 385 386 387
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-87762710-1', 'auto');
  ga('send', 'pageview');

    </script>
388
</body>
389
</html>