remove attribute

[jinx17]

Hi. very nice work with this node! Thank you!

When using html5 audio embedded in SVG, I can not remove attribute from AUDIO. It is possible to add attribute (ie. controls attribute) with _setattribute command, but if I want to remove it, this can not be done.

If I understand correctly, embedded audio element only checks if attribute name is present or not, and acts accordingly.

What I mean is: if attribute "controls" is present, audio element displays controls. So it is not working when using "controls=true" or "controls=1", it only checkes if attribute name is present or not, so boolean value "true/false" or "1/0" do not have any function.

Therefore, the only way to control this

Example - this settings don't provide controls on web page:

Example - with attribute "controls" (withoud value!) web page provides also controls for audio: <audio id="Audio_player" controls style="margin:0px">

    </audio>

Same goes for other audio element attributes, like muted, autoplay, loop.

Maybe I missed something? Best regards, Gregor

[bartbutenaers]

Hi Gregor (@jinx17 ), We haven't yet added any functionality to remove attributes yet, because we also need e.g. to remove bindings (when specified in the config screen( between an input message field and that element attribute). So a bit more work as you might expect. We have to make sure that everything keeps working.

The audio "controls" indeed works like you describe. But all the options you describe, I think you already need to have eliminate those from the start (i.e. the shouldn't be mentioned anyway in your svg), instead of removing those afterwards. Or not for some reason? Bart

[jinx17]

Hi Bart, thanks for your clarification. Yes, I didn't mention any of these options in svg, but I would love to bind some of this options to an input message, so I can control audio element through node-red (ie. I would like to mute and unmute sound, based on input message - so I can use it as audiable alarm). I can set property (with input message: {"command": "set_attribute", "selector": "#Alarm_zvok_player","attributeName": "controls"}), which I want to remove later, but I can't do it.

Maybe an idea as a possible workaround (please know I am not a programmer at all, so these ideas might be stupid!):

• if it would be possible to change innerHTML with input message, maybe the whole element could be added/removed?
• if it would be possible to set methods of element with input messages (audio element has several methods, like: play, pause, mute, controls
• I successfully added script to header (based on one of the examples for full screen), and I can use button to control audio element (play/pause, for example, with javascript binded to the button), but I can not find a way to use input message in node-red to programmatically (virtually) click this button. I thing script is using audio elements "method", not "attributes". Below is code in a template node in node-red

  
  function Play_sound() {     
      debugger
      var player = document.getElementById("Alarm_zvok_player");    //zvok = sound :) in Slovenian language
      player.controls = true;       //display controls of audio element
      if (document.getElementById("Alarm_zvok_player").paused) {   //check if player is paused
          $("#Alarm_zvok_player").trigger("play")    // play a sund in audio element
      } else {
          $("#Alarm_zvok_player").trigger("pause")   //stop playing sound in audio element
      }
  }

setTimeout(function(){ debugger $(".header_bar").click(Play_sound); //click on a header bar starts or stopps playing sound }, 400)

Best regards,
Gregor

[bartbutenaers]

Ok now I understand. But I "think" you are abusing the svg node. It is indeed possible to add non-svg elements inside the svg (although that will not work on all browsers). But in fact you should use a Node-RED Template node, where you can add html, css and javascript. And it also supports input and output messages.

[bartbutenaers]

Hi Gregor, Not sure if you still need this feature, but I have implemented it on the "panzoom" branch on Github (which will be the next 2.0.0 release of this node). Not on npm yet, so you can install it (in your node-red folder) directly from Github if you want to play with it:

npm install bartbutenaers/node-red-contrib-ui-svg#panzoom"

I have added a demo on the Node-RED forum.