Changing "innerHtml" / textContent

[littleyoda]

If you want to show the temperature within the SVG, you have to be able to replace the textContent of svg-Tags

e.g. <text id="out" x="270" y="45" font-size="35" text-anchor="middle">23°</text>

It would be nice to replace the 23° with the current tempature.

[bartbutenaers]

Hi Sven (@littleyoda), That is indeed something that should be added to the next beta release.
Thanks for your feedback!! Bart

[littleyoda]

great ...

In the meantime: My hack to implement this feature:

                                         break;
+                                    case "update_text":
+                                        element.textContent = msg.payload.attributeValue;
+                                        break;
+                                        
                                     case "trigger_animation":
                                         if (element.tagName !== "animate") {

[Steve-Mcl]

This is easily handled and a good spot (surprised I didn't spot that - I guess cos I haven't tried to animate text yet haha)

If you look at the current Dev branch, we are switching on payload.command - in here we can easily handle changing text.

But I had an additional thought. To simplify setting text, we could have an additional way. If the topic is some special format e.g. @update_text#elementId then the payload can simply be the text. The user won't have to create an object before injecting into the node.

This suggestion would be additional to the current payload object / object array method (for multiple operations)

We could extend that special topic method for animations and attributes too perhaps?

Thoughts?

[bartbutenaers]

Steve, when it is an "additional", then it is fine for me!

[Steve-Mcl]

Done in dev branch. It is possible to call update_text in 2 ways.

1 - by topic + payload string (update_text|selector)...

e.g. set #myText text to "hello"

msg.topic = "update_text|#myText"
msg.payload = "hello";

e.g. set every item inside #myGroup with class statusText text to "0"

msg.topic = "update_text|#myGroup > .statusText"
msg.payload = "0";

2 - by control msg

e.g. Update #myTextId setting text to "yey"

msg.payload = {
        "command": "update_text",
        "elementId": "myTextId", //note how elementId does not need (or want) the '#'
        "textContent": "yey"
    }

e.g. set all texts with class titleText to my title

msg.payload = {
        "command": "update_text",
        "selector": ".titleText", //standard dom selector '#' for id, '.' for class etc.
        "textContent": "my title"
    }

e.g. set individual texts on multiple items...

msg.payload = [
  {
        "command": "update_text",
        "selector": ".doorName", //standard dom selector '#' for id, '.' for class etc.
        "textContent": "Door"
  },
  {
        "command": "update_text",
        "selector": "#door1 > text",
        "textContent": "Entry Door"
  },
  {
        "command": "update_text",
        "elementId": "door2_text",  //note how elementId does not need (or want) the '#'
        "textContent": "Exit Door"
  }
]

@bartbutenaers If necessary, we drop elementId in favour of the more flexable selector? I ask because we can achieve the same by using selector = "#elementID"

[bartbutenaers]

@Steve-Mcl , That indeed makes sense! So please drop elementId.

[bartbutenaers]

Implemented in the beta release, that hopefully is released in a couple of days ...