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
3) In a browser navigate to https://neonious.one
4) Press the red and green buttons to toggle the LEDS on the board
Using the IDE
1) Navigate to https://neonious.one:8443/
2) Click Sign In
In the file explorer on the left you will see two folders containing a few files:
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);
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:
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
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
Buy Me A Coffee
If you found something useful above please say thanks by buying me a coffee here...