Squix – TechBlog https://blog.squix.org Tue, 27 Nov 2018 06:59:43 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 121913304 ESP32: M5 Camera Module https://blog.squix.org/2018/11/esp32-m5-camera-module.html https://blog.squix.org/2018/11/esp32-m5-camera-module.html#comments Tue, 27 Nov 2018 06:59:43 +0000 https://blog.squix.org/?p=4394 Read More

]]>
The M5 stack has some clever hardware in its portfolio. Honestly, so far I only had contact with this camera module. Here is a super quick guide to get the camera running in your Arduino IDE

Usually you would use the software stack provided by M5 to get their hardware running. For simplicity I prefer to be a bit more independent from their libraries. So I was looking for a way to use just standard libraries of the ESP32 Arduino platform. To my luck mic159 already did the hard work and ported the necessary classes to the Arduino platform.

But when I tried to run his code I couldn’t figure out how to get the streamed images to display on my laptop. The code seems to send the frames per UDP to the second IP in the Soft AP range, as soon as a device is connected. I tried to use VLC but to no avail. So I forked the repository and altered the code to offer the captured images over a web server.

Setup

  • Make sure you have the latest version of the ESP32 platform setup. If you haven’t, then follow the instructions here
  • Now checkout my fork of mic159’s code from github. Either with git clone or by downloading the zip file
  • Connect the M5Cam to your computer, set the Serial Port and flash the code to the module

 

Running the Cam Server

  • Now Connect your computer to an SSID “m5cam” and open the browser at 192.168.4.1. You should now see a live feed from the camera
  • To get a still frame you can open 192.168.4.1/camera

 

Review & Outlook

The quality of the picture is quite decent. With the current code I coudn’t get the module to run in highest resolution (1600×1200) because there is not enough memory for the framebuffer. But I maybe there is a way around that, if you just stream the content directly to web server clients. One of my next experiments will be to see if I can get Google’s vision API to detect objects in the captured images. The module also has two pads to solder a LiPo battery and also has the necessary charger chip. This should make it very easy to use for many applications.

 

Where to buy the module?

I got mine from banggood, but you can also find the modules on Aliexpress

]]>
https://blog.squix.org/2018/11/esp32-m5-camera-module.html/feed 1 4394
How to turn (almost) any 3D printer into a laser engraver/cutter https://blog.squix.org/2018/09/how-to-turn-almost-any-3d-printer-into-a-laser-engraver-cutter.html https://blog.squix.org/2018/09/how-to-turn-almost-any-3d-printer-into-a-laser-engraver-cutter.html#comments Thu, 27 Sep 2018 20:13:54 +0000 https://blog.squix.org/?p=4351 Read More

]]>
A while ago I bought a cheap Chinese 3D printer, a Tevo Tarantula for about USD $200. It was great fun to put the many pieces together into a relatively complex working machine. Putting it together by myself helped me a lot to understand where problems in the print could come from. And it also reduced the fear to constantly change parts to improve quality and reliability of the prints. Now the time felt right to take another step by adding a new tool to the 3D printer mechanics: a 2.5W laser module. 

With this mod you won’t be able to cut thick plywood but thin plywood, balsa wood, EVA foam, card board and paper should be no problem. And you can engrave and etch many materials for instance leather. With this mod you can switch within seconds from 3D printer mode to laser cutter/engraver mode. So let’s get started!

The Laser Module

After watching many youtube videos and reading blog posts about the topic I came to the conclusion that a 2.5W module would be a good place to start. The beauty about the module I chose is that it comes with just one barrel jack power connector. No additional regulator board needed. You just connect it to the part fan pins of your printer driver board.

Also the laser module has a focus ring which is great to adjust the focal length to the currently set Z height of the module. To cool the laser module during continued operation there is a tiny fan on it’s top.

Originally my Tevo Tarantula configuration didn’t have a part cooling fan but I added it a while back to improve printing quality. The voltage on fan pins can be regulated by software. Sometimes you want the fan to cool the part as much as possible and sometimes a light breeze is enough. This also is great for our little laser module: we can adjust the intensity of the laser from the driver software! It’s not just on or off but 255 levels in between.

2.5W Laser Module with female barrel jack

When I bought the module it was available for around USD $60 on Banggood, but I think it was on sale at the time. Here is the shopping link.

Don’t forget to order safety goggles to protect your eyes from the intense laser light:

You can buy them on Banggood for just a couple of dollars: shopping link

 

The Power Connections

I’m not using the part fan while I’m using the laser cutter and vice versa. But they both use the same pins on the driver board. So I put just one two wire connection from the fan pins of the MKS Gen board to the hot end/ laser carriage with a male barrel jack at the end. I then soldered a female barrel jack to the part fan cable. Now to switch between the laser and the part fan I can just switch the barrel jacks which takes less than a few seconds.

The cable coming from the driver board (left), the fan connector (middle) and the laser connector (right)

The Laser Mount

There are many clever designs out there to easily replace one tool head with another. There you usually remove the hot end to add another tool. The sophisticated designs use magnets to do this quickly. But I didn’t really want to “endanger” the quality of my carefully adjusted print head. So I decided to mount the laser module and other potential future tool heads to the back of the X carriage. The advantage of this design is that I don’t have to touch the print head at all to use the laser module. The disadvantage is that I theoretically loose a couple of centimeters of build volume in Y direction. But this can be compensated by a longer print bed.

Another reason to design the mount myself was to use Fusion 360. I recently followed a great tutorial (watch it here) to design snap fit boxes for 3D printing in Fusion 360. This tutorial closed a few gaps in my knowledge and I was finally capable of design something myself.

I started with a schema I had of the laser module and designed the part which would be attached to the module. Then I designed the part which would be attached to the X carriage

You can get the STL files on Thingiverse: https://www.thingiverse.com/thing:3123997

Firmware

There’s one thing I had to change in the firmware. Before the change my Tarantula would shortcut all round shapes. By looking at the terminal I  saw that the Marlin firmware complaint that the G2 and G3 commands are not supported. To do so I had to uncommend the line

#define ARC_SUPPORT 

in Configuration_Adv.h. After uploading the modded firmware the laser cutter started to work fine.

 

Controlling the Beast

I’m controlling my 3D printer from OctoPrint running on a Raspberry Pi. This works also very well with the laser cutter/ engraver. You just need a program creating GCode for you, then you load the GCode into OctoPrint and off you go. You can also control the laser manually by entering

M106 S30
M107

The first command turns the laser on with an intensity of 30 (with a total of 255). I usually use this command to adjust the focus and the starting point on the object to be cut. The second command turns the laser off.

Of course running the laser manually would not be so much fun. To turn a vector graphic into GCode I use a InkScape plugin (Instructions). This plugin creates movements following the outline of your vector shapes. This is great for cutting outlines or texts or a cardboard glider:

Laser cut card board glider

If you want to engrave a photo then you need another tool, which “sets” dot on the object according to the brightness of the source image. In that case you can use a not very pretty but useful web tool: http://nebarnix.com/img2gco/

Another nice thing you can do with a laser cutter is to create puzzles. There is a little online tool to create the vector data for puzzles: http://www.wolfiesden.com/Laser/PuzzleCreator.asp You then have to import the SVG vector file into InkScape and convert it into GCode. This is how it looks like after cutting thin card board:

You can also send messages to your loved ones:

Toast for Mami

Summary

I hope this very brief write up gave you the important first hints and links to get started. The first things I cut or engraved worked out really well. I started making stamps but this deserves it’s own blog post…

]]>
https://blog.squix.org/2018/09/how-to-turn-almost-any-3d-printer-into-a-laser-engraver-cutter.html/feed 1 4351
Tevo Tarantula Extensions: 3D Touch Bed Leveling Sensor https://blog.squix.org/2018/09/tevo-tarantula-extensions-3d-touch-bed-leveling-sensor.html https://blog.squix.org/2018/09/tevo-tarantula-extensions-3d-touch-bed-leveling-sensor.html#respond Thu, 13 Sep 2018 12:28:47 +0000 https://blog.squix.org/?p=4344 Read More

]]>
I’m constantly adding new features to my Tevo Tarantula printer. The latest addition is a bed leveling sensor.

It improves the quality of the prints a lot and in addition you don’t have to adjust the print bed manually every time. If properly configured it runs a measurement sequence of several points (3×3 in my case) before every print and uses this information to compensate during the print.

Where to buy?

You can find it in many places. I bought it here (Banggood)

]]>
https://blog.squix.org/2018/09/tevo-tarantula-extensions-3d-touch-bed-leveling-sensor.html/feed 0 4344
Squix: The Exciting Next Step! https://blog.squix.org/2018/02/squix-the-exciting-next-step.html https://blog.squix.org/2018/02/squix-the-exciting-next-step.html#comments Thu, 01 Feb 2018 09:39:01 +0000 https://blog.squix.org/?p=4270 Read More

]]>
In the last few years blog.squix.org has grown from a personal idea dumping ground to a well visited page around maker projects. Two years ago I started looking for a way to make it easier for you to rebuild my projects. The first step was to provide links to shops where you could buy the components to build those projects. But I wanted more and the ESP8266 Weather Station Kit was the first hardware product I offered for sale.

With your help I managed to continuously improve the products step-by-step. At first the products where sometimes shipped in several packages which was not very customer friendly. Then I found a manufacturer in China who would assembly a kit for me and I started selling them on Amazon and on my own blog, shipped directly from China. Sometimes great things happen to those who go out to conquer the world and a very friendly soul in China helped me to develop and manufacture more products. In the meantime we have become very good friends and without his help it wouldn’t have been possible to get out with new projects so quickly. Many thanks to Dr. Fred!

All this time I have been doing this in my free time while my family and my daytime job were my priorities. Now this adventure has grown to a level where this construct needed a proper solid foundation. That’s why earlier this year together with my dear friend and colleague Marcel “Frightanic” Stör I started a company. If you are familiar with the NodeMCU/Lua firmware for ESP8266/ESP32 his name might ring a bell. He has been one of several project maintainers since summer 2015. He also contributed a couple of tools for the NodeMCU community: NodeMCU cloud firmware builderNodeMCU Docker build imageNodeMCU PyFlasher.

This new company is called ThingPulse Ltd and Marcel and I plan to continue to provide the maker community with software and hardware while also building products for consumers. From February 1st on we will start selling the Squix products on our new website: https://thingpulse.com/. In the beginning our products might still be branded as Squix, but once we refresh the stocks you will start seeing the ThingPulse brand. I’m confident that with your support ThingPulse will be a big success! What will change for you? Hopefully not much: we will continue to provide you with great products and a 1st class support at an affordable price. I will keep https://blog.squix.org as my personal outlet o blog about interesting maker projects.

Interested in coming along with us on this exciting new journey?

Follow @thingpulse, connect with us on Facebook and subscribe to our newsletter on thingpulse.com.

]]>
https://blog.squix.org/2018/02/squix-the-exciting-next-step.html/feed 2 4270
Using Seeeduino LoRaWAN with GPS and Loriot.io https://blog.squix.org/2017/11/using-seeeduino-lorawan-with-gps-and-loriot-io.html https://blog.squix.org/2017/11/using-seeeduino-lorawan-with-gps-and-loriot-io.html#comments Wed, 22 Nov 2017 15:46:16 +0000 https://blog.squix.org/?p=3784 Read More

]]>
In the first blog post blog post in this series I showed you how can configure the Seeeduino LoRaWAN module to connect it to TheThingsNetwork (TTN). The second post showed you how the LoRaWAN message can be sent to a Google Spreadsheet. Now this post goes one step further and uses the GPS module in the Seeeduino to post the coordinates together with humidity and temperature to a Google Spreadsheet. We then visualize the coordinates on Google Maps. To make it even more interesting decided to replace the TTN backend with the backend of a Swiss startup called Loriot.io. They offer a free service where you have to connect one LoRaWAN gateway in order to participate.

Setting up a Loriot.io Account

Loriot.io is a cool Swiss startup located close to Zurich and they are proving the infrastructure for LoRaWAN applications. Beside their commercial offerings they also have a service which doesn’t cost you anything. But in return you have to contribute to the network by connecting your own LoRaWAN gateway. I’m not going into detail here how to do that but here is some additional information: I configured my existing TTN gatway with a Raspberry Pi Zero W and a IMST IC880A concentrator to forward packages also to the Loriot network. In order to do that I just had to alter the local_conf.json file: Loriot uses a slightly different gateway ID (with FFFF in the middle, the default with TTN is FFFE). I also had to add the Loriot servers to the same configuration file:

