Run JavaScript in your ESP8266 device

In the previous article we saw how to build the Smart.js framework and flash the firmware in the ESP8266 device. Now is time to play a little more with it.

In this article I will show how to read the temperature and the humidity from a DHT11 sensor connected to the ESP8266 device and how to send those values to a public site using an HTTP GET request, all using JavaScript code.

How to add new files to the firmware

To add a new file to the firmware add it in the smart.js/platforms/esp8266/fs folder. All the files in the fs folder are added to the file system of the firmware during the build process. Those file will be accessible using the File API.

Lets try it creating a file myfirst.js with the following code:

Now save the file and run the firmware build process:

Connect the ESP device as explained before and flash the new firmware.

In the console we can now load and evaluate our JavaScript file using the eval function from the File API:

The code in the file is evaluated and the functions that we have defined can now be called:

The sayHello method prints the “Hello World” message visible in the output area. Instead the “undefined” value is the value returned by the function and printed by default.
Let’s try the other function getMyIp:

The execution terminates with an error message, this happens because the WiFi is not configured. We can configure it using the Wifi API:

The setup function will make the ESP device scan for the specified network and connect to it. If everything go fine the method return the true value.

The Wifi API offers also a method to check the current Wifi status:

Now that the Wifi is configured we can try the getMyIpFunction:

The printed IP is our external IP, the one of our modem. If, instead, we want the internal IP, the one assigned by our access point, simply call Wifi.ip().
Now we are able to write our program and execute it. Time to read values from a DHT11 sensor.

Wiring the DHT11

To read the sensor values we will use the only available pin in the ESP device the GPIO_02.
First connect the VCC and GND pins of the sensor to the respective VCC and GND on the USB adapter. Then connect the DATA pin to the ESP GPIO_02 pin. Note that the GPIO_0 is NOT connected to the GND.

Now connect the USB adapter to the computer and click the “connect” button on the Flash’n’Chips tool. I don’t know why but sometime I have to disconnect the sensor DATA pin before turn on the ESP device otherwise the ESP console don’t reply.

The framework comes with the support for the DHT11 sensor, a global object DHT11 is defined with a read function. The function takes an integer as input, the sensor port, in our case is the number 2.

We can use the DHT11 object simply calling his read method:

The returned value is an object with temperature and relative humidity. Time to publish the sensor values.

Publish the sensor values

We will publish the sensor values in a site that accepts a GET request with the values as url parameters, something like

Create a sensor.js file in the fs folder with the following code:

Build the firmware with the new file. Before flash the device re-connect the GPIO_0 to the GND and disconnect the sensor DATA pin. After the flash is complete disconnect the adapter e disconnect the GPIO_0 from the GND.

Connect the adapter to the computer, then click the “connect” button in the Flash’n’Chips tool. After the console is connected re-connect the DATA pin.

First, setup the WiFi:

Then load and evaluate the sensor code:

We can now run our method readSensor. It will read the values from the sensor and publish them to a site using the HTTP API. Here the console output:

And a chart built using the published values:


So our little ESP device is able to read values from a sensor and publish them in a site using the Wi-Fi network.

Continuous and automatic publication

What if we want a continuous publication of sensor values?
Here the solution:

This method will publish the sensor data every 5 seconds.

What if we want to start the publication automatically without the need to run it from a console?
Here the solution.

First append those lines to the sensor.js code:

The first line checks if the WiFi is active otherwise setups it. The second line starts the data streaming.

In order to make our sensor.js file evaluated at boot time we need to modify the user.js file under smart.js/src/js folder appending this line:

Build and flash the firmware. After rebooting the device it will start to publish the sensor values.


We saw how to run our JavaScript code in our ESP device thanks to the great work from Cesanta. The framework is still under development so the APIs or the tools can change in any moment.

I think there will be for sure a lot of news in the coming months. One thing will be the integration of the web server Mongoose in the Smart.js framework, that means connecting directly to the device using the browser!
Another thing, as I can understand from the Smart.js online dashboard, is that we will be able to upload our JavaScript code directly from our browser so we don’t need to flash the firmware every time we update the code!!!

