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

**URL:** https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308
**Category:** Share Your Projects
**Created:** [22 November 2020 07:02 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308 "2020-11-22T07:02:03Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [22 November 2020 07:02 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/1 "2020-11-22T07:02:04Z")

</div>

> 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](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/70). I cannot modify old one (forum policy) anymore, so must create a new to update info

[![play icon](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a0714e97d7e8f65ae28142d57cb90196a9d3b22.jpeg) ](https://play.google.com/store/apps/details?id=org.nodered.linhtranvu.app) [![app store icon](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/885839638289f9d382d213b253161593302a2f75.jpeg) ](https://apps.apple.com/us/app/node-red-client-editor/id1539323696)

**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

 ![1111](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e5959b5cf1c507b5413e74be25cc5fe3a314f2a8.jpeg)

**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:](https://linhtranvu.github.io/node-red/location-help.htm)
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](https://linhtranvu.github.io/node-red/push.htm)

`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](https://github.com/linhtranvu/node-red-app)

**SCREENSHOT FROM CURRENT BUILD**

> Main screen, dashboard, configuration

 ![7plus3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d8aee7dcb0f26a23629940c30f3b16a338ad449.jpeg) ![7plus5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af772352fd1edd0707d988b19a66dd69bd198870.jpeg)

> Admin editor with button, easy to access and edit node

 ![IMG_5191.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/697afc89abc98f5c27f67d766ffecc85011385c7.jpeg) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9af1560d248fb2157a21105ad6220d40f036a626.gif)

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

 ![z2126353876572_732a146ee54041162adeab1b619d593d](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc2cc5d7bf3ee2ae883b8859e966ea2e360af3bb.jpeg) ![IMG_5283](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/0971eb1a403b25b5781f03fcc0ffe9a3043297da.png)

 ![IMG_5286](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a91fd60ce0654777edc1fdb40ee79c256439eca6.jpeg) ![location map](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd6c6ca6bcdb7b7433f7adf9bf96e4982700095f.png)

> Push notification

 ![push](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/6716fb51d7b82e2c8fab555b7c5176bb5e950031.jpeg)

---

<div class="post-metadata">

### Author: ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)
#### Post date: [22 November 2020 18:12 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/2 "2020-11-22T18:12:22Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [22 November 2020 23:38 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/3 "2020-11-22T23:38:30Z")

</div>

Just input http:// and then you go

---

<div class="post-metadata">

### Author: ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)
#### Post date: [22 November 2020 23:57 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/4 "2020-11-22T23:57:09Z")

</div>

It's good now. Thanks!

---

<div class="post-metadata">

### Author: ![Scratchbot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scratchbot/32/31657_2.png) [@Scratchbot](https://discourse.nodered.org/u/Scratchbot)
#### Post date: [25 November 2020 17:53 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/5 "2020-11-25T17:53:35Z")

</div>

When new IOS version? 😀

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [27 November 2020 03:01 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/6 "2020-11-27T03:01:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Scratchbot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scratchbot/32/31657_2.png) [@Scratchbot](https://discourse.nodered.org/u/Scratchbot)
#### Post date: [27 November 2020 12:27 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/7 "2020-11-27T12:27:38Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Scratchbot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scratchbot/32/31657_2.png) [@Scratchbot](https://discourse.nodered.org/u/Scratchbot)
#### Post date: [27 November 2020 23:00 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/8 "2020-11-27T23:00:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [28 November 2020 06:04 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/9 "2020-11-28T06:04:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [29 November 2020 14:30 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/10 "2020-11-29T14:30:37Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Scratchbot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scratchbot/32/31657_2.png) [@Scratchbot](https://discourse.nodered.org/u/Scratchbot)
#### Post date: [29 November 2020 15:58 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/11 "2020-11-29T15:58:30Z")

</div>

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👍

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [30 November 2020 09:54 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/12 "2020-11-30T09:54:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hepcat72](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hepcat72/32/8078_2.png) [@hepcat72](https://discourse.nodered.org/u/hepcat72)
#### Post date: [3 December 2020 14:23 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/13 "2020-12-03T14:23:34Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)
#### Post date: [4 December 2020 02:31 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/14 "2020-12-04T02:31:51Z")

</div>

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

I also submit newest code on [https://github.com/linhtranvu/node-red-app](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](https://www.wireshark.org/docs/man-pages/androiddump.html)

> **[How to capture network traffic from iPhone with tcpdump](https://kalinull.medium.com/how-to-capture-network-traffic-from-iphone-with-tcpdump-acd11e030f08)**
>
> After returning from DefCon I wanted to make sure my iPhone is not communicating with any sketchy servers out there. So decided to run a…

> 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/](https://www.zerotier.com/) for establishing VPN. I also tend to support quick access to zerotier from App in next release

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [21 January 2021 07:02 UTC](https://discourse.nodered.org/t/0-7-1-node-red-client-editor-app-update-wysiwyg-dashboard-editor-30-nov/36308/15 "2021-01-21T07:02:15Z")

</div>

This topic was automatically closed after 60 days. New replies are no longer allowed.
