Hello, I want to implement a feature in Dashboard 2.0 similar to the virtual keyboard in Dashboard 1. For example, when a text input node is clicked, a virtual keyboard should appear.
However, there aren’t many examples available for using Vue.js, and I also don't know how to import simple-keyboard from a template node.
Currently, what I've written only displays a popup when any text input node is clicked.
Could you provide an example?
[
{
"id": "d7c252ad7e82d0b3",
"type": "ui-template",
"z": "dea9d60ccfba7a49",
"d": true,
"group": "",
"page": "5d26db868fc9e9fe",
"ui": "",
"name": "",
"order": 3,
"width": 0,
"height": 0,
"head": "",
"format": "\n<script>\nexport default {\n mounted() {\n this.addInputListeners();\n },\n methods: {\n addInputListeners() {\n const inputTags = document.getElementsByTagName(\"input\");\n console.log(inputTags);\n for (let i = 0; i < inputTags.length; i++) {\n inputTags[i].addEventListener(\"click\", this.openModal, false);\n }\n },\n openModal(event) {\n alert(\"click\");\n\n }\n }\n};\n</script>\n\n<style scoped>\ninput {\n margin: 0.5em;\n padding: 0.5em;\n}\n</style>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "widget:page",
"className": "",
"x": 1160,
"y": 220,
"wires": [
[]
]
},
{
"id": "5d26db868fc9e9fe",
"type": "ui-page",
"name": "Setting",
"ui": "35e7e3e70a04a217",
"path": "/page6",
"icon": "cogs",
"layout": "grid",
"theme": "246c12b058733eb3",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 5,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "35e7e3e70a04a217",
"type": "ui-base",
"name": "스마트진단기",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control",
"ui-gauge"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "icon",
"titleBarStyle": "fixed",
"showReconnectNotification": false,
"notificationDisplayTime": "1",
"showDisconnectNotification": false
},
{
"id": "246c12b058733eb3",
"type": "ui-theme",
"name": "Theme Name",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
