Serve a Web IDE directly off your network-connected Espruino!

Posted on Wed 21st, March 2018

• #1

Gordon

There are still a few kinks to iron out, but if you upload this code to your Espruino WiFi board:

var WIFI_NAME = "...";
var WIFI_PASS = "...";

function onPageRequest(req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(`<html>
<body style="margin:0px"> 
<iframe id="ideframe" src="https://www.espruino.com/ide/" style="width:100%;height:100%;border:0px;"></iframe>
<script src="https://www.espruino.com/ide/embed.js"></script>
<script>
  var ws = new WebSocket("ws://" + location.host + "/ws", "serial");
  var Espruino = EspruinoIDE(document.getElementById('ideframe'));
  Espruino.onports = function() {
    return [{path:'local', description:'Local Device', type : "net"}];
  };
  Espruino.onready = function(data) { Espruino.connect("local");};
  Espruino.onwrite = function(data) { ws.send(data); }
  ws.onmessage = function (event) { Espruino.received(event.data); };
  ws.onclose = function (event) { Espruino.disconnect(); };
</script>
</body>
</html>`);
}

/* Quick hack to ensure that on older builds,
process.env fits into available buffers */
if (process.env.EXPORTS) {
  process.env = process.env;
  delete process.env.EXPORTS;
}
/* Hack to ensure that `reset` won't cause us problems */
global.reset = function() {
  console.log("Ignoring reset() request");
};

var wifi = require("Wifi");
wifi.connect(WIFI_NAME, { password : WIFI_PASS }, function(err) {
  if (err) {
    console.log("Connection error: "+err);
    return;
  }
  console.log("Connected!");
  var server = require('ws').createServer(onPageRequest);
  server.listen(80);
  server.on("websocket", function(ws) {
    ws.on('message',function(msg) { LoopbackA.write(msg); });
    LoopbackA.on('data',function(msg) { ws.send(msg); }); 
    ws.on('close', function() { 
      LoopbackA.removeAllListeners();
      USB.setConsole(); 
    });
    LoopbackB.setConsole();
  });
  wifi.getIP(print);
});

Then you can connect to the displayed IP address and get a full Web IDE that you can upload code from!

Obviously if you reset() the board then the WiFi connection is lost and the IDE stops responding so that has been disabled (and also large print statements will be lost) but otherwise it's actually pretty usable. I'd recommend you use one of the latest Espruino firmwares though.

This should also work on other devices with pretty minimal changes (eg. USB->Serial1 on disconnect) - I'd be interested to hear how you get on.

• #2

Wilberforce

Looks great!

Is line 28 correct? It's assigning the var to itself?

On the esp8266 there is way of setting the hostname, so then you can use for example http://espruino.local - is there a way of doing this on this board - then you don't need to worry about the IP address..
• #3

Gordon

Is line 28 correct? It's assigning the var to itself?

Yes - usually calling process.env creates the var on the fly, but assigning it to itself stops that, so you can then have control over what's in it. It's not needed on the newest builds - it's just to ensure the IDE can still get the board info fine on old builds.

Good point about the host name - yes, it should be pretty easy to call wifi.setHostname.

Also the IDE could also cope with disconnects a bit better (maybe with auto-reconnect) in which case you really could call reset - it'd just require a bit of a pause while the board reconnected to WiFi.

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Serve a Web IDE directly off your network-connected Espruino!

About