[0.5 Release on Play,App Store] A mobile client for Node-RED Dashboard and Admin (update 09Nov)

image
A proof of concept of custom button and layout for mobile app. From image, you could see it s easier to turn on off left, right panel, edit node, actions that so painful on mobile (from my own experience)

I also successfully hook RED object to call out action, not emulate by DOM. That mean we can do tons of thing to make mobile life better

1 Like

With regard to the middleware, your readme says "Open file, change username and password to what you want", but I notice that there is a url hardcoded in the middleware - http://cloudred.cc/api/user/validate that isn't referenced, what is that for?

Also, how do you get the app on a android phone? I'm not familiar with installing apps other than via the play store.

That is comment out in tokenValidate function. I leave that function there so if anyone want to do 3rd party authentication, it is a good example

Also in the first line of middleware js file, I explain what this mean:

In case you want to rewrite authentication and user 3rd party authentication system (oAuth, Twitter...), uncomment tokenValidate function and rewrite

For installation on android, just download apk in release of github and install (may need accept trust source if you first install an apk)

Installed and can now access both editor & dashboard from the app.
It renders the dashboard nicely, fully fitting the screen size with no borders, etc.

I'm not sure how much functionality you have put into the current apk release, but the EDIT, +NODE & INFO buttons are not working for me.

@Paul-Reed I made some fix, so maybe you are cached the old js (Android will encounter this)
You should make sure your UI is like my screenshot, so you are loading the newest js injection file

1 Like

Most definately not. I just mentioned it. I can completely understand the wish to use NR's own dashboard for multiple reasons even if I'm not using it myself. :slightly_smiling_face:

1 Like

Yes, that is better, your fix has enabled the buttons to work now, and I am getting a similar view to you (in fact better! as mine is totally full screen).
I'm really liking this so far, and starting to see the benefits, especially when using the editor.

1 Like

Make progress today, alot of tweak to inject layout and button

Succesfully add Location Tracking with tool to auto create Location Node. From Debug info below, you could see lat and long sent directly from app. I have checked reverse data and it is my correct position

Need to work more with location watch, also think about a button to quick add node for drawing world map for current position


latlong

1 Like

When I use 'CREATE LOCATION NODES', this is what I get;

Is there a certain node that I need to add to my palette, if so, which node is it?

EDIT - OK I found out the hard way that node-red-contrib-ip is the missing node, and needs to be added to the palette first.
But the imported flow just contains an inject node and the IP node, which returns the public IPv4 address of the node-RED server. What else is needed to obtain the phone's location?
Can you share the flow?

Crazy project ... I love it :grinning:

What I was wondering is, whether it would at all be possible to integrate in such app the option to auto connect to a VPN of choice or zerotier or? Something that would make the use of such app on the road less a hassle for non-IT-dashboard users.

Anyway. I really like what you are doing here!

Sounds like a bad case of feature creep. :slightly_smiling_face:

I'm not the developer but I doubt this would be possible or at least simple given the countless VPN apps available for Android at least.

What you could possibly be able to do though is to use one of the automation apps available on Play Store to create a custom home screen icon which would start the VPN app first. It's been years since I used such an app so this is just a guess.

2 Likes

:relaxed:

I am having this "idea" for some time now ... your proposed workaround works for both, Android (Task-something) and ios (.mobileconfig). Neither of them is really "easy".

Well neither is setting up Node-RED to do something useful for a complete layman. :slight_smile:

@Paul-Reed sorry this feature need a new release, will make a new one at weekend with more features
@jodelkoenig i dont think I will support VPN, it is out of the box

1 Like

No problem at all @linhtranvu ... I will hopefully be able to test your app as of next week.

When showering today, I come with a crazy idea for semi-wysiwyg dashboard. That mean we could see dashboard, click on object to edit and see update. I make quick prototype and It works. This is the biggest achievement until now.
Workflow could be explained:

1.Dashboard show inside admin, I call this “editor mode“
2. Border appear for all dashboard object, so you could differ object
3. Click on object, search open and find, if found object, automatically open edit panel.

You need to re-deploy after edit, that is why I call semi-wysiwyg . However, this process could be also automate after edit object, that mean we have a WYSIWYG dashboard editor

PS: Until now, project become a UI hack with jQuery spaghetti code, with most of work done in js injection file. I think that is good because everyone not to be limited by app code, could modify injection JS file for more suitable mobile UI

1 Like

With help of @dceejay, I successfully make click and edit working, not prototype anymore, making first step of a wysiwyg editor for NR

ezgif-4-b0af92e2d016

4 Likes

Release 0.0.2 today, features

UPDATE information 18 October, 0.0.2 release

  1. Editor mode: Click and edit ui node directly on dashboard
  2. Add button to Admin to quickly edit, copy delete node property, show left, right panel, re-arrange and tweak layout for mobile (show UI on some editor not fit to mobile)
  3. Location tracking, send to app, user can config a node to get current location from phone for running a script (like turn on light when come home. Location watch

Features from previous build

  1. Config and save username, password for Dashboard, Admin. Note: Must change Dashboard login from basic authentication to middleware authentication
  2. Auto login Dashboard, Admin. Add home button to make mobile feel. So when in Dashboard or Admin, click Home button to back to App Home
  3. Build and test running on both IOS and Android

Visit first post for more information and screenshot. I also want to inform that: I embed succesfully drag and drop to Dashboard Editor mode. A lot of work need to do, but at least I have a start point and how to do

63618c9f7a671d784390d043a7af5b243ce96daa_2_281x500

1 Like

This is awesome stuff... Really nice piece of software!

Problems with the new release on Android;

When running the app I get this error -

(and yes, I allowed location permission)

followed by -

and then I get continual pop-ups -

The lat & lon are correct for my location.

EDIT - should the URL in the http in node start with a slash = /location? I thought it would simply be location, although I may be wrong.