Build the Smart.js framework

Cesanta has developed a JavaScript engine, capable of run JavaScript code in the ESP8266 device and in other embedded devices. The JavaScript engine is provided with the Smart.js framework. The framework offers a set of APIs for files management, networking and WiFi management, SPI and I2C communication, GPIOs and Cloud services. The framework is distributed ready to flash under Windows and Mac. Here you can find a short guide.

In this article I will show how to build the framework under the Ubuntu’s like OS and flash your ESP8266-01 device with the latest Smart.js framework version.

Framework build

In order to build the Smart.js framework we need first to install Docker. A complete and updated set of instructions on how to install Docker can be found here. To make it short you can simply run this command in the console:

After the Docker installation is complete we checkout the framework code:

To build the framework move to the esp platform directory:

and run the build process:

The first time it will require a little bit because the tool has to download the docker images. Next builds will be really fast.

The three binary files composing our ESP firmware will be generated under the firmware folder. Now we need the tool to flash the ESP device.

Flash’n’Chips build

The Smart.js framework is provided with a tool for flashing our devices: Flash’n’Chips.


To build the tool first we need to install the required dependencies: Qt 5 and libftdi.

To install Qt 5 you can use the installer distributed by Qt here. It will install all the Qt tools under the specified folder. In the folder you will find the binary required to compile Flash’n’Chips. I suggest to add the bin folder to your PATH variable:

To install the libftdi library run:

Now we are ready to compile the Flash’n’Chips tool. Move to the source folder:

And run first:


In a bit the tool will be ready to be executed. Time to connect the ESP device to your computer.


To connect my ESP 8266-01 I’m using a FT232 adapter. If you are using it remember to set it to 3v3.


We connect the respective VCC and GND pins, same for RX and TX pins but inverting them. We need also to connect the ESP CH_PD to the VCC and, only for the flashing process, the ESP GPIO_0 to the GND.

ft232 esp8266_bb

We are now ready to flash the previously built firmware into the ESP device.

Flash the ESP

Connect the USB adapter and run the Flash’n’Chips tool using this command from the flashnchips folder (I had to use this parameters for some issues with my ESP board):

The tool should show the “Flash firmware” button active.

fnc ready

If not press the “Detect devices” button and see if the adapter is recognized.

Press the “Flash firmware” button and the flash process will start. You can see the progress bar running and the current operation explained under it.

fnc flash

When the process is completed the communication console will be activated under the progress bar area. You will see some messages from the device.

fnc console

Now we are ready to run some JavaScript commands in our ESP device.

Play with console

The Flash’n’Chips console has two areas, the first shows the device output, the second let us write commands to send to the device. The commands are snippets of JavaScript code that are executed on the device.

We can start writing a simple expression:

The device will calculate it and reply with the result:

We can also use the framework’s APIs, for example we can list the files present on the device:

It should output something like:

These are some of the JavaScript functions that our device can run. In the next article we will see how to run a simple program that reads values from a DHT11 sensor and publish them in a site.

How to translate a search query into a JavaScript filtering function

In a project I had to translate a search query into a filtering function to apply to a stream of JavaScript objects. The query language was very simple, boolean expressions of property constraints, for example “name:john AND age:52” where the search should return all the objects with property “name” equals to “john” and property “age” equals to 52.

The first step was to parse the search query with a parser. You can write a parser by hand or your can use a parser generator like PEG.js. I prefered the second one.

With the online editor I’ve wrote the language grammar:

The generated parser takes as input the text to parse and returns the parsed elements:

The grammar can be changed to make the parser method return a boolean expression:

The parser for a query like “name:john AND age:52” generates the following expression:

In the generated expression I’ve used an utility method that checks if the specified couple of name and value exists as property for the specified object:

The expression can be then passed as parameter in the function constructor:

Now you can use the new function as filter, for example with stream.js streams:

The grammar can be expanded with more operators and capabilities.

Arduino digital clock

