Remote Control with Evothings Studio

Introduction

This tutorial uses the Wi-Fi communication feature of the MediaTek LinkIt™ Smart 7688 development platform, a platform designed to enabled the development of products for the smart home and office. The platform runs on the OpenWrt Linux OS and supports Python, Node.js and native C programming. By the end of this tutorial you’ll have a fully functioning IoT example, which blinks an LED on the LinkIt Smart 7688 Duo development board controlled remotely using Wi-Fi APIs.

This tutorial guides you through:

  • Creating the software to provide the interfaces for the remote control of the development board using Evothings Studio.
  • Installing Firmata protocol for the MPU and MCU programming support.
  • Creating a server application implemented in Node.js.
  • Creating a client mobile application running on smartphone to control the LED on the LinkIt Smart 7688 Duo development board.

At the end of the tutorial there are details on where to go for additional information on the LinkIt Smart 7688 Duo development board and how to create software for it.

Before you start

If you haven’t built a LinkIt Smart 7688 Duo project before you need to download and install Arduino IDE, then configure the IDE and update the board’s firmware.

Setup your development environment

Full details on setting up the LinkIt Smart 7688 Duo development environment can be found in the LinkIt Smart 7688 Duo get started guide. Complete this before you continue, if you haven’t already set up your development environment.

An Android Device

The application supports smartphones and tablets running iOS and Android v. 4.0 or above, with an active data connection (mobile network or Wi-Fi). In this tutorial an iPhone smartphone is used.

Setup Firmata for communication with the microcontroller

On LinkIt Smart 7688 Duo, MT7688AN controls the Wi-Fi communication, USB device control and SD card access among other interfaces (see datasheet). While for the sensor and peripheral module connections, an ATmega32U4 is used for better responsiveness in real-time control, as shown below.

Hardware communication

As the MT7688AN and ATmega32U4 are connected through a UART port, you can issue commands from an application written in Python, Node.js or C through the UART channel to the MCU. This requires programming on both microprocessor unit (MPU) and MCU sides, which might increase the complexity for the software development. In order to reduce the complexity of the UART command implementation, Firmata protocol is proposed as a solution. Firmata is a protocol for communication between a MCU and a host MPU. Therefore, those who are familiar with MPU programming in Python, Node.js and C can choose a language to use Firmata to run the MPU and MCU communication without having to deal with details of the UART command implementation or MCU programming. The communication control is based on Arduino programming through Arduino IDE, as shown below.

Software communication control with Firmata

For example, Cylon.js is a popular Node.js framework for robotics applications. It uses Firmata to implement the communication between the MPU and MCU and thus alleviates Node.js developers from low level UART and MCU programming.

Create your project’s software

The MPU and MCU communication using Firmata protocol in Node.js is implemented in Arduino IDE. The detailed description is provided here. The example application turns the onboard LED on or off based on your request. The LinkIt Smart 7688 Duo development board acts as a server and the requests to blink the LED can be sent from a client — a web browser on your PC, tablet or a smartphone. In this tutorial you’ll use smartphone for a client mobile application.

Overview of the client mobile application

Evothings Studio enables cross platform application development in HTML or JavaScript that runs on iOS and Android devices. The source code for this application contains body and head parts. The code between the “body” tags contains the user interface and the code between the “head” tags states the application logic. The user interface offers an input field to define the host of the LinkIt Smart 7688 Due board. The interface has two buttons to control the on-board LED (turn on or off). The application executes the function app.ledOn() or app.ledOff(), respectively, when the corresponding button is pressed.

<body ontouchstart=""><!-- ontouchstart="" enables low-delay CSS transitions. -->
 
    <header>
        <button class="back" onclick="history.back()">
            <img src="ui/images/arrow-left.svg" />
        </button>
 
        <img class="logotype" src="ui/images/logo.svg" alt="Evothings" />
 
        <!--<button class="menu" onclick=""><img src="ui/images/menu.svg" /></button>-->
    </header>
 
    <h1>LinkIt Smart 7688 Duo</h1>
 
    <img src="img/mediatek-linkit-smart-7688-duo.png">
 
    <h2>Enter IP-address of the LinkIt Smart 7688 Duo</h2>
 
    <input class="wide" id="host" value="http://mylinkit.local:8080/" type="url">
    <button class="green wide big" onclick="app.ledOn()">LED ON</button>
 
    <br />
 
    <button class="red wide big" onclick="app.ledOff()">LED OFF</button>
 
