This is a fork from https://github.com/LLK/scratch-gui
The purpose of this project is educational so small students can control 2 servos, 4 buttons, several addressable RGB leds (FastLED), 1 pot, 1 ultrasonic sensor, 1 LDR and play some mp3 with a DFPlayer mini attached to Arduino Uno with Scratch.
I'm sorry, but only Italian labels are available at the moment. You can translate or add yours following the expected schema.
I'm not a real expert with Scratch developing, so for sure there are better ways to let Arduino communicate with Scratch 3. However, my extension works and the children were very happy 😏
In order to use an Arduino Uno with Scratch 3.0 we need to access serial port. As I know, it's not possible directly from Scratch, so we can use node.js and websockets: Scratch extension will receive data from websocket.
Arduino Uno has to be programmed with the provided custom firmware. Although it would be possible to define the pins from Scratch, in order to keep the interface very simple, the connections are hard-coded and therefore it is necessary to respect the expected scheme or edit the firmware.
- Pot: A0
- LDR: A1
- Input pins: A2, A3, A4, A5
- Servo motor: D5, D6
- DFPlayer (software serial): D4, D5
- HC-SR04 (ultrasonic): D2, D3;
- 92 APA102 RGB LED (hardware SPI): D11, D13
- 14 APA102 RGB1 (software SPI): D12, D10
- 14 APA102 RGB2 (software SPI): D9, D8
Follow original LLK instruction (you can find below). You have to install scratch-gui from this repository because we need some additional modules added as dependencies (serialport, websocket, crc-full) and a forked version of scratch-vm (where you can find the extension working code).
https://github.com/cotestatnt/scratch-vm/tree/develop/src/extensions
To run Scratch 3
npm start
Before loading extension you need to start websocket/serial server on the PC where Arduino is connected before use extension. (you can use another terminal session).
cd serialport
node wsServer.js
Then go to http://localhost:8601/
Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects
This requires you to have Git and Node.js installed.
In your own node environment/application:
npm install https://github.com/cotestatnt/scratch-gui.git
If you want to edit/play yourself:
git clone https://github.com/cotestatnt/scratch-gui.git
cd scratch-gui
npm install
Running the project requires Node.js to be installed.
Open a Command Prompt or Terminal in the repository and run:
npm start
Then go to http://localhost:8601/ - the playground outputs the default GUI component
If you wish to develop scratch-gui
alongside other scratch repositories that depend on it, you may wish
to have the other repositories use your local scratch-gui
build instead of fetching the current production
version of the scratch-gui that is found by default using npm install
.
Here's how to link your local scratch-gui
code to another project's node_modules/scratch-gui
.
-
In your local
scratch-gui
repository's top level:- Make sure you have run
npm install
- Build the
dist
directory by runningBUILD_MODE=dist npm run build
- Establish a link to this repository by running
npm link
- Make sure you have run
-
From the top level of each repository (such as
scratch-www
) that depends onscratch-gui
:- Make sure you have run
npm install
- Run
npm link scratch-gui
- Build or run the repositoriy
- Make sure you have run
Instead of BUILD_MODE=dist npm run build
, you can use BUILD_MODE=dist npm run watch
instead. This will watch for changes to your scratch-gui
code, and automatically rebuild when there are changes. Sometimes this has been unreliable; if you are having problems, try going back to BUILD_MODE=dist npm run build
until you resolve them.
If you can't get linking to work right, try:
- Follow the recipe above step by step and don't change the order. It is especially important to run
npm install
beforenpm link
, because installing after the linking will reset the linking. - Make sure the repositories are siblings on your machine's file tree, like
.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-gui/
and.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-www/
. - Consistent node.js version: If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
- If nothing else works, unlink the repositories by running
npm unlink
in both, and start over.
You may want to review the documentation for Jest and Enzyme as you write your tests.
See jest cli docs for more options.
NOTE: If you're a windows user, please run these scripts in Windows cmd.exe
instead of Git Bash/MINGW64.
Before running any test, make sure you have run npm install
from this (scratch-gui) repository's top level.
To run linter, unit tests, build, and integration tests, all at once:
npm test
To run unit tests in isolation:
npm run test:unit
To run unit tests in watch mode (watches for code changes and continuously runs tests):
npm run test:unit -- --watch
You can run a single file of integration tests (in this example, the button
tests):
$(npm bin)/jest --runInBand test/unit/components/button.test.jsx
Integration tests use a headless browser to manipulate the actual html and javascript that the repo produces. You will not see this activity (though you can hear it when sounds are played!).
Note that integration tests require you to first create a build that can be loaded in a browser:
npm run build
Then, you can run all integration tests:
npm run test:integration
Or, you can run a single file of integration tests (in this example, the backpack
tests):
$(npm bin)/jest --runInBand test/integration/backpack.test.js
If you want to watch the browser as it runs the test, rather than running headless, use:
USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js
When running npm install
, you can get warnings about optionsl dependencies:
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7
You can suppress them by adding the no-optional
switch:
npm install --no-optional
Further reading: Stack Overflow
When installing for the first time, you can get warnings which need to be resolved:
npm WARN eslint-config-scratch@5.0.0 requires a peer of babel-eslint@^8.0.1 but none was installed.
npm WARN eslint-config-scratch@5.0.0 requires a peer of eslint@^4.0 but none was installed.
npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-intl-redux@^0.7 but none was installed.
npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-responsive@^4 but none was installed.
You can check which versions are available:
npm view react-intl-redux@0.* version
You will neet do install the required version:
npm install --no-optional --save-dev react-intl-redux@^0.7
The dependency itself might have more missing dependencies, which will show up like this:
user@machine:~/sources/scratch/scratch-gui (491-translatable-library-objects)$ npm install --no-optional --save-dev react-intl-redux@^0.7
scratch-gui@0.1.0 /media/cuideigin/Linux/sources/scratch/scratch-gui
├── react-intl-redux@0.7.0
└── UNMET PEER DEPENDENCY react-responsive@5.0.0
You will need to install those as well:
npm install --no-optional --save-dev react-responsive@^5.0.0
Further reading: Stack Overflow
You can publish the GUI to github.io so that others on the Internet can view it. Read the wiki for a step-by-step guide.
We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!