aggiunti meter

static/index.html

@@ -82,6 +82,21 @@
             background: linear-gradient(to top, #4ade80, #facc15 85%, #ef4444 95%);
             transition: height 0.05s linear; /* Transizione fluida */
         }
+
+        .ha-gain-badge {
+            font-family: monospace;
+            font-size: 9px;
+            font-weight: bold;
+            padding: 1px 4px;
+            border-radius: 3px;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 2px;
+        }
+        .ha-gain-low    { background: #1e3a5f; color: #60a5fa; }
+        .ha-gain-mid    { background: #1a3a1a; color: #4ade80; }
+        .ha-gain-high   { background: #3a1a00; color: #fb923c; }
+        .ha-gain-danger { background: #3a0a0a; color: #f87171; }
     </style>
 </head>
 
@@ -137,6 +152,13 @@
                         {{ fader.name }}
                     </div>
 
+                    <div v-if="activeTab === 'channel' && fader.ha_gain !== null"
+                        class="ha-gain-badge"
+                        :class="haGainClass(fader.ha_gain)"
+                        :title="`HA Gain: +${fader.ha_gain} dB`">
+                        +{{ fader.ha_gain }} dB
+                    </div>
+
                     <button @click="toggleOn(fader.id, fader.on)"
                         class="w-full h-10 rounded border-b-4 mb-6 font-bold text-sm transition-all"
                         :class="fader.on ? 'btn-on' : 'btn-off'">ON</button>
@@ -285,7 +307,7 @@
                         const id = item.channel || item.mix || item.dca || item.id;
                         const isDragging = this.draggingFaders[id];
                         const displayDb = isDragging ? this.localLevels[id] : (item.level_db === -Infinity || item.level_db <= -120 ? -120 : item.level_db);
-                        return { id: id, name: item.name, on: item.on, level_db: displayDb, slider_pos: dbToSlider(displayDb) };
+                        return { id: id, name: item.name, on: item.on, level_db: displayDb, slider_pos: dbToSlider(displayDb), ha_gain: item.ha_gain ?? null };
                     });
                 },
                 currentMixMaster() {
@@ -380,6 +402,13 @@
                     } else {
                         this.ws.send(JSON.stringify({ action: 'set_on', type: type, id: id, value: !currentState }));
                     }
+                },
+                haGainClass(gain) {
+                    if (gain === null || gain === undefined) return 'ha-gain-low';
+                    if (gain < 20) return 'ha-gain-low';
+                    if (gain < 40) return 'ha-gain-mid';
+                    if (gain < 55) return 'ha-gain-high';
+                    return 'ha-gain-danger';
                 }
             }
         }).mount('#app');