Skip to main content

Rigi Documentation

Rigi UI Previews app for macOS

Rigi UI Previews is a macOS desktop application that helps localization teams transform application screenshots into HTML previews for in-context translation.

Main.png

To do so, the Rigi UI Previews app performs the following steps:

  1. Captures screenshots from a selected application of any type.

  2. Performs optical character recognition (OCR) to identify translatable text in the screenshots.

  3. Matches the detected texts against your project's translation strings.

  4. Generates HTML previews and uploads them to your Rigi project.

Install the Rigi UI Previews for macOS app

OS version requirement: macOS 12.0+

  1. Download the required version of the Rigi UI Previews app via this link.

  2. Install the Rigi UI Previews app on your local machine.

  3. Grant the necessary permissions to the Rigi UI Previews app:

    1. Open the Rigi UI Previews app.

    2. In the Screen Recording popup, select Open System Settings.

      Grant_permissions_1.png

    3. In the Screen & System Audio Recording display, toggle the switch on the right for the Rigi UI Previews app.

      Grant_permissions_2.png

    4. Close and reopen the Rigi UI Previews app.

I. Create a project in the Rigi UI Previews app

To start creating screenshots for your application, you must set up a new project in the Rigi UI Previews app. To do so, perform the following steps:

  1. Open the project menu in the top left-hand corner of the display and select the New Project option.

    New_project1.png

    If you are using the Rigi UI Previews app for the first time, you can also select the Create Project button in the Welcome to Rigi Capture popup.

    New_project_welcome.png

  2. In the New Project popup, enter the following details:

    1. Your project's name.

    2. The URL of the corresponding Rigi project.

    3. The API key (for details, see Project settings – Access tokens).

  3. Click the Test Connection button to check whether the Rigi UI Previews app has successfully connected to your Rigi project. If the connection is successful, the Sync Rigi Strings button will be displayed below.

  4. Click the Sync Rigi Strings button to download translation strings from your Rigi project. These strings will be used to match the translatable text in the screenshots.

    Required synchronization

    We recommend synchronizing the strings before each capturing session. If the strings have never been synchronized, the sync required note will be displayed in the project menu and project settings menu.

    Synch_required.png

  5. Click the Create project button.

Your project can now be selected in the project menu in the Rigi UI Previews app.

Edit the project

To edit project details, perform the following steps:

  1. Select the required project in the project menu in the top left-hand corner of the display.

  2. Click the Settings.png icon next to the project menu, then select the Project Settings option.

    Edit_project.png

The Edit Project popup will be displayed. In it you can:

  • modify basic project data.

  • test the connection with the linked Rigi project.

  • synchronize texts from the captured screenshots with the strings in a linked Rigi project.

  • delete the Rigi Capture project by clicking the Red_bin.png icon in the bottom left-hand corner.

  • open the project folder by clicking the Project_folder.png icon in the bottom left-hand corner.

In the project settings menu, you can also do the following:

  • Synchronize the strings with the linked Rigi project by selecting the Sync Rigi Server option.

  • Access the Rigi UI Previews app documentation by selecting the Online help option.

II. Prepare your application

