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.