---
title: "Web Vision | Appendix | N3uron KB V1.22"
slug: "web-vision-appendix"
description: "Find Web Vision reference information for CSS color formats, timestamp patterns and sprintf formatting, plus guidance on installing the N3uron CA for HTTPS."
updated: 2026-10-08T10:18:26Z
published: 2026-10-08T10:18:26Z
canonical: "docs.n3uron.com/web-vision-appendix"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.n3uron.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Appendix

## [](/docs/web-vision-appendix#_Toc63160057)**CSS color format**

All color fields in **Web Vision** support any CSS color format for defining colors. See below for all formats accepted by CSS:

| **Specifier** | **Description** |
| --- | --- |
| **Predefined color names** | Colors can be configured by specifying the color as a string with the color name. For a full list of all the color names supported by all browsers, click on the following link: [W3Schools CSS color names](https://www.w3schools.com/colors/colors_names.asp) |
| **Hexadecimal colors** | This format is used by specifying the Red, Green, and Blue values of the color using a hexadecimal number. To use this format, the number must start with #. For example, **red** is #FF0000, **white** if #FFFFFF, and **yellow** is #FFFF00. |
| **RGB/RGBA colors** | This format uses decimal numbers. This format is rbg(RED, GREEN, BLUE), in decimal format. For example, **red** is rgb(255,0,0), **magenta** is rgb(255,0,255), etc. This format also supports an **alpha** value from 0 to 1, where 0 makes the component completely transparent, and 1 makes it completely solid. The format is rgba(RED, GREEN, BLUE, ALPHA). For example, solid red is rgba(255,0,0,1), while **half solid half transparent** red is rgba(255,0,0,0.5), and **completely transparent** red is rbga(255,0,0,0). |
| **HSL/HSLA colors** | This is similar to RGB but using Hue, Saturation, and Lightness color space. It can also use an alpha value to make the color more or less transparent. The format is hsv (HUE, SATURATION, VALUE) and hsva(HUE, SATURATION, VALUE, ALPHA). The **hue** is a number from 0 to 360, the **saturation** and **lightness** are percentages from 0% to 100%, and the **alpha** is a number between 0 and 1. For example, **red** is hsva(0, 100%, 50%, 1) and blue is hsva(240, 100%, 50%, 1). |

More information about supported color formats can be found at [W3Schools CSS color formats](https://www.w3schools.com/cssref/css_colors_legal.asp).

A color picker can be found at [W3School CSS color picker](https://www.w3schools.com/colors/colors_picker.asp).

**Timestamp formatting**

Timestamps can be formatted using a series of tokens that are written following specific patterns.

### **Year, month, and day tokens**

| **INPUT** | **DESCRIPTION** | **EXAMPLE** |
| --- | --- | --- |
| **YYYY** | 4 or 2 digit year. Note: Only 4 digits can be parsed in “strict” mode | 2014 |
| **YY** | 2 digit year | 14 |
| **Y** | Year with any number of digits and sign | -25 |
| **Q** | Quarter year. Sets the month to the first month in the quarter. | 1..4 |
| **M MM** | Month number | 1..12 |
| **MMM MMMM** | Month name in locale set by moment.locale() | Jan..December |
| **D DD** | Day of the month | 1..31 |
| **Do** | Day of the month using ordinal | 1st..31st |
| **DDD DDDD** | Day of the year | 1..365 |
| **X** | Unix timestamp | 1410715640.579 |
| **x** | Unix ms timestamp | 1410715640579 |

### **Week year, week, and weekday tokens**

| **INPUT** | **DESCRIPTION** | **EXAMPLE** |
| --- | --- | --- |
| **gggg** | Locale 4 digit week year | 2014 |
| **gg** | Locale 2 digit week year | 14 |
| **w ww** | Locale week of the year | 1..53 |
| **e** | Locale day of the week | 0..6 |
| **ddd dddd** | Day name in locale set by moment.locale() | Mon...Sunday |
| **GGGG** | ISO 4 digit week year | 2014 |
| **GG** | ISO 2 digit week year | 14 |
| **W WW** | ISO week of the year | 1..53 |
| **E** | ISO day of the week | 1..7 |

### **Hour, minute, second, millisecond, and offset tokens**

| **INPUT** | **DESCRIPTION** | **EXAMPLE** |
| --- | --- | --- |
| **H HH** | Hours (24 hour time) | 0..23 |
| **h hh** | Hours (12 hour time, used with a A.) | 1..12 |
| **k kk** | Hours (24 hour time, from 1 to 24) | 1..24 |
| **a A** | Post or ante meridiem (Note: just one character a p are also considered valid) | am pm |
| **m mm** | Minutes | 0..59 |
| **s ss** | Seconds | 0..59 |
| **S SS SSS ...** | Fractional seconds | 0..999999999 |
| **Z ZZ** | Offset from UTC as +-HH:mm, +-HHmm, or Z | +12:00 |

**Sprintf format specification**

The **placeholders** in the format string are marked by **%** and are followed by one or more of these elements, in this order:

- An **optional number** followed by a “**$**” sign that selects which argument index to use for the value. If not specified, arguments will be placed in the same order as the placeholders in the input string.
- An **optional** “**+**” sign that forces the result to be preceded with a plus or minus sign on numeric values. By default, only the “-” sign is used on negative numbers.
- An optional **padding specifier** that determines which character to use for padding (if specified). Possible values are “**0**” or any other character preceded by a ' (**single quote**). The default is to pad with spaces.
- An optional “-” sign, which causes **sprintf** to left-align the result of this placeholder. The default is to right-align the result.
- An optional **number**, which determines how **many characters** the result should contain. If the value due to be returned is shorter than this number, the result will be padded. When used with the **j** (**JSON**) type specifier, the padding length specifies the tab size used for indentation.
- An optional **precision modifier**, consisting of a “**.**” (b) followed by a number, which determines how many digits should be displayed for floating point numbers. When used with the “**g**” type specifier, it specifies the number of significant digits. When used on a string, it causes the result to be truncated.
- A type specifier can be any of the following:

| **Specifier** | **Description** |
| --- | --- |
| **%** | Inserts a literal percent sign (**%**). |
| **b** | Formats an integer as a **binary number**. |
| **c** | Converts an integer into the character represented by its ASCII value. |
| **d** or **i** | Formats an integer as a **signed decimal number**. |
| **e** | Formats a floating-point number using **scientific notation**. |
| **u** | Formats an integer as an **unsigned decimal number**. |
| **f** | Formats a **floating-point number** using fixed-point notation. The precision determines the number of digits after the decimal point. |
| **g** | Formats a floating-point number using **standard** or **scientific** notation, whichever is more compact. The **precision** determines the number of significant digits. |
| **o** | Formats an integer as an **octal** number. |
| **s** | Inserts a **string** without changing its value. |
| **x** | Formats an integer as a **lowercase** hexadecimal number. |
| **X** | Formats an integer as an **uppercase** hexadecimal number. |
| **j** | Formats a JavaScript object or array as a **JSON**-encoded string. |
| **r** | Formats a **Uint8Array** as a space-separated hexadecimal string. |

## **Installing N3uron CA for HTTPS**

### **Chrome and Internet Explorer**

- Double click on the certificate file
- Click on “Install certificate”, and then click “next”.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture151.png)

- Select “Place certificate in store” and click browse.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture152.png)

- Select trusted root certificate authorities and then click “OK”.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture153.png)

