Pastebin
Retrouvez, créez et partagez vos snippets en temps réel.
Rechercher un Pastebin
Aucun paste trouvé.
Créer un paste
Pastebin
Blog
fqfd
[ { "id": "42aa7c056847c85b", "type": "ui_template", "z": "7db3b30dc762d89d", "group": "6ed62c5740adf91e", "name": "", "order": 2, "width": 30, "height": 6, "format": "<style>\n /* --- THEME BLANC / CLAIR --- */\n .atv-panel {\n font-family: 'Helvetica Neue', Arial, sans-serif;\n background: #ffffff;\n color: #333;\n padding: 15px;\n border-radius: 8px;\n border: 1px solid #e0e0e0;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 2px solid #f0f0f0;\n padding-bottom: 10px;\n margin-bottom: 15px;\n }\n .title { font-weight: 600; color: #555; font-size: 14px; text-transform: uppercase; }\n\n /* Zone Centrale : Vitesse Réelle */\n .lcd-screen {\n background: #f9f9f9;\n border: 1px solid #ddd;\n border-radius: 6px;\n padding: 10px;\n margin-bottom: 20px;\n display: flex;\n flex-direction: column; /* Affichage vertical */\n align-items: center;\n justify-content: center;\n }\n \n /* Ligne Fréquence (Gros) */\n .lcd-main {\n font-family: 'Roboto Mono', monospace;\n font-size: 32px;\n font-weight: bold;\n color: #27ae60;\n line-height: 1.2;\n }\n\n /* Ligne RPM (Plus petit) */\n .lcd-sub {\n font-family: 'Roboto Mono', monospace;\n font-size: 18px;\n color: #7f8c8d; /* Gris bleuté */\n font-weight: 500;\n margin-top: 5px;\n border-top: 1px dashed #ccc; /* Petite séparation */\n padding-top: 5px;\n width: 80%;\n text-align: center;\n }\n\n .unit { font-size: 14px; color: #999; font-weight: normal; }\n\n /* Boutons */\n .controls-row {\n display: flex;\n gap: 12px;\n margin-bottom: 20px;\n }\n .btn-custom {\n flex: 1;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 6px;\n background: #f0f0f0;\n color: #666;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n text-transform: uppercase;\n font-size: 18px;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n }\n\n /* États Actifs */\n .btn-custom.active-green {\n background: #2ecc71; color: white; border-color: #27ae60;\n box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);\n }\n .btn-custom.active-blue {\n background: #3498db; color: white; border-color: #2980b9;\n box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);\n }\n .btn-custom.active-red {\n background: #e74c3c; color: white; border-color: #c0392b;\n box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);\n }\n\n /* Slider */\n .slider-container {\n padding: 10px 0;\n background: #fafafa;\n border-radius: 8px;\n padding: 10px;\n border: 1px solid #eee;\n }\n input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%;\n background: #3498db; cursor: pointer; margin-top: -9px;\n box-shadow: 0 0 5px rgba(0,0,0,0.2);\n }\n input[type=range]::-webkit-slider-runnable-track {\n width: 100%; height: 4px; background: #ddd; border-radius: 2px;\n }\n .slider-infos {\n display: flex; justify-content: space-between; font-size: 20px;\n color: #888; margin-top: 8px; font-weight: 500;\n }\n</style>\n\n<div class=\"atv-panel\">\n \n <div class=\"header\">\n <span class=\"title\">Contrôle Moteur</span>\n <div style=\"width:10px; height:10px; border-radius:50%;\" \n ng-style=\"{'background': status.enable ? '#2ecc71' : '#ccc'}\">\n </div>\n </div>\n\n <div class=\"lcd-screen\">\n <div class=\"lcd-main\">\n {{ displaySpeed }} <span class=\"unit\">Hz (x10)</span>\n </div>\n \n <div class=\"lcd-sub\">\n {{ displaySpeed * 3 }} <span class=\"unit\">tr/min</span>\n </div>\n </div>\n\n <div class=\"controls-row\">\n <button class=\"btn-custom\" \n ng-class=\"{'active-green': status.enable}\" \n ng-click=\"toggleEnable()\">\n {{ status.enable ? 'MARCHE' : 'ARRÊT' }}\n </button>\n\n <button class=\"btn-custom\" \n ng-class=\"{'active-blue': status.forward, 'active-red': !status.forward}\" \n ng-click=\"toggleDirection()\">\n {{ status.forward ? 'AVANT' : 'ARRIÈRE' }}\n </button>\n </div>\n\n <div class=\"slider-container\" style=\"opacity: {{ status.enable ? 1 : 0.5 }}\">\n <input type=\"range\" min=\"0\" max=\"500\" step=\"1\" \n ng-model=\"status.speedRef\" \n ng-change=\"updateSpeed()\"\n ng-disabled=\"!status.enable\">\n \n <div class=\"slider-infos\">\n <span>0</span>\n <span style=\"color:#3498db\">Consigne : {{ status.speedRef }}</span>\n <span>500</span>\n </div>\n </div>\n\n</div>\n\n<script>\n (function(scope) {\n scope.status = scope.status || {\n enable: false,\n forward: true,\n speedRef: 0\n };\n scope.displaySpeed = 0; \n\n // Surveillance des messages pour mettre à jour l'affichage\n scope.$watch('msg', function(data) {\n // Si données reçues (feedback ou chiffre simple), on met à jour l'écran\n if (data && (data.topic === 'feedback' || typeof data.payload === 'number')) {\n scope.displaySpeed = data.payload; \n }\n });\n\n scope.toggleEnable = function() {\n scope.status.enable = !scope.status.enable;\n if(!scope.status.enable) {\n scope.status.speedRef = 0;\n scope.send({ topic: \"set_speed\", payload: 0 }); \n }\n scope.send({ topic: \"set_enable\", payload: scope.status.enable ? 1 : 0 });\n };\n\n scope.toggleDirection = function() {\n scope.status.forward = !scope.status.forward;\n scope.send({ topic: \"set_direction\", payload: scope.status.forward ? \"fwd\" : \"rev\" });\n };\n\n scope.updateSpeed = function() {\n scope.send({ topic: \"set_speed\", payload: parseInt(scope.status.speedRef) });\n };\n\n })(scope);\n</script>", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 800, "y": 1260, "wires": [ [ "4470421be09f5ed2" ] ] }, { "id": "6ed62c5740adf91e", "type": "ui_group", "name": "Main", "tab": "7e77918b2f96f16a", "order": 1, "disp": true, "width": 30, "collapse": false, "className": "" }, { "id": "7e77918b2f96f16a", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false }, { "id": "7bd918e621deac97", "type": "global-config", "env": [], "modules": { "node-red-dashboard": "3.6.6" } } ]
Créé il y a 1 mois.
