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

**URL:** https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063
**Category:** Share Your Projects
**Created:** [10 October 2020 18:22 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063 "2020-10-10T18:22:11Z")
**Posts on this page:** 20
**Page:** 2

<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: [13 October 2020 12:28 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/21 "2020-10-13T12:28:19Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c8bb30b686f5502c5fd417e539ad54af7143e8ac.gif)  
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

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [13 October 2020 13:24 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/22 "2020-10-13T13:24:11Z")

</div>

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](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.

---

<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: [13 October 2020 13:28 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/23 "2020-10-13T13:28:51Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [13 October 2020 15:59 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/24 "2020-10-13T15:59:33Z")

</div>

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.

---

<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: [13 October 2020 17:52 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/25 "2020-10-13T17:52:45Z")

</div>

@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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/537b48ec1f019a81e373f8ce0ef0e1d2bba433b5.jpeg)

---

<div class="post-metadata">

### Author: ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [13 October 2020 18:06 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/26 "2020-10-13T18:06:38Z")

</div>

> [@linhtranvu](#):
>
> I know both of you want to recommend me to use Blynk as mobile app, instead of writing something new, _which could be considered as "re-invent the wheel"._

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. 🙂

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [13 October 2020 18:25 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/27 "2020-10-13T18:25:32Z")

</div>

> [@linhtranvu](#):
>
> I made some fix

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.

---

<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: [14 October 2020 16:53 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/28 "2020-10-14T16:53:40Z")

</div>

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

 ![z2126353876572_732a146ee54041162adeab1b619d593d](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc2cc5d7bf3ee2ae883b8859e966ea2e360af3bb.jpeg)  
 ![latlong](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f08ceea9b83b010efd412ca9cce9cf12eb4189de.png)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [14 October 2020 18:27 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/29 "2020-10-14T18:27:31Z")

</div>

> [@linhtranvu](#):
>
> with tool to auto create Location Node.

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

 ![app](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f04d2bdf7596bbc3cc22f4c37f896c46c7039077.png)

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?

---

<div class="post-metadata">

### Author: ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)
#### Post date: [14 October 2020 18:30 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/30 "2020-10-14T18:30:12Z")

</div>

Crazy project ... I love it 😀

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!

---

<div class="post-metadata">

### Author: ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [14 October 2020 20:44 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/31 "2020-10-14T20:44:10Z")

</div>

Sounds like a bad case of feature creep. 🙂

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.

---

<div class="post-metadata">

### Author: ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)
#### Post date: [14 October 2020 20:47 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/32 "2020-10-14T20:47:58Z")

</div>

😌

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".

---

<div class="post-metadata">

### Author: ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [14 October 2020 20:56 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/33 "2020-10-14T20:56:46Z")

</div>

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

---

<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: [14 October 2020 23:37 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/34 "2020-10-14T23:37:48Z")

</div>

@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

---

<div class="post-metadata">

### Author: ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)
#### Post date: [15 October 2020 06:17 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/35 "2020-10-15T06:17:31Z")

</div>

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

---

<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: [15 October 2020 08:56 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/36 "2020-10-15T08:56:05Z")

</div>

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

---

<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: [16 October 2020 11:12 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/37 "2020-10-16T11:12:13Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/519b3e51f28bffdfcbcfa8cef225955a4a5253b0.gif)

---

<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: [18 October 2020 10:12 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/38 "2020-10-18T10:12:13Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9efc9047883acc9ef99884ac3ae2008ea89be9e1.png)

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [18 October 2020 10:41 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/39 "2020-10-18T10:41:58Z")

</div>

> [@linhtranvu](#):
>
> 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

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

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [18 October 2020 14:44 UTC](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063/40 "2020-10-18T14:44:05Z")

</div>

> [@linhtranvu](#):
>
> Release 0.0.2 today, features

Problems with the new release on Android;

When running the app I get this error -

 ![error2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e6d53c2c6dc11b3cd81475f10966bba853d256e.png)

(and yes, I allowed location permission)

followed by -

 ![error3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d601b7c71b7b0d79fdd4558c19afe15a6540cdb.png)

and then I get continual pop-ups -

 ![url](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/3670813998d0a3972e1995c0d3d8f09107789fb6.png)

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.

[Previous page](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063.md?page=1)

[Next page](https://discourse.nodered.org/t/0-5-release-on-play-app-store-a-mobile-client-for-node-red-dashboard-and-admin-update-09nov/34063.md?page=3)
