PaintCode Power User: Expressions

This post is a part of series PaintCode Power User.

Probably the most complex feature of PaintCode is Expression Variables. It dives deep into programming world, far from visual design, but offers infinite possibilities. Don’t panic, simple conditions or arithmetics are trivial enough even for non-programmers and can be a powerful tool in your toolbox.

Before discussing them in-depth, here are some examples so you have an idea of what is an Expression:

Examples of ExpressionsExamples of Expressions

Not that bad, is it? You may want to read our post about Text Fields, which support some simple expressions. Here I will discuss more advanced features.

Using References

Most important aspect of expressions is that you can use other Variables within them. All of the above examples take advantage of it. This allows you to have Variables that are set manually, like isHighlighted or angle and other Variables that calculate the result based on them.

Other Library Items

In previous post about Variables, I made a list of types that Variables can have, like Number or Text. However, expression-based Variables can evaluate to some additional types, but these types should be already familiar to you:

Yes, an expression can return any other Library item. This is useful for example with conditioned style. Imagine you have two colors Tint Color and Lighter Color as its derivation. We want to change fill of a shape when our Variable Is highlighted is set. We achieve this by creating a new Variable that contains this expression: isHighlighted ? lighterColor : tintColor. After we connect this Variable to the Shape’s fill, we can toggle Is Highlighted On and Off to see how the color changes in canvas.

As if that was not enough, we also implemented functions to create these types using custom values:

Language Tips

For full description on the language, read our documentation on this topic. It’s not very complicated, the language is a mostly a subset of both JavaScript and C.

Numbers

Text

Booleans

Geometry

Quite a lot of information to absorb, I know. Keep in mind that we consider Expressions as really advanced feature of PaintCode. It’s totally possible to build a design without touching any of these things.

And remember, you can use numeric operators and functions in all text fields of Inspector and they will evaluate immediately. For details, see our older post about Text Fields.


To learn more about Expressions, read our Expressions documentation or watch a video about Expressions. We also have a video with Advanced Expressions.