Adding a custom JS to current theme

[Jean-Philippe Encausse]

Hi,

I know there is a theme feature to allow us some customisation.

How can I also include a custom JS file to add some custom features (Yes I know i'll have to keep it up to date with NodeJS changes)

Otherwise, what would be the proper way to include a that JS file ?

Thanks

[Jean-Philippe Encausse]

A better explanation,

- My node is a Message of a chatbot. It has :

- a title, 

- a subtitle, 

- an image 

- and buttons.

So I would love to display these informations in a custom node template.

To do that, I was thinking at injecting these fields throught the label() function of my node. But it does't work because Node-RED do it's jobs and strip all my <tags>. 

I also was thinking at a JS function bind onClick on the node icon to update the loook&feel if my node but it's hard.

So my improved question:

- Can I inject more fields in the DOM of a Node ?

- So that I would be able in CSS to L&F to look like Facebook Messenger field

- I would love to be able to inject editable <text> so that user may update the texte inline

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/JMQgDj2pe-E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/048a362e-56e2-4f37-b159-d96f92616118%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Jean-Philippe Encausse - R&D / Innovations / Geek
Jp [at] encausse.net - http://www.encausse.net - http://arm-avocats.fr/
GTalk: jp.encausse [at] gmail.com - Twitter: @JpEncausse - ٩(̾●̮̮̃̾•̃̾)۶
Mob: +33 6 82 12 56 99  - Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once ~ May the 4th be with you

[Nicholas O'Leary]

Hi,

the only hook we provide to customise a node is its edit dialog.

Ben's geofence node (https://github.com/hardillb/node-red-node-geofence) includes an example of pulling in an external .js file for the functionality in its edit dialog.

Any other sort of customisation of the node appearance or behaviour (custom click actions) is not something we support. You may find ways to hack in your behaviour, but it hasn't been designed to work like that.

Nick

You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CABRZxMyMKeN4ALWA%2BGw-Vo_pp%2BhFpXtK%3DWF84dHmcwCFnA-%2Bhg%40mail.gmail.com.

[Dave C-J]

The editor is not meant to be the main ui for a user app. To clarify do you mean customization of the editor or the dashboard ?

[Jean-Philippe Encausse]

The editor is not meant to be the main ui for a user app. To clarify do you mean customization of the editor or the dashboard ?

I mean customization of the editor

I will use the dashboard for dashoard purpose.

--

Jean-Philippe Encausse - R&D / IoT / Innovations http://www.encausse.net - http://arm-avocats.fr Twitter: @JpEncausse - Mob: +33 6 82 12 56 99

[Dave C-J]

No problem, the description of a chatbot sounded like a user ui type thing. So. As per Nick reply... Answer is no :-)

[Jean-Philippe Encausse]

I understand it's not standard, I'll try a little hack,

For a deeper explanation:

When you made a ChatBot, or a complex flow, sometimes you need to see the "big picture". 

That's exactly the purpose of Mind Maps. You don't want to click / hover each node to see "what's inside".

In Node-RED we only have a little label (thats great for managing lots of nodes) but you can see the overall. So using the editor for chatbot I need 2 features:

1. Search / Highlight the node with the property matching a given value

2. "Expand nodes" to use my eyes to see my properties

On Thu, Sep 29, 2016 at 5:10 PM, Dave C-J <dce...@gmail.com> wrote:

No problem, the description of a chatbot sounded like a user ui type thing. So. As per Nick reply... Answer is no :-)

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/JMQgDj2pe-E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CACXWFw%2BH3mzyVQoxMqAv6Tqf2aPvfLjbAzOuwiBFn7-ns3ztXA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Dave C-J]

See Nick's latest video - some search coming soon.

http://g.recordit.co/snle8iIkfr.gif

[Jean-Philippe Encausse]

Hi,

So I did a little hack of Node-RED nodes to display Facebook Messenger Card with main Nodes properties (sorry it's a french screenshot):

So how it works ?

- I have a JavaScript in my custom node that will update the DOM:

$(document).ready(function() {

        setTimeout(function(){

            repaintAll();

        },1)

 })

The replaintAll() will target all the <div> with the labelStyle class:

var repaintAll = function(){

    $(document).find('.bot-card-name').each(function(idx, elm){

        repaint($(elm).closest('.nodegroup'));

    })

}

Then I will 

1. Inject a foreignObject (to add some HTML)

2. hide the nodeIcon

3. resize the node rect

Parts of the code: 

var repaint = function($node){

    var nodeId      = $node.attr('id');

    var nodeRED  = RED.nodes.node(nodeId);

    var nodeD3     = d3.select($node[0]);

    var html = ...

    // Insert HTML Shim

    var shim = $node.find('.bot-shim');

    if (!shim.exists()){ 

        // First Repaint

        shim = nodeD3.insert("foreignObject",":first-child")

                     .attr('class', 'bot-shim')

                     .attr('x', 0).attr('y', 0)

                     .attr('width',  cardWidth).attr('height', cardHeight)

    }

    // Repaint HTML

    shim.html('<div class="bot-card">'+html+'</div>')

   // Resize

    $node.find('.node').first().attr("width", cardWidth).attr("height", cardHeight);

    

    // Outputs

    $node.find('.port_output').each(function(){

        var $this = $(this);

        var tY =  /translate\(\d+,(\d+)\)/.exec($this.attr("transform"))[1];

        $this.attr("transform", "translate("+( cardWidth-5 )+","+( tY )+")")

    });

}

How to Improve ?

- I really like the hook using a foreignObject because it doesn't break the Node-RED Editor.

- It's really cool to display all properties so that I can do CTRL+F in my browser

But it's a real pain to hack Editor events, for instance I have to trap node events (it's not enought):

 var $anchor = $node.find('.node').first();

 $anchor.attr("fill-opacity","0")

             .on("mousedown",  function(){ repaint($node) })

             .on("mouseup",    function(){ repaint($node) })

             .on("touchstart", function(){ repaint($node) })

             .on("touchend",   function(){ repaint($node) })

It would be great to have a "repaint" Node-RED event triggered by the editor.

On Thu, Sep 29, 2016 at 5:28 PM, Dave C-J <dce...@gmail.com> wrote:

See Nick's latest video - some search coming soon.

http://g.recordit.co/snle8iIkfr.gif

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/JMQgDj2pe-E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CACXWFwKkZWzzGueJqKMXyGDE3NzMYQwdKanMt0NfxUs0x-K1cA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Jean-Philippe Encausse]

A bonus "trick" I'd like to find is to add content-editable to the cards (but it's trap by drag and drop)

[Julian Knight]

It looks like the button you add to the tab would severly limit the number of tabs, also how does it handle it when you get too many tabs?

If you put the toggle in the edit interface, although you would then have to turn each one on/off individually, you'd have more control and a bit more room to fit a button.

[Jean-Philippe Encausse]

On Mon, Oct 3, 2016 at 10:12 PM, Julian Knight <j.kni...@gmail.com> wrote:

It looks like the button you add to the tab would severly limit the number of tabs, also how does it handle it when you get too many tabs? 

If you put the toggle in the edit interface, although you would then have to turn each one on/off individually, you'd have more control and a bit more room to fit a button.

Yes it just a test, I only need one button to toggle current view

Actually everything is refreshed onLoad (I don't use the button) but I will improve that