J'ai un code javascript dans un nœud de modèle en node-red, ce code est une simple barre de progression. C'est assez facile d'exécuter la fonction javascript le bouton du code html, mais j'aimerais exécuter le code quand un payloadarrive... et ensuite j'aimerais envoyer un nouveau payloadquand widthest égal à 95...
Mon idée est d'exécuter ce code : msg.payload === 0 ? move() : ''à exécuter move()lorsque my payloadest égal à 0. Mais je n'ai aucune idée de l'endroit où l'écrire.
Ensuite, j'ai essayé d'attribuer la valeur 1 à my payloadlorsque witdh est égal à 95 mais ne fonctionne pas... bien sûr, je n'utilise pas la bonne syntaxe.. Un peu perdu pour interagir avec ce templatenœud dans node-red.
<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"> </div>
</div>
<p id="msg"> </p>
<button onclick="move()">Click Me</button>
<br>
<script>
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var message = document.getElementById("msg");
var width = 100;
var id = setInterval(frame, 100);
function frame() {
if (width <= 0) {
clearInterval(id);
i = 0;
} else {
width = width - 1;
elem.style.width = width + "%";
elem.textContent = width;
if (width == 95) {
message.textContent = "forcez";
{payload: 1};
}
}
}
}
}
</script>
</body>
Peut-être le savez-vous déjà, mais permettez-moi de le répéter ici car beaucoup de gens ne le savent pas ou l'ont oublié.
Votre flux Node-RED s'exécute en tant qu'application Node.js sur un serveur (back end).
Le code JavaScript à l'intérieur des balises de script s'exécute dans le navigateur.
Le code dans le navigateur ne peut pas directement lire un message depuis ou envoyer un message au ui_template dans le runtime.
(a) Envoi d'un message du runtime au code exécuté dans le navigateur.
La solution enveloppe votre fonction autour de cette fonction :
(function(scope){
scope.$watch('msg',function(){
...
})
})(scope)
(b) envoyer un objet du code exécuté dans le navigateur au runtime.
L'objet de portée a une fonction d'envoi qui peut être utilisée pour envoyer un message depuis le nœud ui_template dans le runtime.
Vous souhaitez utiliser cette instruction : scope.send(msg), par exemple : scope.send({topic : "topic", payload : "payload"})
Dans votre cas particulier, vous devrez ajouter ces lignes au code dans le ui_template
<script>
(function(scope) {
// $watch fires each time the node is triggered in the flow
scope.$watch('msg', function(msg) {
if (msg.payload == 0) {
move();
}
});
.............
})(scope);
</script>
également
if (width == 95) {
message.textContent = "forcez";
scope.send({payload:"warning: width 95"});
}
Quelques autres modifications peuvent être nécessaires pour votre flux d'échantillons, par exemple une protection pour éviter qu'il ne s'exécute deux fois lorsque le ui_template reçoit une nouvelle charge utile alors qu'il est encore en train de décompter.
Voici une tentative d'implémentation de ces modifications dans votre exemple de code :
[{"id":"dba00648.b7f6d8","type":"tab","label":"Flow 12","disabled":false,"info":""},{"id":"4cc372c7.58d5ac","type":"ui_template","z":"dba00648.b7f6d8","group":"5af14c6e.d86604","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<style>\n#myProgress {\n width: 100%;\n background-color: #ddd;\n}\n\n#myBar {\n width: 100%;\n height: 30px;\n background-color: #4CAF50;\n}\n</style>\n<body>\n\n\n<div id=\"myProgress\">\n <div id=\"myBar\"> </div>\n</div>\n <p id=\"msg\"> {{msg.payload}} </p>\n \n\n\n<br>\n\n\n<script>\n\n(function(scope) {\n // $watch fires each time the node is triggered in the flow\n scope.$watch('msg', function(msg) {\n if (msg.payload == 0) {\n move();\n }\n });\n\nvar i = 0;\nfunction move() {\n if (i == 0) {\n i = 1;\n var elem = document.getElementById(\"myBar\");\n var message = document.getElementById(\"msg\");\n message.textContent = \"start\";\n var width = 100;\n var id = setInterval(frame, 100);\n \n function frame() {\n if (width <= 0) {\n clearInterval(id);\n i = 0;\n } else {\n width = width - 1;\n elem.style.width = width + \"%\";\n elem.textContent = width;\n if (width == 95) {\n \tmessage.textContent = \"forcez\";\n \tscope.send({payload:\"warning: width 95\"});\n \n }\n \n }\n }\n }\n}\n\n})(scope);\n</script>\n\n</body>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":240,"wires":[["9779fd5e.1d736"]]},{"id":"9779fd5e.1d736","type":"debug","z":"dba00648.b7f6d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":240,"wires":[]},{"id":"dde1582.3b84ca8","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":240,"wires":[["4cc372c7.58d5ac"]]},{"id":"72ccb344.ed011c","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":280,"wires":[["4cc372c7.58d5ac"]]},{"id":"5af14c6e.d86604","type":"ui_group","z":"","name":"Compte à rebours","tab":"7560e5e8.ee7dfc","order":3,"disp":true,"width":"6","collapse":false},{"id":"7560e5e8.ee7dfc","type":"ui_tab","z":"","name":"Préhension SELFIT","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
Les références:
https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a
Comment stocker un msg.payload dans une variable de script à l'intérieur d'un nœud ui_template red ?
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots