ZJS IDE Tutorial
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.
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.
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
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.binIf 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
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.
Also make sure your user is a member of the plugdev group:
$ sudo adduser `whoami` plugdevLinux 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 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
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
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 ModemManagerTo 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);}
The sensors used in this demo came from this kit: