).The editor allows you to add scripts to each type of dash (except “Group”). A distinction is made between filter scripts, to filter the content of a received message, and output scripts for formatting the content before publishing.
For “Custom Views” the corresponding functionality must be implemented directly in the HTML code (see Custom View).
function filterMsg(msg, acc, view) {
var content = msg.text;
...
return content;
}
Functionality is like Filter scripts for topics. Likewise, the parameter view can be used to access properties of the dash. For example, the text or background color can be changed depending on the received message msg.text.
Example:
view.setTextColor(MQTT.Color.RED);
The individual functions are explained in a separate section.
function setContent(input, msg, acc, view) {
var msg.text = input;
...
return msg;
}
input contains the value to be sent (publish). By default it is assigned to the msg.text variable. For example, if the JSON output format is required, the JSON content (type string) must be assigned to the variable msg.txt.
For binary data, assign the corresponding ArrayBuffer object (which contains the binary data to be sent) to msg.raw:
Example:
var buffer = new ArrayBuffer(2); var dataView = new DataView(buffer); dataView.setInt8(0, 1); // put 1 in slot 0 dataView.setInt8(1, 127); // put 127 in slot 1 msg.raw = buffer;
msg contains the message to be sent, acc information on the account. See the table “Variables”.
As with the filter scripts, the parameter view can be used to access properties of the dash, for example to reset colors. See this section.
JavaScript and connection errors (e.g. no network connection during
publish()) are indicated in the dash by a warning ().
icon (2) to
display the error message:
The display of dashes can be dynamically modified using script code.
Filter scripts are executed before they are displayed. If a new message is received, it can be evaluated and the display of the dash icon can be modified depending on the message content (e.g. by setting a different text color).
Access to the properties of the dash (e.g. of a “Button/Switch”) can be obtained by the view parameter, which is passed in the filterMsg() and setContent() functions (see the Filter script/Output skript) sections.
With a “Custom View” type dash, the properties of the dash can be accessed in the HTML code via the global object MQTT.view. If implemented, this can also be done using the onMqttInit(account, view) function (see the Custom View HTML section).
To change e.g. the text color, setTextColor() must be called as follows:
a) in filterMsg(), setContent()
view.setTextColor(MQTT.Color.RED);
b) JavaScript code in the HTML of Custom View
MQTT.view.setTextColor(MQTT.Color.RED);
Some properties/functions are only available for certain dashes:
setTextColor(color), getTextColor()
Description: set/read text color
Parameter: color - ARGB color value (see Color constants)
Dashes: Text View, Option List, Progress Bar/Slider
setTextFieldDefaultValue(defaultInputValue), getTextFieldDefaultValue()
Description: Preset input field displayed in detail view
Parameter: defaultInputValue – Preset value
Dashes: Text View
setTextSize(size), getTextSize()
Description: set/read text size
Parameter: size - 0 = System Default, 1 = small, 2 = medium 3 = large
Dashes: Text View, Option List, Progress Bar/Slider
setBackgroundColor(color), getBackgroundColor()
Description: set/read background color
Parameter: color - ARGB color value (see Color constants)
Dashes: all
setBackgroundImage(resourceName), getBackgroundImage()
Description: set/read background image
Parameter: resourceName internal or external ressource name (image
imported by the user). A path “int/” or “user/” can be prefixed (required
for name collision; if not fully qualified, an external ressource has priority)
Dashes: TextView, Option List, Progress Bar/Slider,
Button/Switch
getSubscribedTopic()
Description: read out topic (sub)
Dashes: all
getPublishTopic()
Description: read out topic (publish)
Dashes: Text View, Button/Switch, Progress Bar/Slider,
Option List
setCtrlColor(color), getCtrlColorColor()
Description: set/read controller color (foreground image)
Parameter: color – ARGB color value (see Color constants)
Dashes: Button/Switch “On” State, ProgressBar/Slider
setCtrlBackgroundColor(color), getCtrlBackgroundColor()
Description: set/read controller background color
Parameter: color – ARGB color value (see Color constants)
Dash: Button/Switch “On” State
setCtrlImage(resourceName), getCtrlImage()
Description: set/read controller image
Parameter: resourceName – internal or external ressource name (image
imported by the user). A path “int/” or “user/” can be prefixed (required
for name collision; if not fully qualified, an external ressource has priority)
Dash: Button/Switch “On” State
setCtrlColorOff(color), getCtrlColorOff()
Description: set/read controller color (foreground color)
Parameter: color – ARGB color value (see Color constants)
Dash: Button/Switch “Off” State
setCtrlBackgroundColorOff(color), setCtrlBackgroundColorOff()
Description: set/read controller background color
Parameter: color – ARGB color value (see Color constants)
Dash: Button/Switch “Off” State
setCtrlImageOff(resourceName), getCtrlImageOff()
Description: set/read controller image
Parameter: resourceName – internal or external ressource name (image
imported by the user). A path “int/” or “user/” can be prefixed (required
for name collision; if not fully qualified, an external ressource has priority)
Dash: Button/Switch “Off” State
setUserData(data), getUserData()
Description: Buffering user-defined values
Parameter: JavaScript object or value
Explanation: For example, to buffer state variables, historical data
(values of the last messages received).
IMPORTANT: The data is not stored permanently, but only for the lifetime
of the dash, which ends when the dashboard is left or modified. The size
is limited, also not all data types are stored, e.g. objects of the type
ArrayBuffer (JSON.stringify() and JSON.parse()
are used internally to set and read user data)
Dashes: all
isDialog()
Description: Query whether the dash is currently executed in detail view
Explanation: Dashes displayed in the detail view use the data of the
corresponding dash in the dashboard, but run as a standalone instance
Dash: Custom View
getHistoricalData()
Description: Returns the last messages (up to 100 last messages are retained
on the server if the “Provide historical data” option is selected in the dash)
Return value: JavaScript array of messages (sorted in ascending order)
Dash: Custom View
Example:
var data = MQTT.view.getHistoricalData();
for(var i = 0; i < data.length; i++) {
var msg = data[i];
}
msg.receivedDate – date (JavaScript Date object)
msg.topic – topic (type string)
msg.text – message content (type string)
msg.raw – binary message content (JavaScript ArrayBuffer object)
getParameters()
Description: Returns a list of parameters (the user can define the Custom
View parameter in the dash settings)
Return value: JavaScript array with parameters of the type String
Dash: Custom View
Example:
MQTT.view.getParameters()
Further functions and constants are available via the global object MQTT.
publish(topic, payload, retain)
Description: Send a message (from the “Custom View” dash)
Parameter: topic (type String), payload (type
String, if in text format, or ArrayBuffer for binary data),
retain (type Boolean)
Explanation: For application in the “Custom View” dash, if e.g. a “SendButton”
element was tapped
Dash: Custom View
Example:
MQTT.publish('demo/test', 'hello world!', false);
Color functions:
MQTT.Color.rgba(r, g, b, a) – Returns the RGB color value from the passed individual values, including alpha channel
MQTT.Color.rgb(r, g, b) – Returns the RGB color value from the passed individual values (100% opaque)
MQTT.Color.red(color) – Returns the red portion of a color
MQTT.Color.green(color) – Returns the green portion of a color
MQTT.Color.blue(color) – Returns the blue portion of a color
Color constants:
MQTT.Color.WHITE
MQTT.Color.LT_GRAY
MQTT.Color.DK_GRAY
MQTT.Color.BLACK
MQTT.Color.TAN
MQTT.Color.YELLOW
MQTT.Color.ORANGE
MQTT.Color.RED
MQTT.Color.BROWN
MQTT.Color.LT_GREEN
MQTT.Color.GREEN
MQTT.Color.PINK
MQTT.Color.PURPLE
MQTT.Color.CYAN
MQTT.Color.LT_BLUE
MQTT.Color.BLUE
MQTT.Color.TRANSPARENT
MQTT.Color.OS_DEFAULT – Standard color of the operating system (according to iOS/Android, dark mode)
MQTT.Color.CLEAR – Resets colored areas (e.g. in “Button/Switch”)
Any HTML can be used. However, some points should be considered.
<style>
body {margin: 0; padding: 0;}
</style>
<meta name="viewport" content="width=250, height=250,initial-scale=1,user-scalable=no">
Explanation:
This statement is mandatory for HTML that is also subject to run in
the iOS “MQTT Push” app.
Omitting or using other parameters could cause elements of the Custom View to be too small
or to display differently on Android and iOS.
<script>
function onMqttResize() {
document.getElementById('visible_area').style.width = window.innerWidth + "px";
document.getElementById('visible_area').style.height = window.innerHeight + "px";
}
window.addEventListener('resize', onMqttResize);
</script>
<script>
function onMqttInit(account, view) {
onMqttResize();
/* implement */
}
function onMqttMessage(msg) {
/* implement */
}
</script>
Explanation:
onMqttInit() is called by the app after initialization.
account contains information about the current account (see also the
table “Variables”). Using
view you can access the properties of the dash (see above).
onMqttMessage() is called by the app whenever a new message has
arrived (on initialization the last received message is passed). Of course,
a topic must be specified in the dash for this to work.
msg parameter: see also the table “Variables”.
Use the “Basic HTML” template (
> Insert ExampleInsert
Example > Basic HTMLBasic HTML) for the above code.
<button onclick="MQTT.publish('demo/test','Hello world!',false);">Send Hello World!</button>
<img src="light_on">or
<img src="user/light_on">