As free time project I’ve built a digital clock using Arduino Duemilanove, the DS1307 Real Time Clock, the MCP23017 port expander and a bunch of blue leds.




Seven segment display

The idea is to show the current time using four 7 segment display, the display are built using some leds and a cardboard.

Each digit segment is realized using a blue led. The led is inserted in a hole partially covered with reflective material (I’ve used the internal part of a Tetra Pack container). The front part is covered with masking tape.


Each digit has seven segments. The segments holes have been made in a cardboard using a stencil.


Controlling the seven segment display

The first two digits segments are controlled by the MCP23017 port expander, the other two are controlled directly using the Arduino ports.

The MCP23017 port expander can control 16 ports, the 16 ports are managed by two registry. The port expander is controlled by Arduino using I2C.MCP23017The single registry controls 8 ports and you can set which ports are ON or OFF using a byte. Each bit of the byte tells the port expander if the port should be ON or OFF.

For example in the following image you can see the registry turning ON leds 1 and 4 having his value set to 9.

leds1Here you can see the bits converted to the byte value 9:

I’ve used one registry for digit then I’ve left unused one port for registry.

In order to identify each segment they have been labeled as follow:


“7 segment display labeled” by user:h2g2bob – Own work using Inkscape. Licensed under CC BY-SA 3.0 via Wikimedia Commons –

Assigning each port to a single digit segment you have this mapping:

For example if you want to display the digit 2 you need to turn ON segments A, B, G, E and D.



In order to do so you have to set the registry value to 91 (0x5B in HEX).

I wasn’t lucky and due to wires length and leds positions I had to connect the leds to the ports in a random order getting such mapping:

This random order required to “re-map” the segments before converting it as byte.

Here you can find a nice tutorial about the MCP23017 port expander.

The remaining two digit segments are controlled one by one using Arduino ports and standard digital write.

The time

The time is keep using the DS1307 RTC. The RTC is controlled through I2C and the RTC library.DS1307RTC


Here a schema of main components connections.


The code

In the setup phase the program setup the I2C library, the RTC library and the Arduino ports.

In the loop phase it reads the current time value from the RTC and “print” it.

The hour value is split into two digits, each digit is mapped into a segments configuration then translated in a byte value for the registry. Finally the byte value is sent to the correct registry.

The minute value is split also into two digits, each digit mapped into a segments configuration and then each Arduino port set consequently.

Generate a map-like navigable family tree

In this post I will show you how to generate a navigable map of your family tree starting from an image of your tree. You can see an example of what you will obtain here.


The problem

One of my hobbies during the free time is genealogy. I like doing research on my family and as a result of such activity I’m building a family tree.

When you start your genealogical research the family tree is small and easily printable or visualizable in a common size monitor. Often you like to share the results of your hard work with other family members, maybe using a web site were to show your beautiful tree.

If you’re lucky you start “collecting” more and more individuals, as consequence, the family tree grows and become an huge tree (or sometime what I call a forest). Putting that enormous image of the family tree in a web page starts to be problematic. First, the browser will have some difficulties loading such a big image, if not, in some cases, it crashes. Then the navigating would not be so easy, especially if you want to have a general idea of the tree or zoom in into an individual details.

Here the idea of make the tree navigable like a map. In this post I will try to show you the necessary steps to obtain such navigable tree map.

NOTE: All the instructions are for Ubuntu like distributions.

The solution idea

Have you never used Google Maps or other similar sites? Those sites lets you navigate big maps of continents, countries or cities in the browser simply dragging it with the mouse pointer.

How they make it possible? To make it simple, they split the huge image map into small pieces, called tiles. When you navigate an area of the huge big map the browser simply download and visualizes only the tiles for that area. This make the browser loading only a small part of the map. You can notice this mechanism when your internet connection is slow and you move fast in the map, you will see that the map is loaded by pieces.

You can also zoom in and out to different altitudes, this is done visualizing pieces from different “versions” of the map, a version with more or less details.

We will try to use the same mechanism for our tree. We will use a software to generate this pieces and to generate a demo web page where navigate our tree.