- Click “next” and then “finish”

### **Firefox**

Click the top right button and then select “options”

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture154.png)

- Click on “Privacy & Security”, then scroll down to certificates, and click “View certificates”.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture155.png)

Click on “Authorities”, then click on “Import”, and select the “N3uron_ui.cer” certificate downloaded from **N3uron**.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/Picture156.png)

## **Configuration Lock**

**Configuration Locks** block multiple users from editing the same Web Vision project at the same time, preventing inconsistencies and overwriting changes. A configuration lock indicates that a user or session is currently editing a project or configuration object. While the lock is active, other users are prevented from making changes to avoid overwriting work in progress.

The lock is released automatically after the user saves or discard the changes made, or when the timeout period runs over. The user keeps the lock even if the session is closed until the timeout finishes.

| **Lock state** | **Description** |
| --- | --- |
| **Unlocked** | The configuration can be opened and edited by an authorized user. |
| **Locked** | Another user or session is editing the project. Changes cannot be made until the lock is released |
| **Stale lock** | The lock remains active even if the session of the editor is no longer active or valid, until the lock times out. |

When the user keeping the lock lost the connection to the session in which the changes are being made, the user can control the lock of the project from the **Manage lock** popup on the burger menu. If the active session has any changes made on the project, the “Force unlock” button will be blocked; if the user keeps the lock from a different session, the button will be activated for the user to force the unlock of the Designer for other users and the user itself.

| ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image-1784292439740.png) | ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image-1784293027025.png) |
| --- | --- |

[Web Vision Full Product Details](https://n3uron.com/iiot-platform-modules/web-vision/)