add ui to configure tnc mode values

index.html

@@ -29,7 +29,7 @@
     </div>
 
     <div class="border bg-gray-50 p-3 rounded">
-        <div>1. Put device into DFU Mode</div>
+        <div class="mb-1">1. Put device into DFU Mode</div>
         <button @click="enterDfuMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Enter DFU Mode
         </button>
@@ -37,7 +37,7 @@
 
     <div class="border bg-gray-50 p-3 rounded">
 
-        <div>2. Select firmware.zip to flash</div>
+        <div class="mb-1">2. Select firmware.zip to flash</div>
         <div class="mb-1">
             <input ref="file" type="file"/>
         </div>
@@ -59,7 +59,7 @@
     </div>
 
     <div class="border bg-gray-50 p-3 rounded">
-        <div>3. Provision EEPROM with device info, checksum and signature.</div>
+        <div class="mb-1">3. Provision EEPROM with device info, checksum and signature.</div>
         <div class="flex mb-1 space-x-1">
             <div class="min-w-[70px] my-auto text-right">Product</div>
             <select v-model="selectedProduct" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-2 pr-8">
@@ -82,14 +82,40 @@
     </div>
 
     <div class="border bg-gray-50 p-3 rounded">
-        <div>4. Set Firmware Hash, for now it uses what the board knows, will fix later.</div>
+        <div class="mb-1">4. Set Firmware Hash, for now it uses what the board knows, will fix later.</div>
         <button @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Set Firmware Hash
         </button>
     </div>
 
     <div class="border bg-gray-50 p-3 rounded">
-        <div>5. Configure TNC mode: frequency, bandwidth, tx power, spreading factor, coding rate</div>
+        <div class="mb-1">5. Configure TNC Mode</div>
+        <div class="flex mb-1 space-x-1">
+            <div class="min-w-[125px] my-auto text-right">Frequency (Hz)</div>
+            <input v-model="configFrequency" type="number" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2">
+        </div>
+        <div class="flex mb-1 space-x-1">
+            <div class="min-w-[125px] my-auto text-right">Bandwidth</div>
+            <select v-model="configBandwidth" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-2 pr-8">
+                <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
+            </select>
+        </div>
+        <div class="flex mb-1 space-x-1">
+            <div class="min-w-[125px] my-auto text-right">Tx Power (dB)</div>
+            <input v-model="configTxPower" type="number" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2">
+        </div>
+        <div class="flex mb-1 space-x-1">
+            <div class="min-w-[125px] my-auto text-right">Spreading Factor</div>
+            <select v-model="configSpreadingFactor" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-2 pr-8">
+                <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
+            </select>
+        </div>
+        <div class="flex mb-1 space-x-1">
+            <div class="min-w-[125px] my-auto text-right">Coding Rate</div>
+            <select v-model="configCodingRate" class="min-w-[250px] bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-2 pr-8">
+                <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
+            </select>
+        </div>
         <div class="space-x-1">
             <button @click="enableTncMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
                 Enable
@@ -101,7 +127,7 @@
     </div>
 
     <div class="border bg-gray-50 p-3 rounded">
-        <div>Extra Tools</div>
+        <div class="mb-1">Extra Tools</div>
         <div class="space-x-1">
             <button @click="detect" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
                 Detect RNode
@@ -125,6 +151,7 @@
     Vue.createApp({
         data() {
             return {
+
                 isFlashing: false,
                 flashingProgress: 0,
 
@@ -147,6 +174,40 @@
                     },
                 ],
 
+                configFrequency: 917375000,
+                configBandwidth: 125000,
+                configTxPower: 17,
+                configSpreadingFactor: 8,
+                configCodingRate: 5,
+                RNodeInterfaceDefaults: {
+                    bandwidths: [ // bandwidth in hz
+                        7800, // 7.8 kHz
+                        10400, // 10.4 kHz
+                        15600, // 15.6 kHz
+                        20800, // 20.8 kHz
+                        31250, // 31.25 kHz
+                        41700, // 41.7 kHz
+                        62500, // 62.5 kHz
+                        125000, // 125 kHz
+                        250000, // 250 kHz
+                        500000, // 500 kHz
+                    ],
+                    codingrates: [
+                        5, // 4:5
+                        6, // 4:6
+                        7, // 4:7
+                        8, // 4:8
+                    ],
+                    spreadingfactors: [
+                        7,
+                        8,
+                        9,
+                        10,
+                        11,
+                        12,
+                    ],
+                },
+
             };
         },
         mounted() {
@@ -554,11 +615,11 @@
 
                 // configure
                 console.log("configuring");
-                await rnode.setFrequency(917375000);
+                await rnode.setFrequency(this.configFrequency);
-                await rnode.setBandwidth(500000);
+                await rnode.setBandwidth(this.configBandwidth);
-                await rnode.setTxPower(22);
+                await rnode.setTxPower(this.configTxPower);
-                await rnode.setSpreadingFactor(8);
+                await rnode.setSpreadingFactor(this.configSpreadingFactor);
-                await rnode.setCodingRate(5);
+                await rnode.setCodingRate(this.configCodingRate);
                 await rnode.setRadioStateOn();
                 console.log("configuring: done");