Config Changes + Color Palette in Blockly

blockly/compile.js

@@ -21,6 +21,24 @@ Blockly.fieldRegistry.register('field_bitmap', dummyField);
 
 Blockly.setLocale(en);
 
+
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+      return r + r + g + g + b + b;
+    });
+
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+        255
+     ] : null;
+  }
+
+
 const primaryColor = [54, 61, 128, 255]
 const secondaryColor = [13, 167, 63, 255]
 const tertiaryColor = [255, 63, 63, 255]
@@ -29,14 +47,19 @@ const pentaneryColor = [118, 55, 206, 255]
 
 const backgroundColor = [0, 0, 0, 0]
 
-const pixel_colors = {
-    0: backgroundColor,
-    1: primaryColor,
-    2: secondaryColor,
-    3: tertiaryColor,
-    4: quaternaryColor,
-    5: pentaneryColor,
-}
+
+var pixel_colors = ["#FFFFFF", "#000000","#4b5461","#97a9c4","#e6e5e0","#e8cb8e","#ba783d","#823b3b","#40263c","#7d5540","#c29f2d","#e2e697","#9abd31","#3c6347","#3c3045","#355a7a","#8db3b2","#e3deac","#a17886","#6e3b6a","#3e2447"]
+pixel_colors = pixel_colors.map((c) => hexToRgb(c));
+pixel_colors[0] = [0, 0, 0, 0];
+
+// const pixel_colors = {
+//     0: backgroundColor,
+//     1: primaryColor,
+//     2: secondaryColor,
+//     3: tertiaryColor,
+//     4: quaternaryColor,
+//     5: pentaneryColor,
+// }
 
 
 function bmap_representation(bmap) {
@@ -111,6 +134,7 @@ var saveBitmap = (bitmap, size, name, icon=false) => {
     for(var x in scaled) {
         for(var y in scaled[x]) {
             var color = pixel_colors[scaled[x][y]];
+            console.log(color);
 
             for(var i=0;i<4;i++) {
                 d.set(y, x, i, color[i])

blockly/src/field-bitmap.js

@@ -13,18 +13,23 @@ import Blockly from 'blockly/core';
 
 export const DEFAULT_HEIGHT = 5;
 export const DEFAULT_WIDTH = 5;
-const PIXEL_SIZE = 15;
+const PIXEL_SIZE = 30;
 const FILLED_PIXEL_COLOR = '#363d80';
 const EMPTY_PIXEL_COLOR = '#fff';
 
-const PIXEL_COLORS = {
-    0: "#fff",
-    1: "#363d80",
-    2: "#0da73f",
-    3: "#FF0000",
-    4: "#000000",
-    5: "#7637CE"
-}
+
+
+let PIXEL_COLORS = ["#FFFFFF", "#000000","#4b5461","#97a9c4","#e6e5e0","#e8cb8e","#ba783d","#823b3b","#40263c","#7d5540","#c29f2d","#e2e697","#9abd31","#3c6347","#3c3045","#355a7a","#8db3b2","#e3deac","#a17886","#6e3b6a","#3e2447"]
+
+// const PIXEL_COLORS = {
+//     0: "#fff",
+//     1: "#363d80",
+//     2: "#0da73f",
+//     3: "#FF0000",
+//     4: "#000000",
+//     5: "#7637CE"
+// }
+
 
 /**
  * Field for inputting a small bitmap image.
@@ -74,7 +79,7 @@ export class FieldBitmap extends Blockly.Field {
 
     /** Stateful variables */
     this.mouseIsDown_ = false;
-    this.valToPaintWith_ = undefined;
+    this.valToPaintWith_ = 0;
   }
 
   /**
@@ -140,8 +145,8 @@ export class FieldBitmap extends Blockly.Field {
     // Check if all contents of the arrays are either 0 or 1
     for (const row of newValue) {
       for (const cell of row) {
-        if (cell !== 0 && cell !== 1 && cell !== 2 && cell !== 3 && cell !== 4 && cell !== 5 && cell !== 6) {
-          return null;
+        if(cell > PIXEL_COLORS.length) {
+          return null
         }
       }
     }
@@ -253,7 +258,12 @@ export class FieldBitmap extends Blockly.Field {
       'div',
       'pixelContainer',
     );
+    const paletteContainer = this.createElementWithClassname_(
+      'div',
+      'paletteContainer'
+    )
     dropdownEditor.appendChild(pixelContainer);
+    dropdownEditor.appendChild(paletteContainer);
 
     this.bindEvent_(dropdownEditor, 'mouseup', this.onMouseUp_);
     this.bindEvent_(dropdownEditor, 'mouseleave', this.onMouseUp_);
@@ -293,7 +303,10 @@ export class FieldBitmap extends Blockly.Field {
     // Add control buttons below the pixel grid
     this.addControlButton_(dropdownEditor, 'Randomize', this.randomizePixels_);
     this.addControlButton_(dropdownEditor, 'Clear', this.clearPixels_);
-
+    for(var i = 0; i <Object.keys(PIXEL_COLORS).length; i++) {
+      this.addPaletteButton(paletteContainer, PIXEL_COLORS[i],i);
+    }
+
     if (this.blockDisplayPixels_) {
       this.forAllCells_((r, c) => {
         const pixel = this.getValue()[r][c];
@@ -376,6 +389,19 @@ export class FieldBitmap extends Blockly.Field {
     this.bindEvent_(button, 'click', onClick);
   }
 
+  switchPaint(event) {
+    this.valToPaintWith_ = event.target.color_id
+    console.log(this.valToPaintWith_);
+  }
+
+  addPaletteButton(parent, color, id) {
+    const button = this.createElementWithClassname_('div', 'paletteButton');
+    // button.innerHTML = buttonText;
+    button.style.backgroundColor = color;
+    button.color_id = id;
+    parent.appendChild(button);
+    this.bindEvent_(button, 'click', this.switchPaint);
+  }
   /**
    * Disposes of events belonging to the bitmap editor.
    * @private
@@ -430,14 +456,14 @@ export class FieldBitmap extends Blockly.Field {
   onMouseDownInPixel_(r, c) {
     // Toggle that pixel to the opposite of its value
 
-    var value = this.getValue()[r][c];
-    var newValue = 0;
-    newValue = value+1;
+    // var value = this.getValue()[r][c];
+    // var newValue = 0;
+    // newValue = value+1;
 
-    console.log(newValue);
-    if(newValue >= Object.keys(PIXEL_COLORS).length) {
-      newValue = 0;
-    }
+    // console.log(newValue);
+    // if(newValue >= Object.keys(PIXEL_COLORS).length) {
+    //   newValue = 0;
+    // }
 
     // if(value == 0) {
     //     newValue = 1;
@@ -449,9 +475,10 @@ export class FieldBitmap extends Blockly.Field {
 
     // const newPixelValue = 1 - this.getValue()[r][c];
 
-    this.setPixel_(r, c, newValue);
+    console.log(this.valToPaintWith_);
+    this.setPixel_(r, c, this.valToPaintWith_);
     this.mouseIsDown_ = true;
-    this.valToPaintWith_ = newValue;
+    // this.valToPaintWith_ = newValue;
   }
 
   /**
@@ -476,7 +503,7 @@ export class FieldBitmap extends Blockly.Field {
    */
   onMouseUp_() {
     this.mouseIsDown_ = false;
-    this.valToPaintWith_ = undefined;
+    // this.valToPaintWith_ = undefined;
   }
 
   /**
@@ -616,4 +643,13 @@ Blockly.Css.register(`
 .controlButton {
   margin: 5px 0;
 }
+.paletteButton {
+  width: 32px;
+  height: 32px;
+}
+.paletteContainer {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 2px solid black;
+}
 `);

blockly/src/index.css

@@ -243,4 +243,8 @@ pre, code {
   }
   .flash {
     opacity: 1 !important;
+  }
+
+  .blocklyDropDownContent {
+    max-height: none !important;
   }

install/test-stage/00-kiosk/files/config.txt

@@ -7,10 +7,10 @@
 
 # uncomment the following to adjust overscan. Use positive numbers if console
 # goes off screen, and negative if there is too much border
-#overscan_left=16
-#overscan_right=16
-#overscan_top=16
-#overscan_bottom=16
+overscan_left=16
+overscan_right=16
+overscan_top=16
+overscan_bottom=16
 
 # uncomment to force a console size. By default it will be display's size minus
 # overscan.
@@ -58,6 +58,14 @@ camera_auto_detect=0
 # Automatically load overlays for detected DSI displays
 display_auto_detect=1
 
+dtoverlay=gpio-key,gpio=5,active_low=0,gpio_pull=down,keycode=103,label=GPIO_Up
+dtoverlay=gpio-key,gpio=6,active_low=0,gpio_pull=down,keycode=108,label=GPIO_Down
+dtoverlay=gpio-key,gpio=13,active_low=0,gpio_pull=down,keycode=105,label=GPIO_Left
+dtoverlay=gpio-key,gpio=19,active_low=0,gpio_pull=down,keycode=106,label=GPIO_Right
+
+dtoverlay=gpio-key,gpio=16,active_low=0,gpio_pull=down,keycode=30,label=GPIO_A
+dtoverlay=gpio-key,gpio=20,active_low=0,gpio_pull=down,keycode=48,label=GPIO_B
+
 # Enable DRM VC4 V3D driver
 dtoverlay=vc4-kms-v3d
 max_framebuffers=2

install/test-stage/00-kiosk/files/firstrun.sh

@@ -2,11 +2,6 @@
 
 echo ">> FIRST RUN"
 
-echo
-echo ">> Enabling Read-Only Overlay File System"
-sudo raspi-config nonint enable_overlayfs
-sudo raspi-config nonint enable_bootro
-
 echo
 echo ">> Unpacking Built Blastpad Package"
 tar -xf blastpad-build.tar.gz
@@ -17,12 +12,6 @@ echo
 echo ">> Enabling Auto-Login (?)"
 sudo raspi-config nonint do_boot_behaviour B2
 
-echo
-echo ">> Installing Flask Server Service"
-sudo mv ./flask-server.service /etc/systemd/system/flask-server.service
-# sudo systemctl daemon-reload
-# sudo systemctl enable flask-server
-
 echo
 echo ">> Removing First Run Script"
 rm ./firstrun.sh