Skip to main content

Rigi Documentation

  • Rigi Documentation
  • Writer guides
  • Create screenshots based on HTML previews

Create screenshots based on HTML previews

Rigi's Documentation functionality enables you to simultaneously create screenshots for multiple languages based on captured HTML previews and localized strings.

Global screenshot settings.

Rigi subscribers can set global general settings for documentation books in the Server settings. By default, those settings will be applied to all new books, but can be changed for a specific book. For details, see the Configure documentation settings guide.

To transform captured HTML previews into screenshots, perform the following steps:

  1. Open the required project.

  2. In the project menu, select Documentation.

  3. Create a documentation book (a folder for screenshots):

    1. Click the New book button. The Create book wizard will be displayed.

    2. In the General step, perform the following:

      1. Give this book a name.

      2. Select image format for screenshots: jpeg or png.

      3. (Optional) Add a border to screenshots by switching the Border toggle. You can configure the border's color and width.

      4. (Optional) In the Color palette section, select one or several colors for the screenshot tools.

      5. Click the Next button.

    3. In the Dimensions step, set the default width and (optionally) height for screenshots.

      Dimensions.png

    4. In the Locale-specific variables step, you can add values in different languages for variables used in your application. This enables you to localize variables on the screenshots.

      Locale-specific_variables.png

      • To add a locale-specific value, click the Edit.png 'Edit variables' icon. The Edit locale-specific variables popup will be displayed.

        locale_variables.png

        1. From the Select locales dropdown, select the languages for which you will add values.

        2. In the Variables field, enter the name of the variable.

        3. In the Settings section, enter the required values for the selected languages.

          Default value

          To use a default value for a variable, enter the required value in the Settings field and leave the language-specific fields empty.

        4. Click the Save button.

      • To export locale-specific variables to a CSV file, click the Download_blue.png 'Export variables' icon. The Export locale-specific variables popup will be displayed.

        Export_variables.png

        1. Specify whether you want to export variables to a single file or create a separate file for each language.

        2. Specify the CSV separator (comma or semicolon).

        3. Click the Export button.

      • To import variables from a CSV file, click the Upload_blue.png 'Import variables' icon and upload the required file.

    5. In the Target rule step, you can configure the screenshot naming rule and the downloading settings:

      1. To define how the file name for a screenshot is to be created, drag the variables from the top field into the Resulting screenshot name field.

      2. To add custom text, hover over the Resulting screenshot name field, click the Plus.png 'Plus' icon, and enter the required text in the Create new variable popup.

      3. To specify that subfolders for each language are to be created automatically when downloading screenshots from this book, select the Write resulting screenshots in subfolder with language name checkbox.

      4. Define the structure of the downloaded documentation book (flat or nested) usig the Write flat structure checkbox.

      5. Click the Create button.

  4. Create a folder in a documentation book.

    1. For the first folder, click the here button in the display center.

      For subsequent folders, click the New folder button in the top right-hand corner of the screen.

    2. In the Create folder popup, enter the folder name and click the Create button.

    Subfolder creation

    To create a subfolder within a documentation book folder, hover over that folder and click the new_folder.png 'New folder' icon.

  5. Create screenshots based on the captured HTML previews of the application:

    1. Hover over a folder or subfolder in a documentation book and click the Plus.png 'Add screenshot' icon. A wizard popup will be displayed.

    2. In the General step, perform the following:

      Create_screenshot.png

      1. Give the screenshot a name.

      2. (Optional) Enter a reference ID.

      3. (Optional) Adjust the screenshot settings configured in the documentation book settings (image format and dimensions).

      4. Click the Next button.

    3. In the Select preview step, locate and select the required HTML preview.

      Select_preview.png

      Locate previews

      • Use the filter panel in the Search field to filter previews by tags, comments, or date.

      • Hover over the preview images to enlarge them.

      • Click on the preview images to display them in full-screen mode.

    4. Click the Create button. You will be directed to the screenshot editor.

    5. In the screenshot editor, use the tools from the left-hand side panel to edit the screenshot. To do so, select a tool and apply it to a specific element or string on the preview. For details, see the Screenshot editor tools section below.

      Edit_a_screenshot.png

      After you select a tool, you can configure its settings in the right-hand side panel.

      Important

      The changes you make to a screenshot in the screenshot editor will be displayed in each language version of this screenshot.

    6. After you finish editing the screenshot, click the Save button in the top right-hand corner of the screen.

    7. Click the Deselect_all.png 'Close' icon in the top right-hand corner of the screen.

  6. If required, repeat step 5 for other screenshots.

  7. To download the resulting screenshots, perform the following steps:

    1. In the project menu, select Documentation.

    2. Hover over the required book and click the Download2.png 'Download book' icon. The Generate screenshots popup will be displayed.

      Download_screnshots.png

    3. Select the languages for which you want screenshots to be downloaded.

    4. Click the Next button.

    5. In the Quality step, configure the screenshot quality settings:

      Download3.png

      1. Set the device pixel ratio (0-10).

      2. Set the required file quality (0-100%).

      3. Specify whether you want to reduce the file size using lossless compression.

      4. Click the Download button. A ZIP folder called Images for documentation will be downloaded to your local machine.

Screenshot editor tools

The Rigi screenshot editor offers several tools that can be applied to HTML preview elements and strings.

Screenshot_editor.png

In the screenshot editor, you can:

  • select a tool on the left-hand side panel.

  • configure tool properties on the right-hand side panel.

  • configure the opacity of the covering elements (in the top-right-hand corner of the screen).

    The opacity level changes are only applied in the screenshot editor. The covering elements on the resulting screenshots will always have 100% opacity.

  • undo or redo your actions.

  • preview the resulting screenshots.

    Preview mode

    In the preview mode, you can select different locales to preview the screenshot in different languages.

Table 30. Screenshot editor tools and properties

Tool

Description

Properties

Select

Use this to edit previously applied designs.

Crop

Use this to select an area within the HTML preview by selecting the elements that enclose the required area.

  • Padding.

Highlight

Creates a border for the selected element.

  • Color.

  • Border width.

Circle

Covers the selected element with a circle.

  • Color.

  • Radius.

  • Opacity.

Rectangle

Covers the selected element with a rectangle.

  • Color.

  • Radius.

  • Opacity.

Hide text

Covers the selected text string with a rectangle to hide it.

  • Color.

  • Height.

  • Opacity.

Blur

Blurs the selected element.

  • Intensity.

Arrow

Draws an arrow pointing to the selected element.

  • Color.

  • Location of the arrow relative to the selected element.

  • Arrow type (shape of the arrowhead).

  • Direction (vertical or horizontal).

  • Size.

  • Length.

Hide image

Hides the selected image with an image icon.

Counter

Labels the selected elements with consecutive numbers.

  • Badge color.

  • Text color.

  • Count (the number of a specific label).

  • Location of the label relative to the selected element.

  • Shape (circle or square).

  • Size.

Text

Replaces the selected element with a custom text. This text will be displayed on all screenshots based on the current preview, regardless of language.

  • Custom text field

Locale text

Replaces the selected element with a locale-specific text defined in the book settings (for details, see step 3.d. above).

  • Variable name.

Erase

Removes the selected previously applied design.

Simplify

Use this to hide all texts and images on a screenshot instantly.

For Hide images option:

  • Image type (shape or image).

  • Color.

  • Border radius.

  • Covering shape (rectangle or circle).

  • Opacity.

For Hide text option:

  • Color.

  • Height.

  • Opacity.

Erase all

Removes all previously applied designs.


In this section: