Use Buttons to Add/Subtract Numbers | Proto.io Prototyping Tool
Learn how to add/subtract numbers via a button in Proto.io in this tutorial video.
Proto.io offers a wide-range of options to enhance the interactivity of your app. In this tutorial, we’ll be creating buttons that add or subtract 1 on a range of 1-20.
Step 1: Adding Elements
Add two buttons and a text element to your canvas. These can be found in the UI panel. We’ve added a few extra to fill out the screen. Double click on each button to adjust its text to plus, and minus.
For the text, change it to zero.
Step 2: Creating Variables
Click on settings, then variable manager. Select “Create Variable”.
For name, type range_var.
For type, select numeric.
For value, input zero.
Lastly, enable evaluate.
We’ll be using this variable throughout the tutorial.
Step 3: Creating A Variation
Click on the plus button, then interactions, and “add interaction”.
For trigger, select tap.
For action, select set variable.
For variable name, select the variable we just created - range_var.
For value type, select custom value.
For new value, press shift + curly bracket to bring up all available variables. Select range_var, then, type + 1.
Leave delay.
Let’s recap:
The purpose of this interaction is to adjust the variable of the button, which by default is zero.
When the button is tapped - the trigger - a new variable is created - the action. This variable is a new custom value, which is calculated by adding 1 to the value of range_var. For example, if range_var is zero, the new value is 1. If it is 2, the new value is 3.
Step 4: Adding a Callback
Click to add a callback.
For action, select set variable.
For variable name, select range_var.
For value type, select custom value.
For new value, enter the following java script:
Without going into too much detail, here is what this means: If - the first question mark - the range_var value is less than zero, then it’s value is zero. otherwise, if the range_var value is greater than 10, it’s value is 10; if it is anything else, it is the range_var value.
Let’s recap:
The purpose of this callback is to adjust the variable if it is below zero, or above 10, since our scale does not exceed beyond these numbers.
Once the first interaction is complete, this second action begins. It sets a new variable - the action for the variable range_var - the variable name. A custom value - the value type - is set, and it based on the java script we entered - the new value.
Step 5: Adding a Second Callback
Click to add a second callback.
For action, select change property.
For screen, select your current screen.
For number, select the text you added to the canvas.
For property, select text.
For value type, select read from variable.
For variable name, select range_var.
All right. One last recap:
Once the first callback is complete, another callback begins. This callback changes the property - the action - of the text we added - the item. It changes the text - the property - based on what is read from the variable range_var - variable name.
Step 6: Adding An Interaction to the Minus Button
Click save interaction. Right-click on it, and select copy.
Then, click on the minus button, interactions, and right-click over add new interaction icon. Paste.
Open the interaction to edit it.
The only element that needs to be changed is the “new value”. Change +1 to -1.
Step 7:
Save the interaction. Save the project. And preview!
Now, as you can see, when we click on the plus button, the number increases by 1. When we click on the minus button, it decrease by 1. The range is 1-10, and it will not allow us to go any further than these numbers - and that’s good news! The interactions and callbacks are working properly.
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
gala ventura
alexis piperides
at ha
protonerds
Watch video Use Buttons to Add/Subtract Numbers | Proto.io Prototyping Tool online without registration, duration hours minute second in high quality. This video was added by user Discover Business Degrees 21 September 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,589 once and liked it 65 people.