ui improvements
This commit is contained in:
84
index.html
84
index.html
@@ -23,21 +23,33 @@
|
|||||||
|
|
||||||
<div id="app" class="space-y-2 p-3">
|
<div id="app" class="space-y-2 p-3">
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
<div class="border bg-gray-50 p-3 rounded shadow">
|
||||||
<div class="font-bold">RNode Flasher</div>
|
<div class="font-bold">RNode Flasher</div>
|
||||||
<div>Only RAK4631 is supported at this time.</div>
|
<div>Only RAK4631 is supported at this time.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
<div class="mb-1">1. Put device into DFU Mode</div>
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
1. Put device into DFU Mode
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
<button @click="enterDfuMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
<button @click="enterDfuMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
||||||
Enter DFU Mode
|
Enter DFU Mode
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
</div>
|
||||||
|
|
||||||
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
2. Select firmware to flash (.zip)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
|
||||||
<div class="mb-1">2. Select firmware.zip to flash</div>
|
|
||||||
<div class="mb-1">
|
<div class="mb-1">
|
||||||
<input ref="file" type="file"/>
|
<input ref="file" type="file"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -55,11 +67,28 @@
|
|||||||
<div class="h-2 rounded-full bg-blue-600" :style="{ 'width': `${flashingProgress}%`}"></div>
|
<div class="h-2 rounded-full bg-blue-600" :style="{ 'width': `${flashingProgress}%`}"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t px-2 py-1">
|
||||||
|
<div class="text-sm space-x-1">
|
||||||
|
<a target="_blank" href="https://github.com/markqvist/RNode_Firmware/releases" class="text-blue-500 hover:underline">Official Firmware</a>
|
||||||
|
<span>•</span>
|
||||||
|
<a target="_blank" href="https://github.com/liberatedsystems/RNode_Firmware_CE/releases" class="text-blue-500 hover:underline">CE Firmware</a>
|
||||||
|
<span>•</span>
|
||||||
|
<a target="_blank" href="https://github.com/attermann/microReticulum_Firmware/releases" class="text-blue-500 hover:underline">Transport Node Firmware</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
<div class="mb-1">3. Provision EEPROM with device info, checksum and signature.</div>
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
3. Provision EEPROM with device info, checksum and signature.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
|
||||||
<div class="flex mb-1 space-x-1">
|
<div class="flex mb-1 space-x-1">
|
||||||
<div class="min-w-[70px] my-auto text-right">Product</div>
|
<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">
|
<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">
|
||||||
@@ -79,17 +108,33 @@
|
|||||||
Provision
|
Provision
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
</div>
|
||||||
<div class="mb-1">4. Set Firmware Hash, for now it uses what the board knows, will fix later.</div>
|
|
||||||
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
4. Set Firmware Hash, for now it uses what the board knows, will fix later.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
<button @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
<button @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
||||||
Set Firmware Hash
|
Set Firmware Hash
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
</div>
|
||||||
<div class="mb-1">5. Configure TNC Mode</div>
|
|
||||||
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
5. Configure TNC Mode
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
|
||||||
<div class="flex mb-1 space-x-1">
|
<div class="flex mb-1 space-x-1">
|
||||||
<div class="min-w-[125px] my-auto text-right">Frequency (Hz)</div>
|
<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">
|
<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">
|
||||||
@@ -124,10 +169,19 @@
|
|||||||
Disable
|
Disable
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border bg-gray-50 p-3 rounded">
|
</div>
|
||||||
<div class="mb-1">Extra Tools</div>
|
|
||||||
|
<div class="border bg-gray-50 rounded shadow">
|
||||||
|
|
||||||
|
<div class="border-b px-2 py-1">
|
||||||
|
Extra Tools
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
|
||||||
<div class="space-x-1">
|
<div class="space-x-1">
|
||||||
<button @click="detect" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
<button @click="detect" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
|
||||||
Detect RNode
|
Detect RNode
|
||||||
@@ -142,7 +196,11 @@
|
|||||||
Wipe EEPROM
|
Wipe EEPROM
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-sm text-gray-500">EEPROM dumps are shown in dev tools console.</div>
|
<div class="text-sm text-gray-500">EEPROM dumps are shown in dev tools console.</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user