mirror of
https://github.com/luc-github/ESP3D-WEBUI.git
synced 2026-03-03 06:34:02 +01:00
735ea6f718
Fix Temperatures Panel crash due to missing code definition for ContainerHelper Add missing help entry for tooltip for select en boolean controls Refactorize exportPreferencesSection to handle more cases Remove usage of encodeURIComponent/decodeURIComponent for getting icon in extension Update extensions sample code for capabilities, icons, extension_settings and modal Update code for saving extensions data to rely on InterfaceSetting object instead of separate object Finalize implementation for fields_modal Update extension API documentation Rewrite importPreferences to importPreferencesSection for more flexibility Rewrite exportPreferences to exportPreferencesSection for more flexibility Bump version Build packages
1221 lines
44 KiB
Markdown
1221 lines
44 KiB
Markdown
# Extensions API
|
|
|
|
## Table of content
|
|
- [Basic code](#basic-code)
|
|
- [Send message](#send-message)
|
|
- [Send GCODE command or ESP command](#send-gcode-command-or-esp-command)
|
|
- [Send web query](#send-web-query)
|
|
- [Send web upload](#send-web-upload)
|
|
- [Send webdownload request](#send-webdownload-request)
|
|
- [Send sound notification](#send-sound-notification)
|
|
- [Send toast notification](#send-toast-notification)
|
|
- [Send translation request](#send-translation-request)
|
|
- [Send capabilities request](#send-capabilities-request)
|
|
- [Save extension settings to preferences.json](#save-extension-settings-to-preferencesjson)
|
|
- [Send icon request](#send-icon-request)
|
|
- [Dispatch message to other extensions](#dispatch-message-to-other-extensions)
|
|
- [Modal Dialog Documentation](#modal-dialog-documentation)
|
|
- [Modal Types](#modal-types)
|
|
- [Sending Messages](#sending-messages)
|
|
- [Modal Content](#modal-content)
|
|
- [Fields types and options](#fields-types-and-options)
|
|
- [Handling Messages](#handling-messages)
|
|
- [Install an extension in Web UI](#install-an-extension-in-web-ui)
|
|
- [Sample codes](#sample-codes)
|
|
|
|
|
|
## Basic code
|
|
|
|
```
|
|
<script type="text/javascript">
|
|
|
|
//Send message to web ui
|
|
function sendMessage(msg){
|
|
window.parent.postMessage(msg, '*');
|
|
}
|
|
|
|
//Process Message coming from webUI
|
|
function processMessage(eventMsg){
|
|
//now process eventMsg.data
|
|
}
|
|
|
|
//Setup message listener from webUI
|
|
window.onload = (event) => {
|
|
window.addEventListener("message", processMessage, false);
|
|
};
|
|
|
|
</script>
|
|
|
|
<div class="container">
|
|
Display your HTML here
|
|
</div>
|
|
|
|
```
|
|
|
|
As you can see code is minimal - it will fit a Frame, webui css / theme will be added by webUI after loaded, so you do not need to add any, you can use any of existing class available in webUI.
|
|
|
|
Communication between frame and main window is done by messages using objects (string / array based), do not use any object that could ne be cloned or loading will fail.
|
|
|
|
---
|
|
|
|
### Send message
|
|
message structure used by `window.parent.postMessage(msg, '*');` has a defined format, some parameters are madatories, some are optionals and some depend on message type:
|
|
`{type:'<message type>', target:'webui', id:'[origin]', noDispatch:[true], XXX:YYY}`
|
|
`<message type>` is mandatory, it define the purpose of the message
|
|
`target:'webui'` is mandatory, it help to screen the message
|
|
`id:'[origin]'` is optionnal, it define which id must read the response if any, if present it can be used by extension to filter message, no id means the message is for everyone
|
|
`noDispatch:[true]` is optionnal, if true it will prevent to send answer if any, if not or set to false, it will send answer message if any
|
|
`XXX:YYY` are optionals/mandatories according message type
|
|
|
|
---
|
|
|
|
### Send GCODE command or ESP command
|
|
Example: `{type:'cmd', target:'webui',id:'terminal', content:'[ESP111]'}`
|
|
**type** is `cmd` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `terminal` (optional)
|
|
**content** is the command that need to be sent, in our case `[ESP111]` (mandatory)
|
|
|
|
Note: there is no `noDispatch:true` so answer, if any from ESP firmware, will be sent
|
|
Note 2: there is no way to prevent the answer to be spread if it come from external board from serial, even if `id` and `noDispatch` are set
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
- if success
|
|
```
|
|
{
|
|
"type": "cmd",
|
|
"content": {
|
|
"status": "success"
|
|
"response": "192.168.1.111",
|
|
"initiator": {
|
|
"content":"[ESP111]",
|
|
"id":"terminal",
|
|
"target":"webui",
|
|
"type":"cmd",
|
|
}
|
|
},
|
|
"id": "terminal"
|
|
}
|
|
```
|
|
**type** is `cmd`
|
|
**id** is the id set in command message to help to screen
|
|
**content** has the response's **status** which is `success`, the response it self **response**, in our case `192.168.1.111` and also the **initiator** is the initial command for reference
|
|
- if error
|
|
|
|
```
|
|
{
|
|
"type": "cmd",
|
|
"content": {
|
|
"status": "error",
|
|
"error":"Cannot connect",
|
|
"initiator": {
|
|
"content":"[ESP111]",
|
|
"id":"terminal",
|
|
"target":"webui",
|
|
"type":"cmd",
|
|
}
|
|
},
|
|
"id":"terminal"
|
|
}
|
|
```
|
|
|
|
**type** is `error` for any error command
|
|
**id** is the id set in command message to help to screen
|
|
**content** has the response's **status** which is `error`, and the error it self **error**, in our case `Cannot connect` and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
|
|
### Send web query
|
|
Example: `{type:'query', target:'webui', id:'filemanager', url:'files', args:{action:'list', path:'/'}}`
|
|
**type** is `query` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `terminal` (optional)
|
|
**url** is the base url in our case `files` for `/files` (mandatory)
|
|
**args** is the set of arguments url in our case `{action:'list', path:'/'}` for `/files?action=list&path=/` (optional for query)
|
|
|
|
Note: `noDispatch:true` and `id:'term'` are applicable in this case if needed
|
|
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
- if success
|
|
|
|
```
|
|
{
|
|
"type": "query",
|
|
"response": {
|
|
"status": "success",
|
|
"response": "{\"files\":[{\"name\":\"config.yaml\",\"size\":\"1.55 KB\"}],\"path\":\"/\",\"occupation\":\"35\",\"status\":\"ok\",\"total\":\"1.31 MB\",\"used\":\"470.08 KB\"}",
|
|
"initiator": {
|
|
"type": "query",
|
|
"target": "webui",
|
|
"id": "filemanager",
|
|
"url": "files",
|
|
"args": {
|
|
"action": "list",
|
|
"path": "/"
|
|
}
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `query`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `success`, the response it self **response**, in our case a JSON, and also the **initiator** is the initial command for reference
|
|
|
|
- if error
|
|
|
|
```
|
|
{
|
|
"type": "query",
|
|
"response": {
|
|
"status": "error",
|
|
"error": "Cannot connect",
|
|
"initiator": {
|
|
"type": "query",
|
|
"target": "webui",
|
|
"id": "filemanager",
|
|
"url": "files",
|
|
"args": {
|
|
"action": "list",
|
|
"path": "/"
|
|
}
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `query`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `error`, and the error it self **error**, in our case `Cannot connect` and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
|
|
### Send web upload
|
|
Example: `{type:'upload', target:'webui', id:'filemanager', url:'files', content:[...],size:500, path:"/", filename:'file.txt'}`
|
|
**type** is `upload` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `filemanager` (optional)
|
|
**url** is the base url in our case `files` for `/files` (mandatory for upload)
|
|
**content** is the file in an array object (mandatory)
|
|
**size** is the file size (mandatory)
|
|
**path** is the file target path (not including name) (mandatory)
|
|
**size** is the filename (not including path) (mandatory)
|
|
**args** is an object with optional arguments like for query, they are no used in post but in url itself
|
|
|
|
Note: `noDispatch:true` and `id:'filemanager'` are applicable in this case if needed
|
|
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
for upload the initiator does not contain the file content
|
|
- if success
|
|
|
|
```
|
|
{
|
|
"type": "upload",
|
|
"response": {
|
|
"status": "success",
|
|
"response": "{\"files\":[{\"name\":\"config.yaml\",\"size\":\"1.55 KB\"},{\"name\":\"file.txt\",\"size\":\"500B\"}],\"path\":\"/\",\"occupation\":\"35\",\"status\":\"ok\",\"total\":\"1.31 MB\",\"used\":\"470.08 KB\"}",
|
|
"initiator": {
|
|
"type":"upload",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"files",
|
|
"size":500,
|
|
"path":"/",
|
|
"filename":"file.txt"
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `upload`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `success`, the response it self **response**, in our case a JSON, and also the **initiator** is the initial command for reference but without the file content
|
|
|
|
- progression message
|
|
|
|
```
|
|
{
|
|
"type": "upload",
|
|
"response": {
|
|
"status": "progress",
|
|
"progress": "100",
|
|
"initiator": {
|
|
"type":"upload",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"files",
|
|
"size":500,
|
|
"path":"/",
|
|
"filename":"file.txt"
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `upload`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `progress`, and the progression it self **progress**, in our case `100` = 100% and also the **initiator** is the initial command for reference but without the file content
|
|
|
|
|
|
- if error
|
|
|
|
```
|
|
{
|
|
"type": "upload",
|
|
"response": {
|
|
"status": "error",
|
|
"error": "Cannot connect",
|
|
"initiator": {
|
|
"type":"upload",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"files",
|
|
"size":500,
|
|
"path":"/",
|
|
"filename":"file.txt"
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `upload`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `error`, and the error it self **error**, in our case `Cannot connect` and also the **initiator** is the initial command for reference but without the file content
|
|
|
|
---
|
|
### Send webdownload request
|
|
Example: `{type:'download', target:'webui', id:'filemanager', url:'preferences.json'}`
|
|
**type** is `download` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `filemanager` (optional)
|
|
**url** is the url of the file in our case `preferences.json` for `/preferences.json` (mandatory)
|
|
**args** is an object with optional arguments like for query
|
|
|
|
Note: `id:'filemanager'` is applicable in this case if needed, but not `noDispatch:true` as the purpose is to get response
|
|
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
- if success
|
|
|
|
```
|
|
{
|
|
"type": "download",
|
|
"response": {
|
|
"status": "success",
|
|
"response": [...],
|
|
"initiator": {
|
|
"type":"download",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"preferences.json",
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `upload`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `success`, the response it self **response**, in our case a blob which is the file that need to be read properly, and also the **initiator** is the initial command for reference
|
|
|
|
- progression message
|
|
|
|
```
|
|
{
|
|
"type": "upload",
|
|
"response": {
|
|
"status": "progress",
|
|
"progress": "100",
|
|
"initiator": {
|
|
"type":"upload",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"preferences.json",
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `download`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `progress`, and the progression it self **progress**, in our case `100` = 100% and also the **initiator** is the initial command for reference
|
|
|
|
|
|
- if error
|
|
|
|
```
|
|
{
|
|
"type": "download",
|
|
"response": {
|
|
"status": "error",
|
|
"error": "404",
|
|
"initiator": {
|
|
"type":"upload",
|
|
"target":"webui",
|
|
"id":"filemanager",
|
|
"url":"preferences.json",
|
|
}
|
|
},
|
|
"id": "filemanager"
|
|
}
|
|
```
|
|
|
|
**type** is `download`
|
|
**id** is the id set in output message to help to screen
|
|
**content** has the response's **status** which is `error`, and the error it self **error**, in our case `404` (file not found) and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
### Send sound notification
|
|
There is no answer for this message, so `id` is not necessary
|
|
|
|
- Generate a beep notification
|
|
Example: `{type:'sound', target:'webui', content:'beep'}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**sound** is the sound type, in our case `beep` (mandatory)
|
|
|
|
- Generate a beep error notification
|
|
Example: `{type:'sound', target:'webui', content:'error'}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**sound** is the sound type, in our case `error` (mandatory)
|
|
|
|
- Generate a beep sequence notification
|
|
Example: `{type:'sound', target:'webui', content:'beep', seq:[{ f: 1046, d: 200 },{ f: 1318, d: 100 }]}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**sound** is the sound type, in our case `seq` (mandatory)
|
|
**seq** is an array of sequence of beep, in our case `[{ f: 1046, d: 200 },{ f: 1318, d: 100 }]` (mandatory), `f` is frequency and `d` is duration of the beep
|
|
|
|
---
|
|
### Send toast notification
|
|
There is no answer for this message, so `id` is not necessary
|
|
|
|
- Generate a success toast notification
|
|
Example: `{type:'toast', target:'webui', content:{text:'This is a success', type:'success'}}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**content** has the toast **type**, in our case `success`, and the **text** to display, in ou case `This is a success` (mandatory)
|
|
|
|
- Generate an error toast notification
|
|
Example: `{type:'toast', target:'webui', content:{text:'This is an error', type:'error'}}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**content** has the toast **type**, in our case `error`, and the **text** to display, in ou case `This is an error` (mandatory)
|
|
|
|
- Generate a normal toast notification
|
|
Example: `{type:'toast', target:'webui', content:{text:'This is a toast', type:'default'}}`
|
|
**type** is `` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**content** has the toast **type**, in our case `default`, and the **text** to display, in ou case `This is a toast` (mandatory)
|
|
|
|
---
|
|
### Send translation request
|
|
- simple translation
|
|
Example: `{type:'translate', target:'webui', id:'transpanel', content:'S153'}`
|
|
**type** is `translate` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `transpanel` (optional)
|
|
**content** is the text that need to be translated, in our case `S153` (mandatory)
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
```
|
|
{
|
|
"type": "translate",
|
|
"content": {
|
|
"response": "Your session will end soon, do you want to stay connected ?",
|
|
"initiator": {
|
|
"type":"translate",
|
|
"target":"webui",
|
|
"id":"transpanel",
|
|
"content":"S153"
|
|
}
|
|
},
|
|
"id": "transpanel"
|
|
}
|
|
```
|
|
**type** is `translate`
|
|
**id** is the id set in command message to help to screen
|
|
**content** has the response it self **response**, in our case `Your session will end soon, do you want to stay connected ?` and also the **initiator** is the initial command for reference
|
|
|
|
- full dump of translations
|
|
Example: `{type:'translate', target:'webui', id:'transpanel', all:'true'}`
|
|
**type** is `translate` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `transpanel` (optional)
|
|
**all** to take all translations (mandatory)
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
```
|
|
{
|
|
"type": "translate",
|
|
"content": {
|
|
"response": "Your session will end soon, do you want to stay connected ?",
|
|
"initiator": {
|
|
"type":"translate",
|
|
"target":"webui",
|
|
"id":"transpanel",
|
|
"content":[....]
|
|
}
|
|
},
|
|
"id": "transpanel"
|
|
}
|
|
```
|
|
**type** is `translate`
|
|
**id** is the id set in command message to help to screen
|
|
**content** has the response it self **response**, in our case an array of all translations and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
### Send capabilities request
|
|
|
|
This allow to collect all capabilities for specific topic:
|
|
* if id is `connection` you will get the json of [ESP800] response jsonified
|
|
* if id is `features` you will get the [ESP400] response jsonified
|
|
* if id is `interface` you will get the settings from preferences.json jsonified
|
|
* if id is `settings` you will get specific settings from target fw in json format
|
|
* if id is `extensions` you will get the extensions from preferences.json jsonified of the `name` extensions
|
|
|
|
Be noted this API only collect existing data, so for `features`,`interface`, `extensions`and `settings` you may get empty response if corresponding query has not be done.
|
|
|
|
About settings the format may differ from one firmware to another, so you need to check the response to know how to use it, response is always a variable named machineSettings and important content may usualy located in `machineSettings.cache`
|
|
|
|
Example: `{type:'capabilities', target:'webui', id:'connection'}`
|
|
**type** is `capabilities` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `connection` (mandatory)
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
```
|
|
{
|
|
"type": "capabilities",
|
|
"content": {
|
|
"response": "{
|
|
"FWVersion": "3.0.0.a111",
|
|
"FWTarget": "marlin",
|
|
"FWTargetID": "40",
|
|
"Setup": "Enabled",
|
|
"Screen": "HMI V3",
|
|
"Streaming": "Enabled",
|
|
"SDConnection": "direct",
|
|
"SerialProtocol": "Raw",
|
|
"Authentication": "Disabled",
|
|
"WebCommunication": "Asynchronous",
|
|
"WebSocketIP": "localhost",
|
|
"WebSocketPort": "81",
|
|
"Hostname": "esp3d",
|
|
"WiFiMode": "STA",
|
|
"WebUpdate": "Enabled",
|
|
"FlashFileSystem": "LittleFS",
|
|
"HostPath": "/",
|
|
"Time": "none",
|
|
"HostTarget": "files",
|
|
"HostUploadPath": "/",
|
|
"HostDownloadPath": "/",
|
|
"wsID": "0"
|
|
}",
|
|
"initiator": {
|
|
"type":"capabilities",
|
|
"target":"webui",
|
|
"id":"connection"
|
|
}
|
|
},
|
|
"id": "connection"
|
|
}
|
|
```
|
|
**type** is `capabilities`
|
|
**id** is the id of requested capability
|
|
**content** has the response it self **response**, in our case a JSON and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
### Save extension settings to preferences.json
|
|
|
|
This allow to save extension settings to preferences.json, it is a way to store settings for extension that need to be saved for next session:
|
|
|
|
|
|
Example: `{type:'extensionsData', target:'webui', id:'myextension', content:'{"setting1":"value1","setting2":"value2"}'}`
|
|
|
|
**type** is `extensionsData` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `myextension` (mandatory)
|
|
**content** is the settings to save, in stringified JSON format, in our case `{"setting1":"value1","setting2":"value2"}` (mandatory)
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
```
|
|
{
|
|
"type": "extensionsData",
|
|
"content": {
|
|
"response": "{
|
|
"status": "success"
|
|
}",
|
|
"initiator": {
|
|
"type":"extensionsData",
|
|
"target":"webui",
|
|
"id":"myextension",
|
|
"content":"{"setting1":"value1","setting2":"value2"}"
|
|
}
|
|
},
|
|
"id": "myextension"
|
|
}
|
|
```
|
|
**type** is `extensionsData`
|
|
**id** is the id of extension that saved settings
|
|
**content** has the response which is the status and also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
### Send icon request
|
|
|
|
The WebUI already a set of icons, so no need to bother with new icons, you can request a specific one if needed
|
|
|
|
Be noted some icons may be specific to a system, so it may not be available in all systems, the svg icon will be returned in response use quote into the svg tag so be sure to use it properly.
|
|
|
|
Main icons are :
|
|
```
|
|
None: null,
|
|
Activity: <Activity />,
|
|
AlertCircle: <AlertCircle />,
|
|
Anchor: <Anchor />,
|
|
Aperture: <Aperture />,
|
|
Award: <Award />,
|
|
BarChart: <BarChart />,
|
|
BellOff: <BellOff />,
|
|
Bell: <Bell />,
|
|
Bluetooth: <Bluetooth />,
|
|
Bookmark: <Bookmark />,
|
|
Box: <Box />,
|
|
Camera: <Camera />,
|
|
Cast: <Cast />,
|
|
ChevronDown: <ChevronDown />,
|
|
ChevronLeft: <ChevronLeft />,
|
|
ChevronRight: <ChevronRight />,
|
|
ChevronUp: <ChevronUp />,
|
|
ChevronsDown: <ChevronsDown />,
|
|
ChevronsLeft: <ChevronsLeft />,
|
|
ChevronsRight: <ChevronsRight />,
|
|
ChevronsUp: <ChevronsUp />,
|
|
Clipboard: <Clipboard />,
|
|
Clock: <Clock />,
|
|
Cpu: <Cpu />,
|
|
Crosshair: <Crosshair />,
|
|
Database: <Database />,
|
|
Delete: <Delete />,
|
|
Download: <Download />,
|
|
Droplet: <Droplet />,
|
|
Edit: <Edit />,
|
|
EyeOff: <EyeOff />,
|
|
Eye: <Eye />,
|
|
File: <File />,
|
|
Filter: <Filter />,
|
|
Flag: <Flag />,
|
|
Frown: <Frown />,
|
|
GitCommit: <GitCommit />,
|
|
Globe: <Globe />,
|
|
Grid: <Grid />,
|
|
HardDrive: <HardDrive />,
|
|
Hash: <Hash />,
|
|
Heart: <Heart />,
|
|
HelpCircle: <HelpCircle />,
|
|
Home: <Home />,
|
|
Image: <Image />,
|
|
Info: <Info />,
|
|
Layers: <Layers />,
|
|
LifeBuoy: <LifeBuoy />,
|
|
List: <List />,
|
|
Loader: <Loader />,
|
|
Lock: <Lock />,
|
|
LogIn: <LogIn />,
|
|
LogOut: <LogOut />,
|
|
Mail: <Mail />,
|
|
MapPin: <MapPin />,
|
|
Meh: <Meh />,
|
|
Menu: <Menu />,
|
|
MessageSquare: <MessageSquare />,
|
|
MinusCircle: <MinusCircle />,
|
|
Monitor: <Monitor />,
|
|
Moon: <Moon />,
|
|
MoreHorizontal: <MoreHorizontal />,
|
|
MoreVertical: <MoreVertical />,
|
|
Move: <Move />,
|
|
PauseCircle: <PauseCircle />,
|
|
Percent: <Percent />,
|
|
PlayCircle: <PlayCircle />,
|
|
PlusCircle: <PlusCircle />,
|
|
Power: <Power />,
|
|
Printer: <Printer />,
|
|
Radio: <Radio />,
|
|
RefreshCw: <RefreshCw />,
|
|
Repeat: <Repeat />,
|
|
RotateCcw: <RotateCcw />,
|
|
Save: <Save />,
|
|
Scissors: <Scissors />,
|
|
Send: <Send />,
|
|
Server: <Server />,
|
|
Settings: <Settings />,
|
|
Share: <Share />,
|
|
Slash: <Slash />,
|
|
Sliders: <Sliders />,
|
|
Smile: <Smile />,
|
|
Star: <Star />,
|
|
StopCircle: <StopCircle />,
|
|
Sun: <Sun />,
|
|
Sunrise: <Sunrise />,
|
|
Sunset: <Sunset />,
|
|
Tag: <Tag />,
|
|
Target: <Target />,
|
|
Terminal: <Terminal />,
|
|
Thermometer: <Thermometer />,
|
|
Tool: <Tool />,
|
|
Trash2: <Trash2 />,
|
|
Underline: <Underline />,
|
|
Upload: <Upload />,
|
|
VideoOff: <VideoOff />,
|
|
Video: <Video />,
|
|
VolumeX: <VolumeX />,
|
|
Volume: <Volume />,
|
|
WifiOff: <WifiOff />,
|
|
Wifi: <Wifi />,
|
|
Wind: <Wind />,
|
|
XCircle: <XCircle />,
|
|
ZapOff: <ZapOff />,
|
|
Zap: <Zap />,
|
|
```
|
|
|
|
3D printers have in addition:
|
|
|
|
```
|
|
Fan,
|
|
FeedRate,
|
|
FlowRate,
|
|
Extruder
|
|
```
|
|
|
|
cnc has in addition :
|
|
|
|
```
|
|
Fan,
|
|
FeedRate,
|
|
FlowRate,
|
|
```
|
|
|
|
Example: `{type:'icon', target:'webui', id:'Activity'}`
|
|
**type** is `icon` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `Activity` (mandatory)
|
|
|
|
* Answer format: check the `eventMsg.data`
|
|
|
|
```
|
|
{
|
|
"type": "icon",
|
|
"content": {
|
|
"response": "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'></path><polyline points='13 2 13 9 20 9'></polyline></svg>",
|
|
"initiator": {
|
|
"type": "icon",
|
|
"target": "webui",
|
|
"id": "Activity"
|
|
}
|
|
},
|
|
"id": "Activity"
|
|
}
|
|
```
|
|
**type** is `icon`
|
|
**id** is the id of requested "Activity"
|
|
**content** has the response it self **response**, in our case svg using quote , also the **initiator** is the initial command for reference
|
|
|
|
---
|
|
### Dispatch message to other extensions
|
|
|
|
Example:
|
|
```json
|
|
{
|
|
type:'dispatch',
|
|
target:'webui',
|
|
id:'senderpanel',
|
|
content:'any message' ,
|
|
targetid:'receiverpanel'
|
|
}
|
|
```
|
|
**type** is `dispatch` (mandatory)
|
|
**target** is `webui` (mandatory)
|
|
**id** is `senderpanel` (optional)
|
|
**content** the message to dispatch using
|
|
|
|
Note: there no answer as the purpose of this is to send answer
|
|
|
|
---
|
|
|
|
### Modal Dialog Documentation
|
|
|
|
This documentation describes how to use the modal dialog functionality. The modal dialog is a pop-up window that displays a message to the user and requires the user to respond before they can continue. The modal dialog can be used to display simple messages, confirmations, input fields, and multiple input fields.
|
|
|
|
#### Modal Types
|
|
|
|
The code supports four types of modal dialogs:
|
|
|
|
1. Simple Modal: Displays a basic modal with a title, text, and a single button.
|
|
2. Confirmation Modal: Displays a modal with a title, text, and two buttons for confirmation.
|
|
3. Input Modal: Displays a modal with a title, text, an input field, and two buttons.
|
|
4. Fields Modal: Displays a modal with a title, multiple input fields, and two buttons.
|
|
|
|
#### Sending Messages
|
|
|
|
To open a modal dialog, you need to send a message to the parent window using the `sendMessage` function. The message should have the following structure:
|
|
|
|
```javascript
|
|
sendMessage({
|
|
type: 'modal',
|
|
target: 'webui',
|
|
id: 'modalpanel',
|
|
content: {
|
|
// Modal-specific content
|
|
}
|
|
});
|
|
|
|
* type: Always set to 'modal'.
|
|
* target: Always set to 'webui'.
|
|
* id: Set to 'modalpanel' for all modal types.
|
|
* content: An object containing the modal-specific content.
|
|
|
|
#### Modal Content
|
|
Each modal type has its own specific content structure:
|
|
|
|
1. Simple Modal
|
|
Example:
|
|
```json
|
|
{
|
|
type:'modal',
|
|
target:'webui',
|
|
id:'modalpanel',
|
|
content:
|
|
{
|
|
title:'This is title',
|
|
id:'simple_modal',
|
|
style:'default',
|
|
bt1Txt:'S126',
|
|
response1:'ok',
|
|
text:'some text',
|
|
overlay:true
|
|
}
|
|
}
|
|
```
|
|
- **type** (mandatory): 'modal'
|
|
- **target** (mandatory): 'webui'
|
|
- **id** (optional): 'modalpanel'
|
|
- **content** (mandatory): Modal description
|
|
- **title** (mandatory): Title of the modal. Use predefined text for translation.
|
|
- **id** (mandatory): Modal ID. Example: 'simple_modal'
|
|
- **style** (mandatory): Modal style. For simple modal, use 'default'.
|
|
- **bt1Txt** (optional): Text for button 1. 'S126' will be translated as 'Ok'. If not defined, the button won't be displayed.
|
|
- **response1** (optional): Message sent if button 1 is clicked. Example: 'ok'. The click closes the modal.
|
|
- **bt2Txt** (optional): Text for button 2. If not defined, the button won't be displayed.
|
|
- **response2** (optional): Message sent if button 2 is clicked. The click closes the modal.
|
|
- **hideclose** (optional): If set to true, it hides the close button of the modal.
|
|
- **overlay** (optional): If set to true, it automatically closes the modal if it loses focus.
|
|
- **text** (optional): Text to display in the modal. If it's a predefined text, it will be translated.
|
|
|
|
Note: The close button and overlay feature won't send any notification when the modal is closed.
|
|
|
|
Answer format: Check `eventMsg.data`
|
|
```json
|
|
{
|
|
"type": "modal",
|
|
"content": {
|
|
"response": "ok",
|
|
"initiator": {
|
|
"type": "modal",
|
|
"target": "webui",
|
|
"id": "modalpanel",
|
|
"content": {
|
|
"title": "This is title",
|
|
"id": "simple_modal",
|
|
"style": "default",
|
|
"bt1Txt": "S126",
|
|
"response1": "ok",
|
|
"text": "some text",
|
|
"overlay": true
|
|
}
|
|
}
|
|
},
|
|
"id": "modalpanel"
|
|
}
|
|
```
|
|
- **type**: 'modal'
|
|
- **id**: ID set in the command message to help with screening
|
|
- **content**: Contains the response itself (**response**) and the initiator (initial command for reference)
|
|
|
|
2. Confirmation Modal
|
|
Example:
|
|
```json
|
|
{
|
|
type:'modal',
|
|
target:'webui',
|
|
id:'modalpanel',
|
|
content:
|
|
{
|
|
title:'S26',
|
|
id:'confirm_modal',
|
|
style:'question',
|
|
bt1Txt:'S27',
|
|
response1:'yes',
|
|
bt2Txt:'S28',
|
|
response2:'cancel',
|
|
text:'S30',
|
|
hideclose:true
|
|
}
|
|
}
|
|
```
|
|
- **type** (mandatory): 'modal'
|
|
- **target** (mandatory): 'webui'
|
|
- **id** (optional): 'modalpanel'
|
|
- **content** (mandatory): Modal description
|
|
- **title** (mandatory): Title of the modal. 'S26' will be translated as 'Please Confirm'.
|
|
- **id** (mandatory): Modal ID. Example: 'confirm_modal'
|
|
- **style** (mandatory): Modal style. For confirmation modal, use 'question'.
|
|
- **bt1Txt** (optional): Text for button 1. 'S27' will be translated as 'Yes'. If not defined, the button won't be displayed.
|
|
- **response1** (optional): Message sent if button 1 is clicked. Example: 'yes'. The click closes the modal.
|
|
- **bt2Txt** (optional): Text for button 2. 'S28' will be translated as 'Cancel'. If not defined, the button won't be displayed.
|
|
- **response2** (optional): Message sent if button 2 is clicked. Example: 'cancel'. The click closes the modal.
|
|
- **hideclose** (optional): If set to true, it hides the close button of the modal.
|
|
- **overlay** (optional): If set to true, it automatically closes the modal if it loses focus.
|
|
- **text** (optional): Text to display in the modal. 'S30' will be translated as 'Do you want to update?'.
|
|
|
|
Note: The close button and overlay feature won't send any notification when the modal is closed.
|
|
|
|
Answer format: Check `eventMsg.data`
|
|
```json
|
|
{
|
|
"type": "modal",
|
|
"content": {
|
|
"response": "yes",
|
|
"initiator": {
|
|
"type": "modal",
|
|
"target": "webui",
|
|
"id": "modalpanel",
|
|
"content": {
|
|
"title": "S26",
|
|
"id": "confirm_modal",
|
|
"style": "question",
|
|
"bt1Txt": "S27",
|
|
"response1": "yes",
|
|
"bt2Txt": "S28",
|
|
"response2": "cancel",
|
|
"text": "S30",
|
|
"hideclose": true
|
|
}
|
|
}
|
|
},
|
|
"id": "modalpanel"
|
|
}
|
|
```
|
|
- **type**: 'modal'
|
|
- **id**: ID set in the command message to help with screening
|
|
- **content**: Contains the response itself (**response**) and the initiator (initial command for reference)
|
|
|
|
3. Input Modal
|
|
Example:
|
|
```json
|
|
{
|
|
type:'modal',
|
|
target:'webui',
|
|
id:'modalpanel',
|
|
content:
|
|
{
|
|
title:'S90',
|
|
id:'input_modal',
|
|
style:'input',
|
|
validation:'bt1',
|
|
bt1Txt:'S106',
|
|
response1:'create',
|
|
bt2Txt:'S28',
|
|
response2:'cancel',
|
|
text:'S104',
|
|
hideclose:true
|
|
}
|
|
}
|
|
```
|
|
- **type** (mandatory): 'modal'
|
|
- **target** (mandatory): 'webui'
|
|
- **id** (optional): 'modalpanel'
|
|
- **content** (mandatory): Modal description
|
|
- **title** (mandatory): Title of the modal. 'S90' will be translated as 'Create Directory'.
|
|
- **id** (mandatory): Modal ID. Example: 'input_modal'
|
|
- **style** (mandatory): Modal style. For input modal, use 'input'.
|
|
- **bt1Txt** (optional): Text for button 1. 'S106' will be translated as 'Create'. If not defined, the button won't be displayed.
|
|
- **response1** (optional): Message sent if button 1 is clicked. Example: 'create'. The click closes the modal.
|
|
- **bt2Txt** (optional): Text for button 2. 'S28' will be translated as 'Cancel'. If not defined, the button won't be displayed.
|
|
- **response2** (optional): Message sent if button 2 is clicked. Example: 'cancel'. The click closes the modal.
|
|
- **hideclose** (optional): If set to true, it hides the close button of the modal.
|
|
- **overlay** (optional): If set to true, it automatically closes the modal if it loses focus.
|
|
- **text** (optional): Text to display in the modal. 'S104' will be translated as 'Please type directory name'.
|
|
|
|
Note: The close button and overlay feature won't send any notification when the modal is closed.
|
|
|
|
Answer format: Check `eventMsg.data`
|
|
```json
|
|
{
|
|
"type": "modal",
|
|
"content": {
|
|
"response": "create",
|
|
"inputData": "mydir",
|
|
"initiator": {
|
|
"type": "modal",
|
|
"target": "webui",
|
|
"id": "modalpanel",
|
|
"content": {
|
|
"title": "S90",
|
|
"id": "input_modal",
|
|
"style": "input",
|
|
"bt1Txt": "S106",
|
|
"response1": "create",
|
|
"bt2Txt": "S28",
|
|
"response2": "cancel",
|
|
"text": "S104",
|
|
"hideclose": true
|
|
}
|
|
}
|
|
},
|
|
"id": "modalpanel"
|
|
}
|
|
```
|
|
- **type**: 'modal'
|
|
- **id**: ID set in the command message to help with screening
|
|
- **content**: Contains the response itself
|
|
|
|
|
|
4. Fields Modal
|
|
Example:
|
|
```json
|
|
{
|
|
type:'modal',
|
|
target:'webui',
|
|
id:'modalpanel',
|
|
content:
|
|
{
|
|
title:'S90',
|
|
id:'fields_modal',
|
|
validation:'bt1',
|
|
style:'fields',
|
|
bt1Txt:'S106',
|
|
response1:'create',
|
|
bt2Txt:'S28',
|
|
response2:'cancel',
|
|
hideclose:true,
|
|
fields:
|
|
[
|
|
{
|
|
id: "area",
|
|
label: "Area",
|
|
type: "group",
|
|
value: [
|
|
{
|
|
id: "xmin",
|
|
type: "number",
|
|
label: "Xmin",
|
|
value: 0
|
|
},
|
|
{
|
|
id: "xmax",
|
|
type: "number",
|
|
label: "Xmax",
|
|
value: 0
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "precision",
|
|
type: "number",
|
|
label: "Precision",
|
|
value: 0,
|
|
min: "0",
|
|
max: "5"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
- **type** (mandatory): 'modal'
|
|
- **target** (mandatory): 'webui'
|
|
- **id** (optional): 'modalpanel'
|
|
- **content** (mandatory): Modal description
|
|
- **title** (mandatory): Title of the modal. 'S90' will be translated as 'Create Item'.
|
|
- **id** (mandatory): Modal ID. Example: 'fields_modal'
|
|
- **style** (mandatory): Modal style. For fields modal, use 'fields'.
|
|
- **validation** (mandatory): Define which button is performing the validation and send back the modified values: 'bt1' or 'bt2'.
|
|
- **bt1Txt** (optional): Text for button 1. 'S106' will be translated as 'Create'. If not defined, the button won't be displayed.
|
|
- **response1** (optional): Message sent if button 1 is clicked. Example: 'create'. The click closes the modal.
|
|
- **bt2Txt** (optional): Text for button 2. 'S28' will be translated as 'Cancel'. If not defined, the button won't be displayed.
|
|
- **response2** (optional): Message sent if button 2 is clicked. Example: 'cancel'. The click closes the modal.
|
|
- **hideclose** (optional): If set to true, it hides the close button of the modal.
|
|
- **overlay** (optional): If set to true, it automatically closes the modal if it loses focus.
|
|
- **fields** (mandatory): An array of field definitions for the modal.
|
|
- **id** (mandatory): ID of the field.
|
|
- **label** (mandatory): Label for the field.
|
|
- **type** (mandatory): Type of the field. Supported types: 'text', 'select', 'boolean', group.
|
|
- **value** (optional): Default value for the field.
|
|
|
|
Note: The close button and overlay feature won't send any notification when the modal is closed.
|
|
|
|
Answer format: Check `eventMsg.data`
|
|
```json
|
|
{
|
|
"type": "modal",
|
|
"content": {
|
|
"response": "create",
|
|
"fields": {
|
|
"field1": "Value 1",
|
|
"field2": "Option 2"
|
|
},
|
|
"initiator": {
|
|
"type": "modal",
|
|
"target": "webui",
|
|
"id": "modalpanel",
|
|
"content": {
|
|
"title": "S90",
|
|
"id": "fields_modal",
|
|
"validation": "bt1",
|
|
"style": "fields",
|
|
"bt1Txt": "S106",
|
|
"response1": "create",
|
|
"bt2Txt": "S28",
|
|
"response2": "cancel",
|
|
"hideclose": true,
|
|
"fields": [
|
|
{
|
|
"id": "field1",
|
|
"label": "Field 1",
|
|
"type": "text"
|
|
},
|
|
{
|
|
"id": "field2",
|
|
"label": "Field 2",
|
|
"type": "select",
|
|
"options": [
|
|
"Option 1",
|
|
"Option 2"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"id": "modalpanel"
|
|
}
|
|
|
|
* type: 'modal'
|
|
* id: ID set in the command message to help with screening
|
|
* content: Contains the response itself (response), the field values entered by the user (fields), and the initiator (initial command for reference)
|
|
|
|
#### Fields types and options
|
|
The fields modal supports the same as the interface fields but with some limitations, each type may support different options.
|
|
The existing types and options are:
|
|
1. "pickup":
|
|
Currently not supported in the modal dialog it is used in interface tab to select language or theme
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (mandatory)
|
|
- "value" (mandatory) a string with the selected value
|
|
|
|
2. "boolean":
|
|
Supported in the modal dialog is used to select a boolean value like for a checkbox or a switch
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (mandatory)
|
|
- "value" (mandatory) a boolean value
|
|
- "help" (optionnel) a string with a help text in tooltip
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
|
|
3. "group":
|
|
Supported in the modal dialog is used to group fields together, it may contain any type of fields but not another group
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (optional)
|
|
- "value" (mandatory) an array of fields
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
|
|
4. "number":
|
|
Supported in the modal dialog is used to select a number value float or integer
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (mandatory)
|
|
- "min" (optional) a string with the minimum value
|
|
- "max" (optional) a string with the maximum value
|
|
- "help" (optionnel) a string with a help text in tooltip
|
|
- "step" (optionnel) a string with the step value for the input, can be a float
|
|
- "placeholder" (optionnel) a string with a placeholder text
|
|
- "append" (optionnel) a string to append to the value input like a unit
|
|
- "value" (mandatory) a number value
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
|
|
5. "text":
|
|
Supported in the modal dialog is used to select a text value
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (mandatory)
|
|
- "value" (mandatory) a string with the selected value
|
|
- "help" (optionnel) a string with a help text in tooltip
|
|
- "placeholder" (optionnel) a string with a placeholder text
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
- "min" (optionnel) minimum length of the text
|
|
- "max" (optionnel) maximum length of the text
|
|
- "append" (optionnel) a string to append to the value input like a unit
|
|
|
|
6. "list":
|
|
Currently not supported in the modal dialog it is used in interface tab to select a value from a list (macros, extracontent, panels order, shorkeys)
|
|
- "id" (mandatory)
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
- "fixed" (optionnel)
|
|
- "sorted" (optionnel)
|
|
- "type" (mandatory)
|
|
- "label" (mandatory)
|
|
- "value" (mandatory)
|
|
- "nodelete" (optionnel)
|
|
- "editable" (optionnel)
|
|
|
|
7. "select":
|
|
Supported in the modal dialog is used to select a value from a drop list
|
|
- "id" (mandatory)
|
|
- "type" (mandatory)
|
|
- "label" (optional)
|
|
- "value" (mandatory) a string with the selected value
|
|
- "options" (mandatory) an array of objects with the options
|
|
- "help" (optionnel) a string with a help text in tooltip
|
|
- "depend" (optionnel) this is not supported in the modal dialog, but used in interface tab to show or hide a field based on the value of another field
|
|
|
|
|
|
|
|
#### Handling Messages
|
|
The code listens for messages from the parent window using the handleMessage function. When a message is received, it checks the type and id properties to determine if it's a modal-related message.
|
|
|
|
If the message is a modal response, it logs the clicked button (line.response) and performs specific actions based on the modal type and response.
|
|
|
|
For the Fields Modal, if the response is 'create' (response1 because validation is bt1), it updates the defaultSettings object with the values entered in the fields (line.inputData).
|
|
For the Input Modal, if the response is 'create' (response1 because validation is bt1), it displays the entered input value (line.inputData).
|
|
|
|
|
|
|
|
## Install an extension in Web UI
|
|
|
|
### Upload it to local filesystem or any path available to web server
|
|
|
|
|
|
### Add extra panel or page using this extension
|
|
|
|
|
|
It will be displayed according your settings
|
|
|
|
|
|
## Sample codes
|
|
{{% resources color="blue" icon="fas fa-paperclip" sort="asc" pattern=".*\.(gz)"/%}}
|