{
        "gateway_conf": {
                "gateway_ID": "XXXXXXFFFFXXXXXX",
                "servers": [
                  {
                        "server_address": "router.eu.thethings.network",
                        "serv_port_up": 1700,
                        "serv_port_down": 1700,
                        "serv_enabled": true
                },
                {
                        "server_address": "eu1.loriot.io",
                        "serv_port_up": 1780,
                        "serv_port_down": 1780,
                        "serv_enabled": true,
                        "keepalive_interval": 10,
                        "stat_interval": 30,
                        "push_timeout_ms": 100,

                        "forward_crc_valid": true,
                        "forward_crc_error": false,
                        "forward_crc_disabled": false
                }],
                "ref_latitude": 0,
                "ref_longitude": 0,
                "ref_altitude": 0,
                "contact_email": "",
                "description": "ttn-ic880a"
        }
}

After that you can create a free account on the Loriot.io page. Now setup the gateway and place the created ID in the local_conf.json file, assuming that you are using a similar setup like mine (I’m using a semtek packet forwarder). Now you can switch to the “Application” menu and select the “Sample Application”. Now click on “Enroll device”:

Enter your device ID in the form field and click “Enroll OTAA / ABP device”. In the first post I showed you how to figure out the device ID. Now navigate to “Devices” and click on the newly created device. Here you can find the DevEUI, AppEUI and AppKey which you’ll have to use in the next paragraph.

 

Setting up the Seeeduino Code

In order to have the Seeeduino read out the GPS coordinates and the temperature and humidity we have to install two libraries. Download the TinyGpsPlus library from http://arduiniana.org/libraries/tinygpsplus/ Then install also the DHT library from Adafruit from the library manager under Sketch > Include Library > Library Manager… Menu. Copy the code you previously generated in the Loriot.io interface when adding a new device.

//Download http://arduiniana.org/libraries/tinygpsplus/
#include <TinyGPS++.h>
#include <LoRaWan.h>
#include "DHT.h"


TinyGPSPlus gps;
#define DHTPIN A0 // what pin we're connected to

#define DHTTYPE DHT11 // DHT 11
 
DHT dht(DHTPIN, DHTTYPE);
char buffer[256];


void setup(void)
{
    SerialUSB.begin(115200);
    Serial.begin(9600);
    
    lora.init();
    
    memset(buffer, 0, 256);
    lora.getVersion(buffer, 256, 1);
    SerialUSB.print(buffer); 
    
    memset(buffer, 0, 256);
    lora.getId(buffer, 256, 1);
    SerialUSB.print(buffer);
    SerialUSB.println("That was the id");
    // void setId(char *DevAddr, char *DevEUI, char *AppEUI);
    lora.setId(NULL, "XXX", "XXX");
    // setKey(char *NwkSKey, char *AppSKey, char *AppKey);
    lora.setKey(NULL, NULL, "XXX");
    
    lora.setDeciveMode(LWOTAA);
    lora.setDataRate(DR0, EU868);
    
    lora.setChannel(0, 868.1);
    lora.setChannel(1, 868.3);
    lora.setChannel(2, 868.5);
    lora.setChannel(3, 867.1);
    lora.setChannel(4, 867.3);
    lora.setChannel(5, 867.5);
    lora.setChannel(6, 867.7);
    
    lora.setReceiceWindowFirst(0);
    lora.setReceiceWindowSecond(869.5, DR3);
    lora.setAdaptiveDataRate(false);
    
    lora.setPower(20);
    
    while(!lora.setOTAAJoin(JOIN, 20000));
    SerialUSB.println("After OTAA join");

    // Start DHT sensor
    dht.begin();
}

