Connect Scratch X and Digispark with a bottle

A brief description of the title

bottle → A simple web framework made with python.
ScratchX → Web browser-based Scratch2.0 with plugin extensions? (Ambiguous)
Digispark → A small Arduino clone that you can buy for a little over 1000 yen.

things to do

I want to do some introductory programming with Digispark's RGB Shield (not LED Shield), so it's a great introduction to programming from Scratch (ScratchX) to Digispark To operate. ** * When you actually do it, please do it at your own risk. ** **

Flow of operation

Set up a local server at http: // localhost: 9000 with + bottle.

Send RGB data from ScratchX to http: // localhost: 9000 / blink.
Analyze the data sent to http: // localhost: 9000 / blink with bottle.
Send a command to turn on the LED to Digispark with pyusb.

environment

Digispark

Install Arduino IDE by referring to Digispark Wiki.
Install Digispark's board manager in Arduino IDE referring to the above page.
In ArduinoIDE, open File> Sketch Example> DigisparkUSB> DigiBlink and write to Digispark. ** * The button with the "→" icon is a write button. When the message "Plug in device now ..." appears, insert and remove Digispark. If you can't write it well, don't give up and write again. A few write failures are common. Don't give up, it's important. ** **

libusb USB library Windows(Win7)

In Windows, it didn't work because of the driver, so I rewrote the driver.
Download zadig (usb driver rewriting software).
Change the DigiUSB driver to libusb-win32 with zadig. * * It would be awkward to rewrite the driver of another device, so be careful ... *

OSX(El Capitan 10.11)

Install libusb with homebrew.

brew install libusb

Linux(Ubuntu14.04)

Install libusb with apt-get. (Somehow I put the dev version)

sudo apt-get install libusb-dev

Python ** * The version was 3.5.0 under any environment **

Install python
Install pip (python package manager)

  easy_install pip

Install bottle and pyusb

  pip install bottle pyusb

