Make a button link to another page HTML !?

#1

Hi,
i searsh to make a button link to another page HTML. it's work with a link like (www.google.com) but i can't do it with my link ( http://IP/ui/#/1), the link change in the case of the adresse of my navigator but it does run it.
this is the page of redirection




this is my code HTML.
Thank you for your help

<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 20%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: black;}

#customers tr:hover {background-color: #5F5755;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #ddd;
    color: black;
    width : 100px;

}
.eb1 {
    background-color: {{msg.payload[0]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.eb2 {
    background-color: {{msg.payload[1]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.mf1 {
    background-color: {{msg.payload[2]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.mf2 {
    background-color: {{msg.payload[3]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>


<table id="customers">
    <tr>
    <th>Bancs</th>
    <th>Etat du banc</th>
    <th>Fonc- tion- nement </th>
    <th>Anoma- lie</th>
    </tr>
    <tr>
    <td>BANC1</td>
    <td>    <button type="button" class = "eb1" onClick="parent.location='http://192.168.5.247:1880/ui/#/1'" ></button>   </td>
    <td><button class="mf1"></button></td>
    <td>zerzer</td>
     </tr>
  <tr>
    <td>BANC2</td>
    <td><button class="eb2"></button></td>
    <td><button class="mf2"></button></td>
    <td>zerzer</td>
     </tr>
     <tr>
    <td>BANC3</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC4</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC5</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC6</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
</table>

</html>
0 Likes

#2

Hello Imadouino,

I guess the solution relies on the use of the settings.js configuration file in your .node-red folder

When we want to serve local content we need to set up an http static path in this configuration file.

I use Windows10 and configured below path to point to the projects file in the node-red installation.

    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: "C://Users/OCM/.node-red/projects",

inside this directory (projects) I created others to serve images, http files, fonts, etc

Users/OCM/.node-red/projects/nrhttp
Users/OCM/.node-red/projects/nrimages
Users/OCM/.node-red/projects/nrfonts

Inside my Node-RED flow i use relative paths from httpstatic (in settings.js) to where my files are stored. For instance, to reach the file f1.html (a test html Hello world) that is inside projects/nrhttp folder I would use:

<td>BANC1</td>
    <td>    <button type="button" class = "eb1" onClick="parent.location='http://127.0.0.1:1880/nrhttp/f1.html'" ></button>   </td>

I tested with your template and it worked fine.

f1

Notes:

1- When changing the settings.js file you need to restart node.red

2- Check if the httpstatic file is shown in the initialization of Node-RED

18 Jun 10:01:06 - [info] Settings file  : \Users\OCM\.node-red\settings.js
18 Jun 10:01:06 - [info] HTTP Static    : C:\Users\OCM\.node-red\projects

1 Like

#3

Hi Andrei,

I’m in linux, that i will searsh to find this file in linux and i will try this solution.
Thank youuuuu.

0 Likes

#4

In Linux it should be the one under ~/.node-red

1 Like

#5

Hi Andrei,
Thank you for your response, but my link is it not .php or .html, my link it is like that for example:
" http://localhost:1880/ui/#/4"
the method you sent me did not work :frowning: .
Thank yoouuuu for your help.

0 Likes

#6

Hello imadouino,

The title of the post suggests that you were trying to open an html file. Could you please recap what is the expected behavior when you click the buttom ? Perhaps you want to move to another page (tab) of a local dashboard ? or perhaps something else ?

0 Likes

#7

Hi ANDREI,
thank you for your attention; my question was, how i can make button link(for an auther tab in node-red) with html button,I explained that on the pictures above, and not to trying to open an html file ou html page.
I hope you have understood my situation.
Thank you for your help.

0 Likes

#8

The easiest way to switch to another “page” of your existing dashboard is to pass a msg to the ui_control node. From the node’s information sidebar:

Allows dynamic control of the Dashboard.

The default function is to change the currently displayed tab. msg.payload should either be an object of the form {tab:“my_tab_name”}, or just be the tab name or numeric index (from 0) of the tab or link to be displayed.

Sending a blank tab name “” will refresh the current page. You can also send “+1” for next tab and “-1” for previous tab.

So all you need in the first page is a button or other html element that can send a msg with a payload containing the tab name or index number. You could use the ui_button node set to send the other tab name, or embed some angular html in a ui_template node – something like this:

<md-button class="eb2" ng-click="send({payload: 1})">
</md-button>

Wire the output of your button or template node into the ui_control node, and it should just work for you. For some other examples and cautions, you can check this discussion that was started recently…

1 Like

#9

thank you that’s exactly what was looking for and it works
Thank youuu

0 Likes

#10

it work too for the hypertext in html ?
Thank you

0 Likes

#11

If you mean the href on an html <a href="...">link</a> element, then you will have to invoke a javascript function inside the angular scope – something like this (untested):

<a href="javascript:gotoPage(4);">Details</a>

<script>
var $scope;
function gotoPage(page) {
    $scope.send({payload: page});
};

(function(scope) {
    $scope = scope;
})(scope);
</script>
2 Likes

#12

Thank youuuuuu very much shrickus,
My last question is, when i change tab with UI CONTROL, it also changes to another device, who is also connected to the site, how can to avoid that.
Thank you for your attention.

0 Likes

#13

Copied from the ReadMe of the dashboard nodes

Multiple Users

This Dashboard does NOT support multiple individual users. It is a view of the status of the underlying Node-RED flow, which itself is single user. If the state of the flow changes then all clients will get notified of that change.

1 Like

#14

Thank you UKMOOSE,
there is no other way to change the tab automatically without going through the UI CONTROL then.

0 Likes

#15

Multiple users can, of course, view different tabs at the same time. The problem with switching tabs using ui-control is that it is done via the server so all users will be switched. To only switch tabs for the current user then I think it would have to be done within the browser. I don’t know if there is a way of doing that.

1 Like

#16

when you send a command from the dashboard it has a msg.socketid property set… if you set that correctly then the ui_control message will only go to the corresponding socket/screen… Obviously the tricky part is associating the correct socketid if the command isn’t coming from a user in the first place.

1 Like