la suite encore gg

<style>
    /* --- DESIGN INDUSTRIEL SOMBRE --- */
    .atv-panel {
        font-family: 'Roboto', sans-serif;
        background: #1e1e1e;
        color: #eee;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #333;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* En-tête avec Status */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #444;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .title { font-weight: bold; color: #aaa; font-size: 14px; }
    
    /* Indicateur de vitesse (Gros chiffres) */
    .lcd-screen {
        background: #000;
        color: #00ff00; /* Vert rétro */
        font-family: 'Courier New', monospace;
        padding: 10px;
        font-size: 24px;
        text-align: right;
        border-radius: 4px;
        border: 2px solid #333;
        margin-bottom: 20px;
        box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
    }
    .unit { font-size: 12px; color: #555; }

    /* Zone des boutons */
    .controls-row {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    /* Style des boutons personnalisés */
    .btn-custom {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #2d2d2d;
        color: #777;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    /* États actifs des boutons */
    .btn-custom.active-green {
        background: #27ae60;
        color: white;
        box-shadow: 0 0 10px rgba(39, 174, 96, 0.6);
    }
    .btn-custom.active-blue {
        background: #2980b9;
        color: white;
        box-shadow: 0 0 10px rgba(41, 128, 185, 0.6);
    }

    /* Slider personnalisé */
    .slider-container {
        position: relative;
        padding: 10px 0;
    }
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        margin-top: -10px;
        box-shadow: 0 0 5px rgba(255,255,255,0.8);
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #555;
        border-radius: 2px;
    }
    /* Slider rempli (effet visuel simple) */
    .slider-label {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #888;
        margin-top: 5px;
    }

    /* LED Indicators */
    .led-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #333;
        margin-bottom: 5px;
    }
    .active-green .led-indicator { background: #fff; }
    .active-blue .led-indicator { background: #fff; }

</style>

<div class="atv-panel">
    
    <div class="header">
        <span class="title">ATV12 CONTROL</span>
        <div style="width:12px; height:12px; border-radius:50%;" 
             ng-style="{'background': status.enable ? '#2ecc71' : '#e74c3c'}">
        </div>
    </div>

    <div class="lcd-screen">
        {{ msg.payload | number:1 }} <span class="unit">Hz (x10)</span>
    </div>

    <div class="controls-row">
        <button class="btn-custom" 
                ng-class="{'active-green': status.enable}" 
                ng-click="toggleEnable()">
            <div class="led-indicator"></div>
            {{ status.enable ? 'ENABLED' : 'DISABLED' }}
        </button>

        <button class="btn-custom" 
                ng-class="{'active-blue': status.forward}" 
                ng-click="toggleDirection()">
            <div class="led-indicator"></div>
            {{ status.forward ? 'FORWARD' : 'REVERSE' }}
        </button>
    </div>

    <div class="slider-container" style="opacity: {{ status.enable ? 1 : 0.4 }}">
        <input type="range" min="0" max="500" step="1" 
               ng-model="status.speedRef" 
               ng-change="updateSpeed()"
               ng-disabled="!status.enable">
        <div class="slider-label">
            <span>0 Hz</span>
            <span>CONSIGNE: {{ status.speedRef }}</span>
            <span>50 Hz</span>
        </div>
    </div>

</div>

<script>
    (function(scope) {
        // Initialisation des états si non définis
        scope.status = scope.status || {
            enable: false,
            forward: true,
            speedRef: 0
        };

        // --- Réception des données (Feedback du PLC) ---
        // On surveille les messages entrants pour mettre à jour l'affichage "Vitesse Réelle"
        scope.$watch('msg', function(data) {
            if (data && data.topic === 'feedback') {
                // Rien à faire de spécial, msg.payload est affiché dans l'écran LCD
            }
        });

        // --- Fonctions de Contrôle ---

        // 1. Gestion ENABLE (Adresse 0)
        scope.toggleEnable = function() {
            scope.status.enable = !scope.status.enable;
            
            // Si on disable, on remet le slider à 0 pour sécurité (optionnel)
            if(!scope.status.enable) {
                scope.status.speedRef = 0;
                scope.send({ topic: "set_speed", payload: 0 }); 
            }

            scope.send({ topic: "set_enable", payload: scope.status.enable ? 1 : 0 });
        };

        // 2. Gestion SENS (Toggle entre FWD et REV)
        scope.toggleDirection = function() {
            scope.status.forward = !scope.status.forward;
            // On envoie un objet pour traiter la logique Adr 1 & 2
            scope.send({ topic: "set_direction", payload: scope.status.forward ? "fwd" : "rev" });
        };

        // 3. Gestion VITESSE (Adresse 5)
        scope.updateSpeed = function() {
            // Envoi de la consigne
            scope.send({ topic: "set_speed", payload: parseInt(scope.status.speedRef) });
        };

    })(scope);
</script>






// Si demande Forward
if (msg.payload === "fwd") {
    return [
        { payload: 1, topic: "write_fwd" }, // Vers Adr 1
        { payload: 0, topic: "write_rev" }  // Vers Adr 2
    ];
} 
// Si demande Reverse
else {
    return [
        { payload: 0, topic: "write_fwd" }, // Vers Adr 1
        { payload: 1, topic: "write_rev" }  // Vers Adr 2
    ];
}
Créé il y a 1 mois.