Tutorial: a blocky pixel-art radio for the Cheap Yellow Display

Open Hardware, then Audio in its second row of tabs. Open the Sound section and tick Play sound on this board.

• Output is Internal DAC, and under Wiring the DAC pin is GPIO 26: the board's amplifier and its speaker connector. Leave both.
• Under Playback, set Stream buffer to 20. A buffer a little bigger than the default rides out the gaps in a station over Wi-Fi.
• Leave Decoder at MP3, Volume at boot at 60 and Decoding on the other core.

Open File > Project settings... and, under Rendering, set Buffer height to 10. Leave Double buffer ticked, and press Done.

LVGL draws the screen in strips, and keeps two of them in the chip's own memory. At the 40 lines a new project starts with, the two take 50 KB. At 10 lines they take 12.5 KB. This board has no PSRAM, and the 37 KB this frees is what the player needs beside Wi-Fi: its 20 KB stream buffer, the MP3 decoder and the connection to the station. Smaller strips draw a little slower, which a radio does not miss.

Open Data on the right and the Stations list in Variables. Under Items, change Groove Salad's Genre to AMBIENT DOWNTEMPO. Then press + Item seven times and fill in each one's Name, URL and Genre, in this order:

0. Groove Salad, http://ice1.somafm.com/groovesalad-128-mp3, AMBIENT DOWNTEMPO
1. Deep Space One, http://ice1.somafm.com/deepspaceone-128-mp3, AMBIENT SPACE
2. Space Station, http://ice1.somafm.com/spacestation-128-mp3, SPACE ELECTRONICA
3. Mission Control, http://ice1.somafm.com/missioncontrol-128-mp3, AMBIENT + NASA
4. Nightride FM, http://stream.nightride.fm/nightride.mp3, SYNTHWAVE
5. Chillsynth, http://stream.nightride.fm/chillsynth.mp3, CHILLWAVE
6. Datawave, http://stream.nightride.fm/datawave.mp3, DARKSYNTH
7. Tay FM, http://stream-mz.hellorayo.co.uk/tayfm.mp3?aw_0_1st.skey=1602676850&aw_0_1st.playerid=BMUK_ukrp, DUNDEE HITS

They are plain http MP3 streams, which a board with no PSRAM plays best: a secure connection would cost memory this board does not have. The order matters: the discs on the radio screen are these stations, first to last.

Back on Inspector, with StationList selected, set Geometry to X 20, Y 36, Width 280, Height 156.

Open Internet Radio settings. Station list is Stations (8), with Name field Name, Address field URL and Genre field Genre. Leave Also plays the MP3 files in empty, Takes more stations from at Nowhere else and Show genre ticked, and set Row height to 0, so a row is as tall as what it says.

In Style settings: Background Opacity 0, Border Width 0, Text Color #1E1E1E in VT323 at 20 px, and all four Padding values 0.

Drag a Button onto the screen. Name it ListBack, set its Text to BACK, and place it at X 224, Y 198, Width 76, Height 28. Its look takes two states, chosen with State at the top of Style settings:

• Default: Background #8B8B8B at Opacity 255; Border #373737 at 255, Width 2; Shadow Width 0; Text #FFFFFF in VT323 20 px; Misc Radius 0.
• Pressed: Background #7EFC20, Text #0A2A00.

Then Events: Clicked, Change Screen, Radio, Fade in, 150.

The Join screen's BACK key is a copy of this one.

Drag an Image onto the screen, name it Face, set its Asset to inv_main.png and its X and Y to 0. Untick Clickable and Scrollable under Flags.

The picture has every slot, the empty row of hearts, the level's dark channel and the eight discs already drawn. The widgets go on top.

Open Ready-made and drag WiFi by phone to the top right corner. Name it WifiSetup, place it at X 288, Y 7, and set its Size to 21. In WiFi by phone settings:

• Network name BLOCKY-RADIO, Its password play a disc.
• Offers the page While it has no network; Page heading Blocky radio; Reconnect on boot ticked; Join timeout 20.
• The colours: Not connected #6A6A6A, Waiting for a phone and A phone is connected #3060E0, Flashes every 400, Joining #FFD24A, On a network #2E8A10, Could not join #FF4B3E.

With no network the board starts one of its own. A phone that joins it is shown a page that lists the networks the board can hear and asks for the password. Dropping the widget also adds the two settings it keeps the network in. The mark follows Wi-Fi by itself, in the colour of what it is doing: it needs no event and no binding.

A mark takes no touch, so a Button with nothing drawn goes over it. Drag a Button onto the screen and name it OpenWifi. Clear its Text, and place it at X 284, Y 4, 30 x 26.

In Style settings, Default: Background Opacity 0, Border, Outline and Shadow Width 0, Misc Radius 0. Pressed: Background #FFFFFF at Opacity 50, so a touch shows. Events: Clicked, Change Screen, Join, Fade in, 150.

Every other invisible key on this screen is a copy of OpenWifi: select it, press Ctrl+C, then Ctrl+V. A plain paste brings no event, so each copy is given its own.

Open Data. In Variables, press + for each of these, type its name, choose its Type, then its Source:

• wifiJoinCode, Text, Length 200: WiFi by phone: the code a phone scans
• wifiSays, Text, Length 224: WiFi by phone: what to do next
• setupOpen, Boolean: Access point running
• online, Boolean: Connected

For the two Booleans set Decimals 0, Min 0 and Max 1. The WiFi by phone sources are offered only once the design has a WiFi by phone widget, which is why this part comes after step 24.

Drag an Image into the big slot. Name it Disc, Asset inv_disc.png, at X 18, Y 36. Untick Clickable and Scrollable.

Open Data bindings and press Add binding: From the player, Value Playing, Drives Hidden, Formula x == 0. It is hidden whenever nothing plays.

