# Use of scriptable (iOS) with node-red (via JSON)

**URL:** <https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216>\
**Category:** Share Your Projects\
**Created:** [5 May 2021 12:32 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216 "2021-05-05T12:32:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [5 May 2021 12:32 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216/1 "2021-05-05T12:32:15Z")

</div>

Hello together,

some time ago I encountered the nice functionality of "scriptable for iOS" and asked myself, if there was a way to show the most important keyfigures from my node-red dashboard (like battery level, gas capacity etc.) - You must know that I am living on a boat, so some of the figures are essential.

I wanted to have a solution where I don´t need to open my dashboard and login every time, but have the necessary data on my iPhone display just when I look at it.

Therefore I checked the web to see if there is already any implementation of node-red in combination with scriptable, but I didn´t find anything. Ok, time to build something myself ... 🙂

Finally I created a scriptable-script and a node-red implementation, which is relatively easy to use and I would like to share it with you. This is my very first gitHub project, feel free to check out my implementation on [https://github.com/rankerson/node-red-scriptable](https://github.com/rankerson/node-red-scriptable).

Cheers  
Ranki

Current features are:  
The script can process several types of data like text, numbers (will be rounded), switches (with different possibilities like SFSymbols) and circles (e.g. to show a level indicator). You can show SFSymbols related to a status or the symbol itself. The data is cached in case the connection is lost.

I attached some examples ...

 ![node-red-scriptable-medium](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/4725f16b173e819672e50573699c05f9dc28ab77.jpeg)  
 ![node-red-scriptable-small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f10d2d91c700ceb1d5d0300affd3a764871d48d.jpeg)  
 ![node-red-scriptable-medium_v104](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38bb80d54aabbbfa44457415872787f85c682e3a.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 May 2021 14:35 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216/2 "2021-05-05T14:35:49Z")

</div>

Interesting.

[node-red-scriptable/node-red-integration.js at node-red · rankerson/node-red-scriptable (github.com)](https://github.com/rankerson/node-red-scriptable/blob/node-red/node-red-integration.js) appears to be a JSON file? If so, it probably would be less confusing to rename it with a .json extension rather than .js?

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [5 May 2021 14:52 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216/3 "2021-05-05T14:52:48Z")

</div>

Hi there,

you are right; I changed it and now there is a json 🙂

Same would fit for the ioswidget-file, but I keep it with this; maybe I adapt it in the next release as the filename is part of the settings in the code.

Thank you for the hint!

Cheers  
Sascha

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [7 May 2021 10:05 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216/4 "2021-05-07T10:05:25Z")

</div>

Hello together,

I wanted to edit my original post to include another user example, but this seems not to work. I attached it here now.

Cheers  
Ranki

![node-red-scriptable-medium_v104_2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e9fd30de7d5dc073348f006cb3bd238e1fe29ff.png)

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [13 May 2021 16:54 UTC](https://discourse.nodered.org/t/use-of-scriptable-ios-with-node-red-via-json/45216/5 "2021-05-13T16:54:46Z")

</div>

Hi folks,

I just released an update of the «scriptable script» including a (hopefully) better to read node-red integration.

This are the relase notes, if you are interested:

**Version 1.05 (13.05.2021)**

- typos corrected
- introduced general possibility to transfer color information in data.color
- changed structure in SFSymbol from data.SFSymbol\_Color to data.color (but downside compatible)
- enabled possibility to determ color of circle filling
- switch to use dark mode added
- code resturctured a little bit in order to have all settings at the top
- optimized node-red example

I hope you enjoy this enhancement - I really do appreciate your comments and thoughts!

Cheers  
Ranki

_The "Hello world" example for release v1.05:_

 ![node-red-scriptable-medium_v105](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd38c8b81309e9f07e3f036f833643a9d8627ec3.jpeg)