From ea63ae7f6172380cc0a43c696c6af2ed2de8b487 Mon Sep 17 00:00:00 2001
From: Donne <503124742@qq.com>
Date: Tue, 13 Jun 2023 14:32:02 +0800
Subject: [PATCH 1/2] add slider component

---
 .vscode/settings.json |  3 +++
 blechars.js           | 38 ++++++++++++++++++++++++++++++++++++++
 index.html            | 16 ++++++++++++++++
 style/stylesheet.css  |  6 +++++-
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..0cd037a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 3005
+}
\ No newline at end of file
diff --git a/blechars.js b/blechars.js
index 513256a..afdf062 100644
--- a/blechars.js
+++ b/blechars.js
@@ -79,6 +79,35 @@ let An2Off_value;
 let An3Off_promise;
 let An3Off_value;
 
+// you need write flowing code to buildwebblebtsettings.py
+const $sliderTilt = document.getElementById('slider-tilt');
+const $sliderRoll = document.getElementById('slider-roll');
+const $sliderPan = document.getElementById('slider-pan');
+
+$sliderTilt.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Tlt_Min').val(min).change()
+  $('#inp_Tlt_Cnt').val(cnt).change()
+  $('#inp_Tlt_Max').val(max).change()
+});
+
+$sliderRoll.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Rll_Min').val(min).change()
+  $('#inp_Rll_Cnt').val(cnt).change()
+  $('#inp_Rll_Max').val(max).change()
+});
+
+$sliderPan.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Pan_Min').val(min).change()
+  $('#inp_Pan_Cnt').val(cnt).change()
+  $('#inp_Pan_Max').val(max).change()
+});
+
 function updateFields()
 {
   $("#inp_Rll_Min").val(Rll_Min_value);
@@ -123,18 +152,21 @@ $('#inp_Rll_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Rll_Min').val(), true)
   Rll_Min_promise.writeValue(buffer);
   updateParameter('Rll_Min',$('#inp_Rll_Min').val())
+  $sliderRoll.value1 = $('#inp_Rll_Min').val()
 });
 $('#inp_Rll_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Rll_Max').val(), true)
   Rll_Max_promise.writeValue(buffer);
   updateParameter('Rll_Max',$('#inp_Rll_Max').val())
+  $sliderRoll.value3 = $('#inp_Rll_Max').val()
 });
 $('#inp_Rll_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Rll_Cnt').val(), true)
   Rll_Cnt_promise.writeValue(buffer);
   updateParameter('Rll_Cnt',$('#inp_Rll_Cnt').val())
+  $sliderRoll.value2 = $('#inp_Rll_Cnt').val()
 });
 $('#inp_Rll_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
@@ -147,18 +179,21 @@ $('#inp_Tlt_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Min').val(), true)
   Tlt_Min_promise.writeValue(buffer);
   updateParameter('Tlt_Min',$('#inp_Tlt_Min').val())
+  $sliderTilt.value1 = $('#inp_Tlt_Min').val()
 });
 $('#inp_Tlt_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Max').val(), true)
   Tlt_Max_promise.writeValue(buffer);
   updateParameter('Tlt_Max',$('#inp_Tlt_Max').val())
+  $sliderTilt.value3 = $('#inp_Tlt_Max').val()
 });
 $('#inp_Tlt_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Cnt').val(), true)
   Tlt_Cnt_promise.writeValue(buffer);
   updateParameter('Tlt_Cnt',$('#inp_Tlt_Cnt').val())
+  $sliderTilt.value2 = $('#inp_Tlt_Cnt').val()
 });
 $('#inp_Tlt_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
@@ -171,18 +206,21 @@ $('#inp_Pan_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Pan_Min').val(), true)
   Pan_Min_promise.writeValue(buffer);
   updateParameter('Pan_Min',$('#inp_Pan_Min').val())
+  $sliderPan.value1 = $('#inp_Pan_Min').val()
 });
 $('#inp_Pan_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Pan_Max').val(), true)
   Pan_Max_promise.writeValue(buffer);
   updateParameter('Pan_Max',$('#inp_Pan_Max').val())
+  $sliderPan.value3 = $('#inp_Pan_Max').val()
 });
 $('#inp_Pan_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Pan_Cnt').val(), true)
   Pan_Cnt_promise.writeValue(buffer);
   updateParameter('Pan_Cnt',$('#inp_Pan_Cnt').val())
+  $sliderPan.value2 = $('#inp_Pan_Cnt').val()
 });
 $('#inp_Pan_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
diff --git a/index.html b/index.html
index e10b533..7c564e8 100644
--- a/index.html
+++ b/index.html
@@ -141,6 +141,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Tlt_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Tlt_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-tilt" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Tlt_Gain'></td>
               </tr>
@@ -178,6 +183,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Rll_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Rll_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-roll" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Rll_Gain'></td>
               </tr>
@@ -215,6 +225,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Pan_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Pan_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-pan" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Pan_Gain'></td>
               </tr>
@@ -534,6 +549,7 @@ <h1 class="h2">Settings</h1>
     </div>
 
     <script src="blechars.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>
     <script src="htwebble.js"></script>
   </body>
 </html>
diff --git a/style/stylesheet.css b/style/stylesheet.css
index 2f60388..9fdd540 100644
--- a/style/stylesheet.css
+++ b/style/stylesheet.css
@@ -27,4 +27,8 @@ body {
 
 .rangeTbl input {
     width: 100%;
-}
\ No newline at end of file
+}
+
+.slider {
+  padding: 12px 0;
+}

From 5069f8291120380d4563748acf6ada9cec81295d Mon Sep 17 00:00:00 2001
From: Donne <503124742@qq.com>
Date: Tue, 13 Jun 2023 14:34:34 +0800
Subject: [PATCH 2/2] add slider component

---
 blechars.js          | 38 ++++++++++++++++++++++++++++++++++++++
 index.html           | 16 ++++++++++++++++
 style/stylesheet.css |  6 +++++-
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/blechars.js b/blechars.js
index 513256a..afdf062 100644
--- a/blechars.js
+++ b/blechars.js
@@ -79,6 +79,35 @@ let An2Off_value;
 let An3Off_promise;
 let An3Off_value;
 
+// you need write flowing code to buildwebblebtsettings.py
+const $sliderTilt = document.getElementById('slider-tilt');
+const $sliderRoll = document.getElementById('slider-roll');
+const $sliderPan = document.getElementById('slider-pan');
+
+$sliderTilt.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Tlt_Min').val(min).change()
+  $('#inp_Tlt_Cnt').val(cnt).change()
+  $('#inp_Tlt_Max').val(max).change()
+});
+
+$sliderRoll.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Rll_Min').val(min).change()
+  $('#inp_Rll_Cnt').val(cnt).change()
+  $('#inp_Rll_Max').val(max).change()
+});
+
+$sliderPan.addEventListener('change', (evt) => {
+  console.log(evt.detail.values);
+  let [min, cnt, max] = evt.detail.values
+  $('#inp_Pan_Min').val(min).change()
+  $('#inp_Pan_Cnt').val(cnt).change()
+  $('#inp_Pan_Max').val(max).change()
+});
+
 function updateFields()
 {
   $("#inp_Rll_Min").val(Rll_Min_value);
@@ -123,18 +152,21 @@ $('#inp_Rll_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Rll_Min').val(), true)
   Rll_Min_promise.writeValue(buffer);
   updateParameter('Rll_Min',$('#inp_Rll_Min').val())
+  $sliderRoll.value1 = $('#inp_Rll_Min').val()
 });
 $('#inp_Rll_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Rll_Max').val(), true)
   Rll_Max_promise.writeValue(buffer);
   updateParameter('Rll_Max',$('#inp_Rll_Max').val())
+  $sliderRoll.value3 = $('#inp_Rll_Max').val()
 });
 $('#inp_Rll_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Rll_Cnt').val(), true)
   Rll_Cnt_promise.writeValue(buffer);
   updateParameter('Rll_Cnt',$('#inp_Rll_Cnt').val())
