Localization of the Visual Proofing Tool

Customer's Canvas Proofing Tool provides the user interface in two languages: English and Russian. The default language is English. You can set the language during the tool initialization or change it at runtime through the API. Also, you can create your own localization. In this case, you have to prepare translations and edit a localization file. You can localize the Visual Proofing Tool in the same way as the Customer's Canvas editor.

Translating the Visual Proofing Tool

The ~/Configuration/translations.json file contains two default translations. The "en" and "ru" objects define English and Russian localizations, correspondingly. The following example shows a fragment of this file.

JSON
{
    "en": {
        "FitButtons": {
            "FIT": "Fit",
            "PROPORTIONAL_FIT": "Proportional fit"
        },
        ...
    },
    "ru": {
        "FitButtons": {
            "FIT": "Подогнать",
            "PROPORTIONAL_FIT": "Подогнать с сохранением пропорций"
        },
        ...
    }
}

In this file, there are the "PROPERTY_NAME": "property value" pairs, where "PROPERTY_NAME" identifies an interface element and "property value" is the localized text for the element.

Let us, for example, create a new Spanish localization:

  1. Add a new empty Spanish translation to translations.json.
    JavaScript
    {
        "en": {
            ...
        },
        "ru": {
            ...
        },
        "es": {
            ...
        }
    }
    
  2. Start to translate by adding the "PROPERTY_NAME": "property value" strings to the translation.
    JavaScript
    {
        "en": {
            "FitButtons": {
                "FIT": "Fit",
                "PROPORTIONAL_FIT": "Proportional fit"
            },
            ...
        },
        "ru": {
            "FitButtons": {
                "FIT": "Подогнать",
                "PROPORTIONAL_FIT": "Подогнать с сохранением пропорций"
            },
            ...
        },
        "es": {
            "FitButtons": {
                "FIT": "Ajuste",
                "PROPORTIONAL_FIT": "Ajuste proporcional"
            },
            ...
        }
    }
    
  3. Apply this new translation at initialization of Visual Proofing Tool by passing the language parameter.

    language: "es"

As a result, the FitButtons looks as follows:

The localized interface.

Changing the Language at Runtime

For changing the language of the user interface at runtime, the Visual Proofing Tool provides the setLanguage method.

JavaScript
setLanguage(language: string): void

The following example illustrates how you can change the language at runtime.

JavaScript
<script type="text/javascript">
    CustomersCanvas.VisualProofing.Tool.init(toolFrame, {
        toolUrl: '/',
        designFiles: JSON.parse(xhr.responseText),
        dpi: 300,
        productSize: { width: 700, height: 400 },

        language: "en"

    })
    .then(function(tool) {
        languageService.setTool(tool);
        ...
    });
</script>

<div id="languageBox">
    <label>Choose language:</label><br/>
    <select onchange="setVPTLanuage(this)">
        <option value="es">Spanish</option>
        <option value="en">English</option>
        <option value="ru">Russian</option>
    </select>
    <script>
        var languageService = {
            _tool: null,
            setTool: function(tool) {
                this._tool = tool;
            },
            applyLanguage: function(language) {
                this._tool.setLanguage(language);
            }
        };
        function setVPTLanuage(elem) {
            var lang = elem.value;
            languageService.applyLanguage(lang);
        }
    </script>
</div>

<div id="iframeWrapper">
    <iframe id="toolFrame"></iframe>
</div>

See Also

Manual