Fork me on GitHub

Project Notes

#545 Wireless YouTube Foot Switch

An ESP8266-powered foot switch for controlling and looping YouTube videos (ideal for music practice).

Build

Here’s a quick demo..

YouTubeControl

Notes

YouTube can be a brilliant place to learn new tricks, especially in the realm of musical/dance performance and technique. But if we are learning something like guitar, controlling YouTube playback can be a pain because we don’t have three hands!

Hence the idea for a foot switch - allowing stop/start, skip and loop control by foot.

The solution I’ve put together here uses an ESP-12E ESP8266 module. The module interfaces with the foot switch hardware (switches and indicator LEDs), and hosts a web page that plays the video. A bit of Javascript reacts to the hardware state and controls the video.

Construction

This project is an assembly of a few components, some of which I’ve built/tested before:

  • LEAP#542 - the foot control module with 4 switches and tri-state RGB LEDs
  • LEAP#544 - ShengYang 18650 Battery Shield
  • an ESP-12E ESP8266 module with an adapter board
  • a custom board for mounting the ESP-12 in the Footswitch

The full circuit is as follows:

Breadboard

Schematic

Installation in the foot switch:

build_electronics

The finished unit, front and rear:

build_front

build_rear

Power

I’m using a ShengYang 18650 Battery Shield for power. This provides 3.2V regulated output, which so far has proven quite sufficient for the ESP8266.

On the plus side, this makes the unit 100% wireless, however since it is only a single cell, the running time between recharge can be limited.

I’m having second thoughts, as I can see myself using the unit for many hours at a time. I may replace the battery module with a 3.3V regulator and power jack for a mains adapter and live with the power cord being attached.

Charging the battery over USB to the micro connector:

build_charging

Programming the ESP8266

I’m using the ESP8266 core for Arduino and the Arduino IDE to program the ESP-12 module. Programming is done on the LEAP#540 DIY Dev Board.

To compile the sources, two things to remember:

  • When compiling YouTubeControl, use the update_index_page.rb script to regenerate the index page content if page_design.html has been modified (see discussion below for what this is)
  • Copy settings.h.template to settings.h and fill in the WiFi access credentials before compiling (settings.h is excluded from the repository and is not shared).

Uploading the compiled application to the ESP8266 on the programming board:

build_compiling

Button Tester Program

I used the ButtonTester sketch to verify that all foot switches and LEDs are working correcty and can be controlled from the ESP8266.

With a laptop connected on the same wifi network as the footswitch, open the web page http://yt-foot-controller.local/. It will reflect switch changes and the LED colours should match those indicated on the web page:

ButtonTester_web_page

Here’s a quick scratch video I recorded to check the behaviour:

ButtonTester

All good!

The YouTube Control Program

The YouTubeControl sketch combines button and LED control with a web page and Javascript that implements the video control.

The javascript automation of YouTube is based on some earlier experiments from Scripting YouTube.

Control Design - Buttons

Button Action LED States
SW0 (left) skip back 10s Normally off, flash green when skipping
SW1 play/stop Red - stopped; green - playing
SW2 skip fwd 10s Normally off, flash green when skipping
SW3 (right) mark/loop Normally off when no mark or loop. Green after first mark. Blue on 2nd mark and now looping

How mark/loop works:

  • first click: “marks” the start time of the loop
  • next click: “marks” the end time of the loop. Video starts looping
  • another click: cancels loop and clears the time markers

Status data packet is a hash containing:

  • “uptime”: long int; millis since startup (just FYI)
  • “changed”: bool; indicates of state has changed since last call
  • “event”: int;
    • indicates a single (most recent) action to take (missed actions are silently dropped)
    • 0: nothing to do
    • 1: start playing
    • 2: stop playing
    • 3: skip back
    • 4: skip fwd
    • 5: first mark
    • 6: second mark, start looping
    • 7: reset looping
  • “play”: bool; current play/stopped state
  • “loop”: bool; current loop state

For simplicity, the current page reloads the entire page when changing to a new video. Reloading the main page causes a reset of the foot controller state to ensure everything stays in sync.

There is one slight annoyance - the YouTube API does not allow immediate automated control (as a defense against invasive autoplay dark patterns). The work around is to require at least one click on the page before the foot switch can take over. A very minor inconvenience, but an extra click that I didn’t really want.

I used a stand-along web page - page_design.html - for mocking up the web page, styling and Javascript. When I have it “just right”, the page content is copied into index_page.h for compilation.

NB: I used the update_index_page.rb script to reformat page_design.html and generate index_page.h automatically.

$ ./update_index_page.rb
Generating index_page.h from page_design.html...
...done!

How it Works

app_how_it_works

Adding Some Feet

I found some Adhesive 6mm Silicon Pads. They are very cheap and proved extremely effective.

silicon_pads

No problems sticking to the wood without any additional adhesive, and they provide a high degree of grip, stopping the unit sliding around under rough handling by foot.

with_feet

Improvements?

It’s working just great, but some improvements I’ve been putting on a wishlist:

  • I’m waiting for some non-slip pads to be delivered. This will stop the unit sliding around under rough handling by foot. DONE√ (see above)
  • As mentioned above, I may replace the battery pack with a mains adapter and 3.3V regulator for extended playing sessions
  • Add some more features to the web application, e.g.
    • maintain a playing history/library of vidoes
    • save and recall particular loop sections

Credits and References

About LEAP#545 ESP8266
Project Source on GitHub Project Gallery Return to the LEAP Catalog

This page is a web-friendly rendering of my project notes shared in the LEAP GitHub repository.

LEAP is my personal collection of electronics projects, usually involving an Arduino or other microprocessor in one way or another. Some are full-blown projects, while many are trivial breadboard experiments, intended to learn and explore something interesting (IMHO!).

The projects are usually inspired by things found wild on the net, or ideas from the sources such as:

Feel free to borrow liberally, and if you spot any issues do let me know. See the individual projects for credits where due. There are even now a few projects contributed by others - send your own over in a pull request if you would also like to add to this collection.