Icon states allow the Experience Designer to dynamically update the Icon image based on the "state" of the Smart NFT.
Icon states allow the Experience Designer to dynamically pick the Icon image based on the state of the Smart NFT.
The designer can add additional images along with expressions.
In this example, a folder Smart NFT's Icon changes dynamically based on the number of contained objects. The image is completely replaced, so in the example each icon variable visually displays a number counter and a filling scale at each stage or state.
Accessing child object count (applies only to 'Folder')
{ "maxChildCount": 1 }
Fill Percentage (applies only to 'Instant Share')
With the Instant Share design, the isEqualTo expression value sets a state change when the share fill percentage exactly matches the value. The example below is set to 25 Gain Per Share which raises the fill 25 percent (+0.25) with each share.
If gain per share is a value that does not add up to exactly what is set in the State expression (ie. +0.27) the state will not change.
{
"statePointer": "/cloneable-v1/cloningScore",
"isEqualTo": 0.25
}
Accessing Private section
{ "statePointer": "/varius.behavior:varius.io:misc-data-v1/tweet", "isEqualTo": true}
Above `statePointer` translates to:
private.state.\"varius.behavior:varius.io:misc-data-v1\".tweet
One limitation of this feature is that it cannot access values outside of the behavior state ("private.state") section.
Modifying Icon States in Studio
Click the object's Icon Image to open the Icon Editor.
In the editor, you can add a new Icon State by pressing the (+) State button on the right-hand side. You will be asked to upload a new image for this icon state.
Once the image is uploaded, you can nickname your state, and add the corresponding code to trigger the state change.
All the expressions are ordered. Expressions are tested from the top (to the bottom). Once we encounter an expression that evaluates to true, we display that image. If none of the defined rules evaluates to true, then the "Default" image is displayed.
Comments
0 comments
Article is closed for comments.