Connect to the Devices

We jump into the cold water and start with our first program. We plugged in our development kit via USB and want to connect to the devices from our first program.

Goal

Learn how to connect to devices on your USB port from a JavaScript program.

Overview

In this first lesson, we want to learn how we write a program to connect to the devices from our development kit. Once connected, we set the color of the RGB LED to green. Along the way, we introduce important concepts in programming:

• Variables

• Commands

• Functions

• Libraries and Objects

• Control Structures

The code snippet below contains the JavaScript code for the first code example. You can see the code in action here. Don't panic, it looks like a lot. But don't worry, for the rest of this lesson, we'll go through the code step by step and explain everything in detail.

script.js

// We define global variables at the top of the program
var devices;
var led;

// All lines of code are executed once when the website is loaded
log("Welcome to Lesson 1.1: Connect to Devices. Follow the instructions below.");
showInstructions();

// This function is called when then button "Show Instructions" is pressed
function showInstructions() {
    log("Please connect your IoT development kit to your computer via USB and hit 'Establish Connection'!");
}

// This function is called when the button "Establish Connection" is pressed
function connect() {
    log("I am now trying to connect to your devices...");
    tf.initDevices(initDone);
}

// This function is called when the devices are initialized
function initDone(newDevices) {
    devices = newDevices;
    var numberDevices = devices.length;

    if (numberDevices > 0) {
        log("Great work! I found >" + newDevices.length + "< devices!")
    }
    else {
        log("Uggh, something went wrong. I didn't detect any devices!");
    }

    // Get the RGB LED (device identifier = 271)
    led = devices.getDeviceByIdentifier(271);

    // Set the color of the LED to green
    led.setColor(0, 255, 0);

    // Store the devices on a global variable, so that we can access them from anywhere
    devices = newDevices;
}

Initialize the devices

One of these functions is initDevices(), which tells the TDM to start the initialization process and get a connection to all devices at the computer's USB port. The TDM know how to do this, so we don't have to deal with the details how this is done.

We only need to decide when we want to call this function. In the example, we use a button named 'Establish Connection' as the trigger to execute the function. As an argument, we pass a reference to a function initDone(), which we define starting in line 21. This function serves as a so-called callback function, and it will be called by the TDM when the initialization process finishes. This is the way the TDM tells us he is finished initializing and hands over the result.

// This function is called when the button "Establish Connection" is pressed
function connect() {
    log("I am now trying to connect to your devices...");
    tf.initDevices(initDone);
}

The result of the initialization is a list of references to the connected devices, and the TDM passes this list as the single argument of the callback function. Via this argument, which we named newDevices, we get access to all devices and their functions. To make sure we can access the devices from anywhere in our program, and not just from the initDone() function, we store the argument on the global variable devices that we defined earlier.

// This function is called when the devices are initialized
function initDone(newDevices) {
    devices = newDevices;
    ...
}

See the code in action

https://iodi.netlify.app/lesson-01/1-connect-to-devices/index.htmliodi.netlify.app

Click the link to see the code in action.