With user-local Python on Linux, I got a permission error when accessing USB using pyusb, so This post on StackOverflow -pyusb-libusb-require-root-sudo-permissions-on-linux) and USB Devices --Google Chrome. (Looking at the Chrome page, it feels like it's not limited to pyusb.)
In my case, create a file called 50 ー digispark.rules in /etc/udev/rules.d/ and

SUBSYSTEMS=="usb", ATTRS{idVendor}=="16c0", ATTRS{idProduct}=="05df", MODE="0664", GROUP="plugdev"

And restarted.

Web browser

ScratchX runs on Flash Player, so any browser that runs Flash Player should work.

program

app.py Build a + bottle local server and receive RGB data from javascript running on ScratchX.

Send instructions to Digispark with pyusb.

#!python
#-*-coding:utf-8-*-
from __future__ import print_function
from __future__ import unicode_literals
from __future__ import division


# for bottle
from bottle import route, run, template, request, response, static_file

# for scratchx
import usb
import sys
sys.path.append("..")
from arduino.usbdevice import ArduinoUsbDevice

theDevice = None

@route("/")
def top():
    return '''
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <a href="http://scratchx.org/?url=http://localhost:9000/main.js">ScratchX</a>
</body>
</html>
'''

@route("/<filepath:path>")
def server_static(filepath):
    return static_file(filepath, root="./")

@route("/blink")
def blink():
    theDevice = ArduinoUsbDevice(idVendor=0x16c0, idProduct=0x05df)

    red = request.query.get('red')
    green = request.query.get('green')
    blue = request.query.get('blue')

    print("red:{}, green:{}, blue:{}".format(red, green, blue))

    red = int(mapping(red))
    green = int(mapping(green))
    blue = int(mapping(blue))

    theDevice.write(ord("s"))
    theDevice.write(red)
    theDevice.write(green)
    theDevice.write(blue)

    print("mred:{}, mgreen:{}, mblue:{}".format(red, green, blue))

def mapping(arg):
    arg = float(arg)
    if arg < 0:
        return 0
    elif arg > 100:
        return 255
    else:
        return arg * 0.01 * 255

if __name__ == '__main__':
    run(host="localhost", port=9000, debug=True, reloader=True)

main.js

Create a block in ScratchX to send RGB data to the local server.

(function(ext){
  var device = null;

  ext._deviceConnected = function(dev){
    if(device) return;
    device = dev;
    console.log(device);
    device.open();
  };

  ext._deviceRemoved = function(dev){
    if(device != dev) return;
    device = null;
  };

  ext._shutdown = function(){
    if(device) device.close();
    device = null;
  };

  ext._getStatus = function(){
    if(!device) return {status: 1, msg: 'digiUSB disconnected'};
    return {status: 2, msg: 'digiUSB connectd'};
  };

  ext.blink = function(r, g, b){
    $.ajax({
      type: "GET",
      url: "http://localhost:9000/blink",
      dataType: "script",
      data: {
        red: r,
        green: g,
        blue: b
      }
    });
  };

  var descriptor = {
    blocks: [
      ["",  "red: %n, green: %n, blue: %Shine with n", "blink",
       "100", "100", "100"]
    ],
    menus: {},
    url: 'http://localhost:9000'
  };

  var hid_info = {type: 'hid', vendor: 0x16c0, product: 0x05df};
  console.log(ScratchExtensions.register('DigiUSB', descriptor, ext, hid_info));
})({});

Operation procedure

Put ʻapp.pyandmain.js` in the same directory.
To send instructions to Digispark from ʻapp.py, you will also need [Library created by Digispark](https://github.com/digistump/DigisparkExamplePrograms/tree/master/Python/DigiBlink/source). .. If you enter the ʻarduino directory of the above link into the directory containing ʻapp.py and main.js`, it's OK.
Up to this point, the contents of the directory are

Directory
|- arduino/
|- app.py
|- main.js

Start bottle. python app.py
Access http: // localhost: 9000 with a web browser. There is a link called "ScratchX", so if you jump to the link destination, the ScratchX page where main.js in the same hierarchy is loaded will open.
If you create a program using the "Glow with ~" block in "Other" on the Script tab, it will work as it is. (RGB receives 2 bytes of data (0 to 255 in numerical value), but in the introductory state, it is troublesome to explain it, so scale 0 to 100 to 0 to 255 in ʻapp.py`. The point is, on ScratchX, let's spit out numerical values in the range of 0 to 100)

Finally

If you look at the ScratchX Wiki, you should be able to send data directly from javascript to the USB-HID, but it didn't work, so this time It has become a roundabout shape like ... Looking at the code on the above page, it feels like I'm using this area.
chrome.hid
chrome.usb
If you leave the remnants of main.js and insert the Scratch Extensions Browser Plugin plugin, "Other" on ScratchX Signal is connected green instead of unconnected red. (Check only on OSX and Chrome)
I used RGB Shield this time, but it seems to be out of stock now, so I'm ordering LED Shiled that can probably do the same. Looking at the Wiki, it feels like an Adafruit NeoPixel clone. (ambiguous)
As mentioned above, ScratchX runs on Flash Player. However, if you look at LLK's github, you can see that although it is a Player, Scratch's HTML5 version repository is also I'm looking forward to the full HTML5 in the future. I don't know if it can be done.
The programming threshold is really low (technically and economically). Physical computing You can do a lot of things that are wrong. I want you to talk about "further lowering the age of programming".

Reference page etc.

LLK / scratchx / wiki → ScratchX Wiki
Digispark Wiki → Digispark Wiki
I made a template that can start the development of ScratchX at explosive speed → A valuable Japanese article about the extension of ScratchX, node How to use .js etc.
I made a template to develop ScratchX Extensions in ES2015 → This article is also valuable. From now on, it's ES2015 (ES6) ...
I bought an ultra-compact Arduno clone DigiSpark for 895 yen / Hashimoto Shokai → Japanese article on Digispark. It also describes how to work with Ruby.
bottle_scratchx.git → This time ʻapp.py and main.js` are placed here.