Want to directly go to the page

Dashboard
1

Hi,
I have 3 or 4 data say (string :1,2,3)which I am injecting via injector ( will switch to serial out node in later where I am gonna fetch datas from ardunio). I have connected to these injectors to individual function node where I am writing a small code to control my uI_control. That ui_control is connected to a individual template nodes having video files.

Now here I want to change these pages according to the data coming string 1 for page 1 , string 2 to page 2 and string3 for page 3.

2

Can you post a small flow that shows the problem you have ?

3

Do you mean change tabs on the UI (dashboard) like this: How can i change tabs with button? - #12 by dceejay

4

No.. I am not gonna use any buttons.

5

this is my code. where I am triggering my videos using a injectors which sends a strings at random duration's.

[
    {
        "id": "bac113592b6fd1c6",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a38b96e93c8edce0",
        "type": "ui_template",
        "z": "bac113592b6fd1c6",
        "group": "ba7c38a2.8c8a1",
        "name": "P2",
        "order": 1,
        "width": 25,
        "height": "16",
        "format": "<div>\n    <video id=\"Video_1\"\n    class=\"video-js vjs-default-skin vjs-big-play-centered\" width=\"1280\" height=\"800\">\n        <source src=\"http://127.0.0.1:8080/V1.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      <br>\n      <button onclick=\"playVideo()\">Play</button>\n    </video>\n</div>\n\n<script>\n    // Add jQuery code here\n  $(function() {\n    // Replace \"URL_OF_YOUR_VIDEO_FILE\" with the actual URL of your video file.\n    var videoSrc = \"http://127.0.0.1:8080/V1.mp4\";\n    \n    // Get the video element by its ID\n    var videoElement = document.getElementById(\"Video_1\");\n    var video = document.getElementById(\"videoSrc\");\n    \n    // Set the source of the video element\n    $(videoElement).attr(\"src\", videoSrc);\n    //video.play();\n    // Load the video and play it\n    videoElement.load();\n    videoElement.play();\n  });\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1050,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "c6d9d9c057fb025d",
        "type": "ui_template",
        "z": "bac113592b6fd1c6",
        "group": "4998d1462a53dd13",
        "name": "P1",
        "order": 1,
        "width": "26",
        "height": "16",
        "format": "<div>\n    <link href=\"https://unpkg.com/video.js@7/dist/video-js.min.css\" rel=\"stylesheet\">\n    <h1> VIDEO 1 PAGE 1</h1>\n    <video id=\"Video_2\"\n    class=\"video-js vjs-default-skin vjs-big-play-centered\" width=\"1280\" height=\"800\"poster=\"google.jpg\">\n        <source src=\"http://127.0.0.1:8080/V2.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      <br>\n      <button onclick=\"playVideo()\">Play</button>\n    </video>\n</div>\n<script>\n    // Add jQuery code here\n  $(function() {\n    // Replace \"URL_OF_YOUR_VIDEO_FILE\" with the actual URL of your video file.\n    var videoSrc = \"http://127.0.0.1:8080/V2.mp4\";\n    \n    // Get the video element by its ID\n    var videoElement = document.getElementById(\"Video_2\");\n    var video = document.getElementById(\"videoSrc\");\n    \n    // Set the source of the video element\n    $(videoElement).attr(\"src\", videoSrc);\n    //video.play();\n    // Load the video and play it\n    videoElement.load();\n    videoElement.play();\n  });\n</script>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1010,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "96e14a9325eb3d07",
        "type": "switch",
        "z": "bac113592b6fd1c6",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "cont",
                "v": "1",
                "vt": "str"
            },
            {
                "t": "cont",
                "v": "2",
                "vt": "str"
            },
            {
                "t": "cont",
                "v": "3",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 3,
        "x": 410,
        "y": 180,
        "wires": [
            [
                "08a7d77d0f509529"
            ],
            [
                "1307c1697b664543",
                "3352791f8616ee46"
            ],
            [
                "097459dbfa3e0173"
            ]
        ]
    },
    {
        "id": "2b2e290979258af9",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "d": true,
        "name": "F2",
        "func": "if ( msg.payload == 2){\nmsg.ui_control = {\n    \"tab\": \"TAB 2\", // Replace with the name of your Dashboard tab\n    \"payload\": msg.payload // The payload should contain the tab index (e.g., 0, 1, 2, etc.)\n}};\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 650,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "edf62c08ab268bd8",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "d": true,
        "name": "F1",
        "func": "if (msg.payload==1){\n    msg.ui_control = {\n        \n    \"tab\": \"TAB 1\", // Replace with the name of your Dashboard tab\n    \"payload\": msg.payload // The payload should contain the tab index (e.g., 0, 1, 2, etc.)\n}};\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 910,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "3b5dc99bc44687e6",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "d": true,
        "name": "f3",
        "func": "if (msg.payload == 3) {\n    msg.ui_control = {\n        \"tab\": \"TAB 3\", // Replace with the name of your Dashboard tab\n        \"payload\": msg.payload // The payload should contain the tab index (e.g., 0, 1, 2, etc.)\n    }\n};\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 790,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "1a7049cd3476e63e",
        "type": "ui_template",
        "z": "bac113592b6fd1c6",
        "group": "e6607a6af2d3b328",
        "name": "P3",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<div>\n    <video id=\"Video_3\" class=\"video-js vjs-default-skin vjs-big-play-centered\" width=\"1280\" height=\"800\">\n        <source src=\"http://127.0.0.1:8080/v3.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n        <br>\n        <button onclick=\"playVideo()\">Play</button>\n    </video>\n</div>\n\n<script>\n    // Add jQuery code here\n  $(function() {\n    // Replace \"URL_OF_YOUR_VIDEO_FILE\" with the actual URL of your video file.\n    var videoSrc = \"http://127.0.0.1:8080/v3.mp4\";\n    \n    // Get the video element by its ID\n    var videoElement = document.getElementById(\"Video_3\");\n    var video = document.getElementById(\"videoSrc\");\n    \n    // Set the source of the video element\n    $(videoElement).attr(\"src\", videoSrc);\n    //video.play();\n    // Load the video and play it\n    videoElement.load();\n    videoElement.play();\n  });\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1030,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "27a1e8bedc0c9f34",
        "type": "inject",
        "z": "bac113592b6fd1c6",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "900",
        "crontab": "",
        "once": false,
        "onceDelay": "2",
        "topic": "",
        "payload": "2",
        "payloadType": "str",
        "x": 190,
        "y": 120,
        "wires": [
            [
                "96e14a9325eb3d07"
            ]
        ]
    },
    {
        "id": "346341e151bfa621",
        "type": "comment",
        "z": "bac113592b6fd1c6",
        "name": "",
        "info": "",
        "x": 140,
        "y": 380,
        "wires": []
    },
    {
        "id": "9c6d7e6b7871434a",
        "type": "inject",
        "z": "bac113592b6fd1c6",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "3600",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "str",
        "x": 170,
        "y": 200,
        "wires": [
            [
                "96e14a9325eb3d07"
            ]
        ]
    },
    {
        "id": "08a7d77d0f509529",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "name": "FT1",
        "func": "msg.payload = {\n    \"command\": \"change\",\n        \"payload\": {\n        \"tab\": \"TAB 1\" // Replace with the desired page/tab name\n    }\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 60,
        "wires": [
            [
                "503703dcea578fb6"
            ]
        ]
    },
    {
        "id": "503703dcea578fb6",
        "type": "ui_ui_control",
        "z": "bac113592b6fd1c6",
        "name": "",
        "events": "all",
        "x": 820,
        "y": 160,
        "wires": [
            [
                "c6d9d9c057fb025d",
                "a38b96e93c8edce0",
                "1a7049cd3476e63e"
            ]
        ]
    },
    {
        "id": "1307c1697b664543",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "name": "FT 2",
        "func": "msg.payload = {\n    \"command\": \"change\",\n    \"payload\": {\n        \"tab\": \"TAB 2\" // Replace with the desired page/tab name\n    }\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 610,
        "y": 160,
        "wires": [
            [
                "503703dcea578fb6"
            ]
        ]
    },
    {
        "id": "097459dbfa3e0173",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "name": "FT 3",
        "func": "msg.payload = {\n    \"command\": \"change\",\n    \"payload\": {\n        \"tab\": \"TAB 1\" // Replace with the desired page/tab name\n    }\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 220,
        "wires": [
            [
                "503703dcea578fb6"
            ]
        ]
    },
    {
        "id": "26805daa187ddc4a",
        "type": "function",
        "z": "bac113592b6fd1c6",
        "name": "function 1",
        "func": "\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 860,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "3352791f8616ee46",
        "type": "debug",
        "z": "bac113592b6fd1c6",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 600,
        "y": 280,
        "wires": []
    },
    {
        "id": "75bc48931906eece",
        "type": "inject",
        "z": "bac113592b6fd1c6",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "3",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "3",
        "payloadType": "str",
        "x": 150,
        "y": 280,
        "wires": [
            [
                "96e14a9325eb3d07"
            ]
        ]
    },
    {
        "id": "ba7c38a2.8c8a1",
        "type": "ui_group",
        "name": "VIDEO 2",
        "tab": "9d40a5bbecffef6e",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "4998d1462a53dd13",
        "type": "ui_group",
        "name": "VIDEO 1",
        "tab": "1b1b784f962c16f2",
        "order": 1,
        "disp": true,
        "width": "28",
        "collapse": false,
        "className": ""
    },
    {
        "id": "e6607a6af2d3b328",
        "type": "ui_group",
        "name": "VIDEO 3",
        "tab": "d2a1fc7ec0d29bab",
        "order": 1,
        "disp": true,
        "width": 28,
        "collapse": false,
        "className": ""
    },
    {
        "id": "9d40a5bbecffef6e",
        "type": "ui_tab",
        "name": "TAB 2",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "1b1b784f962c16f2",
        "type": "ui_tab",
        "name": "TAB 1",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "d2a1fc7ec0d29bab",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 3
    }
]
6

Why change page, just change the video.
I do not feel the duplication is required. If it is you should get enough clues from example to change tabs.
e.g.

[{"id":"27a1e8bedc0c9f34","type":"inject","z":"bac113592b6fd1c6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"2","topic":"","payload":"2","payloadType":"str","x":210,"y":140,"wires":[["08a7d77d0f509529"]]},{"id":"08a7d77d0f509529","type":"function","z":"bac113592b6fd1c6","name":"FT1","func":"let msg1 = {video: msg.payload};\n\nmsg.payload = {\n        \"tab\": \"TAB 1\" \n}\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":180,"wires":[["503703dcea578fb6"],["c6d9d9c057fb025d"]]},{"id":"9c6d7e6b7871434a","type":"inject","z":"bac113592b6fd1c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"str","x":170,"y":200,"wires":[["08a7d77d0f509529"]]},{"id":"75bc48931906eece","type":"inject","z":"bac113592b6fd1c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"3","payloadType":"str","x":150,"y":280,"wires":[["08a7d77d0f509529"]]},{"id":"503703dcea578fb6","type":"ui_ui_control","z":"bac113592b6fd1c6","name":"","events":"all","x":540,"y":80,"wires":[[]]},{"id":"c6d9d9c057fb025d","type":"ui_template","z":"bac113592b6fd1c6","group":"4998d1462a53dd13","name":"P1","order":1,"width":"26","height":"16","format":"<div>\n    <link href=\"https://unpkg.com/video.js@7/dist/video-js.min.css\" rel=\"stylesheet\">\n    <h1> VIDEO {{msg.video}}</h1>\n    <video id=\"Video_ID\"\n    class=\"video-js vjs-default-skin vjs-big-play-centered\" width=\"1280\" height=\"800\"poster=\"google.jpg\">\n        <source src=\"http://127.0.0.1:8080/V{{msg.video}}.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      <br>\n      <button onclick=\"playVideo()\">Play</button>\n    </video>\n</div>\n<script>\n    // Add jQuery code here\n  $(function() {\n    // Replace \"URL_OF_YOUR_VIDEO_FILE\" with the actual URL of your video file.\n    var videoSrc = \"http://127.0.0.1:8080/V{{msg.video}}.mp4\";\n    \n    // Get the video element by its ID\n    var videoElement = document.getElementById(\"Video_ID\");\n    var video = document.getElementById(\"videoSrc\");\n    \n    // Set the source of the video element\n    $(videoElement).attr(\"src\", videoSrc);\n    //video.play();\n    // Load the video and play it\n    videoElement.load();\n    videoElement.play();\n  });\n</script>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":610,"y":160,"wires":[[]]},{"id":"4998d1462a53dd13","type":"ui_group","name":"VIDEO 1","tab":"1b1b784f962c16f2","order":1,"disp":false,"width":"28","collapse":false,"className":""},{"id":"1b1b784f962c16f2","type":"ui_tab","name":"TAB 1","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Untested as i do not have videos.

7

stream of data strings will trigger different Videos's. So, I thought I could dump different videos in different pages. I have 6 videos to play, right now i have configured only 2 as a test case.

8

Its actually not working... I think something is missing ... I still thinking on this

9

function node does not triggering my ui_control.

10

Not enough information, what is going into function, what is coming out of both function outputs. Also an example flow.

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.