Merge pull request #19 from pkendall64/drop-custom-config

Allow a user to drag-n-drop a custom JSON on the header
ExpressLRS · Sep 10, 2023 · 5a751c3 · 5a751c3
2 parents 07968f6 + 1526d50
commit 5a751c3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 10 deletions.
diff --git a/src/index.html b/src/index.html
@@ -14,10 +14,10 @@
 
 <body>
     <div class="display--none" id="safariErr">
-        <p align="center" style="color:red">This tool is not supported on Safari browser!</p>
+        <p style="text-align: center; color:red">This tool is not supported on Safari browser!</p>
     </div>
     <header class="mui-appbar mui--z1 mui--text-center elrs-header">
-        <div class="mui-container-fluid">
+        <div id="custom-drop" class="mui-container-fluid">
             <table width="100%">
                 <tr>
                     <td width="100px">

diff --git a/src/js/configure.js b/src/js/configure.js
@@ -193,7 +193,22 @@ export class Configure {
       const list = []
       const version = document.getElementById('version').value
       const folder = `firmware/${version}`
-      const hardwareLayoutFile = await this.#fetch_file(`${folder}/hardware/${deviceType}/${config.layout_file}`, 0)
+
+      var hardwareLayoutData
+      if (config.custom_layout) {
+        hardwareLayoutData = this.#bstrToUi8(JSON.stringify(config.custom_layout))
+      } else {
+        const hardwareLayoutFile = await this.#fetch_file(`${folder}/hardware/${deviceType}/${config.layout_file}`, 0)
+        if (config.overlay === undefined) {
+          hardwareLayoutData = hardwareLayoutFile.data
+        } else {
+          hardwareLayoutData = this.#bstrToUi8(JSON.stringify({
+            ...JSON.parse(this.#ui8ToBstr(hardwareLayoutFile.data)),
+            ...config.overlay
+          }))
+        }
+      }
+
       if (config.platform === 'esp32') {
         list.push(this.#fetch_file(firmwareUrl.replace('firmware.bin', 'bootloader.bin'), 0x1000))
         list.push(this.#fetch_file(firmwareUrl.replace('firmware.bin', 'partitions.bin'), 0x8000))
@@ -204,13 +219,6 @@ export class Configure {
       }
 
       const files = await Promise.all(list)
-      if (config.overlay === undefined) {
-        config.overlay = {}
-      }
-      const hardwareLayoutData = this.#bstrToUi8(JSON.stringify({
-        ...JSON.parse(this.#ui8ToBstr(hardwareLayoutFile.data)),
-        ...config.overlay
-      }))
       var logoFile = { data: new Uint8Array(0), address: 0 }
       if (config.logo_file !== undefined) {
         logoFile = await this.#fetch_file(`${folder}/hardware/logo/${config.logo_file}`, 0)

diff --git a/src/js/index.js b/src/js/index.js
@@ -254,6 +254,7 @@ function initialise () {
     selected = false
   }
   versionSelect.onchange()
+  initFiledrag()
 }
 
 versionSelect.onchange = async () => {
@@ -812,3 +813,64 @@ function abortHandler (event) {
     html: event.target.responseText
   })
 }
+
+// Allow dropping of JSON file on "Next" button
+
+function fileDragHover(e) {
+  e.stopPropagation()
+  e.preventDefault()
+  if (e.type == 'dragenter')
+    e.target.classList.add('hover')
+  else
+    e.target.classList.remove('hover')
+}
+
+async function fileSelectHandler(e) {
+  fileDragHover(e)
+  const files = e.target.files || e.dataTransfer.files
+  for (let i = 0, f; f = files[i]; i++) {
+    parseFile(f)
+  }
+}
+
+async function parseFile(file) {
+  const reader = new FileReader()
+  reader.onload = async function(e) {
+    const customLayout = JSON.parse(e.target.result)
+    SwalMUI.select({
+      title: 'Select device type to flash',
+      inputOptions: [
+        'ESP32 2.4GHz TX',
+        'ESP32 2.4GHz RX',
+        'ESP32 900GHz TX',
+        'ESP32 900GHz RX',
+        'ESP8285 2.4GHz TX',
+        'ESP8285 2.4GHz RX',
+        'ESP8285 900GHz TX',
+        'ESP8285 900GHz RX',
+      ]
+    }).then((p) => {
+      var v = p.value
+      const platform = (v<4) ? 'esp32' : 'esp8285'
+      selectedModel = {
+        product_name: "Custom Target",
+        lua_name: "Custom",
+        upload_methods: (v%2 === 0) ? ["uart", "etx", "wifi"] :["uart", "betaflight", "wifi"],
+        platform: platform,
+        firmware: `Unified_${platform.toUpperCase()}_${((v/2)%2)===0 ? '2400' : '900'}_${(v%2 === 0) ? 'TX' : 'RX'}`,
+        custom_layout: customLayout
+      }
+      typeSelect.value = `${(v%2 === 0) ? 'tx' : 'rx'}_${((v/2)%2)===0 ? '2400' : '900'}`
+      deviceNext.onclick(e)
+    })
+  }
+  reader.readAsText(file)
+}
+
+function initFiledrag() {
+  const filedrag = _('custom-drop')
+  filedrag.addEventListener('dragover', fileDragHover, false)
+  filedrag.addEventListener('dragenter', fileDragHover, false)
+  filedrag.addEventListener('dragleave', fileDragHover, false)
+  filedrag.addEventListener('drop', fileSelectHandler, false)
+}