Setting Up Scratch Assets for Offline Use with PlottyBot - CodeClubLuxembourg/plottybot-toolkit-web GitHub Wiki

Overview

This guide explains how to configure Scratch for offline environments with PlottyBot, an XY plotter controlled by a Raspberry Pi. The Scratch server is hosted locally on the Raspberry Pi, but assets are usually fetched from Scratch's public CDN. To ensure functionality without internet access, we will:

  1. Download assets locally.
  2. Serve assets from the Raspberry Pi.
  3. Modify the Scratch setup to use local assets dynamically.

Steps to Serve Local Assets

1. Replace the Default CDN with a Local URL

Modify the scratch-storage dependency to prioritize local assets.

  • Code Change: Replace the default CDN URL in node_modules/scratch-storage/src/Storage.js with the following logic:

    
if (window.location.hostname) {
    const baseUrl = window.location.origin;
    localCdn = `${baseUrl}/assets/`;
}
const defaultCdn = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/';

    This ensures Scratch fetches assets from http://x.x.x.x/assets/ (hosted on the Raspberry Pi) if available, and falls back to the public CDN otherwise.

2. Download Assets Locally

To build a local repository of Scratch assets:

3. Serve Assets on the Raspberry Pi

Use the same server hosting Scratch to serve the assets.

  • Directory Setup: Place the assets in /assets/ within the server's document root. Example: /var/www/html/assets/.

  • Configuration:

    • Assets will now be available at http://x.x.x.x/assets/.

Important Notes

  • Modifying scratch-storage: Since scratch-storage is a dependency, modifications to its code require accessing the Scratch project's source code or patching the installed module directly.
  • Dynamic Asset URL: The dynamic window.location.origin ensures the Scratch setup works regardless of the Raspberry Pi's IP address.
  • Future Updates: Periodically update your local assets repository by re-running the asset download tool.

How to Modify scratch-storage

Option 1: Modify in node_modules

You can directly edit the installed module in node_modules (useful for quick testing):

  1. Navigate to node_modules/scratch-storage/.
  2. Edit the relevant file (e.g., src/Storage.js) to adjust asset fetching logic.
  3. Be aware that changes in node_modules will be overwritten if dependencies are reinstalled.

Option 2: Clone and Modify the Source

To make permanent or reusable changes:

  1. Clone the repository:

    git clone https://github.com/LLK/scratch-storage.git

  2. Modify the source code (e.g., adjust the default CDN URL in src/Storage.js).

  3. Build the module (optional, if used in production):

    npm install npm run build

  4. Replace the original dependency with your modified version:

    • Replace scratch-storage in node_modules with your build.
    • Alternatively, use npm link to reference your local version during development.

Option 3: Fork and Publish

  1. Fork the scratch-storage repository on GitHub.

  2. Make your modifications.

  3. Publish your forked version to npm under a new name (e.g., scratch-storage-local):

    npm publish --access public

  4. Update the scratch-vm or scratch-gui package.json to use your custom module:

    "scratch-storage": "your-npm-username/scratch-storage-local"