void loop(void)
{   
    while (Serial.available() > 0) {
      gps.encode(Serial.read());
    }
    if (gps.altitude.isUpdated()) {
      SerialUSB.println(gps.altitude.meters());
      SerialUSB.print("LAT=");  SerialUSB.println(gps.location.lat(), 6);
      SerialUSB.print("LONG="); SerialUSB.println(gps.location.lng(), 6);
      SerialUSB.print("ALT=");  SerialUSB.println(gps.altitude.meters());
      long latEncoded = (gps.location.lat() * 8388606) / 90;
      long lonEncoded = (gps.location.lng() * 8388606) / 180;
      SerialUSB.print("Lat encoded: "); 
      SerialUSB.println(latEncoded);
      SerialUSB.print("Lon encoded: "); 
      SerialUSB.println(lonEncoded);
      float h = dht.readHumidity();
      float t = dht.readTemperature();
      SerialUSB.print("Humidity is: ");
      SerialUSB.print(h);
      SerialUSB.print(", Temperature: ");
      SerialUSB.print(t);
      bool result = false;
      byte data[10] = {0};
      data[0] = h;
      data[1] = t + 100;
      data[2] = (byte) (latEncoded >> 16);
      data[3] = (byte) (latEncoded >> 8);
      data[4] = (byte) latEncoded;
      
      data[5] = (byte) (lonEncoded >> 16);
      data[6] = (byte) (lonEncoded >> 8);
      data[7] = (byte) lonEncoded;

      result = lora.transferPacket(data, 10);
      //result = lora.transferPacket(data, 10, 10);
      
      if(result)
      {
          short length;
          short rssi;
          
          memset(buffer, 0, 256);
          length = lora.receivePacket(buffer, 256, &rssi);
          
          if(length)
          {
              SerialUSB.print("Length is: ");
              SerialUSB.println(length);
              SerialUSB.print("RSSI is: ");
              SerialUSB.println(rssi);
              SerialUSB.print("Data is: ");
              for(unsigned char i = 0; i < length; i ++)
              {
                  SerialUSB.print("0x");
                  SerialUSB.print(buffer[i], HEX);
                  SerialUSB.print(" ");
              }
              SerialUSB.println();
          }
          delay(1000 * 60 * 5);
      }
    }
    
}


Setting Up the Spreadsheet

Log into your Google Docs account and create an new Spreadsheet

Give the Spreadsheet a meaningful name, e.g. LoriotLogger

You might also want to add the column headers:

rssi seqno data humidity temp lat lon freq ack fcnt dr bat port snr EUI cmc ts

Copy/paste them from here and insert them before all other rows.

Then go to Tools > Script Editor…

Replace the few lines of code with the code below:

// 2017 by Daniel Eichhorn, https://blog.squix.org
// Inspired by https://gist.github.com/bmcbride/7069aebd643944c9ee8b
// Create or open an existing Sheet and click Tools > Script editor and enter the code below
// 1. Enter sheet name where data is to be written below
var SHEET_NAME = "Sheet1";
// 2. Publish > Deploy as web app
//    - enter Project Version name and click 'Save New Version'
//    - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
// 3. Copy the 'Current web app URL' and post this in your form/script action

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

// If you don't want to expose either GET or POST methods you can comment out the appropriate function
function doGet(e){
  return handleResponse(e);
}

function doPost(e){
  return handleResponse(e);
}

function handleResponse(e) {
  Logger.log("arrived in handleResponse");
  var jsonData = JSON.parse(e.postData.contents);
  
  try {
    // next set where we write the data - you could write to multiple/alternate destinations
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME); 

    var nextRow = sheet.getLastRow()+1; // get next row
    var row = [];
    var headerRow = [];

    row.push(jsonData.rssi);
    row.push(jsonData.seqno);
    row.push(jsonData.data);
    var humidityHex = jsonData.data.substring(0, 2);
    row.push(parseInt(humidityHex, 16));
    var tempHex = jsonData.data.substring(2, 4);
    row.push(parseInt(tempHex, 16) - 100);
    var latHex = jsonData.data.substring(4, 10);
    var lonHex = jsonData.data.substring(10, 16);
    var latEncoded = parseInt(latHex, 16);
    var lonEncoded = parseInt(lonHex, 16);
    row.push((latEncoded / 8388606) * 90);
    row.push((lonEncoded / 8388606) * 180);

    row.push(jsonData.freq);
    row.push(jsonData.ack);
    row.push(jsonData.fcnt);
    row.push(jsonData.dr);
    row.push(jsonData.bat);
    row.push(jsonData.port);
    row.push(jsonData.snr);
    row.push(jsonData.EUI);
    row.push(jsonData.cmd);
    row.push(jsonData.ts);

    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e) {
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } 
}


Publish > Deploy as web app

  • enter Project Version name and click ‘Save New Version’
  • set security level and enable service (most likely execute as ‘me’ and access ‘anyone, even anonymously)
  • Copy the ‘Current web app URL’ and post this in your form/script action

Give permissions to the script:

Copy the URL:

 

Connecting Loriot with your Google Spreadsheet

Switch again to the Loriot page in your browser. Navigate to the Sample App > Output page:

Click on the “Change button” and select HTTP Push. Now enter the address from Google Docs, when you published the app. Done, Loriot should now send the data to Google Docs! One Note: I was logged into two google accounts at the same time, so my URL generated had an additional “/u/1” and it started with https://script.google.com/macros/u/1/XXX. If your URL looks like this then remove the /u/1/ from the URL.

 