</body>

This application heavily depends on the cordovaHTTP library which is already included in the Evothings Viewer. This library enables the download of data from any server without HTTPS/HTTP or cross-origin restrictions. The application logic is stored in the app object. The methods app.ledOn() and app.ledOff() are wrappers around the app.send() method. This method in turn is a wrapper around the cordovaHTTP.get() method that performs a GET request to the development board with the parameter value (high = LED on, low = LED off). The response is printed to the console in the Evothings Workbench.

<head>
 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no,
        shrink-to-fit=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
 
    <title>MediaTek LinkIt Smart 7688 Duo</title>
 
    <style>
        @import 'ui/css/evothings-app.css';
 
        input.wide {
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            }
    </style>
 
    <script src="cordova.js"></script>
    <script src="libs/jquery/jquery.js"></script>
    <script src="libs/evothings/evothings.js"></script>
    <script src="libs/evothings/ui/ui.js"></script>
 
    <script>
    // Redirect console.log to Evothings Workbench.
    if (window.hyper && window.hyper.log) { console.log = hyper.log }
    window.onerror = function(msg, url, line)
    {
        console.log(msg + ": " + url + ":" + line);
    };
    </script>
 
    <script>
    // Application object.
    var app = {}
 
    // Turn on LED.
    app.ledOn = function()
    {
        app.send('high');
    }
 
    // Turn off LED.
    app.ledOff = function()
    {
        app.send('low');
    }
 
    app.send = function(command) {
 
        var host = $('#host').val()
 
        cordovaHTTP.get(host,
            {value: command},
            {},
            function(response) {
                // Print the response status code and response.
                console.log('Status: ' + response.status + ' Response: ' + response.data);
            });
    }
 
 
    document.addEventListener(
        'deviceready',
        function() { evothings.scriptsLoaded() },
        false);
    </script>
 
</head>

Run the client mobile application

The client mobile application is implemented in Evothings Studio, a development tool for cross platform mobile applications using web technologies such as HTML and JavaScript. The Evothings Studio includes three components — Evothings Workbench, Evothings Viewer and Evothings Cloud Services (not applicable for this tutorial).

  1. Download and install the Evothings Workbench (v2.1.0-beta 2 and up) on your computer. The workbench is a development environment to download your applications to a smartphone, facilitates debugging and more.
  2. Start the workbench and click the Connect tab.
  3. Click GET KEY to receive a key. You will use this key to connect one or more smartphones to the workbench.
    Get a personalized key to connect through a mobile app

    Note, if you receive a prompt to enter the Cloud Token, follow the suggested link to get the token, as shown below:

  4. Install the Evothings Viewer (iOSAndroid) on the smartphone. In this particular example there is no specific requirement for the choice of a smartphone.
  5. Open the Evothings Viewer and enter the key obtained previously and click Connect, as shown below. If the connection is established successfully, you'll be prompted with a message that states so.
  6. Click Examples in the Evothings Workbench on your computer and find the example named “MediaTek LinkIt Smart 7688 Duo”, as shown below.
  7. Click Run. The example should load on all connected smartphones, as shown below.

You've successfully established a connection between your computer and your smartphone and ran the application.

Conclusion

You’ve now successfully established connection between your LinkIt Smart 7688 Duo device and a smartphone using the Firmata protocol and Evothings Studio for remote control. For more information on the MediaTek LinkIt Smart 7688 Duo development and prototyping board refer to LinkIt Smart 7688 Duo getting started guide.

This tutorial can serve as a reference to develop your own cross platform mobile applications or embedded IoT applications. If you’re interested in more advanced data exchange between the development board and your smartphone learn to apply the chrome.sockets APIs that enable you to open a plain socket to your development board from within your application.