Node-Red as Tablet HMI with splashpage

Karl Norseman Bo

unread,

May 8, 2018, 1:25:45 AM5/8/18

to Node-RED

Hi, i have already developed a HMI solution using Node-red on a rpi 3b for easy access and controll of some equipment wia the wifi of the rpi.

my development platform was raspbian jessie.

I added one rpi in the controlcabientt of the machine and shared the wifiname and password with the operator.

as soon as the operator connected to the wifi the splash screen appeared

Then by clicking ok, the operators device was forwarded to the Node-red dashboard

All was good and roses was smelling nice :

then came rpi 3b+ and raspbian stretch, now thats a different story, but needless to say it has consumet lots of hours.

anyway, i finally got a satisfactory stretch image up and running with all functions identical to my jessie image and i imported all my flows

Splash page looks the same,

But now the objects in the Node-red-dashboard does no longer apear.

Any idea whats different in the htl code from dashboard 2.4.3 to 2.9.1, i even tried with 2.8.8 i think, and there also dashboard did not load like it does in 2.4.3

I know its not ideal to display the webpages through the sign in to wifi network, but its very convenient having the pages popping up just by logging in to the wifi

if i choose to keep the connection and load the wepbage manually, the dashboard shows correctly.

any ideas how to solve this matter so the operator does not need to do anything different?

Ah, the jessie image does not support the rpi3b+ hardware.

Thank you

Karl

Dave C-J

unread,

May 8, 2018, 3:53:08 AM5/8/18

to node...@googlegroups.com

Hi - I don't think there is anything different about how the base pages are loaded. How exactly are you launching the dashboard pages ? Are you able to see the same behaviour using a laptop (or desktop) browser - so you could open the browser debug console (developer tools) and see if there are any errors in there ?

Karl Norseman Bo

unread,

May 8, 2018, 6:45:37 AM5/8/18

to Node-RED

here is the html code from mainpage in 4.3.2

<!--</Deject>--> <!DOCTYPE html> <!--
  Copyright 2016 JS Foundation and other contributors, https://js.foundation/
  Copyright 2016 IBM Corp.
  Copyright 2015 Andrei Tatar

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
--> <html lang="en" manifest="dashboard.appcache"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="Node-RED"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="icon192x192.png"> <link rel="shortcut icon" type="image/png" href="icon64x64.png"> <link rel="apple-touch-icon" href="icon120x120.png"> <link rel="stylesheet" href="css/app.min.css"> <title></title> <link rel="stylesheet/less" href="css/app.min.less"> </head> <body ng-app="ui" ng-controller="MainController as main" ng-cloak layout="column" style="background: {{main.backgroundColor}}" class="nr-dashboard-theme" ng-swipe-right="onSwipeRight();" ng-swipe-left="onSwipeLeft();"> <md-content ng-if="main.loaded" ng-include="'partials/main.html'" layout="column" flex></md-content> <script src="socket.io/socket.io.js"></script> <script src="js/app.min.js"></script> <script src="i18n.js"></script> <script src="js/tinycolor-min.js"></script> </body> </html> <!--</Deject>-->

and here is from 2.9.1

<!--</Deject>--> <!DOCTYPE html> <!--
  Copyright 2016 JS Foundation and other contributors, https://js.foundation/
  Copyright 2016 IBM Corp.
  Copyright 2015 Andrei Tatar

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
--> <html lang="en" manifest="dashboard.appcache"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="Node-RED"> <meta name="mobile-web-app-capable" content="yes"> <link rel="manifest" href="manifest.json"> <link rel="icon" sizes="192x192" href="icon192x192.png"> <link rel="shortcut icon" type="image/png" href="icon64x64.png"> <link rel="apple-touch-icon" href="icon120x120.png"> <link rel="stylesheet" href="css/app.min.css"> <title></title> <link rel="stylesheet/less" href="css/app.min.less"> </head> <body ng-app="ui" ng-controller="MainController as main" ng-cloak layout="column" style="background: {{main.backgroundColor}}" class="nr-dashboard-theme" ng-swipe-right="onSwipeRight();" ng-swipe-left="onSwipeLeft();"> <md-content ng-if="main.loaded" ng-include="'partials/main.html'" layout="column" flex></md-content> <div ng-if="main.nothing" class="node-red-ui--notabs"> <table><tr><td><center><img src="icon120x120.png"></center></td></tr> <tr><td><center><h2>Welcome to the Node-RED Dashboard</h2></center></td></tr> <tr><td><center>Please add some UI nodes to your flow and redeploy.</center></td></tr></table> </div><!-- <i class="fa fa-spinner fa-spin fa-4x fa-fw"></i> --> <script src="socket.io/socket.io.js"></script> <script src="js/app.min.js"></script> <script src="i18n.js"></script> </body> </html> <!--</Deject>-->

when i open in my computer browser, its all ok. this problem only happens with my android phone. have not been able to test on apple products yet

my "continue" button uses this code

<input style="width: 300px; padding: 20px; cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999; -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #33FF33; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%;" type="button" value="CONTINUE" onclick="window.location.href='http://my local ip:1880/ui'" />

im thinking, maybe i just need to att some code to the button so it closes the login to wifi frame and opens the page in new browser.