Obtaining the huge tree

Let’s start obtaining our family tree. You can produce it using a genealogical software or by hand, if you are brave enough.

I prefer to use Gramps and his Descendant tree report. The report tool produces a family tree starting from the active individual. The report can be saved in different formats, but only SVG for image types. I like to use the PDF format and then convert it to image.

For the post I’ve used the Royal92 gedcom file, that as the site says “Features the Kings and Queens of Europe, including Great Britain.”. The report has been generated from the individual Stewart Matthew (I1507) and saved as PDF. In order to obtain a tree with his natural dimension and not stretched I’ve checked the Resize Page to Fit Tree Size checkbox in Size tab. You can download the generated file here.

Finally I’ve converted the file using the convert command from ImageMagick:

The conversion produced an image of 5635×32466 pixels. You can download the image here.

Tools installation

In order to generate the map we need GDAL. It “is a translator library for raster and vector geospatial data formats“.

To install GDAL you need to add the GIS PPA repository to your source repositories:

Then install GDAL bin and GDAL python support:

Now test if everything is installed running:

It will reply with the version installed.

Navigable map generation

Now we are ready to generate our navigable family tree. To do so, we will use The tool takes an images as input and generates an HTML page, with all the necessary scripts, and the image tiles to make our tree navigable.

First create a destination folder:

Then run the tool:

The execution will requires a little bit showing a progress like this:

When it completes the generation, you can open the openlayers.html file create inside the mytree folder with the browser. You can navigate the map produced with the example family tree here.

You can tune the result with the tool options like the numbers of zoom level to produce or the resampling method. The produce map has a little border that appears when it is zoomed out, looks like the tool requires particular sizes for input image. More information here.

You can easily integrate the obtained map on your family site.

I hope you liked the proposed solution. Feel free to comment or add suggestion as post comment.

Raspberry Pi talks to Arduino using Dart


This post will show you how a Dart program running in a Raspberry Pi board can communicate to an Arduino board.

To show it we will send a text message from a Dart program running in a Raspberry Pi and we will visualize it in an LCD controlled by an Arduino board.


The main components are:

  • A Raspberry Pi Model B revision 1.0 running Raspbian 2014-09-09
  • An Arduino Duemilanove
  • A 16×4 LCD
  • breadboard, wires and cables

The Raspberry Pi board is connected to the Arduino board through an USB cable.


The LCD is wired to the Arduino board following the schema proposed in the Liquid Crystal Library example.



For the Arduino side I wrote a simple sketch using the Liquid Crystal library.

In the loop block the sketch reads a String from the USB and writes it to the LCD. The sketch replies to the Raspberry Pi board with an “Hello Pi!” message.

For the Raspberry Pi side I wrote a Dart program that sends a message to the USB port using the serial_portal package.

The program initializes the USB port and sets a listener for the incoming bytes in order to write them in the console. After the setup it opens the USB port and sends the “Hello Dart!” message.

To run the program in the Raspbian environment I had to compile the Dart SDK.

In the screenshot you can see the Dart program running in the Raspbian terminal.



Here the source code:

How to build the Dart SDK for the Raspberry Pi

For a DIY project I’m working on I need to run a Dart project on my Raspberry Pi board, precisely in his Raspbian OS. The Dart team has done a good job publishing a wiki page with all the information to build the SDK. Here I’m summarizing the necessary steps in a handy list, or, if you prefer, at the end of the post you can find a zip file with the SDK already built.


I suggest you run the entire process in a virtual machine in order to have a clean environment and the best compatibility with the provided scripts.

  • Download the Ubuntu server 12.04.5 64-bit ISO.
  • Install your virtualization software, I’ve used VirtualBox.
  • Create a new Virtual Machine. In VirtualBox using the wizard, select Linux OS and Ubuntu 64 bit. Here’s my VM configuration:
    • 4 GB ram
    • 23 GB HD, the used space after the entire process is about 11 GB
    • 2 processors (the core available in my hosting machine)
    • TCP ssh port forwarding (My host OS is a Linux with sshd active)
  • Install Ubuntu server through the downloaded ISO. During the configuration, in the package selection phase, select the OpenSSH Server, we will use scp to copy the produced SDK.


