Skip to content
  • Protopie and Figma
  • Protopie Tips
  • Experience Prototyping
  • Protopie and Figma
  • Protopie Tips
  • Experience Prototyping

PROTOPIE

Receive and Assign hazard

When you receive a value with a message from a component, it is quite common to assign a variable with some function of that value (e.g. length).

The issues can be seen in this simple pie here   which has two input fields each set to show the entered text in a field below once the text is 4 or more characters long. If you try it you will find that the one on the left only shows the text when it is 5 characters long, whereas the one on the right does it at 4. And yet the condition controlling both is the same (if length > 3).

The reason this happens is that Protopie responses happen simultaneously (unless delayed … but conditionals cannot be delayed).

Thus in the left hand version, the condition is applied before the assignment has fully happened – even though the order on the page suggests it happens first.

In the right hand version the code is arranged as a Receive (and Assign) and then Detect. the Receive trigger only does the assignment of the new length variable. And then the Detect trigger picks up that the variable has changed.  In this way the condition only happens after the length variable has changed.

Once put down side-by-side, this hazard seems kind of obvious, but the difference in the two methods is very subtle conceptually.

The end result is that when one assigns a value in a response to some trigger (whether a receive or a detect) one should avoid using that variable in a condition in the same trigger. instead after assigning the variable one should then program a detect trigger for a change in that variable.

This is particularly relevant if you are passing an array of values – your first step is to receive the array and then assign each of your variables to appropriate value within the array. The you can either do a detect on one of those variables, or, better still, change the value of some other variable (called temp possibly) from 0 to 1, and then detect the change in it. In the response to that detect, the first step is to change the value of temp back to 0. And then you can have conditionals based on the values from your array.

Potentially related posts ...

Working with Components
more ...
Moving between Figma and Protopie
more ...
Rough, Rapid, Right
more ...
Arrays and multiple parameters
Protopie seems limited since a message can be sent using only one value as a parameter. However, arrays (written as text strings and manipulated by parseJson) can be used for contexts where multiple parameters need to be passed.
more ...

© 2023: David J Gilmore