Neonious One: ESP32 Based Microcontroller – Node.JS API

Neonious Nodejs Microcontroller

The Neonious One is an ESP32 based microcontroller that runs JavaScript. Program code directly via WiFi using an onboard IDE.

Normally with microcontrollers  you edit the code in your IDE, compile and upload the compiled file. With the Neonious IDE you can directly edit and run code on the device. You can make a change in the IDE, save, run and then see the changes instantly in the browser. This can make learning and development much faster. Out of the box it’s very easy to get running…

Quick Connect and Test

1) Plug into USB power
2) Find the device SSD in your WiFi and connect with the password from the back of the box

Neonious Wifi Connected
3) In a browser navigate to https://neonious.one
4) Press the red and green buttons to toggle the LEDS on the board

Neonious Led Toggle

Using the IDE

1) Navigate to https://neonious.one:8443/
2) Click Sign In

Neonious Ide

In the file explorer on the left you will see two folders containing a few files:

Neonious Ide File Explorer
The index.js file in the src folder is the server code. This could be compared to a Sketch in the Arduino environment. The files in www are the static files used by your browser.

Add the Device to your WiFi network

You need to connect the device to your WiFi network to access updates and the Node.js library.

1) In the IDE go to Settings > Interfaces
2) Change the Mode to ‘Connect to AP’
3) Update the settings and click Save
4) Find the IP address of the device on your network (Look for the connected devices in your router)
5) Connect to device-ip-address:8443/IDE  (you can ignore the certificate error)

Simple Client Server Example

Below is an example to explain how the Neonious works. The client (browser) connects to the Neonious (server) and requests the index.html page. This html page contains JavaScript that makes a  request in the background every second to a URL on the server. The server on receiving this URL creates a random number and serves this back to the client. The client (browser) displays this number.

This isn’t the best way of coding something like this but it shows how the system works.

Client

The file requested by the browser (the index.html in the www directory) contains this JavaScript. The browser itself runs this code which requests the URL /request-random every second and displays the number received on the page.

function everySecond(){
  let myRequest = new Request('/request-random');
  fetch(myRequest).then(function(response) {
    if (!response.ok) {
      throw new Error('HTTP error, status = ' + response.status);
    }             
    return response.text().then(function(text) {
      document.querySelector('.rndnumberdisplay').innerHTML = text;
    });
  });  
}
var t=setInterval(everySecond,1000);

Full Client code on pastebin: https://pastebin.com/Z6UZwQ0S

Server

On the server the code in the file is in three parts…

First the Node.js http and fs modules are included:

let http = require('http');
let fs = require('fs');

Then a function to serve any requested static html files from the www directory on the device:

function writeStatic(path, res) {
  fs.readFile('/www/' + path, (err, data) => {
    let contentType = 'text/html';
    res.writeHead(200, {'Content-Type': contentType});
    res.end(data);
  });
}

Finally a function for creating a server listening for the URLs / or /request-random.  On /request-random the server creates a random number and sends it back to the browser. On / the server serves the index.html file from the www directory:

http.createServer(function(req, res) {
  // Create and 'display' random number
  if (req.url == '/request-random') {
    rndNumber = Math.floor(Math.random() * 100) + 1;
    rndNumber = rndNumber.toString();
    const rndNumberBuffer = Buffer.from(rndNumber);
    res.writeHead(200, { 'Content-Type': 'text/plain'  });
    res.end(rndNumberBuffer);
  }
  if (req.url == '/') {
  // Output static file
    writeStatic('/index.html', res);
  }
}).listen(80);

Random Numbers in JS

Full server code on pastebin: https://pastebin.com/KpQ61NkA

Simple MP3 Jukebox Example

The IDE makes it very easy to upload files . In this example I’ve uploaded some small MP3 files:

File Manager MP3 Files

Client

The index.html file in the www directory displays three buttons that when clicked call a JS function which sends a request to the server (The Neonious One) for an MP3 file.

<html>
<head>
  <title>Music Player</title>
    <script>
      function playTune(file){
        if (typeof audio !== 'undefined') {
          audio.pause();
          audio=null;            
        }
        audio = new Audio(file);
        audio.play();
      }
    </script>
</head>
<body>
  <h1>Simple Music Player</h1>
  <button onclick="playTune('track1.mp3')">Play</button>
  <button onclick="playTune('track2.mp3')">Play</button>
  <button onclick="playTune('track3.mp3')">Play</button>
     
</body>
</html>

Server

When the Neonious One receives a request for an MP3 file it creates a stream and then pipes the MP3 file to the browser for playback.

import * as http from 'http';
import * as fs from 'fs';
 
http.createServer((req, res) => {
 
  if (req.url.substr(-4) == '.mp3') {
 
    if (typeof stream === 'object' && typeof stream.pipe === 'function') {
      stream.unpipe(res);
      stream.destroy();
    }
    stream = fs.createReadStream('/www' + req.url);
    stream.pipe(res);
 
  } else {
 
    fs.readFile('/www/' + (req.url == '/' ? 'index.html' : req.url), (err, data) => {
      let contentType = 'text/html';
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(data);
    });
 
  }
 
}).listen(80);

 

NPM Registry

The Neonious IDE gives direct access to the NPM Registry. Modules can be managed using a graphical interface directly in the IDE

NPM Graphical Manager

This can be seen in this video on YouTube: https://youtu.be/miTX0Lyygdc?t=2m49s

 

References:

Neonious One website: https://www.neonious.com/neoniousOne
Neonious introduction video: https://www.youtube.com/watch?v=miTX0Lyygdc
Node.js microcontroller port: https://www.lowjs.org/
Low.js vs alternatives: https://www.lowjs.org/lowjs-vs-alternatives.html

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top