Tutorial: build a two-way radio from two ESP32 boards

What lands is small: a handset mark that takes the colour of what the link is doing. The widget is also where the radio's settings are, and the Inspector opens on them.

The drop did one more thing. Open Hardware, then Audio: Play sound on this board is ticked with the board's ES8311 codec, and Listen on this board with its ES7210 microphones. The radio needs both halves, the board has both, and neither had to be set up.

Back on the Inspector tab, with the mark selected, Two-way radio settings begins by saying what is still missing: Nothing talks yet and Nothing pairs it yet.

1. Press Add a push-to-talk button. A button called Talk appears.
2. Click the mark again, and press Add a Pair button.

Both arrive wired. Select the Talk button and open Events to see how: on Pressed it runs Two-way radio: talk with Start talking, and on Released the same action with Stop talking. That pair is all push-to-talk is. The Pair button runs Two-way radio: pair or forget on Clicked.

Click Screen1 in the Hierarchy, so the Inspector shows the screen. Set Name to Handset. Open Style settings, then Background, and set Color to #05070A.

A green dot beside a group, and a star beside a setting, mark what you have changed. Only those are written into the code.

Select the radio's mark - TwoWayRadio1 in the Hierarchy. Set Name to Link, and in Geometry X 18, Y 172. In Two-way radio settings:

1. This board is called: LW-349. It is what the other board shows as who it is paired with.
2. Size: 28.
3. The colours, one for each thing the link can be doing:

Leave It talks to on The board it is paired with, Wi-Fi channel on 1 and Even out the voice ticked.

What the radio says of itself reaches a widget through a variable. Open the Data tab and the Variables section, and press + five times. For each, set the name, then Type, then Source:

Set Length to 120 on status: it holds a sentence. A variable with a source is read from the firmware many times a second; nothing in the design sets it.

Back on the Inspector tab, drag two Labels from Basic into the window under the grille:

The text is in Label settings; colour and font are under Style settings, Text.

Then select Says, open Data bindings and press Add binding. Leave it on From a variable, set Variable to status and Drives to Text.

On the board the label now says whatever is true: Not paired. Press Pair on both boards., Paired with LW-349, Talking to LW-349, Hearing LW-349.

Open Visualiser in the Widgets list and drag a Bar into the well. Name it MicLevel and set its Geometry to X 30, Y 290, Width 32, Height 117: taller than it is wide, so it fills from the bottom. In Style settings:

Part, at the top of Style settings, chooses which piece of the widget you are styling: the track is Main and the lit column is Indicator. In Flags, untick Clickable and Scrollable.

Add a binding: Variable micLevel, Drives Value, and for Formula:

round(x * talking / 10) * 10

In a formula x is the variable's value and any other variable can be named. Rounding to tens makes the column always end in a gap, so whole segments light. Multiplying by talking keeps the meter still unless this board is sending: the microphones are always listening, and a meter that moved while nobody was talking would say the wrong thing.

Make the second the same way: OutLevel at X 110, Indicator colour #00E676, bound to outLevel with the formula round(x / 10) * 10.

Now the segments. Drag two Images over the bars, both with Asset gaps.png: MicGaps at X 30, Y 290 and OutGaps at X 110, Y 290. The picture is see-through except for dark lines, so a plain bar under it reads as ten square segments.

Last, two captions, both Labels in Montserrat 10 px, colour #7E8DA3, Align Center, Letter space 1: MicCap saying MIC at 24, 408, 44, 13, and OutCap saying SPK at 104, 408, 44, 13.

The body's key is grey. Two pictures of the same key lit lie over it, and each is shown only while its variable is on.

1. Drag an Image onto the key. Name it CapTalk, set Asset to cap_talk.png and its Geometry to X 6, Y 428.
2. Add a binding: Variable talking, Drives Hidden, Formula x == 0. Hidden while talking is 0, so shown while this board talks.
3. Click the eye beside CapTalk in the Hierarchy, so that it starts out of sight.
4. Do the same again for CapHear: cap_hear.png, the same place, bound to hearing, hidden to start with.

A hidden widget is drawn faintly while you design, so it can still be found and selected.

The button made in step 8 becomes the touch area over the key. Select Button1 and:

1. Set Name to Talk, and in Button settings clear its Text.
2. In Geometry set X 18, Y 440, Width 136, Height 136, and press Front so that it is over the pictures.
3. In Style settings, on the Main part:

Its two events stay as they were. The button draws nothing until it is pressed, when it puts a faint white over the key.

Then a Label across the foot of the key: TalkCap, at 16, 544, 140, 16, saying HOLD TO TALK in Orbitron 12 px, colour #C3CFDF, Align Center, Letter space 1. A label takes no touch, so a press on it reaches the button underneath.

Select Button2, the Pair button from step 8. Name it Pair, set its text to PAIR and its Geometry to 8, 596, 50, 34. Style its Main part:

With Pair selected press Ctrl + D twice. A copy keeps the look and the event, so change what differs:

• Lock, at X 61, text LOCK. In its event change Action to Two-way radio: talk and Do to Start if it is not, stop if it is: one tap talks, the next stops. Add a binding with Variable talking driving Checked, and the key is lit red for as long as the board is sending, however that was started.
• Set, at X 114, with no text, Icon settings and Icon size 18. Remove its event with the bin; it gets its own in step 26.

An automation runs actions without a touch. The board preset already knows its BOOT button as an input, so it can be a push-to-talk with the screen in a pocket. On the Data tab open Automations, choose Digital input changes in the list beside Add, and press Add. Make two, and for each press Add action under Then and choose Two-way radio: talk:

Talking is an action, so anything that can fire an event can talk: a key on the glass, a button on the board, a timer, a sensor crossing a threshold.

Open Controller in the Widgets list and drag a Slider under VOLUME. Name it Volume, set its Geometry to 24, 160, 124, 10 and its Value to 60. Style its three parts:

Open Events and press Add event. Set the trigger to Value changed, Action to Set volume, Set to to The value of a widget and Source widget to Volume (Slider).

Duplicate the slider (Ctrl + D). Name the copy Sensitivity, move it to Y 230, set its Value to 83 and its Indicator colour to #FF5252, and remove the event it was copied with.

Open Data bindings and press Add binding. At the top of the binding choose From the player or the microphone, set Value to Microphone sensitivity and Direction to Both ways.

Both ways means the slider sets the sensitivity and also shows it: on the board it starts wherever the microphones' gain is, with nothing to keep in step. Either slider could have been made either way; this screen shows both.

Two Buttons, styled as the keys in step 19 with a Radius of 19:

The quick way to the style: copy Pair on the Handset screen (Ctrl + C), come back to Setup and paste it (Ctrl + V). A paste brings the look and leaves the events behind.

Click Handset in the Screens list and select the gear key, Set. Open Events, press Add event, and set Clicked, Change Screen, Screen to load: Setup, Fade mode: Fade in, Speed: 200.

It had to wait until now: a screen can only be chosen once it exists.