PixelGrid-Cloud/index.html at main · AlphaPixel/PixelGrid-Cloud · 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
202
203
204
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>PixelGrid.Cloud: Image Processor for WPlace.live and similar</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" href="styles.css" />
</head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PC96RRNQTF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-PC96RRNQTF');
</script>


<link rel="icon" href="PixelGridLogoicon.png" sizes="32x32" type="image/png">
<link rel="icon" href="PixelGridLogoicon.png" sizes="256x256" type="image/png">
<link rel="icon" href="PixelGridLogoicon.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="PixelGridLogoicon.png" sizes="180x180" type="image/png">
<meta name="msapplication-TileImage" content="PixelGridLogoicon.png">

<body>
  <main class="container">
    <section class="controls" aria-label="Controls panel">
      <div class="header-row">
        <button id="helpBtn" class="help-btn" title="How to use this tool">Help</button>
      </div>

      <div class="field">
        <label for="fileInput">Upload image (PNG or JPG)</label>
        <input id="fileInput" type="file" accept="image/png,image/jpeg"
               title="Select a PNG or JPG. Processing happens locally in your browser." />
      </div>

      <div class="grid2">
        <div class="field">
          <label for="maxX">Max X Dimension</label>
          <input id="maxX" type="number" min="1" placeholder="512" value="512"
                 title="Target width in pixels. Leave empty to auto-compute from height." />
        </div>
        <div class="field">
          <label for="maxY">Max Y Dimension</label>
          <input id="maxY" type="number" min="1" placeholder=""
                 title="Target height in pixels. Leave empty to auto-compute from width." />
        </div>
      </div>

      <fieldset class="field" title="Choose the resampling filter used to reach your target size.">
        <legend>Resample</legend>
        <label title="Bilinear: fast, smooth. Good default.">
          <input type="radio" name="resample" value="bilinear" checked /> Bilinear
        </label>
        <label title="Bicubic (Mitchell-Netravali): slower, usually slightly sharper/smoother transitions.">
          <input type="radio" name="resample" value="bicubic" /> Bicubic (Mitchell-Netravali)
        </label>
      </fieldset>

      <fieldset class="field" title="Select a fixed palette for quantization.">
        <legend>Palette</legend>
        <label title="WPlace Basic: the free 32-color palette.">
          <input type="radio" name="palette" value="basic" checked /> WPlace Basic (32)
        </label>
        <label title="WPlace Extended: 64-color palette that is not free.">
          <input type="radio" name="palette" value="extended" /> WPlace Extended (64)
        </label>
        <label title="LEGO&trade; Brick colors from the BrickLink catalog; good for physical LEGO mosaics.">
          <input type="radio" name="palette" value="lego" /> Lego&trade; Bricks
        </label>
      </fieldset>

      <fieldset class="field" title="Choose dithering strategy before mapping to the palette.">
        <legend>Dither</legend>
        <label title="None: direct nearest-color mapping; clean but can band.">
          <input type="radio" name="dither" value="none" checked /> None
        </label>
        <label title="Ordered (Bayer): patterned dithering; stable, grid-like texture.">
          <input type="radio" name="dither" value="ordered" /> Ordered (Bayer)
        </label>
        <label title="Error Diffusion (Floyd–Steinberg): noise-like dithering; often best for photos.">
          <input type="radio" name="dither" value="diffusion" /> Error Diffusion (Floyd–Steinberg)
        </label>
        <label title="Dizzy: error diffusion in randomized pixel order; pushes artifacts higher-frequency.">
          <input type="radio" name="dither" value="dizzy" /> Dizzy (randomized diffusion)
        </label>
      </fieldset>


      <fieldset class="field" title="Optional: enlarge the final pixel art and overlay a counting grid.">
        <legend>Scale & Grid</legend>

        <div class="field">
          <label title="Enable to enlarge by Nx using nearest neighbor and overlay a 1px grid every N pixels. Leave off for Blue Marble.">
            <input id="enlargeToggle" type="checkbox" />
            Enlarge and overlay grid
          </label>
        </div>

        <div class="grid2">
          <div class="field">
            <label for="scaleFactor">Scale/Grid step</label>
            <input id="scaleFactor" type="number" min="1" value="5"
                   title="Integer factor N. Upscales the image by Nx, and spaces grid lines every N pixels." disabled />
          </div>
          <div class="field">
            <label for="gridColor">Grid color</label>
            <input id="gridColor" type="color" value="#000000"
                   title="Color of the 1px grid lines overlaid on the upscaled image." disabled />
          </div>
        </div>
      </fieldset>

      <div class="actions">
        <button id="processBtn" disabled title="Run the full pipeline with the chosen settings.">Process</button>
        <button id="downloadBtn" disabled title="Download the PNG shown in the preview.">Download PNG</button>
      </div>
    </section>

    <section class="preview" aria-label="Output preview">
      <div class="canvas-wrap">
		  <div class="canvas-overlay" aria-hidden="true">
			<h1>PixelGrid Cloud</h1>
			<h2>By AlphaPixel and Wild Iris Marketing</h2>
			<p>Select Image to Begin</p>
		  </div>
        <canvas id="canvas"></canvas>
      </div>
      <div class="meta" id="meta" title="Status and image details"></div>
    </section>
  </main>

  <!-- Help Modal -->
  <div id="helpModal" class="modal" aria-hidden="true" role="dialog" aria-labelledby="helpTitle">
    <div class="modal-backdrop" id="helpBackdrop"></div>
    <div class="modal-card">
      <button class="modal-close" id="helpClose" aria-label="Close help">×</button>
      <h2 id="helpTitle">How to use</h2>
      <pre class="help-steps" aria-live="polite">
