properly handle local image embeds

Author: splitbrain

public/pinouts/esp32-c3-super-mini.yaml

@@ -1,45 +1,43 @@
 title: "ESP32 C3 Super Mini"
+
+# dimensions counted in pins
 width: 7
-height: 9
+height: 8
+
+# images can be URLs, use adjustments to fit the pins
 image:
   front:
     src: "esp32-c3-super-mini.front.png"
-    top: -270
-    left: -100
-    right: -120
-    bottom: -50
+    top: -200
+    left: 50
+    right: 50
+    bottom: -190
   back:
     src: "esp32-c3-super-mini.back.png"
-offsets:
-  top: 2
-  right: 1
-types: { }
+    top: -150
+    left: 50
+    right: 50
+    bottom: -170
+
+# Define the pins (label:type), use empty entries when offsets are needed
 pins:
   left:
     - [ "GPIO5:gpio", "A5:analog", "MISO:spi" ]
-    - [ "GPIO6:gpio", "MOSI:spi", "SCK:spi" ]
+    - [ "GPIO6:gpio", "MOSI:spi" ]
     - [ "GPIO7:gpio", "SS:spi" ]
     - [ "GPIO8:gpio", "SDA:i2c" ]
     - [ "GPIO9:gpio", "SCL:i2c" ]
     - [ "GPIO10:gpio" ]
     - [ "GPIO20:gpio", "RX:uart" ]
     - [ "GPIO21:gpio", "TX:uart" ]
   right:
-    -
     - [ "5V:power" ]
     - [ "GND:gnd" ]
     - [ "3V3:power" ]
     - [ "GPIO4:gpio", "A4:analog", "SCK:spi" ]
-    - [ "GPIO3:gpio", "A3:analog", "MOSI:spi" ]
+    - [ "GPIO3:gpio", "A3:analog" ]
     - [ "GPIO2:gpio", "A2:analog" ]
     - [ "GPIO1:gpio", "A1:analog" ]
     - [ "GPIO0:gpio", "A0:analog" ]
-  top:
-    -
-    -
-    - [ "GND:gnd", "A4:analog", "SCK:spi" ]
-    - [ "5V:power" ]
-  bottom:
-    -
-    - [ "GND:gnd" ]
-    - [ "5V:power", "A4:analog", "SCK:spi" ]
+
+# For custom types, top and bottom rows, row offsets, etc. read the docs

src/Builder.js

@@ -45,7 +45,7 @@ export class Builder {
             },
             gpio: {
                 label: 'GPIO',
-                bgcolor: '#8c49ae',
+                bgcolor: '#79bc3c',
                 fgcolor: '#ffffff',
             },
             power: {
@@ -60,17 +60,17 @@ export class Builder {
             },
             i2c: {
                 label: 'I2C',
-                bgcolor: '#485377',
+                bgcolor: '#41b28c',
                 fgcolor: '#ffffff',
             },
             uart: {
                 label: 'UART',
-                bgcolor: '#34CD71',
+                bgcolor: '#637181',
                 fgcolor: '#ffffff',
             },
             spi: {
                 label: 'SPI',
-                bgcolor: '#3399DD',
+                bgcolor: '#775ee8',
                 fgcolor: '#ffffff',
             },
             analog: {

src/Editor.js

@@ -78,7 +78,7 @@ export class Editor {
     }
 
     async onUpdate(setup) {
-        const embed = new ImageEmbed();
+        const embed = new ImageEmbed('pinouts');
         setup = await embed.embedImages(setup);
 
         const builder = new Builder(setup);

src/ImageEmbed.js

@@ -15,6 +15,13 @@ export class ImageEmbed {
      */
     static SERVICE = 'https://imgdataurl.splitbrain.workers.dev/';
 
+    /**
+     * @param {string} base The relative base to look for local images in
+     */
+    constructor(base = '') {
+        this.base = base;
+    }
+
     /**
      * Processes a setup object, attempting to embed images specified in
      * `setup.image.front.src` and `setup.image.back.src`.
@@ -30,10 +37,10 @@ export class ImageEmbed {
         const imageConfigsToProcess = [];
         // Collect image sources to process, storing references to the config objects
         if (setup?.image?.front?.src) {
-            imageConfigsToProcess.push({ config: setup.image.front, originalSrc: setup.image.front.src });
+            imageConfigsToProcess.push({config: setup.image.front, originalSrc: setup.image.front.src});
         }
         if (setup?.image?.back?.src) {
-            imageConfigsToProcess.push({ config: setup.image.back, originalSrc: setup.image.back.src });
+            imageConfigsToProcess.push({config: setup.image.back, originalSrc: setup.image.back.src});
         }
 
         if (imageConfigsToProcess.length === 0) {
@@ -110,6 +117,8 @@ export class ImageEmbed {
             buffer = Buffer.from(await response.arrayBuffer());
             mimeType = response.headers.get('content-type')?.split(';')[0].toLowerCase();
         } else {
+            source = this.base ? path.join(this.base, source) : source;
+
             buffer = await fs.readFile(source);
             const extension = path.extname(source).toLowerCase();
             if (extension === '.jpg' || extension === '.jpeg') {
@@ -141,6 +150,16 @@ export class ImageEmbed {
      * @private
      */
     async embedBrowser(source) {
+
+        // this is not a URL, so we assume it to be one of our own, locally served files
+        if (!source.match(/^https?:\/\//)) {
+            if (this.base) {
+                source = `${this.base}/${source}`;
+            }
+            source = new URL(source, window.location.href).toString();
+            if (source.match(/^http:\/\/(localhost|127.0.0.1)/)) return source; // no local embeds
+        }
+
         const embedServiceUrl = `${ImageEmbed.SERVICE}?url=${encodeURIComponent(source)}`;
         const response = await fetch(embedServiceUrl);
         if (!response.ok) {

src/cli.js

@@ -2,7 +2,7 @@ import {createWindow} from "svgdom";
 import {Builder} from "./Builder.js";
 import Yaml from 'yaml';
 import { readdir, readFile, stat, writeFile } from 'fs/promises';
-import {join} from 'path';
+import {join, dirname} from 'path';
 import {ImageEmbed} from "./ImageEmbed.js";
 
 /**
@@ -66,7 +66,7 @@ async function processFile(file) {
         throw new Error(`Unsupported file type: ${file}`);
     }
 
-    const embed = new ImageEmbed();
+    const embed = new ImageEmbed(dirname(file));
     setup = await embed.embedImages(setup);
 
     const outputBase = file.replace(/\.(yaml|json)$/, '');