WifiZineThrowie
Hackers and Designers - Walking signal / WIFI hotspot zine workshop.
What is a hot-spot zine?
One line description
- A wireless communication and web service device designed to service an independent publications in webzine format when a smartphone attempts to log in to a hotspot
Preceding project
Components
- Tangible components
- Espressif’s ESP32 module
- Power supply (battery or DC adapter)
- (Optional) a case or a hull
- (Optional) Magnets
(These images are posted by Andy Reischle (AReResearch).)
- Intangible components
- ESP-IDF Development Environment
- ESP32 Arduino Compatibility Package
- SPIFFS file system
- ESP web server library
- A domain name server (captive portal)
- Web page (Webzine)
Limitations of Hot-spot zine platform that you should know
- Storage 2MB or less
- Slightly slower than a typical web server
- Somewhat unstable behavior compared to a typical web server (sometimes a system restart may be required)
Making a Hot-spot zine
Materials and preparations
- A computer
- A Development board with ESP32 module
- A Micro USB cable for communication (Android data cable)
- Battery, battery pack or DC adapter
- Web page (html / css / js + media files)
- (Optionally) a sensor or actuator (such as a speaker)
Preparing Hot-spot zine platform
-
Installing Arduino
-
Arduino IDE launch screen
-
Arduino IDE settings
-
Change the compilation and upload process display mode to ‘verbose mode’
Check ‘compile’ and ‘upload’ in ‘Show verbose output during:’
-
-
Adding an ESP32 boards to the Arduino IDE’s board list
-
Copy and paste the following into ‘Additional Boards Manager URLs’ and click ‘Ok’.
https://dl.espressif.com/dl/package_esp32_index.json
-
Launch the Board Manager
-
The Board Manager popup window
-
Type ‘esp32’ in the search box and click ‘Install’
-
-
Add Hop-spot zine platform code and required libraries to the Arduino IDE
-
Hot-spot zine download and installation
Click ‘Clone or download’ -> ‘Download ZIP’
Rename folder after decompression
Copy that folder to ~/Documents/Arduino (‘~’ means your home folders)
-
Downloading and installing the ESPAsyncWebServer and AsyncTCP libraries
Click ‘Clone or download’ -> ‘Download ZIP’
Rename folder after decompression
Click ‘Clone or download’ -> ‘Download ZIP’
Rename folder after decompression
Copy that 2 folders to ~/Documents/Arduino/libraries
-
Confirming code compilation
-
Restart the Arduino IDE
-
Open ‘WifiZineThrowie’ sketch
-
Select the ESP32 Dev Module board
-
Adjust ESP32 Dev Module board settings
- Upload Speed : 921600
- CPU Frequency : 240MHz
- Flash Frequency : 80MHz
- Flash Mode : DIO
- Flash Size : 4MB (32Mb)
- Partition Scheme : Default
- Core Debug Level : None
- PSRAM : Disabled
-
Click on the compile button (red arrow)
-
If the compilation process is successful,
-
If the compilation process ends abnormally,
-
-
-
Installing a USB device driver to communicate with the ESP32 module (chip name: SiliconLabs CP2012)
-
USB communication chip driver download
- Windows 10
-
-
Yosemite (10.10.x)
-
El capitan (10.11.x)
-
Sierra (10.12.x)
- How to disable GateKeeper
- sudo spctl –master-disable
-
High Sierra (10.13.x)
- How to disable GateKeeper
- How to disable GateKeeper
- How to disable GateKeeper
- spctl kext-consent disable
-
Mojave (10.14.x)
- How to disable GateKeeper
- sudo spctl –master-disable
-
Linux 3.x.x & 4.x.x
- Driver installation not required (included in kernel)
- udev rules update required
- 99-platformio-udev.rules
-
- No information
-
-
Check if the USB driver is working
-
If you just installed the driver, restart your computer.
-
After restarting, make sure GateKeeper does not interfere with driver loading.
-
System Preferences -> Security & Privacy -> General
If there is an error message in the red box area, GateKeeper is interrupting the driver’s operation.
If you are in a similar state as above, click ‘Allow’ and confirm with administrator password, then restart your computer.
-
-
After starting the Arduino IDE, make sure it can communicate with the ESP32 module
If communication is possible, you can select /dev/cu.SLAB_USBtoUART (for other than Mac OSX, this name might be different.) as above.
If communication is not possible, /dev/cu.SLAB_USBtoUART (for other than Mac OSX, this name might be different.) does not exist as above.
-
-
Set the name of the Wi-Fi network i.e. SSID of the Hot-spot zine, and modify the code.
- Since it may not work due to the number of characters or spacing, we try firstly with simple and short English names that does not include a space character.
- Hangul(or any other non-English characters) may be used. (later, trial and error)
-
Upload to the Board
-
Click on the Upload button (red arrow), while ‘Connecting …’ displays, press and hold the’ BOOT ‘button on the ESP board for one second.
Upload success screen
Upload error screen
-
Increasing the upload capacity of the board (optional)
-
The flash memory capacity of the provided ESP32 module is 4MB, but not all of this is usable for Zine content. The reason for this is that many other things also need their spaces: the codes that runs the hotspot-zine, the codes that runs background to support the chip function and the data used to represent the structure of the file system (such as folder structure and file distinction), that is, the implementation overhead of SPIFFS. So we cannot claim whole memory space of 4MB.
-
The flash memory of the ESP32 module must be partitioned first to be used partly with different purposes.
-
During the above procedure, when setting up the ESP32 board, we selected:
Partition Scheme : DefaultThe default partitioning scheme includes elements that are not necessarily required for Hot-spot zine, and the default partition configuration does have less room available for Zine content. (~ 1MB)
-
So, by reconfiguring the Partition Scheme more efficiently, you may be able to upload a little more Hot-spot zine content. In this way, a capacity of about 1.9 MB can be used for Zine contents.
-
Once you have completed this procedure, you may select,
Partition Scheme : WIFI ZINE -
Work process
-
Download and install the partition configuration file
Paste it into ~/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/tools/partitions
The ‘~/Library/’ folder is a hidden folder in the Finder, so type Cmd-Shift-G and type in ‘Library’
Then, double-click the ‘Arduino15’ folder as a normal folder
Move to the above position
Make it like this.
-
Edit the boards.txt file
Open the file boards.txt file located in the above location and add the next four lines marked with + (remove the + sign!)
--- /Users/doohoyi/Downloads/Telegram Desktop/boards.txt +++ /Users/doohoyi/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/boards.txt @@ -52,6 +52,10 @@ esp32.menu.PartitionScheme.min_spiffs.upload.maximum_size=1966080 esp32.menu.PartitionScheme.fatflash=16M Fat esp32.menu.PartitionScheme.fatflash.build.partitions=ffat +esp32.menu.PartitionScheme.wifi_zine=WIFI ZINE +esp32.menu.PartitionScheme.wifi_zine.build.partitions=wifi_zine +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_size=1048576 +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_data_size=2752512 esp32.menu.CPUFreq.240=240MHz (WiFi/BT) esp32.menu.CPUFreq.240.build.f_cpu=240000000L -
After restarting the Arduino IDE, select PartitionScheme as ‘WIFI ZINE’ during ESP32 DEV Module setup and compile.
-
Uploading and publishing Hot-spot zine content
-
Hot-spot zine content is stored separately from the running code. Therefore, it goes through a separate process from the usual Arduino IDE code upload process. To do this, you need to install a separate extension plug-in.
-
Download and install the ESP32FS plug-in
Create a folder called ‘~/Documents/Arduino/tools’
Copy unpacked ESP32FS to here
Be mindful with the construction of the folders. It should be installed as shown in the following figure. (Note also that the folder name is ESP32FS!)
After restarting the Arduino IDE, verify that the plug-in installation was successful. If successful, you will see a menu called ‘ESP32 Sketch Data Upload’ added.
When you run this menu, it will move all the files in the ‘~/Documents/Arduino/WifiZineThrowie/data’ folder to the ESP32 module’s web page store.
Please execute the upload. The color of the message output during upload is displayed in white instead of red. While ‘Connecting …’ displays, press and hold the’ BOOT ‘button on the ESP board for one second.
Screen when upload is completed successfully
Congratulations. We are all ready to produce / publish Hot-spot zine.
Generic content example of Hot-spot zines
-
Example 1 Text page
-
Example 2 Images page
-
Example 3 Sounding page
-
Example 4 Hyper-linked pages
- Looooong story! (TBD)
-
Example 5
-
(advanced) WebSocket - socket.io + server-side programming @ arduino (TBD)
- I have not tried it, but it must be possible. Let’s create an example.
-
-
Example 6 : Paper.js (TBD)
-
Example 7 : P5.js (TBD)
-
Example 8 : http://molleindustria.github.io/p5.play/ (TBD)
-
Example 9 : Tone.js (TBD)
Play with shapes and materials
-
Attaching a sensor
- switch? G-sensor?
-
Attaching something that moves/acts
- motor? speaker?
Thinking with locations / places
- Attaching to the steel structure of the street or space using magnets
Contributing to the project
- By sharing ZINE content, you can share ideas and inspirations for others who are creating Hot-spot zines. It is better to tell us your background story, context, form and so on.
- If you have ideas on how to improve the various parts of the Hot-spot zine program, please send us a revision with PR.
- If you have any other thoughts or opinions, please email me. pilotedeguerre@gmail.com