Close its eye in the Hierarchy too, so that it starts hidden, as the board does at power-up.

Three labels in the purple tooltip, each bound From the player to Text:

• Station, X 104, Y 36, 196 x 26: Station name. VT323 24 px, #FFFFFF, Label mode Scroll circular, Text Groove Salad.
• Genre, X 104, Y 62, 196 x 18: Station genre. VT323 16 px, #55FFFF, Label mode Dot, Text AMBIENT DOWNTEMPO.
• Title, X 104, Y 80, 196 x 20: Track title. VT323 20 px, #AAAAAA, Label mode Scroll circular, Text Press play.

All three are aligned Left. The text typed in is only what the canvas shows: on the board each label says what the player says.

Each heart is two pictures in one place: a full heart and a half heart. Two Images, both at X 14, Y 114, both with Clickable and Scrollable off:

• Heart1, heart.png, bound From the player, Volume, Drives Hidden, Formula x < 15.
• HalfHeart1, heart_half.png, the same with Formula x < 5 || x >= 15. Close its eye in the Hierarchy.

So the first heart is half full from a volume of 5, full from 15. The empty hearts are in the picture behind them.

Select Heart1 and HalfHeart1 together (click one, Ctrl+click the other in the Hierarchy), press Ctrl+C, then Ctrl+Shift+V: paste with Shift keeps their bindings. The copies arrive 12 px down and to the right. For each pair:

• Name them Heart2 and HalfHeart2, and set X 36, Y 114.
• Change the formulas to x < 35 and x < 25 || x >= 35.

Copy the new pair the same way for the rest:

• Heart3 at X 58: x < 55 and x < 45 || x >= 55.
• Heart4 at X 80: x < 75 and x < 65 || x >= 75.
• Heart5 at X 102: x < 95 and x < 85 || x >= 95.

Close the eye on Heart4 and Heart5: at the starting volume of 60 the board shows three full hearts.

Drag a Slider over the hearts. Name it Volume, at X 10, Y 108, 114 x 28, with Min 0, Max 100 and Value 60. Under Flags untick Scrollable.

Make every part of it invisible. Main: Background Opacity 0, Radius 0, all four Padding 0. Indicator: Background Opacity 0. Knob: Background Opacity 0, all four Padding 0. The Part select is above State.

Bind it From the player, Volume, Drives Value, Direction Both ways. Sliding along the hearts sets the volume, and a change from anywhere else, the VOL keys say, moves the hearts.

Drag a Bar into the dark channel. Name it Level, at X 14, Y 140, 292 x 6, Min 0, Max 20, Value 0. Untick Clickable and Scrollable.

Main: Background Opacity 0, Radius 0, Padding 0 all round. Indicator: Background #7EFC20 at 255, Radius 0.

Bind it From the player, Level, left, Drives Value, Formula round(x * 20 / 100): twenty steps for a level of 0 to 100.

Then an Image LevelGaps on top, inv_gaps.png, also at X 14, Y 140, with Clickable and Scrollable off. It draws the gaps between segments, so the bar lights a segment at a time.

First an Image PlayLit, inv_stop.png, at X 12, Y 154, bound From the player, Playing, Hidden, x == 0, eye closed. It lights the play slot green, with a stop square on it, while a station plays.

Then select OpenWifi, press Ctrl+C (the clipboard holds hearts since step 31), and paste four copies with Ctrl+V, each 36 x 36 at Y 154:

• Play at X 12: Play audio, Play Toggle play and stop.
• Previous at X 52: Next or previous station, Direction Previous.
• Next at X 92: the same, Direction Next.
• WifiKey at X 132, over the Wi-Fi slot: Change Screen, Join, Fade in, 150.

Toggle with nothing playing starts the first station on the list.

A label VolCap at X 182, Y 163, 46 x 20, saying VOL, in VT323 20 px, #3F3F3F, aligned Right.

Then two more copies of OpenWifi, 36 x 36 at Y 154: Quieter at X 232, over the - slot, and Louder at X 272, over the + slot. Each gets Clicked, Set volume: Set to Quieter by a step for Quieter and Louder by a step for Louder, with Step 10. The hearts follow the volume, so each press moves them half a heart.

An Image HotbarFrame1, inv_frame.png, at X 10, Y 194, Clickable and Scrollable off, eye closed. Bind it From the player, Station number, Drives Hidden, Formula x != 0: it frames the first disc while the first station plays.

Then a copy of OpenWifi, Hotbar1, at X 12, Y 196, 36 x 36: Play audio, Play A station from the list, Station Groove Salad.

The Image Backdrop again, inv_second.png at 0, 0.

Then drag QR code from Ready-made. Name it JoinCode, at X 22, Y 20, 132 x 132. Set Says to WIFI:T:WPA;S:BLOCKY-RADIO;P:play a disc;;, Dark #000000, Light #FFFFFF, Margin 6. Then bind its Text to the variable wifiJoinCode, so that on the board it shows the code WiFi by phone makes. What it says here is only what the canvas draws.

The tile says Pro. A QR code that shows WiFi by phone's code is free, and once the binding is set the export no longer counts it.

Open Data and the Automations section. Choose Variable changes in the select and press Add, twice.

• ShowTheCode: Variable setupOpen, Condition Becomes equal to, Value 1. Then Add action: Change Screen, Join, Fade in, 150.
• BackToTheRadio: Variable online, Becomes equal to 1. Then Change Screen, Radio, Fade in, 150.

So a board with no network shows the code by itself, and goes back to the radio once a phone has given it one.

Press Export code at the top right. The dialog checks the design again: no errors. Nothing in this design is Pro, so the dialog names no Pro parts, and any account can generate it. Press Generate code at the bottom right.