lele

<style>
    /* --- THEME BLANC / CLAIR --- */
    .atv-panel {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        background: #ffffff; /* Fond Blanc */
        color: #333;         /* Texte Sombre */
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* Ombre douce */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .title { font-weight: 600; color: #555; font-size: 14px; text-transform: uppercase; }

    /* Zone Centrale : Vitesse Réelle */
    .lcd-screen {
        background: #f9f9f9; /* Gris très clair */
        color: #27ae60;      /* Vert pour la valeur */
        font-family: 'Roboto Mono', monospace;
        padding: 15px;
        font-size: 32px;     /* Plus gros */
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        transition: color 0.3s;
    }
    .unit { font-size: 14px; color: #999; font-weight: normal; }

    /* Boutons */
    .controls-row {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }
    .btn-custom {
        flex: 1;
        padding: 14px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #f0f0f0;
        color: #666;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* États Actifs */
    .btn-custom.active-green {
        background: #2ecc71;
        color: white;
        border-color: #27ae60;
        box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
    }
    .btn-custom.active-blue {
        background: #3498db;
        color: white;
        border-color: #2980b9;
        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
    }

    /* Slider */
    .slider-container {
        padding: 10px 0;
        background: #fafafa;
        border-radius: 8px;
        padding: 10px;
        border: 1px solid #eee;
    }
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #3498db;
        cursor: pointer;
        margin-top: -9px;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
    }
    .slider-infos {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #888;
        margin-top: 8px;
        font-weight: 500;
    }
</style>

<div class="atv-panel">
    
    <div class="header">
        <span class="title">Contrôle Moteur</span>
        <div style="width:10px; height:10px; border-radius:50%;" 
             ng-style="{'background': status.enable ? '#2ecc71' : '#ccc'}">
        </div>
    </div>

    <div class="lcd-screen">
        {{ displaySpeed }} <span class="unit">Hz (x10)</span>
    </div>

    <div class="controls-row">
        <button class="btn-custom" 
                ng-class="{'active-green': status.enable}" 
                ng-click="toggleEnable()">
            {{ status.enable ? 'MARCHE' : 'ARRÊT' }}
        </button>

        <button class="btn-custom" 
                ng-class="{'active-blue': status.forward}" 
                ng-click="toggleDirection()">
            {{ status.forward ? 'AVANT' : 'ARRIÈRE' }}
        </button>
    </div>

    <div class="slider-container" style="opacity: {{ status.enable ? 1 : 0.5 }}">
        <input type="range" min="0" max="500" step="1" 
               ng-model="status.speedRef" 
               ng-change="updateSpeed()"
               ng-disabled="!status.enable">
        
        <div class="slider-infos">
            <span>0</span>
            <span style="color:#3498db">Consigne : {{ status.speedRef }}</span>
            <span>500</span>
        </div>
    </div>

</div>

<script>
    (function(scope) {
        // Initialisation variables
        scope.status = scope.status || {
            enable: false,
            forward: true,
            speedRef: 0
        };
        scope.displaySpeed = 0; // Variable séparée pour l'affichage central

        // --- RECEPTION DU FEEDBACK (Vitesse Réelle) ---
        // On surveille les messages entrants. 
        // Si le topic est "feedback", on met à jour l'écran central.
        scope.$watch('msg', function(data) {
            if (data && data.topic === 'feedback') {
                scope.displaySpeed = data.payload; 
            }
        });

        // --- ACTIONS ---
        scope.toggleEnable = function() {
            scope.status.enable = !scope.status.enable;
            // Sécurité : Remise à zéro consigne si arrêt
            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 });
        };

        scope.toggleDirection = function() {
            scope.status.forward = !scope.status.forward;
            scope.send({ topic: "set_direction", payload: scope.status.forward ? "fwd" : "rev" });
        };

        scope.updateSpeed = function() {
            // Envoi de la consigne (topic set_speed)
            // Note: On n'attend pas de feedback pour mettre à jour le slider, 
            // il suit le doigt de l'utilisateur immédiatement.
            scope.send({ topic: "set_speed", payload: parseInt(scope.status.speedRef) });
        };

    })(scope);
</script>
Créé il y a 1 mois.