# \[ANNOUNCE\] Visual programming a function node with Blockly - Feedback request

**URL:** <https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566>\
**Category:** Share Your Nodes\
**Created:** [13 July 2018 22:33 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566 "2018-07-13T22:33:30Z")\
**Posts on this page:** 20\
**Page:** 8

<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:** [17 August 2018 19:52 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/142 "2018-08-17T19:52:03Z")

</div>

> [@cymplecy](#):
>
> The issue is not for those suffering from withered brain cells

Hmm, thought so (background sound of scotch being poured, glugging sound and deep sigh of contentment!)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [17 August 2018 20:33 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/143 "2018-08-17T20:33:15Z")

</div>

I'm thinking this issue may take up a lot of time to get right

So I propose just scrapping option of using multiple outputs for the moment and re-introduce them later

In the meantime, if an advanced users wants multiple outputs, then could simply set a flow context (say called whichOutput) and use a switch node following the Blockly node to do the actual switching dependant on value of flow.whichOutput

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/992486ea31cabd0909046c4406b4ef1150c09230.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fc84723bdd917d8ce57a68c2b09ee1bc66809da0.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/156e8f3bad05afe55a5bb84f5a3a1968f51e70fe.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:** [17 August 2018 21:22 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/144 "2018-08-17T21:22:02Z")

</div>

Hi Julian (@TotallyInformation),

I'm back at home, after consuming some lovely Belgian beers. So don't believe everything I'm saying at the moment 🙄

> [@TotallyInformation](#):
>
> Maybe someone could drop in an example flow to illustrate the issue?

Will try to explain the issue, like I always explain such things to an audience suffering from melted brains...

- Below the Blockly editor you can define the number of output ports (similar to a function node):

- In the send-block you can specify to which of those available outputs you want to send the message. In the **first version** this was a numeric input field:

- However in a **later version** I changed the numeric input field by a an input that allows any block that returns a number. For example:

This is not what I want, so I want to get back to the first version (with the numeric input field). That works fine and the user can also do some advanced stuff with it.

> [@TotallyInformation](#):
>
> One small thing about code style - you seem to have a lot of back-ticks rather than the single quotes (or double if including escaped control characters) I would generally use - is there a reason for that? I'm not sure if there is a performance or other impact from only using back-ticks?

Now it is your turn to give an example of what you mean ...

> [@cymplecy](#):
>
> I'm thinking this issue may take up a lot of time to get right  
> So I propose just scrapping option of using multiple outputs for the moment and re-introduce them later

I think that the version (with a numeric input field) is very usable, so we should introduce it already in the first release of the blockly node. In the second release (together with timer support) we could add another EXTRA send-block, e.g. based on your array.

Keep in mind that I have already spend more than 6 weeks al my free evenings to this node. And my holiday ends this weekend, so from next week I will have even less time available. And I have still a lot of other Node-RED related stuff on my todo list, so I cannot postpone to much blockly stuff to the next release. Hope you can understand that.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [17 August 2018 21:30 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/145 "2018-08-17T21:30:55Z")

</div>

> [@BartButenaers](#):
>
> I think that the version (with a numeric input field) is very usable, so we should introduce it already in the first release of the blockly node.

OK

But don't try and do anything else for the moment 🙂

Lets get this ship launched! 🙂

---

<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:** [17 August 2018 21:42 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/146 "2018-08-17T21:42:38Z")

</div>

> [@BartButenaers](#):
>
> Belgian beers

Nice. Though the consumption of scotch on this end may not add clarity to my melted brain output!

> [@BartButenaers](#):
>
> This is not what I want, so I want to get back to the first version (with the numeric input field). That works fine and the user can also do some advanced stuff with it.

Right, so why not have an outputNumber block that can only be 1 to the number set? Once the user has set the number of outputs and blurred away from the input, it is available to you (as the node author) via JQuery. Now you've eliminated one of your potential errors. The user of the node cannot select an invalid output node number. Doesn't that help? Certainly would make it easier for novice users I think?

> [@BartButenaers](#):
>
> Now it is your turn to give an example of what you mean ...

OK, I re-read your code and it seems as though the scotch _is_ actually helping because I can see that you are using template literal features in some cases (e.g. embeded variables that you want evaluated inside the string). But not in other cases. I'm a little anal about such things and I would use simple strings unless I needed something more.

Your code:

```javascript
    var code = `if(${functionName}(${outputNumber})) {\n`;
    code += ` node.send([${outputArray}]);\n`;
    code += `}\n`;

```

My anal code:

```javascript
    var code = `if(${functionName}(${outputNumber})) {\n`;
    code += ` node.send([${outputArray}]);\n`;
    code += "}\n";

```

The other potential problem back-ticks AKA "[Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)" is that they are very new feature in JavaScript and likely wont work for one of those hangouts using an old version of Node.JS - it was first introduced into the JS spec in 2016 I think. Not sure what version of Node.JS it was implemented. However, people should be using at least Node v8.x which does support them so that shouldn't be an issue.

Just ignore me.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [18 August 2018 08:28 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/147 "2018-08-18T08:28:18Z")

</div>

I've just noticed that the `set msg` block defaults to null value

I think it should default to an empty string (like property field but empty)

It wouldn't affect advanced users but would be better for beginners as the null concept would not be familiar to them

Simon

---

<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 August 2018 08:57 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/148 "2018-08-18T08:57:24Z")

</div>

Hi guys, I have not much time today due to a birthdate party at home. Will get in touch tomorrow! But please keep posting meanwhile

> [@cymplecy](#):
>
> I think it should default to an empty string (like property field but empty)

Ok, sounds logical.

> [@TotallyInformation](#):
>
> Right, so why not have an outputNumber block that can only be 1 to the number set

That could be a solution, but I can make it even simpler by replacing my numeric input by a dropdown that only shows available port numbers. Problem with both solutions is that the user can decrement the number of available outputs afterwards anyway. But it is better as a nuleric input ...

> [@TotallyInformation](#):
>
> I'm a little anal about such things and I would use simple strings

Indeed since you say that it is not available in older nodejs versions, I need to replace them by strings.  
And yes you are completely right that code has become quite messy. It became much bigger as I original planned. Got code from the blockly forum, from Gist, ... All with their own flavours. Have started a large refactoring yesterday evening, but still lot of work. But it is starting to look better already (code wise)...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 August 2018 09:24 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/149 "2018-08-18T09:24:33Z")

</div>

re set `msg` to empty - (I'm not fully up to speed on this but) ... is that msg itself ? or msg.payload ? ... setting msg to null is valid (meaning don't send anything) - setting msg to "" will break things as it needs to be an object.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [18 August 2018 09:37 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/150 "2018-08-18T09:37:42Z")

</div>

Wrong language used ☹

I meant the value field of the property of the set msg block not the msg itself 🙂

(@BartButenaers knew what I meant - he's learnt my version of English very well 🙂 )

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [18 August 2018 12:03 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/151 "2018-08-18T12:03:31Z")

</div>

[FINAL NOTE TO SELF]

I MUST NOT MAKE ANY MORE COMMENTS AT ALL

(unless I feel the universe may end if I don't)

🙂

---

<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:** [21 August 2018 20:21 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/152 "2018-08-21T20:21:57Z")

</div>

Hi guys,

There is now a new version on Github available, to implement the extensive feedback that I received.

Took a bit longer as expected, since my holidays are over ( 😭 ) , and had some major issues with Blockly. The code of my custom blocks has been **refactored heavily** : hopefully I didn't introduce changes/bugs in the looks of the blocks and the code they generate. Did a lot of testing, but you never know ... @TotallyInformation: now at least the code is more consistent.

An overview of what has changed in the new version:

- In all the code generators, the **template literals** have been replaced by simple strings (to support older NodeJs versions).
- All block definitions are converted from javascript to **JSON format**. Blockly allows you to write custom blocks as JSON or as Javascript, and since I'm a developer I used Javascript. However that becomes very difficult to understand, when multiple inputs are being used. Moreover the JSON format is 'much' better for multi-language support (see next point).
- This JSON format allowed me to create a separate **en.js file** , containing all custom blocks text in the english language:

```auto
Blockly.Msg.NODE_LOG = "log text %1 with %2 level";
Blockly.Msg.NODE_LOG_TOOLTIP = "Log via the Node-Red function API.";
Blockly.Msg.NODE_MSG = "msg";
Blockly.Msg.NODE_MSG_TOOLTIP = "Get the Node-Red input message.";
Blockly.Msg.NODE_REMOVE_STATUS = "remove node status";

```

This way users can start creating pull-requests to translate the custom blocks in their preferred language.  
Similar to the basic blocks (from Google), which are already available in _ **43 languages** _.
- The send-message block input now only allows type ' **Object**', to avoid that users e.g. send a string instead of an object containing a string.
- Some code generators generated a tab ( \t ) to represent **indentations**. Now all indentations are _two spaces_, since all basic blocks (from Google) do it that way. I wanted to avoid a mix of spaces and tabs.
- To use the semantic versioning, the version has been changed to 1.0.0 (and @cymplecy has become official contributor in my package.json file 🎀 )
- I changed color of Blockly node from #F888AC to #FFAAAA to match the standard Node-Red colours. Simon also suggested to use #FDDOA2 (like the function node), but I think the world is already grey enough...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a916f569ffe1236c80d8c69f92aa34a371d62669.png)
- The set-property block has now external inputs (see screenshot in next bullet), a request of Simon.
- The set-property block had by default a null value, which is now replaced by an empty string:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/aafdcd9576527723c680bd99f56a2c1a582f1adb.png)
- The numeric input for output number has been replaced by a dropdown, containing all available output numbers (so a user cannot be mistaken). The dropdown is immediately updated, when the number of outputs will be changed (see animation in next bullet).
- When changing the number of outputs, a (non-blocking informative) popup message will appear when higher output numbers are still in use:  
 ![blockly_output_check](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0839da7b95495ce6b189670b7a547ea451ad7ff1.gif)

**TODO** : Simon asked to move the property-get and property-set blocks (from Object category) to the Node-RED category:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/84d7bea676ac3eaf060843471a08248d58f473a8.jpeg)  
Not sure whether to do this or not. Others have an opinion about this request??

All constructive feedback is welcome !!  
Bart

P.S. I will pause documenting the node, since the numbers of changes is still rather high at the moment.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [21 August 2018 20:38 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/153 "2018-08-21T20:38:50Z")

</div>

> [@BartButenaers](#):
>
> Simon asked to move the property-get and property-set blocks (from Object category) to the Node-RED category:

... as they are likely to be the most used blocks and they are what NodeRED is all about 🙂

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [21 August 2018 20:43 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/154 "2018-08-21T20:43:03Z")

</div>

Just updating then I'll see if anything breaks with what I've already coded up

Simon

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [21 August 2018 20:53 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/155 "2018-08-21T20:53:24Z")

</div>

> [@BartButenaers](#):
>
> I changed color of Blockly node from #F888AC to #FFAAAA to match the standard Node-Red colours.

1st comment - at least I can now take my sunglasses off when editing 🙂

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [21 August 2018 21:06 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/156 "2018-08-21T21:06:48Z")

</div>

1st test passed 🙂  
My most complex flow that uses using Blockly works fine - the only block that needed re-editing was the status one - they had all lost whatever was in the text slot - but all good now 🙂

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5fb77607b2bcc49204c9175a240e2e4b8d418c6e.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:** [21 August 2018 21:09 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/157 "2018-08-21T21:09:13Z")

</div>

> [@cymplecy](#):
>
> ... as they are likely to be the most used blocks and they are what NodeRED is all about 🙂

Must admit that Simon has - most of the time 🙄 - good reasons to request some stuff, so I should have added the reason-why in my post ...

> [@cymplecy](#):
>
> My most complex flow that uses using Blockly works fine - the only block that needed re-editing was the status one - they had all lost whatever was in the text slot - but all good now

I tried to keep the field names unchanged, to avoid corrupting your existing test flows. But some might have been changed, if I had no other choice ...

> [@BartButenaers](#):
>
> Moreover the JSON format is 'much' better for multi-language support

For people that like to know a bit more in detail how Blockly works, here is a quick explanation of what I mean. For example let's have a look at how to layout following custom block:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e4499926cf2c4831d967a4cdf7dd83e76cbac15a.png)

- The first way to implement this, is using **Javascript** :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8ca90f3f980c3ff8b5ba84a8f6bae73f0638f30c.png)  
Not very easy to read, and moreover the text is splitted across 3 appenField method calls. So our sentence is splitted, and not available as a whole...

- The second way to implement this, is using **JSON** :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a15fbf0787dec646ea27657c4f5ac2f0656ab134.png)  
So we start with the sentence as a whole, containing 3 placeholders (%1, %2, %3). In those placeholders, Blockly will automatically add one of the 3 widgets (text input, color picker, dropdown). It could be in other languages that the sentence will be entirely different, having the placeholders at different locations (e.g. xxx %3 yyy %1 zzz %2). The major advantage of JSON is that Blockly will _ **automatically rearrange the widgets** _ to fit the translated text (dropdown, text input, color picker).

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [21 August 2018 21:32 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/158 "2018-08-21T21:32:36Z")

</div>

I'm having issues with my NodeRED -\> Scratch flow that uses buffers but I'm not sure its actually due to an issue with Blockly - it might be an issue with the TCP node itself (I hadn't tested the flow out since upgrading to 0.19 )

I've been up a long time (airport transfers early this morning so I'll try checking it out in more detail tomorrow as brains is frazzled now

---

<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:** [22 August 2018 08:20 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/159 "2018-08-22T08:20:10Z")

</div>

I have to say a big "great work"! This has come a long way in a short time. Looking forward to people getting their hands on it, should be interesting to see how they might use it.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [22 August 2018 12:05 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/160 "2018-08-22T12:05:34Z")

</div>

> [@cymplecy](#):
>
> I'm having issues with my NodeRED -\> Scratch flow that uses buffers but I'm not sure its actually due to an issue with Blockly

its not a Blockly issue so all OK there

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [22 August 2018 12:28 UTC](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/161 "2018-08-22T12:28:22Z")

</div>

All existing Blocky nodes are working fine - as said before only the status block needed re-editing

I'll try use Blockly to replace some standard node combinations just to make sure its working OK

[Previous page](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566.md?page=7)

[Next page](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566.md?page=9)