Obsidian: how it is made

Obsidian is a dark rewards app: a metal balance card, quests with a large picture and a bottom navigation bar. This page shows where its main tricks live in the editor and how to repeat them on your own screen.

You get Obsidian by copying it from the gallery of ready apps (Getting started). Select a widget on the canvas or in Tree; the names in code below are the names you see in the tree.

The screens#

Home, Rewards and Profile are the three sections of Bottom navigation; Quest opens on top of the section you were in.

How the metal balance card is made#

On Home select Metal balance card. It is a Stack: layers lie one on top of the other, and the first one is the lowest.

• The lowest layer is an Image set to From data, with the data field art.balance: the metal texture arrives as data, so it can be replaced without touching the document.
• Above it stands a Column whose Layer size is Whole stack: it takes the size of the stack, and the texts and the bar inside it lie over the picture.
• The bar is a Progress bar bound to user.tierProgress; its Fill gradient is progressGlow. The sentence under it is a Template: {left} {unit} to {next}.

To repeat: add a Stack, put an Image first and a Column second, set Layer size of the column to Whole stack, then bind the image to a text field of the dictionary that holds an address.

How the card changes on a wide screen#

The balance card and the panel beside it sit in Balance summary, and each has a share of the width. Select Metal balance card and Balance side panel: for a wider screen they carry their own values — a margin and a height of 264 — set with Editing for at the top of the panel, switched to Tablet. The quest pictures grow the same way, and the quest texts keep a comfortable width. See Screen widths. Switch the frame above the canvas to a browser window to see the result.

To repeat: build the phone version first, then switch Editing for to Tablet and change only what differs; the panel writes only the difference.

How the quest carousel is made#

Quests list is a Data list with the Source quests. Its Carousel is on: Cards in view is 1, Next card shows by gives a glimpse of the next card, and Dots shows the dots. The card, Quest card, is one template that is drawn for every record:

• an Image bound to quest.image;
• a small Container in the corner whose States change its color by quest.status — new, active and so on;
• a Badge with the reward, Number with separators and a plus sign;
• a Progress bar for the quests of three, four and five steps: three copies, each Conditional on quest.target.

The card has the action Go to screen Quest, and it carries the record of the card to the next screen.

To repeat: add a Data list, choose a Source, put one card inside and bind its texts and images; then open Carousel on the list.

How the quest screen is made#

The record of the card is what Quest shows: every text is bound to quest.*.

• The top picture, Quest hero, is a stack of an image and a gradient layer (Layer size: Whole stack). The title block below it, Quest title block, has Over the previous one set, so it overlaps the picture.
• The bar at the top has a States entry on quest.id: every quest gets its own header color from one widget.
• The steps, Step 1, Step 2, Step 3, show three looks of one row: done (a check), current (a number and a Badge “Now”) and not yet (muted text). Each look is a Visibility condition on quest.stage.
• Pinned action bar is a column with Pinned to the bottom set to Pinned: the button stays visible under a long screen.

The streak#

Streak card shows a week. In each column a circle changes by States, and the icon changes by Visibility, both on streak.days: greater than the number of the day is done, equal is today, less is not yet. Copy a column six times and change the number.

Data#

Obsidian reads user.* (name, picture, points, level, progress), streak.*, art.balance and three lists: quests, activity and rewards. The fields of a list are written as quest.title, entry.points and so on.

Above the canvas open the Scenario list and choose Configure values…: set streak.days to 0, 3 and 7 and watch the week fill; set a list to Empty; choose No data to see every fallback text. All states shows these phones side by side. More: Data.