Previously, I have presented about how to connect Scratch with PHPoC IoT board and make a simple remote control for spider robot. If you don't know about Scratch or Scratch programming with PHPoC, you can take a look at https://forum.phpoc.com/blogs/homer-...r-with-scratch.

In this project, I want to show how to make PHPoC-based projects with Scratch blocks, so I am going to continue with some simple tutorials: control onboard LED, control servo motor, read the value from rotary angle sensor. Nothing makes it easier to understand than having examples, right? Also, I made some source code modifications in helper app and extension file. Let's continue our course, Scratch programming with PHPoC 102 .


I. Demo



II. Connect Scratch with PHPoC:

This step is already introduced in my previous project. As I presented in section III.3, Step 3 in https://forum.phpoc.com/blogs/homer-...r-with-scratch, a helper app needs to be run in order to communicate between PHPoC board and Scratch Editor.



For demonstration purpose, I wrote a simple helper app using Node.js. First we need to install Node.js. Then, browse to Scratch Demo folder, and run the following command in the command line:

npm install

This command is used to install Node.js dependencies.

In addition, I made a simple Windows-service-based helper app. It means that you can run the helper app as a Windows service, instead of launching it from command line every single time.

In the command line, just enter:

npm setup-service

This command is used to install helper app as a Windows service. Select OK if there are some confirmation popups. After the successful installation, you can see this in Services window:


Click image for larger version

Name:	window-services.png
Views:	370
Size:	35.2 KB
ID:	952


Of cause, if you don't want to make it a startup Windows service, you can use the following command to start the helper app for each run-time:

npm start

III. Scratch programming tutorial:

I created Scratch projects based on available tutorials for PHPoC board. You can refer to those tutorials for more detail:

- Control onboard LED: http:// https://forum.phpoc.com/articles/tutorials/331-led-controlling-led-from-webpage-with-image

Click image for larger version

Name:	cover.png
Views:	141
Size:	126.9 KB
ID:	953



Here, PHPoC-specified blocks, Scratch's Events and Looks blocks are used to control an onboard LED. You just need to click on the LED icon to switch the onboard LED.

- Rotary angle sensor: https://forum.phpoc.com/articles/tutorials/342-rotary-angle-sensor-how-to-use-rotary-angle-sensor

Click image for larger version

Name:	rotary.png
Views:	141
Size:	129.4 KB
ID:	954


In this example, you can see how to read and display the analog data, using Scratch' s Events, Data, Looks, Control, Operators and PHPoC-specified blocks.

- Control servo motor: https://forum.phpoc.com/articles/tutorials/350-servo-motor-controlling-servo-motor-via-websocket-with-graphic-ui

Click image for larger version

Name:	servo.png
Views:	139
Size:	98.8 KB
ID:	955



This example shows you how to program Scratch to control the servo via UI interaction. Servo motor will rotate based on your on-click direction. As you can see, Scratch' s Events, Data, Looks, Control, Operators, PHPoC-specified blocks are used.

IV. Source Code

Source code includes:
  • helper_app_main.js: Helper app implementation.
  • helper_app_installer.js: Helper app installer file (for making Windows-service).
  • PHPoC_demo_extension_en.s2e : Hardware extension file for PHPoC, in JSON format
  • task0.php: This file needs to be loaded and run on PHPoC board.
  • uio_onboard_led.sb2 : Project with onboard LED
  • rotary_angle_sensor.sb2 : Project with rotary angle sensor
  • servo_motor.sb2 : Project with servo motor

You can get the source code here: Download link

Scratch 3.0 is incoming, and there are also some other platforms similar to Scratch. It would be a lot of fun trying to connect IoT board to those platforms and enjoy graphical programming. Hope you guys find it interesting. Cheers