search

einfachIT / scratch3-messaging-extension

Apache License 2.0
1 stars 0 forks source link

readme

Table of Contents

  1. Installing and Configuring Mosquitto MQTT broker server locally in the Raspberry Pi
    1. Installation of mosquitto and mosquitto-clients
    2. Configure Mosquitto to listen localhost in port 8883
  2. Installing Uncomplicated Firewall UFW
  3. Scratch 3 with Custom Extension Installation Guide (Raspberry Pi)
    1. Introduction
    2. Prerequisites
    3. Create a Workspace Directory
    4. Clone Scratch Repositories
    5. Install Dependencies
    6. Custom Extension Implementation (Scratch-vm)
      1. Create a Directory (scratch3_mqtt)
      2. Download Extension Code
      3. Update Extension Manager
    7. Custom Extension Implementation (scratch-gui)
      1. Create a new directory (mqtt)
      2. Donwload and Add Icons for the Extension
      3. Update Extension List
    8. Start Scratch
  4. How to Use MQTT Extension
    1. Overview
    2. Load the Extension
    3. Using MQTT Blocks

Scratch 3 with Custom Extension Installation Guide (Raspberry Pi)

Introduction

This guide outlines the steps to install Scratch 3 on your Raspberry Pi and integrate a custom extension for enhanced functionality. The custom extension you'll be using focuses on MQTT Extension.

Prerequisites

  1. Raspberry Pi with Raspbian OS installed
  2. Basic understanding of command-line interface (CLI) usage
  3. Node.js and npm installed
    • We strongly recommend using a Node version manager like nvm to install Node.js and npm.
    • To install or update nvm, you should run the following command \
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

After that, the installer will clone the nvm repository into ~/.nvm/ directory and you should add some lines below at the end of ~/.bashrc file to load nvm.\ run the following command in the terminal.

export NVM_DIR="$HOME/.nvm"
# This loads nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
# This loads nvm bash_completion
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Note : Close the shell and open a new shell here, otherwise you get command not found.

nvm install node

Create a Workspace Directory

Open a terminal and run the following commands:

mkdir scratch3
cd scratch3

image

Clone Scratch Repositories

Clone the Scratch GUI and VM repositories:

git clone --filter=tree:0 https://github.com/llk/scratch-gui
git clone --filter=tree:0 https://github.com/llk/scratch-vm

Install Dependencies

cd scratch-vm
npm install

image

cd ../scratch-gui
npm install

image

Custom Extension Implementation (Scratch-vm)

Create a Directory (scratch3_mqtt)

cd ../scratch-vm/src/extensions
mkdir scratch3_mqtt

image

Download Extension Code

Navigate to the new created directory scratch3_mqtt and download the custom extension index.js file

cd scratch3_mqtt
curl -H "Authorization: token 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" -L "https://raw.githubusercontent.com/einfachIT/scratch3-messaging-extension/master/your-scratch-extension/index.js" -o index.js

image

Update Extension Manager

Open scratch3 folder in the home/[username] \ goto scratch-vm/src/extension-support \ open extension-manager.js file \ image

and add Add the following line to the builtinExtensions object like other extensions \

mqtt: () => require('../extensions/scratch3_mqtt'),

after adding the above line save it with ctrl+s image

Custom Extension Implementation (scratch-gui)

Create a new directory (mqtt)

Create a new directory by the name of mqtt within scratch-gui/src/lib/libraries/extensions.

cd scratch3/scratch-gui/src/lib/libraries/extensions
mkdir mqtt
cd mqtt

Donwload and Add Icons for the Extension

Place your extension's icon images (.png and .svg) inside the newly created directory mqtt in scratch-gui/src/lib/libraries/extensions.

curl -H "Authorization: token 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" -L "https://raw.githubusercontent.com/einfachIT/scratch3-messaging-extension/mqtt_extension_v1/mqtt.png" -o mqtt.png
curl -H "Authorization: token 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" -L "https://raw.githubusercontent.com/einfachIT/scratch3-messaging-extension/master/mqtt-small.svg" -o mqtt-small.svg

image

Update Extension List

Goto scratch3 folder in the home/[username] using file explorer \ open index.jsx file in `scratch-gui/src/lib/libraries/extensions/'

import your extension's icon URLs and add it to the registeredExtensions array:

add the following lines in the index.jsx file after react where other icons are imported.

import mqttIconURL from "./mqtt/mqtt.png";
import mqttInsetIconURL from "./mqtt/mqtt-small.svg";

image

add the following lines to the export default array

find export default = [ paste it here ] 

 {
    name: (
      <FormattedMessage
        defaultMessage="mqtt" // Replace with your extension's name
        description="Name for the 'mqtt' extension"
        id="gui.extension.mqtt.name"
      />
    ),
    extensionId: "mqtt",
    iconURL: mqttIconURL,
    insetIconURL: mqttInsetIconURL,
    description: (
      <FormattedMessage
        defaultMessage="mqtt extension"
        id="gui.extension.mqtt.description"
      />
    ),
    featured: true,
  },

Save the file with CTRL + S

image

Installing and Configuring Mosquitto MQTT broker server locally in the (Raspberry Pi)

Installation of mosquitto

Start Scratch

Navigate to the scratch-gui and run the following command

cd ../../../../../
npm start

go the browser and run the following URL \

http://localhost:8601/

How to Use MQTT Extension

Overview

The MQTT Extension for Scratch 3 allows you to connect, subscribe, and publish messages to an MQTT broker. This guide will help you get started with using the extension in your Scratch projects.

Load the Extension:

Using MQTT Blocks:

image

Additional Notes