PaintCode Power User: Text Fields

This post is a part of series PaintCode Power User.

The most frequently used part of PaintCode user interface is probably the Inspector. It presents all attributes of the currently selected object and allows you to edit them. Numeric attributes are presented using text fields, as you may see for position, size, corner radius, rotation, or stroke width.

Since users interact with text fields very frequently, we implemented several interactions into them, so editing is easier, quicker and more accurate.

• You can enter the desired number directly. Shocker.
• On cursor hover, a stepper will appear on the right side of the text field that allows you to increment or decrement the value by by 1 point.
• If text field has focus, you can use ↑↓ arrow keys to increment or decrement by 1 point.
• If text field doesn’t have focus, click and drag cursor up and down to increment or decrement by 1 point.
• Hold ⇧ with the previous approaches to increment or decrement by 10 points instead.
• Hold ⌥ with the previous approaches to increment or decrement by 0.5 point instead. However, not all attributes allow fractional values.
• And now the best part: You can enter math expressions and they will be evaluated. How cool is that?!

Text Field Expressions

If you are familiar with expressions in Variables, you already know how powerful this feature is. You can write short mathematical expressions involving numbers, operators, and functions. PaintCode will evaluate the expression and will replace it with the result.

In text field expressions you can use:

• Numbers, obviously.
• Constant PI for π.
• Operators: + - * / %
• Rounding functions: floor() ceil() round()
• Exponential functions: sqrt() pow() log() log2() log10()
• Goniometric functions: sin() cos() tan() atan2()
  (they use degrees, not radians)
• Other functions: frac() abs() min() max()

For complete description of these functions, see Functions documentation.

If you have Touch Bar, it offers buttons for for quick insertion of arithmetic operators.

It’s not possible to use references to Variables in text fields. References are available only in Variable Expressions, but that’s a topic for some future post.

Next time you need to resize a shape to twice the size, just append *2 to the width and you are done. Do you need a circle enclosing square of size 100 points? Write 100*sqrt(2) as circle size and confirm.

To learn more about these concepts, read out Inspector documentation or Expressions documentation.