Listing Arduino SD file names with Evothings and Ionic

Hammad TariqBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

In this tutorial we will use Ionic Framework together with Evothings Studio to develop an app for listing the filenames in a SD card directory on the Arduino Wifi shield. Evothings Studio is designed for rapidly prototyping IoT apps using JavaScript and HTML. You can also use all the latest front-end JavaScript and HTML5 frameworks on the market, as well as plug-in functionality available for Apache Cordova, Phonegap and its clones. The Evothings Viewer comes bundled with functionality like low-level networking (Chrome sockets), Bluetooth Smart and support for on-board and external sensors.

The Ionic Framework

Traditionally, JavaScript frameworks, like jQuery and Sencha, were originally developed to be used in browsers running on desktop computers. These legacy frameworks worked relatively well on desktops, but they were sluggish and jittery with big footprints, if we tried to use them on smartphones. Thanks to the advent of modern web technologies like Angular and React as well as mobile incarnations of previously mentioned libraries, we have access to high-level UI frameworks which are optimized for the mobile experience. Ionic is also such library offering mobile­ optimized HTML, CSS and JavaScript components. It’s modeled on native mobile SDKs and uses Angular as a supporting technology to develop and deploy feature rich and robust mobile apps.

Getting started

One way to get started with Ionic is to use the command line interface (CLI) commands, however for that you will need to install both Cordova and Node.js, which is exactly where Evothings Studio comes in. It allows you to rapidly prototype your mobile app without doing lengthy installations of various packages and libraries.

To develop this example with Evothings Studio yourself, just follow these steps:

  1. Download Evothings Workbench from the Evothings’ website
  2. Download an Evothings Viewer app for your Android and/or iOS phone (search for "evothings" at the public app stores)
  3. Start the Workbench, and generate a connect code under the “Connect” tab, and “Get Code”
  4. Connect the Evothings Viewer app by punching in the text input field. At this point you can test the connection by Run:ing any “Example”, like Hello World, to see it load in the Viewer app
  5. Download the Ionic app template from my Github demo repo. I host several demos of mine in a single repo, so if you are new to Github, you might want to just download the whole zip file and locate this example once unzipped.
  6. Open the www directory of your download and drag & drop the index.html into the Evothings Workbench window, which will create a new Evothings Studio project entry at the top of the list!
  7. Click the corresponding Run button, which will load the app in the Evothings Client
  8. Open index.html in your favourite code editor and type "Hello World!" under ionic-
    tag, when you save the change, it will instantly reflect on your phone.

Prepare the hardware

We will need following components:

  • one Arduino Uno or compatible
  • one Arduino WiFi Shield (if you have another shield from a 3:rd party, the wifi library you need to include may be different)
  • a microSD card and some random files


List of things to do:

  1. Create a folder on your microSD card’s root directory and name it e.g. MUSIC
  2. Copy some files to the /MUSIC folder, using a card reader on your PC
  3. Insert the microSD card in its slot on the WiFi Shield
  4. Stack the WiFi Shield over your Arduino
  5. Open the Print_SD_Files_WiFi_Shield.ino file using the Arduino IDE and change the ssid[] and pass[] variables to suit your own network name and password.
  6. Connect the Arduino to your computer and upload the sketch

Code walkthrough

First some compulsory headers and includes for the WiFi and SC card libraries respectively. It then starts a TCP server, listening on 3300 port

WiFiServer server(3300);

In setup the CS pin (chip select, see needs to be defined as an output pin

pinMode(10, OUTPUT);

Once in the main loop(), once the connection is received, the server reads each request and passes it to executeRequest():

	char command = readCommand(request);
	int n = readParam(request);
	if ('R' == command)
                root ="/MUSIC");
                printDirectory(client, root, 0);

If the request contains “R” command, the sketch opens the SD card directory and passes its reference to printDirectory() function which in turn iterates over the directory’s files and print their names back to the TCP client. One word of caution will be to take care of Arduino’s SRAM as Arduino Uno just have 2K of SRAM available, if we use too many constants or print too many literal strings over Serial, the SRAM fills up quickly. If the available SRM is under 400b then the sketch will iterate over SD card directory but is unlikely to print the names to the TCP client.

Developing the SD Card File List app

We need two UI views for our app, in one view we will use the Ionic Forms component to input the IP­ address and connect to the Arduino, in second view we will use Ionic List component to list the SD card file names.

I have uploaded an example app in my Git repository. As previously, download or clone the example, unzip and drag the www/index.html to Evothings Workbench and click Run to view the app in Evothings Client. Next, give the IP­address of Arduino (you can see it in Serial Monitor window of Arduino IDE after uploading the sketch), press Connect, the app will move to the list view, listing the names of the files present in /MUSIC directory of your microSD card.

One thing to note here is that app is not printing the full names of the files, it’s because of FAT file naming limitations. You can read more about them here. That’s it! You have your app ready!