Starting the Seeduino

Now let’s see if the data arrives!

Hurray!

 

Visualize the data on Google Maps

Now to the finishing: let’s put the markers on a map! Google Spreadsheets only have very simple maps so navigate to https://www.google.com/maps/d/u/0/.

In the left menu select “Import” and select your Spreadsheet from Google drive.

Now select the “lat” and “lon” column as the coordinate columns and the seqno column for the title. Create the map and you get a wonderful representation of your geo fixes, sent over LoRaWan to Loriot.io, from there to a App Script instance, which inserted the data into a spreadsheet, and from there you imported the data into a map! Wow! If you got it to work you really made it!

Do you have questions about this post? Go over to https://support.squix.org and place it there so everyone can profit!

]]>
https://blog.squix.org/2017/11/using-seeeduino-lorawan-with-gps-and-loriot-io.html/feed 1 3784
Update to the ESP8266 WeatherStation Color Kit https://blog.squix.org/2017/11/update-to-the-esp8266-weatherstation-color-kit.html https://blog.squix.org/2017/11/update-to-the-esp8266-weatherstation-color-kit.html#comments Thu, 16 Nov 2017 07:35:56 +0000 https://blog.squix.org/?p=3705 Read More

]]>
With the last production batch we secretly updated the ESP8266 WeatherStation Color Kit. First change is the increased size of the custom PCB, which now has the same size as the TFT board. We also added holes and two spacers and female headers so that the TFT board and the custom PCB can be easily separated, in case you want to use it for another project. The spacers help to get a very stable setup.

The following video shows how you can put the kit together

 

Order your copy of the new updated kit here: ESP8266 WeatherStation Color Kit!

]]>
https://blog.squix.org/2017/11/update-to-the-esp8266-weatherstation-color-kit.html/feed 3 3705
How To Build ESPaper Content In Less Time https://blog.squix.org/2017/11/how-to-build-espaper-content-in-less-time.html https://blog.squix.org/2017/11/how-to-build-espaper-content-in-less-time.html#comments Thu, 09 Nov 2017 12:10:35 +0000 https://blog.squix.org/?p=3657 Read More

]]>
Do you have these moments when you start to realize that something you just created is gonna be a game changer, at least for you but maybe also for others? Last week I had such a moment when I decided to follow up on an idea which was spinning in my head for quite a while now.

I really got frustrated about how complicated, time-consuming and error-prone it was to develop on the Arduino IDE for the 3 ESP8266 based products I have created so far. In my professional life as a Java programmer we have great tools which allow us to do a change in the code and then check the results only a moment later on the compiled software. If we’re developing a web application I usually just have to click the refresh button of the browser to see the changes I did to the code.

The Arduino IDE on the other hand is quite another game. You click the compile button, you get some syntax errors, you fix them, you compile again, then you try to upload but you get a communication error, you do some mambo jambo do upload it again, then you realize that the change you did doesn’t actually look the way you wanted it to look. And then the loop starts over. Wouldn’t it be nice if programming new content for the TFT, OLED or e-paper displays would have a much shorter feedback loop? Something that would work similarly to a web application?

 

Why not use the Server/Client Pattern of HTML?

I’ve been in the software industry long enough to see that there are barely completely new inventions but rather new versions of the same concept, adapted to a new device or platform. A fairly successful architecture is that of HTML provided by a server over HTTP(S) and rendered in your browser with beautiful images, colors  and fonts. So I thought why not apply this concept to the world of embedded devices. For a short moment I considered to write a parser for HTML & CSS (style sheets) but abandoned the idea quickly due to the memory constraints on an embedded device. But I thought I could quite quickly come up with a similar concept using JSON and the JSON streaming parser I had implemented a while back. The streaming parser doesn’t have to keep the whole JSON object in memory but can process it on the go! This ideal for processing a JSON object containing drawing instructions and keeps the memory foot print on a minimal level.

As an added benefit I wanted to have faster way to test the result created on the server. Refreshing the embedded device and the display takes several seconds. Wouldn’t it be great to have a way to validate the result? To test the concept I quickly put together a script in the easiest server language I know: PHP. I also added a way to switch the output to SVG instead of JSON in order to test the output and visualize it before it’s being rendered on the device. This turned out to be a really powerful concept: fetch all data on the (PHP) server and just send the drawing commands (or even just the bitmap) to the ESP. Hard tasks like going through a OAuth2 process can now be done on the server where good client libraries exist and programming is much easier and faster.

