Number Pad Data Entry in Tulip

Hi Team,

I created a number pad for a customer today! Thought it might be of interest.

They needed bigger keys that the standard key pad on a tablet because they are wearing gloves on the shop floor.

Happy to share with anyone if they want to use it just reach out.

Logic is as follows:
Number variable created as @variable.value. That is the number you are seeing.
Each button is a trigger that multiplies @varriable.value by 10 then adds 0.0X (replace X with the number on the button). If @variable.valu is blank we add 0.0X only.
Clear clears the variable.

Reach out if you need more explanation.


1 Like

Hey Eddy,

It looks like I cant see your file without logging into Slack.
I’m curious why you chose to take a mathematical approach as opposed to manipulating strings/text. So for example:
text displayText.
If displayText is empty, the button sets displayText equal to the value of the button.
Else each buttons displayText + “Value of Button”.

I imagine the mathematical approach is difficult to remove the last character?

Hi Brad,

I will test it. But I was trying to develop away that minimises number of triggers required.

I think if you do +value of button you then have to have a button for 10, 11 and so on. Idea was to have something that functions like a number pad on a calculator i.e. when you press 1 then 2 then 3 then 4 you get 1234 and not 10.

Does that makes sense? Or maybe I am not getting your point fully.


I will add a new animation later.

Below is an example app i made:

Each button has the logic for the following trigger:

And the result displays the keys entered:

Then you can manipulate the variable any way you could manipulate a text variable.

That is cool thanks!

The next step I was working on was adding decimal point. I had started to do it with a second page but think you could just add it like another character. :). Then some rule so you can’t add two decimals points.

Absolutely! You could add a bool that toggles to true when you use the decimal called decimalUsed and check every time the decimal button is selected to see if true.