#tutorial

A good tutorial on how to make a prototype of a sound level meter in ProtoPie

☁️ Result

Here's a piano for you. 🎹
I don't know why, maybe you'll find something interesting there. I started it a long time ago, now.

☁️ Piano

I did a full search

Those. The author's name or book title can be entered partially or completely.

Of the minuses:
- Case-sensitive search (most likely this can solve this problem, but I’m too lazy)
- It scales quite inconveniently. (you need to somehow optimize the transmission of long text from the component)

☁️ Search case

I made a universal component for the "Accordion" type menu.
It’s difficult to explain how it works, but I can explain how to use it =)

There can be any number of elements in the list, the main thing is to indicate to each element its id - what order it is in and the height to which it should open. The height of each block may be different.

P.S. It seems like I ran tests - I didn’t find any bugs, but if you find something, be sure to write))

P.P.S. In general, it seems to me that such an element is poorly suited for mobile interfaces, but I see it quite often, but the challenge for an elegant implementation turned out to be interesting.

☁️ Example

#faq

I made a small demo of the 📷Camera application from an iPhone.
https://cloud.protopie.io/p/347867661f (it’s better to open from a device, in a browser it’s not much use)

Actually the very first question that everyone asks is

How to use the camera image?

In this example, I cheated a little and used 2 camera components at the same time. One - simulates a video finder, the second with 0 transparency in the container where the gallery should be - will simulate a photograph taken.

For various Instagram-like applications, you can use one component. We simply stop the component and work with it as with a regular image. But the resulting image from the camera cannot yet be transferred to another scene.

There were also some bugs. It is better to scale the camera component using Factor as a percentage. If you scale across pixels, then when the camera component is needed again it will break the proportion of the resulting image.

#faq
A tired question, but it still comes up often...

Q: How can I send a message from a component that will be heard by another component?

Q: How can I send a message to all components at once?

A: For these purposes, ◀️Send with the Current Scene parameter is used. The fact is that the “Current Scene” parameter means exactly the screen on which all the components are located. By transmitting a message to the current scene, that message can be heard both on the screen itself and in every component located on that screen. By understanding this concept, using components becomes much more enjoyable.

☁️ Example with Checkboxes
☁️ Example with counting likes
☁️ Example with a switch

#faq

Q: How can I make sure that when scrolling a list of elements, the Touch Down trigger on these elements does not fire?

A: I usually create a safe timer in such cases to trigger the trigger. And I reset it when I start scrolling.

☁️ https://cloud.protopie.io/p/823390a22a

#faq

Q: How can I track the action after a long tap without lifting my finger from the screen?

A: After the long tap, you need to start tracking the coordinates of the press using the $touchX and $touchY variables. Then you can check whether the click coordinates fall within the required frames.

☁️ https://cloud.protopie.io/p/8fece30fc2

Music prototyping? Why not)
I took my piano https://t.iss.one/protopie_en/22
Added autoplay of the melody - an OST from the movie Requiem for a Dream, by Paul Oakenfold (because it’s a simple melody that can be played on one octave)
Autoplay works if you press the z button (in the browser) or do a double there on the purple part of the piano.
Prototyping music using ◀️Send and ✈️Recieve for repeating parts is fun) And thanks to the latest update, you can set the speed of the melody by changing the overall Start Delay (in the prototype the speed variable)

I get asked questions about treading from time to time (at work, in chat, on social networks), so I decided to make a hashtag with answers to questions #faq

Q: How can I interrupt a movement before it is completed?

A: You need to use the ⏹ Stop response.

>⏹ Stop can also interrupt other actions:

• ↕️ Move
• ↗️ Scale
• 👌 Rotate
• ↪️ 3D Rotate
• 🏁 Opacity
• 🔘 Color
• ◻️ Reorder
• 🔲 Radius
• 🔳 Border
• ⏺ Shadow
• 💧 Background Blur
• ↕️ Scroll
• 🧑‍🏫 Assign
• ✝️ Text

However, in order to stop
📼Video, 🎵Audio, ♉️Lottie playback, use the ▶️Playback action with the Pause parameter.

Another seemingly exception is
📳Vibration. To stop vibration, it must be associated with some object. For example, with a 🌓Shape that ↕️Move 10px to the right every second. Then, using the 🎯Detect trigger, we track changes in the X coordinate of the figure and perform 📳Vibration action. Well, to stop the 📳Vibration, it is enough to stop the movement of the figure with the ⏹Stop action.

☁️ Example

#faq

Q: How to make a video timer to display time in mm:ss format

A: Here you need to play with arithmetic and new functions for the formulas that were introduced in 3.10


• The 🏞Media parameter .currentTime outputs data in seconds and milliseconds, ie. the value could be, for example, 123.75. If we translate manually into minutes and seconds, we get 2 minutes and 3 seconds. (and 0.75 seconds is simply not taken into account).

• Arithmetic of time. When dividing the seconds obtained from the .currentTime parameter by 60 , the integer part will show how many minutes the media is playing, and the remainder of the division will show how many seconds in a particular minute.

• You can use the format function to trim milliseconds:

🎯Detect🌫📼Video 1 - Time
🔀🧑‍🏫Assign🌫🔡time
⬇️ format(Video.currentTime,"#")
➕

Using the function in the example above, we will get the result 123 in the variable 🔡time;

• To get minutes - the integer part when dividing, we will use the floor function, and to always get a two-digit number (for example, if we have only 2 minutes, then we need the variable to be equal to 02), we will use the lpad function:

🎯Detect🌫🔡time
🔀🧑‍🏫Assign🌫🔡min
⬇️lpad(floor(time/60),2,"0")
➕


The main thing to remember is that the

🔡

min variable must be a string, not a number. Here, the lpad function adds the character "0" to the left of the result until the length becomes 2. In our case, it turns out min="02 "

• To get seconds - the remainder of the division, we will use the arithmetic operation % , and also add "0" on the left if necessary with the lpad function ( sec is a string variable). Add calculation of seconds to the same trigger:

🎯Detect🌫🔡time
🔀🧑‍🏫Assign🌫🔡min
⬇️lpad(floor(time/60),2,"0")
⬇️
🔀🧑‍🏫Assign🌫🔡sec
⬇️lpad(time%60,2,"0")
➕

in our case it turns out sec = "03";

• Now it remains to display the data in the text field ✝️Text1:

🎯Detect🌫🔡time
🔀🧑‍🏫Assign🌫🔡min
⬇️lpad(floor(time/60),2,"0")
⬇️
🔀🧑‍🏫Assign🌫🔡sec
⬇️lpad(time%60,2,"0")
⬇️
🔀✝️Text🌫✝️Text1 - Formula
⬇️min + ":" + sec
➕

We take the value of 🔡min variable, add a colon and the value of 🔡sec variable. It turns out 02:03 .

☁️ Example

P.S. And to make it even more fun, you can make a mm:ss timer without using variables, and immediately

🎯Detect🌫📼Video 1 - Time
🔀🧑‍🏫Assign🌫🔡time
lpad(floor((format(`Video`.currentTime,"#"))/60),2,"0")+":"+lpad((format(`Video`.currentTime,"#"))%60,2,"0")