pixel2bytes/index.html at main · Raisback/pixel2bytes · 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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel2Bytes</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-theme-main min-h-screen p-4 md:p-8 flex justify-center">

    <div class="editor-container w-full">
        <h1 class="text-3xl font-extrabold text-stone-100 mb-4">Pixel<span class="text-amber-500">2</span>Bytes  <span class="text-amber-500 ">Studio</span>  <span class="text-lg align-top">By Raisback</span> </h1>


        <div class="tab-group">
            <button class="tab-btn active-tab" data-tab="editor">Frame Editor</button>
            <button class="tab-btn" data-tab="player">Animation Player</button>
        </div>


        <div id="tab-content">


            <div id="editor" class="tab-page">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">


                    <div class="lg:col-span-3 space-y-6">

                        <!-- Tools -->
                        <div class="bg-panel p-4 rounded-xl">
                            <h2 class="text-xl font-semibold mb-3 text-stone-100">Tools</h2>
                            <div id="toolPanel" class="grid grid-cols-4 gap-2">
                                <!-- Tools injected here -->
                            </div>

                        </div>

                        <!-- Config -->
                        <div class="bg-panel p-4 rounded-xl">
                            <h2 class="text-xl font-semibold mb-3 text-stone-100">Config</h2>
                            <div class="mb-4">
                                <label for="iconWidth" class="block text-sm font-medium text-stone-300">Width (X)</label>
                                <input type="number" id="iconWidth" value="16" min="1" max="128" class="mt-1 block w-full rounded-md border-stone-600 bg-stone-700 text-stone-100 shadow-sm p-2 border">
                            </div>
                            <div class="mb-4">
                                <label for="iconHeight" class="block text-sm font-medium text-stone-300">Height (Y)</label>
                                <input type="number" id="iconHeight" value="16" min="1" max="64" class="mt-1 block w-full rounded-md border-stone-600 bg-stone-700 text-stone-100 shadow-sm p-2 border">
                                <p class="text-xs text-stone-400 mt-1">Export is Row-Major (Y, Bank, Bit).</p>
                            </div>
                            <button id="applyResBtn" class="action-btn w-full bg-amber-600 text-stone-900 hover:bg-amber-500 border-amber-700">
                                Apply Resolution
                            </button>
                        </div>
                    </div>

                    <!-- CENTER PANEL: Canvas -->
                    <div class="lg:col-span-6 bg-panel p-6 rounded-xl flex flex-col items-center">
                        <h2 class="text-xl font-semibold text-stone-100 mb-4">
                            Frame <span id="currentFrameNum" class="text-accent">1</span> (<span id="dimsText">16x16</span>)
                        </h2>
                        <div class="max-w-full overflow-hidden relative">
                            <canvas id="gridCanvas" width="512" height="512"></canvas>
                        </div>

                        <div class="mt-4 flex space-x-4">
                            <button id="clearBtn" class="action-btn bg-red-600 text-white hover:bg-red-500 border-red-700">
                                Clear Active Layer
                            </button>
                            <button id="importBtn" class="action-btn bg-purple-600 text-white hover:bg-purple-500 border-purple-700">
                                Paste & Import C Array
                            </button>
                        </div>
                    </div>

                    <!-- RIGHT PANEL: Frames and Layers -->
                    <div class="lg:col-span-3 space-y-6">

                        <!-- Frame Selector -->
                        <div class="bg-panel p-4 rounded-xl">
                            <h2 class="text-xl font-semibold mb-3 text-stone-100">Frames (<span id="totalFramesCount" class="text-accent">1</span>)</h2>
                            <div class="flex justify-between items-center mb-2">
                                <p class="text-sm font-medium text-stone-300">Sequence List</p>
                                <div id="frameNav" class="flex space-x-2">
                                    <button id="moveFrameUpBtn" class="p-1 text-lg text-amber-500 hover:text-amber-300 disabled:opacity-50" title="Move Frame Up (Earlier)">▲</button>
                                    <button id="moveFrameDownBtn" class="p-1 text-lg text-amber-500 hover:text-amber-300 disabled:opacity-50" title="Move Frame Down (Later)">▼</button>
                                </div>
                            </div>
                            <div id="frameList" class="space-y-1 max-h-32 overflow-y-auto mb-4 border border-stone-700 p-2 rounded-lg">
                                <!-- Frames injected here -->
                            </div>
                            <div class="flex space-x-2">
                                <button id="duplicateFrameBtn" class="action-btn flex-1 bg-green-600 text-white hover:bg-green-500 border-green-700">
                                    Duplicate
                                </button>
                                <button id="blankFrameBtn" class="action-btn flex-1 bg-amber-600 text-stone-900 hover:bg-amber-500 border-amber-700">
                                    + Blank
                                </button>
                            </div>
                        </div>

                        <!-- Layers -->
                        <div class="bg-panel p-4 rounded-xl">
                            <h2 class="text-xl font-semibold mb-3 text-stone-100">Layers (Active: <span id="activeLayerName" class="text-accent">Base Layer</span>)</h2>
                            <div id="layerList" class="space-y-1 max-h-40 overflow-y-auto mb-4 border border-stone-700 p-2 rounded-lg">
                                <!-- Layers injected here -->
                            </div>
                            <button id="newLayerBtn" class="action-btn w-full bg-blue-600 text-white hover:bg-blue-500 border-blue-700">
                                + New Layer
                            </button>
                        </div>
                    </div>

                    <!-- Export Panel (Full Width) -->
                    <div class="lg:col-span-12">
                        <div class="bg-stone-900 p-4 rounded-xl shadow-lg text-white border border-stone-700">
                            <h2 class="text-xl font-semibold mb-3">C Array Export (Row-Major)</h2>

                            <!-- Generation Buttons -->
                            <div class="flex space-x-4 mb-3">
                                <button id="generateSingleFrameBtn" class="action-btn flex-1 bg-lime-600 text-stone-900 hover:bg-lime-500 border-lime-700">
                                    Generate Single Frame Array (<span id="singleFrameByteCount">0</span> bytes)
                                </button>
                                <button id="generateAnimationBtn" class="action-btn flex-1 bg-amber-600 text-stone-900 hover:bg-amber-500 border-amber-700">
                                    Generate Animation Array (<span id="animationByteCount">0</span> bytes)
                                </button>
                            </div>

                            <!-- Output Area -->
                            <div id="outputContainer" class="hidden">
                                <div id="byteOutput" class="pixel-output text-amber-300 text-xs h-32 overflow-y-auto p-2 bg-black rounded-md border border-stone-700 mb-3">Generated code will appear here.</div>

                                <div class="flex justify-end space-x-3">
                                    <button id="copyOutputBtn" class="export-control-btn bg-stone-700 text-stone-100 hover:bg-stone-600">
                                        Copy to Clipboard
                                    </button>
                                    <button id="exportCFileBtn" class="export-control-btn bg-blue-600 text-white hover:bg-blue-500">
                                        Export (Download .c file)
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Animation Player Tab Content -->
            <div id="player" class="tab-page hidden">
                <div class="flex flex-col items-center p-6 bg-panel rounded-xl">
                    <h2 class="text-2xl font-bold mb-4 text-stone-100">Animation Preview</h2>
                    <canvas id="playerCanvas" width="512" height="512"></canvas>
                    <div class="mt-6 flex items-center space-x-6">

                        <label for="speedInput" class="text-sm font-medium text-stone-300">Speed (ms/Frame):</label>
                        <input type="number" id="speedInput" value="250" min="50" max="1000" step="50" class="w-20 p-2 border rounded-md text-center bg-stone-700 text-stone-100 border-stone-600">

                        <button id="prevFrameBtn" class="p-3 bg-stone-700 text-stone-100 hover:bg-stone-600 rounded-md transition-colors text-xl font-bold border border-stone-600" title="Previous Frame">◀</button>
                        <button id="playStopBtn" class="p-4 bg-red-600 text-white hover:bg-red-500 rounded-md transition-colors text-2xl font-bold shadow-lg border border-red-700" title="Play/Stop">▶</button>
                        <button id="nextFrameBtn" class="p-3 bg-stone-700 text-stone-100 hover:bg-stone-600 rounded-md transition-colors text-xl font-bold border border-stone-600" title="Next Frame">▶</button>
                    </div>
                    <p class="mt-4 text-lg font-medium text-stone-100">
                        Current Frame: <span id="playerCurrentFrame" class="text-accent">1</span> / <span id="playerTotalFrames" class="text-accent">1</span>
                    </p>
                </div>
            </div>

        </div> <!-- End Tab Content -->

    </div>

    <!-- Import Modal -->
    <div id="importModal" class="fixed inset-0 bg-black bg-opacity-80 flex justify-center items-center z-50 hidden">
        <div class="bg-panel p-6 rounded-xl shadow-2xl w-full max-w-lg border border-stone-600">
            <h2 class="text-2xl font-bold mb-4 text-stone-100">Import C Array Data</h2>

            <textarea id="arrayInput" class="w-full h-32 p-3 border border-stone-600 bg-stone-700 text-stone-100 rounded-md font-mono text-sm resize-none focus:ring-amber-500 focus:border-amber-500" placeholder="Paste your const uint8_t array here..."></textarea>

            <div class="flex items-center justify-between mt-3 mb-4">
                <button id="previewArrayBtn" class="action-btn bg-amber-600 text-stone-900 hover:bg-amber-500 border-amber-700">Preview Array</button>
                <div class="text-sm text-stone-300">
                    <span id="previewDims">W: ? H: ?</span> | <span id="previewBytes">Bytes: ?</span>
                </div>
            </div>

            <div class="text-center mb-4 p-2 border border-dashed border-stone-600 rounded-lg">
                <h3 class="text-lg font-medium mb-2 text-stone-100">Preview</h3>
                <canvas id="previewCanvas" width="128" height="128" class="border border-stone-400 mx-auto" style="image-rendering: pixelated;"></canvas>
                <p id="previewError" class="text-red-500 mt-2 text-sm hidden">Error during parsing.</p>
            </div>

            <div class="flex justify-end space-x-3">
                <button id="cancelImportBtn" class="action-btn bg-stone-600 text-stone-100 hover:bg-stone-500 border-stone-700">Cancel</button>
                <button id="commitImportBtn" disabled class="action-btn bg-green-600 text-white opacity-50 cursor-not-allowed border-green-700">Import to Active Layer</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>