Tomacco

Tomacco builds, runs and tests Android and iOS apps on Linux. Bogen reads the screens it exports, so a real app screen can come onto the canvas as an artboard you can edit, and a design can be checked against the screen the app really shows.

Bogen only reads Tomacco's documented export format and, when it is installed, asks tomaccoctl for a screen. It installs nothing, changes nothing on the device and needs nothing from Tomacco beyond that format.

The export

A screen export is a folder with two files, written by tomaccoctl call screen.export:

Bogen reads version 1 and ignores fields it does not know. It refuses another format, a newer version, a screen.json over 8 MB and a screen.png over 40 MB. When the export does not say how many pixels make a dp or point, as an older iPhone export may not, Bogen takes the likely scale and says so.

Import an app screen

Click the phone button in the toolbar, or Import an app screen in the command palette (Ctrl+P), and pick where the screen comes from:

• From a device: the screen a running emulator, Android device or iPhone shows now. Bogen lists the devices tomaccoctl sees and takes the screen with it. Without tomaccoctl, or with no device running, it says so.
• From an export: a folder of an export on this computer, or its two files chosen by hand.

Then choose:

• Text as editable text, on by default. Off keeps text as pictures, exactly as on the screen.
• Device frame: a dark frame with rounded corners around the screen.
• Keep the screenshot under the layers, on by default, locked at the bottom as a reference.

Import as artboard places one artboard, next to the others, at the device's size in dp (Android) or points (iOS). Above the screenshot, every element of the UI tree is a layer, nested as in the app: text as real text in the colour it has on the screen and at about its size; pictures, icons and controls as crops of the screenshot, which look right and can be moved; the status and navigation bars as their own layers. The whole import is one undo step.

Font sizes and weights are read off the pixels and are estimates: check them, and swap in your own text styles.

Design versus app

Select a design artboard and choose Design versus app in the command palette. Pick the app's screen the same way. Bogen renders the artboard at the screen's pixel size and shows:

• Side by side, Overlay with the app's opacity on a slider, or Difference, with the pixels that differ in red, and the share of pixels that differ.
• Matched elements: each text and leaf layer paired with an element of the app, by the same words first and then by place, with how far it is off in dp or points and whether the text differs. Hover a pair to see both on the picture.
• What is only in the app and only in the design.

The artboard should be the screen's width. An artboard made by an import with a frame is compared by its screen, without the frame.

For your agent

• tomacco_import with bundle (the folder or its screen.json) or device (an id from the device list), and text, frame, screenshot, name. With neither, it lists the devices.
• tomacco_compare with node_id and the same bundle or device: the share of differing pixels, the matched elements and what is only on one side.

Both read the computer the server runs on. See the tool reference.

Privacy and limits

• Devices and folders are read only for a request from this computer. From a paired phone, the two files can be uploaded, and a device or a folder cannot be named.
• BOGEN_TOMACCOCTL gives the path of tomaccoctl, or none to never call it. Otherwise Bogen looks for it on PATH.
• The screenshot is stored as an asset of the file, like any image.
• Tried with Android and iPhone exports in the documented format and with a stand-in for tomaccoctl. Not yet with a real device.