@signageos/front-applet 4.11.0

package/docs/js-api/js-browser.md

@@ -0,0 +1,170 @@
+---
+title:  Browser
+author: Miroslav Behina
+date:   22.11.2018
+type:   js-api
+tags:
+- applet
+- applet_api
+- api
+- js_api
+description: "[Content JS API] There are several use-cases when you need to open a web browser on a touch-enabled device (also known as a tablet). For these cases, you can use a custom web browser we built."
+---
+
+# Browser
+
+There are several use-cases when you need to open a web browser on a touch-enabled device (also known as a tablet). 
+For these cases, you can use a custom web browser we built. 
+Default URL can be opened and even the whitelisting/blacklisting of certain domains is supported. 
+
+## All methods
+::: table-responsive
+| Methods  | Description | Supported since |
+| ----------------- | ----------- | -----  | :---------------: |
+| `openLink()`        |   **Deprecated:** Use `open()` instead.          |    1.0.19       |
+| `open()`        | Open page in integrated browser |      4.0.0    |
+| `close()`        | Open page in integrated browser |      4.4.0    |
+:::
+
+## open()
+
+::: alert alert--info
+**This API is currently available on:**  
+- Android devices with Android 5+ (Philips, Benq, Sharp, generic Android device)
+
+**With some limitation you can use this API also on**  
+- Samsung Tizen (SSSP 4 and above); where the website is just in fullscreen without any addressbar or theme options
+- LG webOS (webOS 3.0 and above); where the website is just in fullscreen without any addressbar or theme options
+- Raspberry Pi and NEC Compute Module;  where the website is just in fullscreen without any addressbar or theme options
+:::
+
+### Javascript
+Simple opening some page ex. our main company page.
+```javascript
+sos.browser.open('https://www.signageos.io'); // Open link in the browser
+```
+<br>
+
+Method `open()` also supports properties for browser. You can set height, width or CORS domains. All properties are optional.
+
+::: table-responsive
+| Property | Type | Description |
+| -------- | ------ | -------- |
+| `aclDomains` | Array | ? |
+| `aclMode` | String | Can be only **blacklist** or **whitelist**. |
+| `readOnlyAddressBar` | Boolean | Accessible address bar |
+| `coordinates` | Object | Size of browser screen (only Raspberry Pi) |
+| `idleTimeout` | Number | Timeout in milliseconds for loading page |
+| `theme` | Object | Setting custom theme for Android |
+:::
+
+
+```javascript
+sos.browser.open('https://www.signageos.io', {
+  aclDomains: ['google.com', 'yahoo.com'],
+  aclMode: 'blacklist', // or 'whitelist'
+  readOnlyAddressBar: true,
+  coordinates: { // Supported only on Raspberry Pi
+    x: 0,
+    y: 0,
+    height: 500,
+    width: 500,
+  },
+  // theme: { ... } // supported only on Android
+```
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/browser">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fab fa-github svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet for using browser on Android</h3>
+                <div class="wide-box__description">Working example on our Github</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+### Browser themes usage with Typescript
+You can also use all these methods with [signageOS TypeScript](/knowledge-base/dev-tools-cli-typescript).
+
+::: alert alert--info
+Browser themes are only available on Android devices.
+:::
+
+```typescript
+type Color = string;
+
+export type ITheme = {
+	base?: 'light' | 'dark'; // Default light
+	shape?: {
+		cornerSize?: number; // Default 2
+	};
+	colors?: {
+		primary?: Color;
+		background?: Color;
+		control?: Color;
+	};
+	widgets?: {
+		editAddress?: {
+			colors?: {
+				background?: Color;
+				text?: Color;
+			};
+		};
+		buttonClose?: {
+			colors?: {
+				background?: Color | '@primary';
+				text?: Color;
+				icon?: Color;
+			};
+			icon?: 'none' | 'exit_to_app' | 'close' | 'cancel';
+			text?: string;
+		};
+		progress?: {
+			color?: Color | '@primary';
+		};
+	};
+};
+
+interface IOpenLinkOptions {
+	aclDomains?: string[];
+	aclMode?: 'blacklist' | 'whitelist';
+	readOnlyAddressBar?: boolean;
+	coordinates?: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+	theme?: ITheme; // supported since 5.0.0
+}
+
+open(uri: string, options?: IOpenLinkOptions): void;
+```
+
+## close()
+
+Closing the Browser instance. The whole page is closed. If you call `open()` again, the page will be loaded from the beginning.
+
+### Javascript
+Simple opening some page ex. our main company page.
+```javascript
+sos.browser.close(); // Close the browser
+```
+<br>
+
+## Errors
+Although we are doing our best, following errors may occur when opening a link.
+
+::: table-responsive
+| Code | Type | Message |
+| ---- | ---- | ------- |
+| 40301 | AppletBrowserUriError | Property argument `uri` must be a string |
+| 50301 | InternalBrowserOpenLinkError | Unexpected error occurred when opening `$$LINK$$` |
+:::
+

package/docs/js-api/js-command.md

