wip

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "pixsy"
-version = "0.72.7"
+version = "0.72.8"
 description = "convert images to Bitsy rooms"
 authors = ["Max Bradbury <max@tinybird.info>"]
 edition = "2018"

README.md

@@ -1,3 +1,57 @@
 # pixsy
 
-convert images to rooms for use in Bitsy
+a tool for [Bitsy Game Maker](http://bitsy.org). 
+upload any image and convert it into a room.
+
+## credits
+
+made by [Max Bradbury](http://tinybird.info/). 
+makes use of my own [bitsy parser](https://crates.io/crates/bitsy-parser) library.
+
+uses the [Croppie](https://foliotek.github.io/Croppie/) image crop plugin 
+by [Foliotek](https://www.foliotek.com/)
+
+uses [wasm-bindgen](https://crates.io/crates/wasm-bindgen) to automate WebAssembly bindings.
+
+## thanks
+
+to [Adam Le Doux](http://ledoux.io/) for creating the wonderful and inspiring Bitsy
+
+to [Mark Wonnacott](https://kool.tools/) for their support, encouragement and inspiration
+
+and to everyone in the bitsy community!
+
+## contributing
+
+forks and pull requests welcome!
+
+### development prerequisites
+
+* [rust/cargo](https://rustup.rs/)
+* [pug](https://pugjs.org/)
+* [less](http://lesscss.org/)
+* a bash shell for the build script
+
+## bugs
+
+when importing images, some pixels have errors. 
+it seems to only happen for pixels surrounded at the top and left:
+```
+111    111
+100 => 110
+100    100
+```
+
+pixsy does not work in the Itch desktop program 
+because their bundled version of Chromium does not support WebAssembly.
+
+## to do
+
+* add alternative dithering options (Atkinson, Bayer 8×8)
+* add a 'smoothing' (noise reduction?) stage to remove errant pixels
+
+## could do
+
+* reimplement tile reuse option
+* add camera support so users can take a pic instead of uploading an image
+* allow user to draw to canvas

TODO.md

@@ -1,6 +0,0 @@
-# todo
-
-* if image is exactly 128×128, *don't* crop
-* tile reuse
-* noise reduction (remove lonely pixels)
-* implement Atkinson and Bayer dithering options

deploy.sh

@@ -1,7 +1,6 @@
 #! /usr/bin/env bash
 
-./build.sh
 rm -rf dist
 mkdir dist
-cp -r README.md LICENSE index.html script.js background.png pkg includes dist
+cp -r README.md LICENSE index.html script.js pkg includes old dist
-# butler push dist ruin/pixsy:html
+butler push dist ruin/pixsy:html

includes/cropper.css

@@ -1,122 +0,0 @@
-.slider[type='range'] {
-    -webkit-appearance: none;
-    margin: 9px 0;
-    width: 100%
-}
-
-.slider[type='range']:focus {
-    outline: 0
-}
-
-.slider[type='range']::-webkit-slider-runnable-track {
-    cursor: pointer;
-    height: 5px;
-    width: 100%;
-    background: #008ecc;
-    border: none
-}
-
-.slider[type='range']::-webkit-slider-thumb {
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    height: 18px;
-    width: 18px;
-    -webkit-appearance: none;
-    margin-top: -6.5px
-}
-
-.slider[type='range']::-moz-range-track {
-    cursor: pointer;
-    height: 5px;
-    width: 100%;
-    background: #008ecc;
-    border: none
-}
-
-.slider[type='range']::-moz-range-thumb {
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    height: 18px;
-    width: 18px
-}
-
-.slider[type='range']::-ms-track {
-    cursor: pointer;
-    height: 5px;
-    width: 100%;
-    background: transparent;
-    border-color: transparent;
-    border-width: 9px 0;
-    color: transparent
-}
-
-.slider[type='range']::-ms-fill-lower {
-    background: #008ecc;
-    border: none
-}
-
-.slider[type='range']::-ms-fill-upper {
-    background: #008ecc;
-    border: none
-}
-
-.slider[type='range']::-ms-thumb {
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    height: 18px;
-    width: 18px;
-    margin-top: 0
-}
-
-
-.cropper {
-    display: inline-block
-}
-
-.cropper canvas {
-    border-radius: 3px
-}
-
-.cropper canvas:hover {
-    cursor: move
-}
-
-.cropper-tools {
-    margin-top: 15px;
-    text-align: center
-}
-
-.cropper-zoom {
-    display: inline-block
-}
-
-.cropper-zoom .slider {
-    margin: 0 10px;
-    width: 225px
-}
-
-.cropper-zoom .icon {
-    margin-top: 2px;
-    font-size: 18px
-}
-
-.cropper-zoom .icon:last-child {
-    font-size: 24px
-}
-
-.cropper .icon {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    fill: rgba(0, 0, 0, .54);
-    vertical-align: middle;
-}

includes/croppie.css

@@ -0,0 +1,250 @@
+.croppie-container {
+    width: 100%;
+    height: 100%;
+}
+
+.croppie-container .cr-image {
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
+    max-width: none;
+}
+
+.croppie-container .cr-boundary {
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+}
+
+.croppie-container .cr-viewport,
+.croppie-container .cr-resizer {
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+    z-index: 0;
+}
+
+.croppie-container .cr-resizer {
+  z-index: 2;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.croppie-container .cr-resizer-vertical,
+.croppie-container .cr-resizer-horisontal {
+  position: absolute;
+  pointer-events: all;
+}
+
+.croppie-container .cr-resizer-vertical::after,
+.croppie-container .cr-resizer-horisontal::after {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid black;
+    background: #fff;
+    width: 10px;
+    height: 10px;
+    content: '';
+}
+
+.croppie-container .cr-resizer-vertical {
+  bottom: -5px;
+  cursor: row-resize;
+  width: 100%;
+  height: 10px;
+}
+
+.croppie-container .cr-resizer-vertical::after {
+    left: 50%;
+    margin-left: -5px;
+}
+
+.croppie-container .cr-resizer-horisontal {
+  right: -5px;
+  cursor: col-resize;
+  width: 10px;
+  height: 100%;
+}
+
+.croppie-container .cr-resizer-horisontal::after {
+    top: 50%;
+    margin-top: -5px;
+}
+
+.croppie-container .cr-original-image {
+    display: none;
+}
+
+.croppie-container .cr-vp-circle {
+    border-radius: 50%;
+}
+
+.croppie-container .cr-overlay {
+    z-index: 1;
+    position: absolute;
+    cursor: move;
+    touch-action: none;
+}
+
+.croppie-container .cr-slider-wrap {
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
+}
+
+.croppie-result {
+    position: relative;
+    overflow: hidden;
+}
+
+.croppie-result img {
+    position: absolute;
+}
+
+.croppie-container .cr-image,
+.croppie-container .cr-overlay,
+.croppie-container .cr-viewport {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+}
+
+/*************************************/
+/***** STYLING RANGE INPUT ***********/
+/*************************************/
+/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+/*************************************/
+
+.cr-slider {
+    -webkit-appearance: none;
+/*removes default webkit styles*/
+	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
+    width: 300px;
+/*required for proper track sizing in FF*/
+    max-width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: transparent;
+}
+
+.cr-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+
+.cr-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+
+.cr-slider:focus {
+    outline: none;
+}
+/*
+.cr-slider:focus::-webkit-slider-runnable-track {
+background: #ccc;
+}
+*/
+
+.cr-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+
+.cr-slider::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+
+/*hide the outline behind the border*/
+.cr-slider:-moz-focusring {
+    outline: 1px solid white;
+    outline-offset: -1px;
+}
+
+.cr-slider::-ms-track {
+    width: 100%;
+    height: 5px;
+    background: transparent;
+/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
+	border-width: 6px 0;
+	color: transparent;/*remove default tick marks*/
+}
+.cr-slider::-ms-fill-lower {
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
+}
+.cr-slider::-ms-fill-upper {
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
+}
+.cr-slider::-ms-thumb {
+	border: none;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	background: #ddd;
+	margin-top:1px;
+}
+.cr-slider:focus::-ms-fill-lower {
+	background: rgba(0, 0, 0, 0.5);
+}
+.cr-slider:focus::-ms-fill-upper {
+	background: rgba(0, 0, 0, 0.5);
+}
+/*******************************************/
+
+/***********************************/
+/* Rotation Tools */
+/***********************************/
+.cr-rotate-controls {
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+	z-index: 1;
+}
+.cr-rotate-controls button {
+	border: 0;
+	background: none;
+}
+.cr-rotate-controls i:before {
+	display: inline-block;
+	font-style: normal;
+	font-weight: 900;
+	font-size: 22px;
+}
+.cr-rotate-l i:before {
+	content: '↺';
+}
+.cr-rotate-r i:before {
+	content: '↻';
+}

includes/style.less

@@ -2,6 +2,7 @@
 @page-background: #968eb5;
 @accent:          #ec6d7d;
 @text:            #464256;
+@ok:              #caec6d;
 
 * {
     box-sizing: border-box;
@@ -131,3 +132,13 @@ textarea {
     image-rendering: pixelated;
     image-rendering: crisp-edges;
 }
+
+.message {
+    background-color: @ok;
+    padding: 1em;
+    text-align: left;
+    
+    &#game-data-errors {
+        background-color: @accent;
+    }
+}

index.pug

@@ -4,8 +4,8 @@ html(lang="en-gb")
         meta(charset="utf-8")
         title pixsy
         link(rel="stylesheet" href="includes/style.css")
-        link(rel="stylesheet" href="includes/cropper.css")
+        link(rel="stylesheet" href="includes/croppie.css")
-        script(src="includes/cropper.min.js")
+        script(src="includes/croppie.min.js")
     body
         header
             h1
@@ -14,7 +14,7 @@ html(lang="en-gb")
             p.
                 convert images to Bitsy rooms
                 |
-                #[a(href="./old/") old version]
+                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") old version]
                 |
                 #[a(href="mailto:max@tinybird.info") email]
                 |
@@ -34,6 +34,9 @@ html(lang="en-gb")
                     autocomplete="off"
                 )
 
+                p#game-data-result.message(style="display: none;")
+                p#game-data-errors.message(style="display: none;")
+
                 button.pagination.prev previous
                 button.pagination.next#game-data-next(disabled=true) next
             .page.image#page-image
@@ -41,7 +44,7 @@ html(lang="en-gb")
 
                 .image-container
                     input#image(type="file" accept="image/*")
-                    #crop
+                    #crop(style="display: none;")
 
                 button.pagination.prev previous
                 button.pagination.next#image-next(disabled=true) next
@@ -69,9 +72,9 @@ html(lang="en-gb")
 
                                 #new-palette(style="display: none;")
                                     .half
-                                        input#colour-background(type="color" value="#2f4ac9")
+                                        input#colour-background(type="color" value="#000000")
                                     .half
-                                        input#colour-foreground(type="color" value="#8798fe")
+                                        input#colour-foreground(type="color" value="#ffffff")
 
                                 label
                                     input#dither(type="checkbox" checked=true)

script.js

@@ -12,10 +12,6 @@ import init, {
     set_room_name,
 } from './pkg/pixsy.js';
 
-if (typeof WebAssembly !== "object") {
-    window.location = "./old/"
-}
-
 // stolen from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
 function download(filename, text) {
     let element = document.createElement('a');
@@ -60,6 +56,10 @@ function readFile(input, callback, type = "text") {
 }
 
 async function run() {
+    if (typeof WebAssembly !== "object") {
+        window.location = "http://tinybird.info/image-to-bitsy/old/"
+    }
+
     await init();
 
     const buttonAddImage         = el("add");
@@ -72,17 +72,23 @@ async function run() {
     const buttonNewGame          = el("new");
     const buttonReset            = el("reset");
     const checkboxDither         = el("dither");
+    const divCroppie             = el("crop");
     const divNewPalette          = el("new-palette");
     const inputBrightness        = el("brightness");
     const inputColourBackground  = el("colour-background");
     const inputColourForeground  = el("colour-foreground");
     const inputRoomName          = el("room-name");
+    const paragraphGameResult    = el("game-data-result");
+    const paragraphGameErrors    = el("game-data-errors");
     const selectPalette          = el("palette");
     const textareaGameDataInput  = el("game-data");
     const textareaGameDataOutput = el("output");
 
-    const cropper = new Cropper({ width: 192, height: 192 });
+    const croppie = new Croppie(divCroppie, {
-    let cropperRendered = false;
+        viewport: {width: 128, height: 128, type: 'square'},
+        boundary: {width: 256, height: 256},
+        enableZoom: true,
+    });
 
     // hide all pages except start page
     for (let page of document.getElementsByClassName('page')) {
@@ -95,6 +101,10 @@ async function run() {
         pageButton.addEventListener('touchend', pagination);
     }
 
+    // croppie needs to be on screen to work;
+    // halt pagination until we're finished gathering the results
+    buttonImageProceed.removeEventListener("click", pagination);
+
     function new_game() {
         load_default_game();
         textareaGameDataInput.value = output();
@@ -118,7 +128,6 @@ async function run() {
     el("game").addEventListener("change", function() {
         readFile(this, function (e) {
             textareaGameDataInput.value = e.target.result;
-            console.log(load_game(e.target.result));
             checkGameData();
         }, "text");
     });
@@ -145,35 +154,46 @@ async function run() {
     }
 
     function checkGameData() {
-        if (textareaGameDataInput.value.length > 0) {
+        paragraphGameResult.style.display = "none";
+        paragraphGameErrors.style.display = "none";
+
+        let game_data = textareaGameDataInput.value;
+
+        if (game_data.length === 0) {
+            buttonGameDataProceed.setAttribute("disabled", "disabled");
+            return;
+        }
+
+        let result = load_game(game_data);
+        console.debug(result);
+        let parts = result.split(". Errors: ");
+            result = parts[0];
+        let errors = parts[1];
+
+        paragraphGameResult.innerText     = result;
+        paragraphGameResult.style.display = "block";
+
+        if (errors) {
+            paragraphGameErrors.innerText = errors;
+            paragraphGameErrors.style.display = "block";
+        }
+
+        if (result.startsWith("Error")) {
+            buttonGameDataProceed.setAttribute("disabled", "disabled");
+        } else {
             buttonGameDataProceed.removeAttribute("disabled");
             setPaletteDropdown();
-        } else {
-            buttonGameDataProceed.setAttribute("disabled", "disabled");
         }
     }
 
     textareaGameDataInput.addEventListener("change", checkGameData);
-    textareaGameDataInput.addEventListener("keyup",  checkGameData);
     checkGameData();
 
     el('image').addEventListener('change', function () {
         readFile(this, function (e) {
-            if ( ! cropperRendered) {
+            croppie.bind({url: e.target.result, zoom: 0});
-                cropper.render("#crop");
+            divCroppie.style.display = "block";
-                cropperRendered = true;
+            buttonImageProceed.removeAttribute("disabled");
-                buttonImageProceed.removeAttribute("disabled");
-            }
-
-            if (load_image(e.target.result) === "128×128") {
-                // we can't just do `buttonImageProceed.click()`
-                // because this calls the handleImage() function, which we don't want here
-                el("page-image").style.display = "none";
-                el("page-room").style.display = "block";
-                loadPreview();
-            } else {
-                cropper.loadImage(e.target.result);
-            }
         }, "image");
     });
 
@@ -182,8 +202,18 @@ async function run() {
     }
 
     function handleImage() {
-        console.log(load_image(cropper.getCroppedImage()));
+        croppie.result({
-        loadPreview();
+            type: "base64",
+            size: "viewport",
+            format: "png",
+        }).then((result) => {
+            console.log("Loading image: " + load_image(result));
+
+            el("page-image").style.display = "none";
+            el("page-room" ).style.display = "block";
+
+            loadPreview();
+        });
     }
 
     buttonImageProceed.addEventListener("click",    handleImage);
@@ -224,7 +254,7 @@ async function run() {
     });
 
     function addRoom() {
-        console.log(add_room());
+        el("added").innerText = add_room();
         textareaGameDataOutput.value = output();
     }
 
@@ -255,8 +285,8 @@ async function run() {
         inputRoomName.value         = "";
         selectPalette.innerHTML     = "";
         divNewPalette.style.display = "none";
-        inputColourBackground.value = "#2f4ac9";
+        inputColourBackground.value = "#000000";
-        inputColourForeground.value = "#8798fe";
+        inputColourForeground.value = "#ffffff";
         checkboxDither.checked      = true;
     }
 

src/lib.rs

@@ -76,16 +76,21 @@ pub fn load_game(game_data: String) -> String {
     let result = Game::from(game_data);
 
     match result {
-        Ok((game, _errs)) => {
+        Ok((game, errors)) => {
             let palette_id = game.palette_ids()[0].clone();
+            let game_name = game.name.clone();
+            let errors: Vec<String> = errors.iter().map(|err| format!("{}", err)).collect();
+
             state.game    = Some(game);
             state.palette = SelectedPalette::Existing { id: palette_id };
-            format!("Loaded game")
+
-        },
+            format!("Loaded game: {}. Errors: {}", game_name, errors.join(", "))
+        }
         _ => {
             state.game    = None;
             state.palette = SelectedPalette::None;
-            format!("{}", result.err().unwrap())
+
+            format!("Error: {}", result.err().unwrap())
         }
     }
 }
@@ -167,18 +172,20 @@ pub fn get_palettes() -> String {
 
     let mut palette_objects = json::JsonValue::new_array();
 
-    for palette in &state.game.as_ref().unwrap().palettes {
+    if state.game.is_some() {
-        let mut object = json::JsonValue::new_object();
+        for palette in &state.game.as_ref().unwrap().palettes {
+            let mut object = json::JsonValue::new_object();
 
-        object.insert("id", palette.id.clone()).unwrap();
+            object.insert("id", palette.id.clone()).unwrap();
 
-        object.insert(
+            object.insert(
-            "name",
+                "name",
-            palette.name.clone().unwrap_or(
+                palette.name.clone().unwrap_or(
-                format!("Palette {}", palette.id))
+                    format!("Palette {}", palette.id))
-        ).unwrap();
+            ).unwrap();
 
-        palette_objects.push(object).unwrap();
+            palette_objects.push(object).unwrap();
+        }
     }
 
     json::stringify(palette_objects)
@@ -392,4 +399,16 @@ mod test {
         // todo what? why are extraneous pixels appearing in the output tiles?
         assert_eq!(output(), include_str!("test-resources/expected.bitsy"));
     }
+
+    #[test]
+    fn palettes() {
+        load_default_game();
+
+        assert_eq!(crate::get_palettes(), "[{\"id\":\"0\",\"name\":\"blueprint\"}]");
+    }
+
+    #[test]
+    fn no_palettes() {
+        assert_eq!(crate::get_palettes(), "[]");
+    }
 }