Skip to content
This repository has been archived by the owner on Aug 5, 2022. It is now read-only.

ZJS IDE Tutorial

Brian Jones edited this page May 19, 2017 · 17 revisions

Intro

This wiki is intended to supplement the upcoming video tutorial about ZJS and the Web IDE. Here you will find step by step instructions to recreate what you see there, and learn how to get started with ZJS and the IDE.

Setting up your Arduino 101

The ZJS development environment uses your host computer, the Arduino 101 board, and a USB A-B cable for communications. The cable also provides power to the board so you won’t need a separate power supply until you get into more complicated uses that need more power.

Getting the images

The Arduino 101 board needs to be initially prepared for use with the ZJS environment. The tutorial video uses pre-built binaries built using the v0.3 branch. There are two images needed for separate processors on the board. On your host computer, download the x86 and arc ZJS binaries in the 'Downloads' section on this page:

https://github.com/01org/zephyr.js/releases/tag/v0.3

Flashing the images to the board

Once you have the images, plug in your Arduino 101. Then use the following commands to flash the images to your board. Note: you need to press the 'MASTER RESET' button on the Arduino 101 before calling these commands. You will have a roughly 5 second window where the board will allow you to write to it. If you get an error from dfu-util saying it can’t find a device to flash, press the reset button and try calling dfu-util again.

$ dfu-util -a x86_app -D zjs-0.3-ide-prebuilt-arduino101-x86.bin
$ dfu-util -a sensor_core -D zjs-0.3-ide-prebuilt-arduino101-arc.bin

If you prefer to build your own binaries and try out the latest and greatest, you'll find all the information on how to do that here:

https://github.com/01org/zephyr.js#getting-started

Adding rules files (Linux only)

If you are using Linux on your host system, you'll also need to add a rules file to allow you to flash the images to your device. See the Zephyr Project page for information on the create_dfu_udev_rule script.

https://www.zephyrproject.org/doc/boards/x86/arduino_101/doc/board.html#required-hardware-and-software

Also make sure your user is a member of the plugdev group:

$ sudo adduser `whoami` plugdev

Linux users will also need to add rules to prevent ModemManager from grabbing the device:

https://github.com/01org/zephyr.js/blob/master/docs/ashell.md#connect

Windows

Windows users may need to download additional USB drivers to allow their Arduino 101 connect to the IDE. See the ashell docs for more info about Windows:

https://github.com/01org/zephyr.js/blob/master/docs/ashell.md

Launch the Web IDE for ZJS

Now that your board contains the images, you can go to the Web IDE. Currently, only Chrome version 57 or higher is supported. To get there, press the reset button or unplug / replug the USB cable to reboot the Arduino 101. Once it boots, you'll see a popup telling you "WebUSB detected". Clicking the popup will take you to the IDE website. If you don't see the popup, you can try going to the site manually https://01org.github.io/zephyrjs-ide

Connect to the IDE

Find the 'Connect' button near the center top of the page and click it. You should see a popup with a device named "WebUSB - paired"; select it and click connect. You should see the help dialog print on the console portion of the IDE. If you don't, it didn't connect properly. Try rebooting the board, refresh the website, and try again. If you are on Linux, this is likely because ModemManager is currently running. You will need to call the following command and try again:

$ sudo killall ModemManager

Example code

To run code, paste it into the IDE editor and click 'Run'. You'll see any console.log messages or errors in the console portion of the IDE.

Here is the code used in the video tutorial. You can find more samples here: https://github.com/01org/zephyr.js/tree/master/samples

var aio = require("aio");
var pins = require("arduino101_pins");

var temp = aio.open({ device: 0, pin: pins.A0 });
var gpio = require("gpio");
var pwm = require("pwm");

var redLED = pwm.open({channel: pins.IO3, period: 1, pulseWidth: 0});
var greenLED = pwm.open({channel: pins.IO5, period: 1, pulseWidth: 0});
var blueLED = pwm.open({channel: pins.IO6, period: 1, pulseWidth: 0});

var button = gpio.open({pin: pins.IO4, direction: 'in', edge: 'rising'});
var buzzer = gpio.open({pin: pins.IO2});
var laser = gpio.open({pin: pins.IO8});

function getTemp() {
    var rawValue = temp.read();
    if (rawValue == 0) {
        console.log("temp: invalid temperature value");
        return;
    }
    var voltage = (rawValue / 4096.0) * 3.3;
    var celsius = (voltage - 0.5) * 100 + 0.5;
    celsius = celsius | 0;
    return celsius;
}

function setColor(colorRGB, timeout) {
    redLED.setMilliseconds(1, colorRGB.red/255);
    greenLED.setMilliseconds(1, colorRGB.green/255);
    blueLED.setMilliseconds(1, colorRGB.blue/255);
    if (timeout !== undefined)
        setTimeout(function() {setColor({red:0, green:0, blue:0});},timeout);
}

function blink(led, period, pulseWidth, timeout) {
    led.setMilliseconds(period, pulseWidth);
    if (timeout !== undefined)
        setTimeout(function() {led.setMilliseconds(1, 0);},timeout);
}

function setHigh(device, timeout) {
    device.write(true);
    if (timeout !== undefined)
        setTimeout(function(){device.write(false);}, timeout);
}

button.onchange = function() {
    setHigh(buzzer,1000);
    blink(blueLED,200,100,1000);
    setTimeout(function() {setHigh(laser,1000);  
                           blink(redLED,100,90,1000);}, 1000);
    setTimeout(function(){setColor({red:0, green:255, blue:0}, 1000)}, 2000);}

Wiring diagram

Wiring diagram

Sensors kit

The sensors used in this demo came from this kit:

https://www.amazon.com/Elegoo-Upgraded-Modules-Tutorial-Arduino/dp/B01MG49ZQ5/ref=sr_1_2?ie=UTF8&qid=1495222433&sr=8-2&keywords=elegoo+37+sensor+kit