FlashAir interface

I've had a Toshiba FlashAir card for a while - and it has been exceptionally useful: it stays in my 3D printer, and I can upload files to it for the printer to print.

I got a few scripts from the flashair developers site (now defunct), and stuck it on the card (whilst configuring it to join my Wifi network, rather than forming an access point of its own).

I decided it was high time I bought another - this time for other projects (mainly a BBC micro related project), and wanted a better web interface.

FlashAir W-04

My first card was a W-02 edition - the new card that turned up was a W-04, which has many more features.

WebDAV

I had a quick play with WebDAV on W-04 - however, I found that when I wanted to remove the drive mapping, Windows Explorer froze (and I had to kill it).

Repeatedly.

I ended up having to remove it via

net use u: /d

And even that took a long time!

I decided that I ought to have a look to see if anyone had done a better web interface...

Existing implementations

I found two that had been written, and tried them out.

MattsHub: flashair-interface

I found plenty of references to one that Extrud3D had produced - but I couldn't seem to download it. I eventually found a customised version at MattsHub.

However, while it had a nice file upload by drop facility, it lacked the ability to create directories (something my own version allowed). It also didn't look very pretty.

'Flashair FM'

This was on GitHub -I tried it, but it didn't put files into the directory that it was supposed to. It would write to the root, or the directory you had just created (I know why this is the case - they're not sending the UPDIR parameter prior to performing the upload).

It does look prettier than MattsHub's version, though!

'FlashAir File Manager'

I found this one whilst looking where I got the others! It's a fork of FlashAir FM, but has been more recently edited.

However, I'd already written mine by the time I found it - but for fairness (and the benefits of a good comparison), I gave it a go.

I quite like it! I probably would've stuck with it if I'd found it sooner. But then I wouldn't have had so much fun doing stuff in JavaScript (which I'd done a lot of) and jQuery (which I'd not used at all beforehand - I'd only used Prototype before).

Unlike Flashair FM, this uploads to the right place - which was my major gripe with it.

My implementation

I wanted something that I could drop files onto, create directories and delete files/directories (as as I've mentioned, FlashAir File Manager would've fitted the bill nicely).

I also wanted to learn jQuery - I'd not had any real requirement for a practical purpose for this, and this seemed like a good one.

At the top, there's the current path. You can click on the folder names as you nagivate down to go back up again.

Under that, there is a list of the files and folders inside the current folder. Folders are indicated in red, and files in blue. To the right of each file/folder, there is a delete button (for which you'll be prompted - unless the folder isn't empty, in which case you'll be told).

And at the bottom, there are some controls.

To the left is a drop area (I probably would've made it the whole screen in retrospect - although the three columns looks kinda neet [IMHO!]).

The middle section allows you to create a directory (enter the name, and then click on the icon above it). Again, I probably would've accepted enter to create the directory...

And to the right is some information about the card - the firmware version (this card is a W-04) and the disk usage (not much).

FlashAir Simulator

In order to help develop this, I created some PHP scripts on my web server (Apache), and add a local domain to the it with some special configuation settings.

Looks identical - because it is!

This allowed me to rapidly play with ideas - the main problem being that when you upload a file to the FlashAir card, the scripts will mark the card as unwriteable by the host, and that means you can't make any more changes to the local file system (unless you eject and re-insert it).

Downloading my FlashAir interface and simulator

It is available from my Git server - https://gitlab.tribbeck.com/misc/flashair-sim.git.

This contains the PHP scripts, as well as the SD_WLAN folder, and the source for my icons (you'll need Xara Designer to use it though!)

It is released under the BSD 2-Clause License.

Using the interface by itself

Simply copy the SD_WLAN contents into your FlashAir card. Note that you will need to configure your card - please have a look at some of the interfaces above for details.

Using the simulator

This has been written to work on Apache 2.4 / PHP 7.1 running on FreeBSD - however, it should work with Apache, other versions of PHP and other *nix-like operating systems.

Create the virtual host directory, and copy the entire contents (minus the license.txt and image_defs.xar files if you want to keep it clean [although read a little bit later]).

You'll need to tell your Apache to map .cgi files to PHP, and also accessing the directory home as the SD_WLAN/List.htm file. I've done this in a VirtualHost section:

<VirtualHost *:80>
  ServerName    my-local-domain-name
  ServerAlias   my-local-domain-name.localnet
  DocumentRoot  /location-to-my/www/flashair_sim
  <Directory /location-to-my/www/flashair_sim>
    <FilesMatch "\.cgi$">
      SetHandler application/x-httpd-php
    </FilesMatch>
    RewriteEngine on
    RewriteRule "^$" "/SD_WLAN/List.htm"
  </Directory>
  ErrorLog      "/location-to-my/www/log/flashair_sim-error.log"
  CustomLog     "/location-to-my/www/log/flashair_sim-access.log" common
</VirtualHost>

The important sections are:

1. <FilesMatch...> - this maps ".cgi" files as PHP files, so they get interpreted as such
2. RewriteRule "^$" - this maps any access to http://my-local-domain-name/ to http://my-local-domain-name/SD_WLAN/List.htm

Allowing uploads

In order to allow uploads, the directory needs to be writeable by the web server user (or a group the web server is running in). I've permitted the whole virtual host directory to be writeable.

The scripts

There are two scripts, and a library function that simulate a small subsection of the FlashAir interface.

command.cgi

In the FlashAir card, this is used to get directory listings and the like. It has an "op" parameter which defines the operation. The only operations simulated are:

• 100 - perform a directory listing
• 101 - count the files in a directory
• 108 - get the firmware version
• 140 - get the disk space

upload.cgi

This, as its name suggests, is used to perform uploads. However, it can also create directories, set the write protect feature and the current time (this feature is ignored).

In order for it to remember the current directory, it actually uses a cookie when it gets the UPDIR parameter. I had considered using a settings file of some sort, or a database, but that was far too overkill for a single parameter.

functions.php

This contains some common functions for both scripts - such as making sure users can't enter a random path name that'll give access to a bad location on the disk. It's not perfect, but it'll do.

Hidden files

In order to emulate hidden files, the mask of files and directories is used. Since my web server runs under a different user to my own user (quite rightly), my user and the web server are in a common group, and I've made that group have write permission to the directory. This means hidden files use the other bit mask. If others can't read the file, then it's treated as hidden.

This means to simulate what happens on the card, use:

chmod o-r SD_WLAN/ license.txt image_defs.xar

This will make them hidden in the web interface. Only do the last two if you haven't deleted them from your virtual host directory.