To permit the Rigi UI Previews app to identify the translatable texts in your application, they must be marked with the following characters: [#   #]. They can be marked automatically in a Rigi project if you perform the following steps:

  1. Upload the source files to your Rigi project.

  2. In the Rigi project menu, select Settings > Context > String recognition.

    Rigi1.png

  3. In the Rigi Token format dropdown, select OCR.

  4. Click the Save button.

  5. In the Rigi project menu, select Workspace > Files.

  6. Click the Download files button at the top of the Files display.

    Rigi2.png

  7. In the Download files popup, select the Files with Rigi tokens checkbox.

  8. Click the Next, then the Download button.

  9. Upload the downloaded files to your application so the Rigi pseudo-language can be selected there.

III. Capture screenshots

  1. Open the application from which you will capture screenshots on your local machine.

  2. In the Rigi UI Previews app, select the required project in the project menu in the top left-hand corner.

  3. In the project settings menu, select the Sync Rigi Server option to ensure that the downloaded Rigi strings are up to date.

  4. Open the window dropdown on the top menu bar, and select the program in which your application is now running. Your choice will be saved, so next time you open this project, the same program will be preselected.

    Capture_1.png

  5. To capture a screenshot of the currently opened display of your application, click the Capture button in the top menu bar. The Rigi UI Previews app will take a screenshot and scan it for translatable text marked with [#   #] characters.

    After the capture, a thumbnail will appear in the Previews panel on the left, the preview will be displayed in the central panel, and the scanning results will appear in the Scan Results panel on the right.

    Alternatively, you can paste or drop screenshots from your local machine directly into the Previews panel in the Rigi UI Previews app.

    All the texts found in a screenshot by the Rigi UI Previews app will be divided into three sections:

    • Scanned text containing all the texts detected in the screenshot. To view all the scanned text in a screenshot, select the 'Screenshot' layer in the central panel by clicking the left-hand icon on the preview toolbar or by pressing the 'Tab' button on your keyboard. The defined texts will be marked with blue frames.

      Screenshot_layer.png

    • Translatable text containing all the texts marked as translatable, i.e., that can be linked to strings in your Rigi project. To view all the translatable texts in a screenshot, select the 'Preview' layer in the central panel by clicking the left-hand icon on the preview toolbar or by pressing the 'Tab' button on your keyboard. The translatable texts will be marked with green frames.

      Preview_layer.png

    • (Optional) Undetermined translatable containing texts that have been marked as translatable but could not be matched with the Rigi strings. Each entry in this section contains information about the occurred issue.

      In the 'Preview' layer, the undetermined translatable texts will be marked with red frames.

      Scanned_texts.png

    Screenshot preview options

    The preview toolbar located in the central panel below the screenshots offers the following options, from left to right:

    toolbar.png

    • Layer toggle to switch between the 'Screenshot' and 'Preview' layers.

    • Zooming options.

    • 'Fit to window' button to scale the screenshot to fit the central panel.

    • 'Actual size' button to display the screenshot at 100% size.

    • Border toggle to display or hide the text borders in the 'Preview' layer.

  6. Review the texts in the Scan results panel, and, if necessary, edit translatable text properties. To create functional HTML previews, the Rigi UI Previews app will automatically determine the font size, weight, style, color, and alignment for each defined text. To change these details, select the required text in the Translatable text list, then select the Custom option.

    Edit_properties.png

    Important

    If you change the style of a specific text, this style will apply every time that text occurs in current or future screenshots.

    To restore the automatically-defined settings, click the Reset to Automatic button at the bottom of the text properties section.

    Important

    You can only edit text properties for the most recently captured preview, the one that is currently displayed in the Rigi UI Previews app. After another preview is captured, it is no longer possible to edit the properties of the texts in the previous preview.

  7. Capture and verify all the required previews as described in Steps 5 and 6. All the captured screenshots will appear in the Previews section on the left. To remove a screenshot, click the Delete.png icon in the top right-hand corner of that particular screenshot. To delete all screenshots, click the

  8. Click the Upload previews button in the top right-hand corner of the Rigi UI Previews app display.

    Upload_previews.png

    All the captured screenshots, transformed into HTML previews, will be uploaded to the linked Rigi project and can then be used to translate and review in context.

    Previews_uploaded.png

Keyboard shortcuts

In the Rigi UI Previews app, you can use the following shortcuts:

  • Option–Shift–C to capture the selected window.

  • Command–U to upload previews.

  • Tab to toggle between 'Screenshot' and 'Preview' layers.

  • Command–Minus sign to zoom out.

  • Command–Plus sign to zoom in.

  • Command–0 to fit the screenshot to the window.

  • Backspace to delete the current screenshot.

  • Command–Backspace to delete all screenshots.

In this section: