# Node-red-contrib-blockly 1.0.0 available

**URL:** <https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557>\
**Category:** Share Your Nodes\
**Created:** [25 August 2018 12:46 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557 "2018-08-25T12:46:03Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [25 August 2018 12:46 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/1 "2018-08-25T12:46:03Z")

</div>

Hi folks,

The godfather of all Blockly nodes (alias @cymplecy) has given his blessing to publish version 1.0.0 on NPM. So [here](https://www.npmjs.com/package/node-red-contrib-blockly) it is finally.

@knolleary: I assume you still have to add it manually to the pallette manager index? Thanks for doing that !

Thanks for all feedback and support from the community !

Bugs can be registered on the github repository, and new functionalities or doubts can be discussed here on the forum. The tutorials on the [wiki](https://github.com/bartbutenaers/node-red-contrib-blockly/wiki) need to be reworked in the next week(s), but they give you a first impression already.

Have fun!,  
Bart

---

<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:** [25 August 2018 12:58 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/2 "2018-08-25T12:58:07Z")

</div>

YIPPEE!!!!!! 😀✈

---

<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:** [25 August 2018 13:03 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/3 "2018-08-25T13:03:16Z")

</div>

Great work and an excellent addition to Node-RED. Well done Bart.

---

<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:** [25 August 2018 14:24 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/4 "2018-08-25T14:24:30Z")

</div>

Confirming that it is now available to easily install from the Node-RED Manage palette menu option 🙂

---

<div class="post-metadata">

**Author:** ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)\
**Post date:** [25 August 2018 16:41 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/5 "2018-08-25T16:41:49Z")

</div>

This is a really cool custom node ! I'm trying it right now and I'm impressed ! It's like joining two worlds !  
A suggestion ? Would it be possible to have an expand button like the function node in 0.19.x ?

---

<div class="post-metadata">

**Author:** ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)\
**Post date:** [25 August 2018 16:51 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/6 "2018-08-25T16:51:17Z")

</div>

ok this is maybe a stupid question (I don't know much about blockly) but is there a blockly equivalent to `setTimeout()` and `setInterval()` ?

---

<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:** [25 August 2018 20:30 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/7 "2018-08-25T20:30:59Z")

</div>

> [@tilleul](#):
>
> Would it be possible to have an expand button like the function node in 0.19.x ?

I didn't notice that this has been added in Node-Red v0.19. Indeed I have been wondering from the beginning, if users would have enough space in their Blockly editor. Especially since the blocks take much more space, compared to their Javascript code counterpart.

I assume that nobody is against such a button. If somebody doesn't want to use it, he just don't has to click it 😏. So I like the idea. Just need to know _how it should look like_:

- I assume that such a button needs to be available above both editors (the Blockly editor and the Javascript editor)? And not a single button above the tabsheets somewhere.
- When such a button is pressed, I assume that the tabsheets need to be hidden? Or is the editor expanded inside the tabsheet?

Hopefully I get it managed, because I'm not a CSS expert ...

> [@tilleul](#):
>
> is there a blockly equivalent to `setTimeout()` and `setInterval()` ?

Not yet. I wanted to have timers, but got stuck on a number of [questions](https://discourse.nodered.org/t/announce-visual-programming-a-function-node-with-blockly-feedback-request/1566/45). And afterwards I had some extra [feedback](https://groups.google.com/d/msg/blockly/KFEMJ_EkZuw/x6UvFRnlCwAJ) from the Blockly forum, and had not enough time to experiment with it.

As soon as I have time again, I will make some proposals and discuss them here (by comparing multiple animated gifs). But I would like to have timers soon in this node. Think that a lot of Node-RED users wan't to execute actions on fixed intervals ...

Thanks for the usefull feedback!!  
Bart

---

<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:** [25 August 2018 20:43 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/8 "2018-08-25T20:43:40Z")

</div>

> [@BartButenaers](#):
>
> Hopefully I get it managed, because I'm not a CSS expert ...

You can probably ~~steal appropriate~~ borrow it straight from the function node. Great idea. I'd also missed that tweak, been wanting something like it for a long time.

---

<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:** [25 August 2018 21:01 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/9 "2018-08-25T21:01:03Z")

</div>

@tilleul: I have created an 'enhancement' issue on [Github](https://github.com/bartbutenaers/node-red-contrib-blockly/issues), for the 'expand' button.  
@TotallyInformation: I also registered an issue to create new **list\_push** and **list\_pop** blocks, like you and Simon had proposed.

We will discuss all those issues here, but then at least I have a complete todo list at Github...

---

<div class="post-metadata">

**Author:** ![francescoagati](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/francescoagati/32/2098_2.png) [@francescoagati](https://discourse.nodered.org/u/francescoagati)\
**Post date:** [28 August 2018 08:15 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/10 "2018-08-28T08:15:25Z")

</div>

hi,  
nice work. there is a mode for calling a function or a method object with some params?

---

<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:** [28 August 2018 09:05 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/11 "2018-08-28T09:05:06Z")

</div>

Yes there is - this one will double the value of the msg.payload

 ![GIF](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/011dd1d89664f4d4848682c5305fc809500a42e9.gif)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f89b62f18fa5ad882c47320c72cadcfdb75a1f36.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:** [28 August 2018 21:00 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/12 "2018-08-28T21:00:42Z")

</div>

I have created a new branch on Github for the next 1.1.0 release:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4033e1cfb9957625139d6ef3e4147ba09c211b3a.png)

You can test this experimental version by installing it directly from Github:  
`npm install bartbutenaers/node-red-contrib-blockly#release-1.1.0`

This version contains following changes:

- The **language** dropdown is now triggering code to load the selected language file from the server. And all dropdown values in the custom blocks are now also translated. I have added a dutch translation myself and François (@tilleul) has been so kind to provide a french translation. Other users can translate the [en.js](https://github.com/bartbutenaers/node-red-contrib-blockly/blob/release-1.1.0/messages/en.js) file in their own language, and share it with me (preferably via a pull request).  
 ![blockly_multilanguage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f33c9cb3e3eb33714024838e8efcdb01b7c44954.gif)  
P.S. perhaps later I could set the default language (currently english) to the default language that is being used in Node-RED??

- Julian (@TotallyInformation) and Simon (@cymplecy) had requested a **list-push** and **list-pop** block. When I was testing those blocks, I found out that Google has already provided this functionality:  
 ![blockly_list_pushpop](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c50feef6cf84a5d387c7c5d91c62f94b2afc0720.gif)  
Is it ok if I remove my both new blocks again?

- I added an **expand button** to the Javascript editor, and afterwards I want to add a similar button to the Blockly editor. The expand button works fine, but it displayed at the wrong location. Indeed it is located at the top of the config screen, while I expected it to be at the top of the Javascript editor:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/50accaee674a4149c52ec6ca066c310b1946ca51.png)  
Don't know much about CSS, so don't know what is wrong in my [blockly.html](https://github.com/bartbutenaers/node-red-contrib-blockly/blob/release-1.1.0/blockly.html#L446). Copied to expand button from Node-RED's [function](https://github.com/node-red/node-red/blob/master/nodes/core/core/80-function.html#L13) node:  
`... right:0; bottom:calc(100% + 3px); ...`  
I thought this means that the bottom of the button is 100% of the parent div + 3 pixels. Perhaps my 'resize' function is not good enough. No clue, so would appreciate if somebody could assist me to get this fixed ...

Bart

---

<div class="post-metadata">

**Author:** ![utaani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/utaani/32/102_2.png) [@utaani](https://discourse.nodered.org/u/utaani)\
**Post date:** [29 August 2018 02:27 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/13 "2018-08-29T02:27:16Z")

</div>

I wrote pull request [https://github.com/bartbutenaers/node-red-contrib-blockly/pull/20](https://github.com/bartbutenaers/node-red-contrib-blockly/pull/20) to add Japanese resource.

 ![blockly-japanese](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cd8d70f11b85acbd446726642ea0b22c61069f09.png)

日本語のblocklyを試したい場合は、  
`npm install utaani/node-red-contrib-blockly#utaani-patch-1`  
でできます。

---

<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:** [29 August 2018 07:15 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/14 "2018-08-29T07:15:02Z")

</div>

> [@BartButenaers](#):
>
> Is it ok if I remove my both new blocks again?

Yes

I don't think there is any need to ask if its a feature in the development version - only if its a breaking change in the master branch

---

<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:** [29 August 2018 08:06 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/15 "2018-08-29T08:06:27Z")

</div>

> [@BartButenaers](#):
>
> Julian (@TotallyInformation) and Simon (@cymplecy) had requested a **list-push** and **list-pop** block. When I was testing those blocks, I found out that Google has already provided this functionality:
> 
> Is it ok if I remove my both new blocks again?

Cool, of course - DRTW (Don't reinvent the wheel) 🙂

---

<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:** [29 August 2018 08:19 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/16 "2018-08-29T08:19:45Z")

</div>

> [@BartButenaers](#):
>
> Don't know much about CSS, so don't know what is wrong in my [blockly.html](https://github.com/bartbutenaers/node-red-contrib-blockly/blob/release-1.1.0/blockly.html#L446). Copied to expand button from Node-RED's [function](https://github.com/node-red/node-red/blob/master/nodes/core/core/80-function.html#L13) node:  
> `... right:0; bottom:calc(100% + 3px); ...`  
> I thought this means that the bottom of the button is 100% of the parent div + 3 pixels. Perhaps my 'resize' function is not good enough. No clue, so would appreciate if somebody could assist me to get this fixed ...

Hard to know. I think you are right but then your HTML isn't quite like the function node. For example, you don't have `position:relative` on the parent.

---

<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:** [31 August 2018 08:13 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/17 "2018-08-31T08:13:08Z")

</div>

> [@On another topic](https://discourse.nodered.org/t/2393/54):
>
> But should we have a delete property block in the objects category?

That is indeed a necessary feature. But I haven't added a separate **delete-block**. Instead I have integrated the delete functionality inside the **get-block** , since Google does it also like that in their basic blocks (and I want keep it consistent).

The version 1.1.0 branch on Github now contains a _node\_object\_get_ block with following behaviour:

- You can select '_get_' or '_remove_' from a **dropdown**
- Depending on the selection, the **tooltip** will change
- Depending on the selection, the **shape** of the block will change. For 'get' it will be a '_value_' block (which means it has an output that can be chained to other blocks inputs), and otherwise it will be a '_statement_' block (with a previous and next statement indication).
- Depending on the selection, the **code** will generate a value (without ';\n') or a statement (with ';\n').
- Depending on the **input value** , the generated code will be e.g. '_delete msg['payload']_' or '_flow.set('myVariable')_' (seems that you need to set _NO value_ in the Node-RED memory to delete a variable from that memory ...).

Summarized:  
 ![blockly_delete_property](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/82c1f312b314522f338ada04daaa1cdad456cebe.gif)

P.S. in the animation you see that the blocks sometimes get suddenly another position in the editor. I registered an [issue](https://github.com/bartbutenaers/node-red-contrib-blockly/issues/22) for it, and I will try to solve it as soon as I'm retired one day ...

@tilleul: I had to separate your french translation into parts to allow a dropdown. Are these texts ok?

```auto
Blockly.Msg.NODE_OBJECT_GET_JSON = "%1 %2 la propriété %3";
Blockly.Msg.NODE_OBJECT_GET_JSON_GET_TOOLTIP = "Obtenir la propriété d'un objet.";
Blockly.Msg.NODE_OBJECT_GET_JSON_REMOVE_TOOLTIP = "Supprimer la propriété d'un objet.";
Blockly.Msg.NODE_OBJECT_GET_JSON_GET = "obtenir de";
Blockly.Msg.NODE_OBJECT_GET_JSON_REMOVE = "supprimer de";

```

@utaani: Sorry but splitting the Japanese was a bit to hard for my brain 😩. Could you please translate them for me? Remark: are you aware that **you are allowed that you can rearrange the placeholders**? For example : '_first &1 then &2_' could be in another language (that is being read from left to right) '_&2 then &1 first_'. Blockly knows which widgets needs to be at locations of &1 and &2, and will rearrange them automatically for you.

---

<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:** [31 August 2018 12:20 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/18 "2018-08-31T12:20:45Z")

</div>

Need to train my brain to reach for the blockly node instead of a function node and google (to look up the JavaScript syntax that I can never remember)!

---

<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:** [31 August 2018 12:56 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/19 "2018-08-31T12:56:36Z")

</div>

I've converted nearly all my JSONata and JS nodes (didn't have many of them) to Blockly ones

(Although, to be honest, its is quicker/easier to use JSONata just to pre-fix/append text to a payload)

But I'm trying not to use Blockly for everything but keep to just using standard Node-RED where nothing fancy is required (or use contrib nodes like Simpletime where appropriate)

Otherwise I'd effectively just end up back using the blockly equivalent of my ScratchGPIO for my house #IoT 🙂

---

<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:** [31 August 2018 13:13 UTC](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557/20 "2018-08-31T13:13:21Z")

</div>

I'd probably like to use it for occasions where my memory fails me when I'd normally be writing function nodes. Typically I have a good overview of the logic required and that logic is quite functional.

I've already noticed that Blockly may require some different logic thinking than raw JS. And it needs some expansion still on the blocks such as something that will do "does property x exist in object y" `if ( 'x' in y ) ...`

Then there is the issue of trying to access a deep property such as `msg.payload['Room Name'].Heating` - I haven't managed to work that one out yet.

In case you are wondering, I was trying to covert the following JavaScript logic to Blockly:

```javascript
if ( !('previous' in msg) ) msg.previous = msg.payload

for(let room in msg.payload) {
    if ( msg.payload[room].Heating !== msg.previous[room].Heating ){
        let msg1 = {
            topic:"Room Change",
            payload: {
                change: msg.payload[room].Heating, 
                time: (new Date())
            }
        }
        msg1.payload[room] = msg.payload[room]
        node.send( [null,msg1] )
    }
}

return [msg,null]

```

"room" is a property that may have a space in it.

[Next page](https://discourse.nodered.org/t/node-red-contrib-blockly-1-0-0-available/2557.md?page=2)