forked from auc0le/JT-Edit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (117 loc) · 6.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JT Editor</title>
<script src="app.js"></script>
<!-- CDN content replaced with server-side assets -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> -->
<script src="saveas.js"></script>
<script src="FileSaver.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>JT Edit - For CoolLED1248</h2>
<div class="icon-group">
<label for="sizeDropdown">LED Size:</label>
<select id="sizeDropdown">
<option value="16x32">16x32</option>
<option value="16x64">16x64</option>
<option value="16x96" selected>16x96</option>
<option value="16x128">16x128</option>
<option value="16x192">16x192</option>
<option value="32x128">32x128</option>
<option value="32x160">32x160</option>
<option value="32x192">32x192</option>
</select>
<label for="modeDropdown">Mode:</label>
<select id="modeDropdown">
<option value="static" selected>Static</option>
<option value="animation">Animation</option>
</select>
<label for="pixelSizeInput">Pixel Size:</label>
<input type="number" id="pixelSizeInput" min="1" value="8" max="20">
<!-- CDN content replaced with server-side assets -->
<!--<button id="paintBucketButton" title="Paint Bucket"><i class="fas fa-fill-drip"></i></button>
<i id="paletteIcon" class="fas fa-palette" ></i> -->
<a id="paintBucketButton" title="Paint Bucket"><img class="icons" src="icons/paint-bucket.png"></img></a>
<a id="paletteIcon" title="LMB Color"><img class="icons" src="icons/paletteBlack.png"></img></a>
<select id="customColorPicker">
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#FFFF00">Yellow</option>
<option value="#FF00FF">Magenta</option>
<option value="#00FFFF">Cyan</option>
</select>
<a id="rtclickIcon" title="RMB Color"><img class="icons" src="icons/rtBlack.png"></img></a>
<a id="RMBpaintBucketButton" title="RMB Paint Bucket"><img class="icons" src="icons/paint-bucket.png"></img></a>
<!-- CDN content replaced with server-side assets -->
<!--<i class="fas fa-folder" onclick="openFileInput()"></i>
<input type="file" id="imageInput" accept=".jpeg, .jpg, .jt">
<i class="fas fa-save" onclick="saveToFile()"></i>-->
<a onclick="openFileInput()" title="Open File"><img class="icons" src="icons/folder.png"></img></a>
<input type="file" id="imageInput" accept=".jpeg, .jpg, .jt">
<a onclick="saveToFile()" title="Save File"><img class="icons" src="icons/save.png"></img></a>
<label for="formatDropdown">Format:</label>
<select id="formatDropdown">
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="png">png</option>
</select>
<!-- CDN content replaced with server-side assets -->
<!--<i id="debugToggle" class="fa-solid fa-bug"></i>-->
<a id="debugToggle" title="Show/Hide RGB Array"><img class="icons" src="icons/bug.png"></a>
</div>
<div id="pixelCanvasContainer">
<div id="pixelCanvas"></div>
</div>
<!-- CDN content replaced with server-side assets -->
<!--<div id="controlButtons">
<button id="backButton"><i class="fas fa-step-backward"></i></button>
<button id="playPauseButton"><i class="fas fa-play"></i>/<i class="fas fa-pause"></i></button>
<button id="forwardButton"><i class="fas fa-step-forward"></i></button>
<button id="plusButton"><i class="fas fa-plus"></i></button>
<button id="cloneFrameButton" title="Clone Frame"><i class="fas fa-clone"></i></button>
<span id="frameDisplay">Frame: <span id="currentFrame">1</span>/<span id="totalFrames">1</span></span>
Delay:<input style="width: 8ch;height: 2ch;"type="number" id="delay_id" min="50" value="250" max="1000" step="50">
</div>
<div id="directionButtons">
<button id="upButton" title="Shift Up"><i class="fas fa-arrow-up"></i></button>
<button id="leftButton" title="Shift Left"><i class="fas fa-arrow-left"></i></button>
<button id="downButton" title="Shift Down"><i class="fas fa-arrow-down"></i></button>
<button id="rightButton" title="Shift Right"><i class="fas fa-arrow-right"></i></button>
</div>-->
<div id="controlButtons">
<div style="text-align:center;"><span id="frameDisplay">Frame: <span id="currentFrame">01</span>/<span id="totalFrames">01</span></span>
<span id="delaytxt">Delay:</span><input id="delay_id" type="number" min="50" value="250" max="1000" step="50">
</div>
<div style = "padding-bottom:10px;"></div>
<button id="backButton" title="Back">|◀</button>
<button id="playPauseButton" title="Play/Pause">▶||</button>
<button id="forwardButton" title="Forward">▶|</button>
<button id="plusButton" title="Add Frame">+</button>
<button id="minusButton" title="Delete Frame">-</button>
<button id="swapButton" title="Swap Frames">↹</button>
<button id="cloneFrameButton" title="Clone Frame"><img style="width:22px;height:22px;" src="icons/clone.png"></img></button>
</div>
<div id="directionButtons">
<button id="upButton" title="Shift Up">▲</button>
<button id="downButton" title="Shift Down"> ▼</button>
<button id="leftButton" title="Shift Left"> ◀</button>
<button id="rightButton" title="Shift Right"> ▶</button>
</div>
<div id="arrayOutput">
<pre id="textDisplay" style="display: none;"></pre>
</div>
<!--swap dialog -->
<div id='swapdiagid' class='swapdiag'>
<div class='swapdiag-content'>
</div></div>
<!--swap dialog -->
</body>
</html>