Tutorial on how to create a sound meter using ProtoPie
In this ProtoPie tutorial, I will run you through steps to recreate a sound meter prototype that responds to sound levels measured using the mic in a smartphone. This response is then used to modify UI layer properties.
👨💻 Creating the UI and importing to ProtoPie
Every division on the scale equals a range of 5 decibels (dB). The first division would range from 30–35 dB, the second would be from 36–40 dB and so on.
Every division has two rectangle layers to indicate the reading — Green means within range and Grey means out of range. Click on the link below to get the Figma open file.
Open ProtoPie on your desktop and create a new project. Click on Import and select Figma from the menu. Then select the artboard that you want to import.
🔊 Accessing the sound sensor
01. From the Inspector panel, click on Add trigger and select Sound from the Sensor menu.
02. Now that we have added the Sound sensor as a Trigger, let’s make sure this trigger is returning some Response. In the Variables panel (below the layers panel), create a new variable for all scenes and rename it to sound_level.
03. Back to the inspector panel, click the + button under the Sound trigger to add a new response called Assign. From the properties panel, click on the “Select variable” dropdown menu and select sound_level.
Next, we will set the mapping range values to be the same as the prefilled dB values ranging from 30–120.
ProtoPie allows us to display a variable in debug mode. This mode helps us to see if the response is being received and assigned to the variable. So to do that just hover on the sound_level variable and you should see a bug like Icon appear, click that it’ll add the variable to the canvas area.
⚒ Time to test
Click on Device from the toolbar menu on ProtoPie. Download and open the ProtoPie app on your smartphone. Scan the QR code using the app and you’ll see the prototype displaying the sound_level values on the screen.
🎛 Modifying layer properties
Based on the response received from the sensor we can now map the Opacity value of the Green rectangle layers to the dB of sound indicating the change in sound level.
For example, if the response returned is 55 dB, the meter will highlight 6 divisions (30–55 dB) on the meter.
Step 1: Let’s map the response for the first division ie: 30–35 dB. From the inspector panel, click the + button under the Sound trigger to add a new response called Opacity. From the properties panel, click on the select layer dropdown menu and choose the layer named 30–35-on.
Step 2: Range 1–30 and 120 dB (in range), the opacity would be 100%. Range2–1 and 29 dB (out of range), the opacity values would be 0%. Modify Range 1 and 2 values as indicated below.
Repeat steps 1 and 2 for the remaining layers and run the prototype again to reflect the changes.
🎉 The final result
✌️ Happy prototyping!
