Web Page Control of Multizone Audio
Using an esp32 over WiFi
Intro
It has been over a decade since I deployed my Multizone Stereo
system. We Erickson's use it every day for watching TV and listening
to music in various rooms of the house. I have wanted to implement a
simple web page to control the system, at least from within the
house.
The controls for the system consist of many. In fact the code for
this project is about 80% controls and 20% audio.
Front panel 32 buttons:
8 zone selects
8 input selects
Up and Down buttons for:
Volume
Balance
Treble, Midrange, Bass
Mute
Mute All
Front panel Encoder Knob for Volume
IR Remote, emulates Sony Receiver
Volume
Mute
Buttons 1-8 control sources
Remote keypads for some zones, These are little 8 button
boxes:
Next Input select (sequences thru all inputs)
Up and Down buttons for
Volume
Balance
Mute
Serial RS232 control for all buttons
128x64 LCD display
To manage these, I use simple one-character ASCII codes. For
example:
'V' Volume up, 'v' volume down
'T' Treble up, 't' Treble down
Similar codes for all sound controls
'1'-'8' Source selection
'!'-'*' Zone selection (shift 1-8)
'q' for mute, 'Q' for mute all
Using the serial port to control everything, only one keyboard key
is needed to emulate each of the controls. Very handy for
development. And for future expansion, the serial port can be used
to add additional controls. Such as a web page interface.
Fast forward to the 2020's, and esp32 modules are cheap, convenient
and available. These provide lots of performance and I/O as well as
WiFi and Bluetooth. I decided that my first meaningful esp32 project
would be to add WiFi controls and a web page to the system. This
should allow me to control any zone from anywhere in the house via a
cell phone.
Ideally this would take no code or hardware changes to the system,
just plug in an esp32 -> RS232, serve up a web page with lots of
buttons, and send simple single-character codes to the system.
Sounds great, right? Unfortunately this requires a pretty steep
learning curve for me. I need to learn esp32, WiFi control, HTML,
Web GUI, JavaScript and a little CSS. Fortunately there are
some decent examples that do most of this. I started with the
excellent example on https://deepbluembedded.com/esp32-wifi-library-examples-tutorial-arduino/.
The example code and hardware is buried about 2/3 of the way down
this long and informative page, but it's worth the search. It has:
ESP32 Control
Web server
HTML with basic CSS and Javascript
Simple char array containing all HTML
Buttons
Slider
C callbacks
And digital and analog LED driving.
I like nice big buttons, and so built my own 8-way radio buttons out
of them: turning on one button turns off the others. Each button
array is
2 rows of 4 buttons
Selected button color is highlighted, all other ones are
grey
Sends zone or source command
The code is pretty big with each of the 20 buttons having it's own
HTML, Javascript, and C code. I'm sure if I knew more HTML, I could
have used real Radio Buttons and probably saved many lines of code.
And I'm sure there are better ways to deal with a long HTML file on
esp32, such as loading it into SPIFFS.
But it works!
Hardware
The hardware couldn't be much simpler. It consists of an esp32
Wroom Dev Board mounted to a piece of grid board. The only
other hardware is a single inverter that buffers and inverts TX2 to
convert it to half-baked RS232 to send to the Multizone. I cheat on
the RS232 spec, and use a CMOS driver to generate 0V and +5V. Good
enough for short distances.