@@ -0,0 +1,208 @@
+---
+title:  Command
+author: Miroslav Behina
+date:   22.11.2018
+type:   js-api
+tags:
+- applet
+- applet_api
+- api
+- js_api
+description: "[Content JS API] In some cases, you might be interested in a complete log of what the device was doing during its operation. All of your business or technical logs can be stored in our storage for later usage. You can identify which events happened or even trigger self-repairing logic."
+---
+
+# Command
+
+In some cases, you might be interested in a complete log of what the device was doing during its operation. All of your business or technical logs can be stored in our storage for later usage. You can identify which events happened or even trigger self-repairing logic.
+
+All commands will be available in [Applet Command REST API](https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2) and can be downloaded [historically as CSV export](https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d).
+
+## All methods
+::: table-responsive
+| Methods  | Description | Supported since |
+| ----------------- | ----------- | -----  |
+| `dispatch()`  | Dispatch method for sending logs and data from device | 1.0.3 |
+| `onCommand()`  | Event listener for incoming commands from server | 1.0.3 |
+
+:::
+
+## dispatch()
+
+Dispatch() is used for sending your custom logs or data from device to signageOS.
+
+### Parameters
+::: table-responsive
+|   Parameter    | Type | Required |  Description  |
+| -------------- | -------------| :----------------: | ------------- |
+| `type`     | String  | <div class="red">Yes</div> | Event type; can be any string **up to 100 characters**|
+| custom `parameter` | String  | No | Custom parameters and values that you need to be dispatched  |
+:::
+
+### Javascript example
+```javascript
+
+/*
+Example of dispatching information about file download
+*/
+await sos.command.dispatch({
+  type: 'Files.StartLoading', // mandatory *type* with custom value
+  fileName: 'my-file', // custom parameter and value
+  fileType: 'txt' // custom parameter and value
+});
+
+/*
+Example of dispatching applet heartbeat
+*/
+await sos.command.dispatch({
+  type: 'Heartbeat' // mandatory *type* with custom value
+});
+
+/*
+Example of dispatching applet new data
+*/
+const myCMSJSON = {playlist: "myPlaylist", items: [...]};
+
+await sos.command.dispatch({
+  type: 'Content.update', // mandatory *type* with custom value
+  content: JSON.stringify(myCMSJSON) // custom parameter and value
+});
+
+
+```
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/sending/">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fab fa-github svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Sending commands</h3>
+                <div class="wide-box__description">Working example on our Github</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+### Errors
+::: table-responsive
+| Code | Type | Message |
+| ---- | ---- | ------- |
+| 40401 | AppletCommandTypeError | Type contains invalid characters. |
+| 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
+| 40403 | AppletCommandTypeError | Command type must be a string. |
+:::
+
+
+### Usage with Typescript
+```typescript
+interface ICommand {
+  type: string;
+}
+dispatch(command: ICommand): void;
+```
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fas fa-server svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Get Commands</h3>
+                <div class="wide-box__description">Receiving your data dispatched from devices</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fas fa-server svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring/Device Reports</h3>
+                <div class="wide-box__description">Receiving historical data</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+## onCommand()
+Used for sending custom messages to online connected devices. 
+This can be done through the REST API by [POST new applet command](https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44). 
+The command will be dispatched to the device & the applet can set up the logic by subscribing `onCommand` method.
+
+**Parameters:**
+::: table-responsive
+|      Param     | Type   | Required | Description  |
+| -------------- | ---------- | :-------: | ---------------------- |
+| `command`        | object      | <div class="red">Yes</div> | Any JS object with required property type. |
+| `append`         | HTMLElement  | <div class="red">Yes</div> | Type property must be string not longer then 50 characters and must contain only characters a-zA-Z0-9_- and .	|
+:::
+
+### Javascript
+```javascript
+sos.command.onCommand((command) => {
+   // ... logic
+});
+```
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/receiving">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fab fa-github svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Receiving commands</h3>
+                <div class="wide-box__description">Working example on our Github</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+### Usage with Typescript
+```typescript
+interface ICommand {
+  type: string;
+}
+onCommand(listener: (command: ICommand) => void): void;
+```
+
+<div class="row d-flex align-content-stretch force-padding-20">
+    <div class="col-12 d-flex">
+        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44">
+            <div>
+                <div class="wide-box__image d-flex align-items-center">
+                    <i class="fas fa-server svg-black"></i>
+                </div>
+            <div>
+                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring</h3>
+                <div class="wide-box__description">Creating monitoring data</div>
+            </div>
+            </div>
+        </a>
+    </div>
+</div>
+
+## Errors
+Although we are doing our best, following errors may occur when working with the commands.
+
+::: table-responsive
+| Code | Type | Message |
+| ---- | ---- | ------- |
+| 40401 | AppletCommandTypeError | Type contains invalid characters, allowed are `/^[a-zA-Z0-9\.\-_]+$/g`|
+| 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
+| 40403 | AppletCommandTypeError | Command type must be a string. |
+:::

package/docs/js-api/js-display.md

@@ -0,0 +1,48 @@
+---
+title:  Display
+author: Michal Artazov
+date:   12.4.2021
+type:   js-api
+tags:
+- applet
+- applet_api
+- api
+- display
+- js_api
+description: "[Content JS API] Display API allows you to query the display to find out, which features it supports."
+---
+
+# Display
+
+Display API allows you to query the display to find out, which features it supports.
+That way your applet can handle cases, when a certain feature isn't supported by a particular display.
+
+## All methods
+
+::: table-responsive
+| Method             | Description            | Supported since |
+| ------------------ | ---------------------- | :-------------: |
+| `supports()` | Query, whether a certain feature is supported by the display | 3.1.0 |
+:::
+
+## supports()
+
+Query the display to find out, whether a certain feature is supported.
+To let you know, when you should call this method, we will warn you throughout the content JS API documentation
+with a warning message like this one:
+
+::: alert alert--warning
+* Before using this API, ensure that the display supports serial via `sos.display.supports("SERIAL")`.
+* More info [**HERE**](/api/js/content/js-display#supports).
+:::
+
+::: table-responsive
+| Param        | Type   | Required                   | Description     |
+| ------------ | ------ | :------------------------: | --------------- |
+| `capability` | string | <div class="red">Yes</div> | Capability name |
+:::
+
+### Javascript example
+```javascript
+const serialPort = await sos.display.supports("SERIAL");
+```