+  $sliderRoll.value2 = $('#inp_Rll_Cnt').val()
 });
 $('#inp_Rll_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
@@ -147,18 +179,21 @@ $('#inp_Tlt_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Min').val(), true)
   Tlt_Min_promise.writeValue(buffer);
   updateParameter('Tlt_Min',$('#inp_Tlt_Min').val())
+  $sliderTilt.value1 = $('#inp_Tlt_Min').val()
 });
 $('#inp_Tlt_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Max').val(), true)
   Tlt_Max_promise.writeValue(buffer);
   updateParameter('Tlt_Max',$('#inp_Tlt_Max').val())
+  $sliderTilt.value3 = $('#inp_Tlt_Max').val()
 });
 $('#inp_Tlt_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Tlt_Cnt').val(), true)
   Tlt_Cnt_promise.writeValue(buffer);
   updateParameter('Tlt_Cnt',$('#inp_Tlt_Cnt').val())
+  $sliderTilt.value2 = $('#inp_Tlt_Cnt').val()
 });
 $('#inp_Tlt_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
@@ -171,18 +206,21 @@ $('#inp_Pan_Min').on('change', function() {
   new DataView(buffer).setUint16(0, $('#inp_Pan_Min').val(), true)
   Pan_Min_promise.writeValue(buffer);
   updateParameter('Pan_Min',$('#inp_Pan_Min').val())
+  $sliderPan.value1 = $('#inp_Pan_Min').val()
 });
 $('#inp_Pan_Max').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Pan_Max').val(), true)
   Pan_Max_promise.writeValue(buffer);
   updateParameter('Pan_Max',$('#inp_Pan_Max').val())
+  $sliderPan.value3 = $('#inp_Pan_Max').val()
 });
 $('#inp_Pan_Cnt').on('change', function() {
   const buffer = new ArrayBuffer(2);
   new DataView(buffer).setUint16(0, $('#inp_Pan_Cnt').val(), true)
   Pan_Cnt_promise.writeValue(buffer);
   updateParameter('Pan_Cnt',$('#inp_Pan_Cnt').val())
+  $sliderPan.value2 = $('#inp_Pan_Cnt').val()
 });
 $('#inp_Pan_Gain').on('change', function() {
   const buffer = new ArrayBuffer(4);
diff --git a/index.html b/index.html
index e10b533..7c564e8 100644
--- a/index.html
+++ b/index.html
@@ -141,6 +141,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Tlt_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Tlt_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-tilt" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Tlt_Gain'></td>
               </tr>
@@ -178,6 +183,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Rll_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Rll_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-roll" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Rll_Gain'></td>
               </tr>
@@ -215,6 +225,11 @@ <h1 class="h2">Settings</h1>
                 <td><input type='number' class='htInputField' min="1258" max="1742" id='inp_Pan_Cnt'></td>
                 <td><input type='number' class='htInputField' min="1770" max="2012" id='inp_Pan_Max'></td>
               </tr>
+              <tr>
+                <td colspan="3" class="slider">
+                  <toolcool-range-slider id="slider-pan" min="988" max="2012" value1="1000" value2="1500" value3="2000" round="0"></toolcool-range-slider>
+                </td>
+              </tr>
               <tr>
                 <td>Gain</td><td colspan="3"><input type='number' class='htInputField' min="988" max="2012" step='0.01' id='inp_Pan_Gain'></td>
               </tr>
@@ -534,6 +549,7 @@ <h1 class="h2">Settings</h1>
     </div>
 
     <script src="blechars.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>
     <script src="htwebble.js"></script>
   </body>
 </html>
diff --git a/style/stylesheet.css b/style/stylesheet.css
index 2f60388..9fdd540 100644
--- a/style/stylesheet.css
+++ b/style/stylesheet.css
@@ -27,4 +27,8 @@ body {
 
 .rangeTbl input {
     width: 100%;
-}
\ No newline at end of file
+}
+
+.slider {
+  padding: 12px 0;
+}