Closed jinx17 closed 4 years ago
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
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!):
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
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.
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.
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">
Same goes for other audio element attributes, like muted, autoplay, loop.
Maybe I missed something? Best regards, Gregor