-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
160 lines (160 loc) · 9.06 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Micro Paint</title>
<link href='//fonts.googleapis.com/css?family=Fugaz+One&text=SuperMicroPaint1234PreviewExport!' rel='stylesheet' type='text/css'>
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/icomoon/style.css" rel="stylesheet">
<script src="assets/lib/lodash.min.js"></script>
<script src="assets/lib/array2d.js"></script>
<script src="assets/lib/super-pixel-grid.js"></script>
<script src="assets/lib/jquery.min.js"></script>
<script src="assets/lib/angular.min.js"></script>
<script src="app/shared/touchDirectives.js"></script>
<script src="app/components/smp/smpController.js"></script>
<meta name="viewport" content="width=950">
</head>
<body ng-app="super-micro-paint" ng-controller="smpController" ng-touchcancel="penUp('outside')" ng-mouseup="penUp('outside')" ng-touchend="penUp('outside')">
<div class="main">
<div class="case" ng-class="{'hide': showManual}" ng-click="(!showManual) || (showManual = false)">
<h1>Super Micro Paint</h1>
<div class="container">
<div class="tools drawing-tools">
<label class="btn" ng-class="{'active': activeTool == 'pencil'}">
<input type="radio" name="tool" ng-model="activeTool" value="pencil" checked ng-disabled="mode != 'normal'">
<span class="icon-pencil"></span>
</label>
<label class="btn" ng-class="{'active': activeTool == 'fill'}">
<input type="radio" name="tool" ng-model="activeTool" value="fill" ng-disabled="mode != 'normal'">
<span class="icon-fill"></span>
</label>
<label class="btn" ng-class="{'active': activeTool == 'line'}">
<input type="radio" ng-model="activeTool" value="line" ng-disabled="mode != 'normal'">
<span class="icon-line"></span>
</label>
<label class="btn" ng-class="{'active': activeTool == 'rectangle'}">
<input type="radio" ng-model="activeTool" value="rectangle" ng-disabled="mode != 'normal'">
<span class="icon-square"></span>
</label>
<label class="btn" ng-class="{'active': activeTool == 'ellipse'}">
<input type="radio" ng-model="activeTool" value="ellipse" ng-disabled="mode != 'normal'">
<span class="icon-circle"></span>
</label>
</div>
<div class="tools picture-tools">
<label class="btn">
<button type="button" ng-click="nudge(-1, 0)" ng-disabled="mode != 'normal'">
<span class="icon-left"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="nudge(1, 0)" ng-disabled="mode != 'normal'">
<span class="icon-right"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="nudge(0, -1)" ng-disabled="mode != 'normal'">
<span class="icon-up"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="nudge(0, 1)" ng-disabled="mode != 'normal'">
<span class="icon-down"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="clear()" ng-disabled="mode != 'normal'">
<span class="icon-clear"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="invert()" ng-disabled="mode != 'normal'">
<span class="icon-invert"></span>
</button>
</label>
<label class="btn">
<button type="button" ng-click="doLifeStep()" ng-disabled="mode != 'normal'">
<span class="icon-life"></span>
</button>
</label>
<label class="btn" ng-class="{'blink': mode == 'copy'}">
<button type="button" ng-click="copyStart()">
<span class="icon-copy"></span>
</button>
</label>
<label class="btn" ng-class="{'active': canUndo()}">
<button type="button" ng-click="undo()" ng-disabled="!canUndo() || mode != 'normal'">
<span class="icon-undo"></span>
</button>
</label>
<label class="btn" ng-class="{'active': canRedo()}">
<button type="button" ng-click="redo()" ng-disabled="!canRedo() || mode != 'normal'">
<span class="icon-redo"></span>
</button>
</label>
</div>
<div class="frame"
ng-mousedown="penDown($event)" ng-touchstart="penDown($event)"
ng-mousemove="penOver($event)" ng-touchmove="penOver($event)"
ng-mouseup="penUp($event)" ng-touchend="penUp($event)"
>
<pixel-canvas pixels="currentFrame" width="800" height="400"></pixel-canvas>
</div>
</div>
<div class="previews">
<div class="previewwrap" ng-repeat="frame in frames" ng-class="{'active': $index==$parent.currentFrameNum, 'blink': $index==$parent.currentFrameNum && mode == 'copy'}" ng-click="previewClick($index);" on-finish-render="ngRepeatFinished">
<canvas width="64" height="32" id="preview{{$index}}"> </canvas>
<span>{{$index + 1}}</span>
</div>
<div class="export">
<span>Export! <a href="{{getExportURL()}}" target="_blank"> </a></span>
</div>
<div class="previewwrapani">
<canvas width="64" height="32" id="previewani"></canvas>
<span> Preview</span>
</div>
</div>
</div>
<div class="manual" ng-class="{'show': showManual}" ng-click="showManual = !(showManual)">
<div class="paper">
<h2>Super Micro Paint</h2>
<h3>Intro</h3>
<p>Welcome to the micro world! Create micro drawings on the go! Bring your drawings to life with four fantastic frames of action! Save your favorite creations to your Personal Computer!</p>
<h3>Diagram</h3>
<img src="assets/images/diagram2x.png" height="330" width="505">
<h3>Drawing Tools</h3>
- Start drawing on white pixels to draw with black pixels.
<br>- Start drawing on black pixels to draw with white pixels.
<ul>
<li><span class="icon-pencil"></span><b>Pencil</b> - Touch in the Drawing Area to draw. You can also drag.
<li><span class="icon-fill"></span><b>Paint Blop</b> - Touch in the Drawing Area to fill an enclosed region.
<li><span class="icon-line"></span><b>Line</b> - Drag to draw a straight line.
<li><span class="icon-square"></span><b>Square / Rectangle</b> - Drag from corner to corner to draw a rectangle.
<li><span class="icon-circle"></span><b>Circle / Ellipse</b> - Drag from center point to circumference to draw an ellipse.
</ul>
<h3>Frame Tools</h3>
<ul>
<li><span class="icon-up"></span><span class="icon-left"></span><span class="icon-down"></span><span class="icon-right"></span><b>Nudge</b> - Touch any nudge arrow to move the entire drawing one pixel in the direction indicated by the arrow. The drawing will wrap around the edges.
<li><span class="icon-clear"></span><b>Clear</b> - Erase the entire frame.
<li><span class="icon-invert"></span><b>Invert</b> - Invert the colors of the drawing.
<li><span class="icon-life"></span><b>Life</b> - The miracle of life.
<li><span class="icon-copy"></span><b>Copy</b> - Touch this tool once to enter copy mode. Then touch a frame selector to copy the current frame to that frame. Or touch the copy tool again to cancel.
<li><span class="icon-undo"></span><b>Undo</b> - Touch to fix your mistake.
<li><span class="icon-redo"></span><b>Redo</b> - Touch to fix your mistaken undo.
</ul>
<h3>Frame Selectors</h3>
Touch these to select different frames of your animation.
<h3>Drawing Area</h3>
This is where you create your masterpiece.
<h3>Animation Preview</h3>
Watch your animation in a continuous loop.
<h3>Export Button</h3>
Press this button to export your masterpiece to your Personal Computer using the Super Export Cable.
</div>
</div>
<a class="github sticker" href="https://github.com/walsh9/super-micro-paint/" target="_blank"><img src="assets/images/github-sticker.png" height="200" width="200"></a>
<a class="twitter sticker" href="https://twitter.com/supermicropaint/" target="_blank"><img src="assets/images/twitter-sticker.png" height="200" width="200"></a>
</div>
</body>
</html>