Here is a sample of how a JSON command looks like:

{
 "command": "drawString",
 "params": {
   "x1": "2",
   "y1": "-2",
   "text": "Updated: 2017-11-09 11:35:28"
 }
}

And this is how sample code in PHP looks like:

$canvas = new Canvas(296, 128);
$canvas->setJson($isJson);
$canvas->start();
$canvas->registerFont($baseUrl . "/fonts/", "Arial", "Plain", 10, "ArialPlain10");
$canvas->setFont("ArialPlain10");
$canvas->setTextAlignment("LEFT");
$canvas->drawString(2, -2, "Updated: ".date("Y-m-d H:i:s"));
$canvas->drawLine(0, 11, 296, 11);
$canvas->setTextAlignment("RIGHT");
$canvas->drawString(274, -1, $voltage. "V ".$percentage."%");
$canvas->drawRect(274, 0, 18, 10);
$canvas->drawRect(293, 2, 1, 6);
$canvas->fillRect(276, 2, round(14 * $percentage / 100), 6);
$canvas->commit();
$canvas->end();

After I showed first results Fabrice Weinberg (@FWeinb) approached me and showed me his JavaScript parser which tests the the actual produced JSON object and THEN renders the SVG. This is a great addition to the tool set of this approach and we’ll certainly have a look at it how we can use it.

The JavaScript based ESPaper-Json emulator by Fabrice Weinberg

 

Thanks to this good tooling it is now much easier to build applications for the ESPaper or other similar displays. This is another example where I connected to my Google Calendar to display upcoming events:

ESPaper Applicaton with Google Calendar Access – JSON rendered on the server

 

If you are interested have a look at the beta version of the code here:

 

The ESPaper modules are available here:

]]>
https://blog.squix.org/2017/11/how-to-build-espaper-content-in-less-time.html/feed 5 3657
ESPaper: Configuration web interface https://blog.squix.org/2017/10/espaper-added-programming-free-config-interface.html https://blog.squix.org/2017/10/espaper-added-programming-free-config-interface.html#respond Wed, 18 Oct 2017 18:58:56 +0000 https://blog.squix.org/?p=3462 In the following video I explain the new web interface for configuring the ESPaper WeatherStation application. This allows you to change WiFi or location settings without reprogramming the ESPaper

 

The ESPaper Plus Kit is available from the Squix Shop

 

]]>
https://blog.squix.org/2017/10/espaper-added-programming-free-config-interface.html/feed 0 3462
ESPaper: Introduction Video 2.9″ Kit https://blog.squix.org/2017/10/espaper-introduction-video-2-9-kit.html https://blog.squix.org/2017/10/espaper-introduction-video-2-9-kit.html#comments Wed, 11 Oct 2017 11:46:21 +0000 https://blog.squix.org/?p=3347

]]>
https://blog.squix.org/2017/10/espaper-introduction-video-2-9-kit.html/feed 4 3347
2.9″ ESPaper Kits ready for pre-order https://blog.squix.org/2017/09/2-9-espaper-kits-ready-for-pre-order.html https://blog.squix.org/2017/09/2-9-espaper-kits-ready-for-pre-order.html#respond Sat, 30 Sep 2017 15:17:53 +0000 https://blog.squix.org/?p=3183 Read More

]]>
I am very happy to announce that the 2.9″ ESPaper module is now ready for your pre-orders in two versions.

The 2.9″ ESPaper Lite Kit only contains the bare module. In order to program the module you need a 3.3V capable serial-to-USB converter. To keep the average power consumption as low as possible we decided to keep the programmer separate from the module. It is available from the Squix Shop.

 

2.9" ESPaper Module Front Legend
2.9″ ESPaper Module Front Legend

 

The 2.9″ ESPaper Plus Kit is the one stop package for using the ESPaper display. It comes with the following components:

  • 1x 2.9″ ESPaper Module
  • 1x CP2102 based Serial-To-USB module for programming
  • 1x 600mAh LiPo battery
  • 1x Acrylic Case to fit ESPaper module and battery
  • 1x USB cable
2.9″ ESPaper Plus Kit

Estimated shipping date is October 10. You can pre-order it now from here

 

]]>
https://blog.squix.org/2017/09/2-9-espaper-kits-ready-for-pre-order.html/feed 0 3183