1. Choose a file (PNG or JPG supported).

2. Set the X and/or Y pixel output size (if you only set one, the other will be computed proportionally). Defaults to 512 wide, which is pretty big to draw by hand.

3. Choose the resize filtering method (bilinear or bicubic). Either should be fine.

4. Choose the palette. WPlace Basic is the "free" 32-color palette. WPlace Extended is the 64-color palette that's not free. LEGO&trade; Bricks uses common BrickLink LEGO colors and is useful if you're making a LEGO mosaic.

5. Choose dithering, or not. Dithering can make true-color images look a lot better but approximating missing colors with regular or noise-based patterns of available colors. None is fine for a few solid colors. Ordered is good for synthetic/geometric images with more unvarying solid colors. Error Diffusion and Dizzy are better for natural true-color images.

6. Choose whether you want blocky upscaling and a grid, and set the scale/grid size and overlay grid color. This blows up each final pixel using nearest neighbor (non-interpolated) enlarge by a factor of x (defaults to 5) and then overlays a grid of user-defined color (defaults to magenta) to help you see individual pixels in a large mass of common color. You do not want this step if you're using Blue Marble ( https://github.com/erickcastillovillegas-hub/wplace-bluemarble )

7. Click the Download PNG button to download an image locally (with the optional upscaling/grid).

This is not a script to draw the image on wplace for you. We don't do botting. It's just a tool to help you create a reference image that humans can follow to design an image to draw by hand.

It's entirely Javascript and runs only in your browser. There's no server processing. It's hosted on <a href="https://pages.cloudflare.com/">Cloudflare Pages</a>.
      </pre>
    </div>
  </div>

  <!-- Footer credits -->
  <footer class="site-footer" role="contentinfo">
    <ul class="credit-list">
      <li class="credit-item">
        <span>
          Version <span id="footerVersionString">unknown</span>
        </span>
      </li>
      <li class="credit-item">
        <img src="AlphaPixelDevIcon128x128.png" alt="" class="credit-icon" />
        <span>
          <a href="https://alphapixeldev.com" target="_blank" rel="noopener">Imaging software development by AlphaPixel Development ( https://alphapixeldev.com )</a>
        </span>
      </li>
      <li class="credit-item">
        <img src="WildIrisMarketingIcon128x128.png" alt="" class="credit-icon" />
        <span>
          <a href="https://wildirismarketing.com/" target="_blank" rel="noopener">Website design/development and hosting in Evergreen, Colorado by Wild Iris Marketing ( https://wildirismarketing.com/ )</a>
        </span>
      </li>
      <li class="credit-item">
        <img src="github-mark-white128x128.png" alt="" class="credit-icon" />
        <span>
          Open Source on GitHub
          <a href="https://github.com/AlphaPixel/PixelGrid-Cloud" target="_blank" rel="noopener">PixelGrid-Cloud
          ( https://github.com/AlphaPixel/PixelGrid-Cloud )</a>
        </span>
      </li>
      <li class="credit-item">
        <span>
          This site is not affiliated with LEGO A/S, also known as the LEGO Group.
        </span>
      </li>
    </ul>
  </footer>

  <script src="version.js"></script>
  <!-- LEGO palette (inspiration: https://github.com/debkbanerji/lego-art-remix/blob/master/app/js/bricklink-colors.js ) -->
  <script src="lego-palette.js"></script>
  <script src="app.js"></script>
</body>
</html>