From c0f179a018924af41a092f03da74ed60ea9a98c7 Mon Sep 17 00:00:00 2001
From: Joel Wetzell <jwetzell@yahoo.com>
Date: Thu, 17 Feb 2022 20:36:35 -0600
Subject: [PATCH] add color gradient to meters

---
 plugins/x32/styles.css   | 21 +++++++++++++++++++++
 plugins/x32/template.ejs |  6 ++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/plugins/x32/styles.css b/plugins/x32/styles.css
index 88973f4..8282031 100644
--- a/plugins/x32/styles.css
+++ b/plugins/x32/styles.css
@@ -133,3 +133,24 @@ input[type='range']::-webkit-slider-runnable-track {
   font-size: 20px;
   vertical-align: middle;
 }
+
+.meter {
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    rgba(19, 126, 30, 1) 0%,
+    rgba(255, 238, 30, 1) 85%,
+    rgba(255, 0, 0, 1) 100%
+  );
+}
+
+/* need to find a way to match the color of this with the table row */
+.meter-cover {
+  height: 100%;
+  background-color: rgb(22, 23, 25);
+  float: right;
+}
+
+table.cv-table tr:nth-child(odd) td div.meter div.meter-cover {
+  background-color: #292929;
+}
diff --git a/plugins/x32/template.ejs b/plugins/x32/template.ejs
index 8fc7bf8..2ff2db3 100644
--- a/plugins/x32/template.ejs
+++ b/plugins/x32/template.ejs
@@ -36,8 +36,10 @@
     <td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
     <td><%= formatAsDB(data.channelFadersDB[i]) %></td>
     <td>
-      <% let style = `style=height:3px;background-color:green;width:${data.meters[i] + 90}%`; %>
-      <div <%= style %>></div>
+      <% let style = `style=width:${Math.abs(data.meters[i] - 10)}%`; %>
+      <div class="meter">
+        <div class="meter-cover" <%= style %>></div>
+      </div>
       <input
         type="range"
         min="0"