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

Share Your Nodes
1

Hi folks,

A few weeks ago this discussion got my attention, especially since I had never heard about Google's Blockly framework before. So I tried to integrate Blockly into Node-Red, to allow users to create function nodes graphically (without having to know the Javascript programming language)...

On my readme page you can find an explanation, and an animated gif that shows the drag-and-drop editor in action!

It can be installed directly from my github account (since it is not published on NPM yet):

npm install bartbutenaers/node-red-contrib-blockly

Would be great to get 'constructive' feedback about lots of stuff:

  • Is the documentation clear, especially for users that are not very experienced with programming.
  • I have created a number of custom blocks, to provide access to the Node-Red function node API. Did I forget to implement some available Node-Red functionality?
  • Would appreciate if somebody could do some testing. I have already spend so much time on this contribution, that I wake up in the middle of night, screaming and being hunted by millions of Blockly blocks ...
  • Issues can be registered here, or in my Github repository.
  • When closing the node's config screen ('Done' button) a TypeError occurs in the browser console:
    image
    This is not blocking but inconvenient... Does anybody know if this is Node-Red coding, or Blockly coding. Not clear to me at the moment how to solve this.
  • There is a language dropdown, but currently only English is supported yet in my node!
  • I see often questions - on the Node-Red forum - about creating timers in Javascript (using setInterval and clearInterval). Blockly doesn't support this, since they run there code in JsInterpreter (which can be controlled externally) instead of in a sandbox (like the function node). So I tried to implement some custom blocks to help the users in those situations (see 'timer' category). For example:
    image
    Which generates the following Javascript code:
    image
    This code works fine! However the timer should also be cleared automatically (I assume or not ???) when a new input message arrives or at a deploy or ... Does anybody has some thoughts about how to handle this? Was thinking about appending all the timers to an array, and cleaning automatically all the timers in the array. All help is appreciated!
  • A custom block has been added to get some information about the node (i.e. node.id and node.name). However that will only work from Node-Red version 0.19 and above. Should I get somehow the Node-Red version and hide those options if not available yet?
  • Others ... ???

Have fun with it !!
Bart

5 Likes
2

Looks very interesting :slight_smile:

I can't work out how to alter the msg.payload

Could you give a simple example e.g Add 1 to the incoming numeric payload or concatenate " World" to a "Hello" payload?

Simon

1 Like
3

Thanks Walter,

Here is a Blockly scheme to append "Node-Red" to the payload of an input message that contains "Hello":

image

  1. Start point is the input message
  2. Get the payload from that input message
  3. Create a text containing both the payload and "Node" "-" "Red" (I changed the properties of this block via image to have more text inputs).
  4. Set the payload of the input message to the appended text
  5. See previous point
  6. The input message now contains our text in the payload field
  7. Send this updated input message to the first output

Here is an animation to demonstrate how I implemented your example:

blockly_hello_nodered

Glad that you asked your question, because other users will have the same kind of problems. I really hoped that my new node would be a bit more self explaining, but probably not :scream:

Do you have any suggestions how to solve this? Should I add something to the documentation. Should I add some more examples (in combination with an animated gif) ?

Bart

4

Thanks for the example - I can see now how to alter a message going thru

The one you did that alters nodes status is quite advanced for a beginner :slight_smile:

I wonder if you should use "msg" and not "message" to be consistent with normal Node-RED naming ?

2 Likes
5

How about this for a simple starting example

image
image.png1240Ă—446 21.8 KB

6

Ok - starting to get my brain working now :slight_smile:
Maybe "input message" should just say "msg" (in keeping with normal Node-RED convention)

1 Like
7

And instead of using "property name" as default property - set it to "payload"
(I edited this to correct my error)

8

Hmm, think you are right... Interesting thoughts. Perhaps I can do the following:

  • Show your basic animated gif on the readme file, as an introduction (since the node is aimed at users less experienced with programming). The current animation was added to show how I tried to integrate Blockly completely into Node-Red, by adding my own blocks...

  • Add to the readme file a series of links to advanced examples, which directs you to other pages where I can show more advanced examples to do specific stuff

  • Your proposal of using "msg" instead of "input message" is indeed something I have been considering myself in the last weeks... But since the other nodes also use a more textual description, I had chosen the full text. What do other people prefer ???

    image

  • About making the default 'payload' could be logic, if we assume that most of the time an 'object' means a Node-Red message. But it can be any kind of Javascript objects (e.g. some object that somebody has stored on his flow memory). Any ideas from others on this one?

9

I think msg is more consistent with the Node-RED function block you are emulating. (Also you already have clone msg)

Also we do generally expect the payload to be the default, and allow change from there. I would expect things to just work to start with.

Finally I would move the language select down to the right of the number of outputs select to save space.

10

Great work. Shame the original never got updated.

https://www.npmjs.com/package/node-red-qnap-blockly

11

Hi guys,

was hoping you would join the discussion :zipper_mouth_face:

@dceejay :

  • Msg is indeed more consistent, but thought that a non-developer profile would be more happy with "input message" ...
  • Ok I will try to set the default property name to "payload", even though the Javascript objects aren't always messages ...
  • Makes sense to move the language dropdown. No argue against it ...

@TotallyInformation

Thanks for the compliment! Since you had shared the qnap-blockly link with me, I was 'very' fascinated by the Blockly technology. Thought it could be a great help for many starters in Node-Red. Shame on you ! You have wasted almost all of my free evenings last weeks, developing this node :rofl:

First wanted to start from the qnap-blockly node, but it works entirely differently. From the node's config screen, it directs you to the Google's Blockly demo application (running locally):

image

In that demo application you can draw your blocks, and generate the result in different programming languages. I also don't think there haven't been developed any custom blocks to talk to the Node-Red API.

Since my concept was entirely differently (i.e. integrating Blockly entirely inside Node-Red), I started a new contribution from scratch instead of contributing to the qnap-blockly node ...

Bart

1 Like
12

I will change the id in my node, so it can be used together with the qnap-blockly node. To avoid this:

14 Jul 14:10:50 - [warn] ------------------------------------------------------
14 Jul 14:10:50 - [warn] [node-red-qnap-blockly/blockly] 'Blockly' already registered by module node-red-contrib-blockly
14 Jul 14:10:50 - [warn] ------------------------------------------------------
13

No problem! Glad to waste your evenings :smile: Had that done to me so I know what it is like. Unfortunately, currently most of my evenings are spent crashed out due to heavy daytime workload. :persevere:

In fact, I'm always happy to see people promoting visual programming interfaces of any type and I've always thought that Node-RED and Blockly complement each other nicely. I've also been having a quick play with Microsoft's visual programming interface for the BBC Micro:Bit recently after my daughter cleared hers out of her room, similar to Blockly. I think all of them are based around the original MIT Scratch that I know @cymplecy is very into.

I saw that the existing node was starting another server but didn't know how it was working. Your version seems a much better interface anyway & a better fit for NR.

Now, if you could just do something similar with JSONata, that would be nice for people. :wink:

14

As a slight aside, for anyone interested, you can use Blockly or similar to programme microprocessors too:

There are a few others too.

There is also a Google library for creating block-based programming interfaces

As a post-script, if you want to programme microprocessors using JavaScript instead of C++, you could also try out MongooseOS which has a free community version.

15

Julian, I have no time for extra contributions at the moment, but you (again) made me curious. Is there already a visual editor available for Jsonata, that could be integrated in Node-Red (don't assume you mean try.jsonata.org). Or are you talking about a Blockly based solution, based on a new series of custom blocks dedicated to JSonata? Or others ? Perhaps you could open a new discussion and explain there what you like to achieve! Perhaps I have time to implement something in 2035 or later :sunglasses:

16

Haha! Indeed.

No, nothing exists as yet...

But JSONata is complex for beginners and would certainly benefit from something. A Blockly style visual tool for manipulating JSON data would be fantastic. But well beyond my skills to come up with something like that. Still, we can always hope that some great brain will chip in. Maybe Dave can circulate the idea with IBM colleagues to see if any of their brains can think of something.

1 Like
17

I don’t mind (too much) about msg vs input. As long as its consistent, and it makes sense when you “read” across the blocks on the page

18

Hi folks,

This contribution is messing up my entire schedule... Have been solving meanwhile a large series of issues. A new test version is now available on Github, for those who want to experiment with it.

The biggest change in the user interface, are the changes I made on Mark Friedman's blocks to get/set an object property (see 'JSON' category in the toolbox). For example:

image

In the original block a fixed property name (e.g. 'payload') had to be specified. On the new version of this block the propertyname is specified via another block. This allows the users to change the property name dynamically by composing the property name in all kind of other blocks.

I have not updated the readme file yet with new example movies, since those UI changes made my existing movies obsolete. I will add the extra example movies in the next weeks, as soon as the UI is stable.

All 'constructive' feedback is still welcome ...
Bart

19

I'm trying this

image
image.png761Ă—180 8.53 KB

image

but getting this error

image

20

Getting same error with simpler example

image
image.png743Ă—83 4.38 KB

image