[0.7.1] Node-RED Client Editor app update: WYSIWYG Dashboard Editor (30 Nov)

[linhtranvu]

I decide to develope a mobile app for Node RED, support Dashboard and Admin automatically login and native features: background location tracking, push notification, voice command, mqtt client, wysiwyg editor...

This is a new thread of [0.5 Release on Play,App Store] A mobile client for Node-RED Dashboard and Admin (update 09Nov) - #70 by ristomatti. I cannot modify old one (forum policy) anymore, so must create a new to update info

Update features for 0.7.1, 30 Nov:

First release of WYSIWYG Dashboard Editor: It takes a while for first release of a first WYSIWYG Dashboard Editor. Current features of WYSIWYG Editor:

• Add, Edit, Move group (basically do everything with group)
• Add, edit, drag and resize node (basically do everything with node)
• Edit Tab, save

Quick start: Choose tab and press Edit. Default the ability to drag node is disabled (to avoid conflict with scroll screen). Press "Enable" at bottom to move node. Press edit node at bottom to edit node.

Requirement and Limitation

• Dashboard 2.24.1 (released on 27 Nov) required.
• Only default node of dashboard supported. Other user dashboard node will not work (you still can drag but their position will not be saved)
• Each tab work as a seperate 'workspace'. That mean you must save before switching tab. Moreover group or node cannot be transfer between tab.
• Can not save on IOS, you will get info about not 'authorize'. This is an issue with the core of safari, that make admin cannot be authorized after using dashboard (I nearly pull out my hair because of this **** issue on IOS)
• Node cannot be in a subflow
• Tool written in html5 and js, so maybe slow on old device

Features of previous build

1. Auto login Dashboard, Admin. Add home button to make mobile feel. When in Dashboard or Admin, click Home button to back to App Home
2. Add buttons 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. Background Location tracking: Background location tracking, works even app not open in front . Tested for IOS and Android, don't open app for whole day and still receive location data. Custom endpoint url, support basic-node-auth, many params add to setting, Native Test button for easily debug. User can config a node to get current location from phone and display on map, geofence. App help to create these node. Documentation on Background Location Tracking:
4. Push Notification: allow custom push message from Node-RED to app. Now you can send custom push message direct from Node-RED to app by posting data with device token

Note: Please remove previous nodes and recreate by this version

TODO

1. Voice command
2. MQTT client
3. Learn features for button in WYSIWYG Editor (from MQTT, similar some commercial app)
4. Add RTSP camera support to stream video directly from camera to app without streaming server

Github: https://github.com/linhtranvu/node-red-app

SCREENSHOT FROM CURRENT BUILD

Main screen, dashboard, configuration

Admin editor with button, easy to access and edit node

Background Location tracking: Button to Config, Test, Create location node, Map track

Push notification

[LosinIt]

I've been wanting an app like this so I was excited to install it. I don't think I can use it though because I don't have/use a NR dashboard and it won't let me save the config without a url for one. Is there a way around this?

[linhtranvu]

Just input http:// and then you go

[LosinIt]

It's good now. Thanks!

[Scratchbot]

When new IOS version?

[linhtranvu]

Maybe this weekend, I have some trouble compiling firebase lib with IOS, still not have time to look at. That is why only Android is released

[Scratchbot]

When I switch from Dashboard to Admin the app has a problem logging in to my nodered and I have to close the app and reopen it, no big problem for me but so you know. When I switch from Admin to Dashboard the problem does not occur.

[Scratchbot]

Never mind, when I use the Editor button I can switch between the two

[linhtranvu]

Editor still have some issue, will announce when fix conflict between drag and scroll

[linhtranvu]

Hours of inspection and it turn out an issue of IOS. You could test by opening dashboard and then admin on safari
Dont know what is happening

[Scratchbot]

You should take a break
I'm so happy with the app as it is, finally a way to play with Nodered on my iPad and even on my phone it's usable. Thanks for your work👍

[linhtranvu]

Big update 30 Nov, now with WYSIWYG Editor. IOS also could download newest version

[hepcat72]

I installed this app, but I haven't configured it yet because I don't know what the potential security implications are. Can anyone provide any assurance that this doesn't open up a way for people to inject malicious code either into my Node Red instance or my phone, or get into my network? Like, can the links be hijacked? Is there any sort of authentication or SSL supported for this interface?

[linhtranvu]

Well this is commited that there is no information store on server, except static javasript file hosted in https://linhtranvu.github.io/node-red

I also submit newest code on https://github.com/linhtranvu/node-red-app

But if you don't trust, maybe you can do it your own security analysis by using wireshark to capture package

https://www.wireshark.org/docs/man-pages/androiddump.html

How to capture network traffic from iPhone with tcpdump

Is there any sort of authentication or SSL supported for this interface?

For SSL, app work as a quick interface to access your Node-RED server. So if you want security, everything must be done with your Node-RED. I recommend using https://www.zerotier.com/ for establishing VPN. I also tend to support quick access to zerotier from App in next release