Login in Ubuntu and create a working directory. All the following commands are relative to the created working folder.


Download and run the script that installs all the necessary dependencies.


Download and setup the source code management tools provided for chromium.


Download the Dart 1.7 source code (if you want the latest developed version use this url:


We are going to cross compile the code so we need the tool chain provided by Raspberry Pi.

SDK compilation

Finally we are ready to compile. In the meanwhile you can go to take a coffee.


Copy the dart-sdk folder under the dart/out/ReleaseXARM folder to your Raspberry Pi machine (using scp or your folder explorer).

If you like to make the Dart commands available in the command line edit your .bashrc file in your Raspbian installation and add these lines (modify the dart-sdk path based on your installation path):


You can check if the dart installation is working by simply running it. You should see this output:


As final step let’s run a simple Hello World project. We can create such simple project quickly using the new Stagehand tool. First we need to install it:

We are now ready to create the project:

The project is ready, let’s get hits dependencies and run it:


If all these steps scares you, then you can download the zipped folder with the Dart SDK that I’ve prepared. You’re downloading it and using it at your own risk.

Plugin mechanism for GWT application

Cotrix, the RIA I’m working on, is packaged differently depending on the target environment. For each environment we want some features enabled or not, both client and server side. From the client POV I’ve to enable or disable some GWT components, I will call those components plugins. In our case each plugin is bounded in a separate Java library.

In GWT to enable a component you need to:

  • include it in the module file:
  • call it somewhere.

The first point can’t be automatized, or you can but you need to manipulate the module file during the packaging phase. This can be done using Maven facilities, but I will avoid it. Each packaging in the Cotrix application has his own GWT module, all of them inheriting from a common super module. The module for a specific environment adds the components (plugins) that I want to add.

The second point is a little tricky. Let’s assume that all the plugin implement a Plugin interface:

Once we have all the required plugin included in the main GWT module we need to discover them. In GWT you can’t use reflection or Service locator mechanism. With GIN I don’t have found any way to retrieve all the interface implementations (as you can do win CDI).

Therefore I’ve decided to go with a generator solution. In this solution the generator will be responsible to collect all the Plugin interface implementations and to generate the code that will instantiate them.

First I’ve declared a PluginProvider which will return all the Plugin instances:

Then how to retrieve the Plugin interface implementations? One way is using reflections during the compilation phase. Another one is to use the module configuration properties. A GWT module can declare a configuration property, both single value and multi-value. A third module can extend the property adding it more values.

I’ve used the property mechanism in order to let each module containing a Plugin implementation to extends a particular property with the Plugin implementation class name. The code generator will read this property values in order to know the Plugin interface implementations.

In the main GWT module we will declare the property used to declare the plugins:

Then each module containing a Plugin interface implementations will extend the property with the name of the implementation class:

Let see the PluginProvider generator code:

The generator retrieves the “plugins” property values, then use each value to instantiate the Plugin implementation, returning it in a list.

In the main GWT module we need to declare the generator :

Finally we will use the generated PluginProvider in this way:

I’ve created a sample project in GitHub:




How to customize a GWT DataGrid style

I had to deal with GWT DataGrid and his style customization. In order to customize it you have to extend the DataGrid style resource with your own type. Then you have to override the dataGridStyle() method returning your own DataGrid style. It is fundamental to return a new DataGrid Style type.

Here the example code:

As alternative you can simply extends the default one:




Released yahoo-weather-java-api 1.0

This is an old library that I’ve started in 2011 in order to play with JAXB, Git, Maven and Github.

The library is a wrapper of the Yahoo Weather API. It is lightweight and requires only slf4j.

In this version there are no particular changes. The javadoc has been updated and the package names and the group id has been adapted to the maven central rules. Then the library has been released in maven central.

You can get the library using this dependency coordinates:

The library is hosted here: