Merge pull request 'feat/filesystem_viewer' (#70) from feat/filesystem_viewer into main

Reviewed-on: #70
Reviewed-by: Matthias Blankertz <matthias@blankertz.org>

DEVELOP.md

@@ -52,3 +52,23 @@ would be stored in the following key/value pairs in the btree db:
  * 00aa11bb22/playlist/00000: a.mp3
  * 00aa11bb22/playlist/00001: b.mp3
  * 00aa11bb22/playlistpos: 00000
+
+## Notes for UI development with chromium
+
+Features for the web interface are best prototyped in a browser directly. By using the built-in developmer tools and
+and their "override" feature, the web contents are replaced by a locally stored copy, which can be used to directly
+test the modifications without going all the way through the build and flash process.
+
+However, modern browsers may restrict or even completely forbid the execution of dynamic content like JavaScript, if
+the content is stored on the local machine and/or the content is accessed using http. In such a case, chromium issues
+an error message similar to the following one:
+
+> Access to fetch at 'http://192.168.4.1/api/v1/audiofiles' from origin 'http://192.168.4.1' has been blocked by CORS
+> policy: The request client is not a secure context and the resource is in more-private address space `local`.
+
+To mitigate this, chromium offers two flags that need modification:
+- 'chrome://flags/#local-network-access-check' must be `Disabled`
+- 'chrome://flags/#unsafely-treat-insecure-origin-as-secure' must be `Enabled`
+
+Note that these settings leave the browser susceptible to security issues and should be returned to
+their default values as soon as possible.

software/frontend/index.html

@@ -147,6 +147,7 @@
     <button onclick="showScreen('menu')">🏠 Main Menu</button>
     <button onclick="showScreen('config')">⚙️ Config Editor</button>
     <button onclick="showScreen('playlist')">🖹 Playlist Editor</button>
+    <button onclick="showScreen('filebrowser', 'filesystem')">📂 Filesystem</button>
 </nav>
 
 <!-- MAIN MENU -->
@@ -242,10 +243,10 @@
 </div>
 
 <!-- PLAYLIST EDITOR SCREEN 3: file browser -->
-<div id="screen-playlist_filebrowser" class="screen">
-    <h2>Playlist Editor</h2>
+<div id="screen-filebrowser" class="screen">
+    <h2 id="playlist-filebrowser-title">Playlist Editor</h2>
     <div id="playlist-filebrowser-container">
-        <div class="scroll-container">
+        <div class="scroll-container" style="margin-bottom: 10px">
             <div class="tree" id="playlist-filebrowser-tree">
                 <ul><li>Loading...</li></ul>
             </div>
@@ -359,7 +360,10 @@
             'root.LED_COUNT': 'Length of WS2182 (Neopixel) LED chain',
             'root.VOLUME_MAX': 'Maximum volume (0-255)',
             'root.VOLUME_BOOT': 'Volume at startup (0-255)',
-            'root.LED_MAX': 'Maximum LED brightness (0-255)'
+            'root.LED_MAX': 'Maximum LED brightness (0-255)',
+            'root.WIFI.SSID': 'Network name (SSID) (leave empty for AP mode)',
+            'root.WIFI.PASSPHRASE': 'Password',
+            'root.WIFI.SECURITY': 'Security mode'
         };
         const config_input_override = {
             'root.TAGMODE': {
@@ -393,12 +397,21 @@
             'root.LED_COUNT': {
                 'input-type': 'number'
             },
-            'root.WLAN.SSID': {
+            'root.WIFI.SSID': {
                 'input-type': 'text'
             },
-            'root.WLAN.PASSPHRASE': {
+            'root.WIFI.PASSPHRASE': {
                 'input-type': 'text'
             },
+            'root.WIFI.SECURITY': {
+                'element': 'select',
+                'values': {
+                    'open': 'Open',
+                    'wpa_wpa2': 'WPA/WPA2 (PSK Mixed)',
+                    'wpa3': 'WPA3 (SAE AES)',
+                    'wpa2_wpa3': 'WPA2/WPA3 (PSK AES)'
+                }
+            },
             'root.VOLUME_MAX': {
                 'input-type': 'number'
             },
@@ -642,7 +655,7 @@
             document.getElementById('playlist-edit-removetrack').addEventListener("click", (e) => deleteSelectedTracks());
             document.getElementById('playlist-edit-back').addEventListener("click", (e) => showScreen('playlist'));
             document.getElementById('playlist-edit-addtrack').addEventListener("click", (e) => {
-                showScreen("playlist_filebrowser");
+                showScreen("filebrowser", "playlist");
             });
             document.getElementById('playlist-edit-save').addEventListener("click", (e) => save());
         }
@@ -774,7 +787,9 @@
     /* ----------------------------------------
        PLAYLIST EDITOR LOGIC - ADD FILES SCREEN
     ------------------------------------------- */
-    Screens.playlist_filebrowser = (() => {
+    Screens.filebrowser = (() => {
+        let isFilesystemMode = false;
+
         function init() {
             document.getElementById('playlist-filebrowser-cancel').addEventListener("click", (e) => {
                 showScreen("playlist_edit", {});
@@ -793,9 +808,32 @@
             });
             tree.init();
         }
-        
+
         async function onShow(intent) {
+            console.log(intent)
             document.getElementById('playlist-filebrowser-addtrack').disabled = true;
+
+            const title = document.getElementById('playlist-filebrowser-title');
+            const cancelButton = document.getElementById('playlist-filebrowser-cancel');
+            const addTracksButton = document.getElementById('playlist-filebrowser-addtrack');
+
+            if (intent !== 'refresh') {
+                isFilesystemMode = (intent === 'filesystem');
+
+                document.getElementById('playlist-filebrowser-upload-progress').value = 0;
+                document.getElementById("playlist-filebrowser-upload-files").value = "";
+            }
+
+            if (isFilesystemMode) {
+                title.innerText = "Filesystem";
+                cancelButton.style.display = 'none';
+                addTracksButton.style.display = 'none';
+            } else {
+                title.innerText = "Playlist Editor";
+                cancelButton.style.display = ''
+                addTracksButton.style.display = ''
+            }
+
             tree = document.getElementById("playlist-filebrowser-tree");
             tree.innerHTML = "Loading...";
             fetch('/api/v1/audiofiles')
@@ -830,7 +868,6 @@
             if (type === 'directory') {
                 const nested = document.createElement('ul');
                 node.appendChild(nested);
-                node.classList.add('expanded');
                 parent.appendChild(node);
                 return nested;
             }
@@ -917,13 +954,13 @@
                     }
                     if (donecount + 1 === totalcount) {
                         // Reload file list from device
-                        onShow();
+                        onShow('refresh');
                     } else {
                         uploadFileHelper(totalcount, donecount + 1, destdir, files.slice(1));
                     }
                 }
             };
-            xhr.open("POST", `/api/v1/audiofiles?type=file&location=${location}`);
+            xhr.open("POST", `/api/v1/audiofiles?type=file&location=${encodeURIComponent(location)}`);
             xhr.overrideMimeType("audio/mpeg");
             xhr.send(files[0]);
         }
@@ -941,10 +978,10 @@
             const location = selectedNodes.length === 1
                 ? selectedNodes[0].getAttribute('data-path') + '/' + name.value
                 : '/' + name.value;
-            const saveRes = await fetch(`/api/v1/audiofiles?type=directory&location=${location}`,
+            const saveRes = await fetch(`/api/v1/audiofiles?type=directory&location=${encodeURIComponent(location)}`,
                   {method: 'POST'});
             // Reload file list from device
-            onShow();
+            onShow('refresh');
         }
 
         async function deleteItems() {
@@ -958,14 +995,14 @@
             items.sort();
             items.reverse();
             for (const item of items) {
-                const saveRes = await fetch(`/api/v1/audiofiles?location=${item}`,
+                const saveRes = await fetch(`/api/v1/audiofiles?location=${encodeURIComponent(item)}`,
                   {method: 'DELETE'});
                 if (!saveRes.ok) {
                     alert(`Failed to delete item ${item}: ${await saveRes.text()}`);
                 }
             }
             // Reload file list from device
-            onShow();
+            onShow('refresh');
         }
         
         let tree = (() => {

software/src/app.py

@@ -82,7 +82,7 @@ class PlayerApp:
         uid_str = b''.join('{:02x}'.format(x).encode() for x in new_tag)
         if self.tag_mode == 'tagremains' or (self.tag_mode == 'tagstartstop' and new_tag != self.playing_tag):
             self._set_playlist(uid_str)
-            self.playing_tag = new_tag
+            self.playing_tag = new_tag if self.playlist is not None else None
         elif self.tag_mode == 'tagstartstop':
             print('Tag presented again, stopping playback')
             self._unset_playlist()

software/src/main.py

@@ -3,11 +3,9 @@
 
 import aiorepl  # type: ignore
 import asyncio
-from errno import ENOENT
 import machine
 import micropython
 import network
-import os
 import time
 import ubinascii
 import sys
@@ -38,19 +36,19 @@ hwconfig.board_init()
 machine.mem32[0x40030000 + 0x00] = 0x10
 
 
-def setup_wifi(ssid='', passphrase='', sec=network.WLAN.SEC_WPA2_WPA3):
+def setup_wifi(ssid='', passphrase='', security=network.WLAN.SEC_WPA_WPA2):
     network.hostname("TonberryPico")
     if ssid is None or ssid == '':
         apname = f"TonberryPicoAP_{machine.unique_id().hex()}"
         print(f"Create AP {apname}")
         wlan = network.WLAN(network.WLAN.IF_AP)
-        wlan.config(ssid=apname, security=wlan.SEC_OPEN)
+        wlan.config(ssid=apname, password=passphrase if passphrase is not None else '', security=security)
         wlan.active(True)
     else:
         print(f"Connect to SSID {ssid} with passphrase {passphrase}...")
         wlan = network.WLAN()
         wlan.active(True)
-        wlan.connect(ssid, passphrase if passphrase is not None else '', security=sec)
+        wlan.connect(ssid, passphrase if passphrase is not None else '', security=security)
 
     # configure power management
     wlan.config(pm=network.WLAN.PM_PERFORMANCE)
@@ -88,22 +86,23 @@ def run():
         np.fill((0, 0, led_max))
         np.write()
         # Force default access point
-        setup_wifi('', '')
+        setup_wifi('', '', network.WLAN.SEC_OPEN)
     else:
-        setup_wifi(config.get_wifi_ssid(), config.get_wifi_passphrase())
+        secstring = config.get_wifi_security()
+        security = network.WLAN.SEC_WPA_WPA2
+        if secstring == 'open':
+            security = network.WLAN.SEC_OPEN
+        elif secstring == 'wpa_wpa2':
+            security = network.WLAN.SEC_WPA_WPA2
+        elif secstring == 'wpa3':
+            security = network.WLAN.SEC_WPA3
+        elif secstring == 'wpa2_wpa3':
+            security = network.WLAN.SEC_WPA2_WPA3
+        setup_wifi(config.get_wifi_ssid(), config.get_wifi_passphrase(), security)
 
     # Setup MP3 player
     with SDContext(mosi=hwconfig.SD_DI, miso=hwconfig.SD_DO, sck=hwconfig.SD_SCK, ss=hwconfig.SD_CS,
                    baudrate=hwconfig.SD_CLOCKRATE):
-        # Temporary hack: build database from folders if no database exists
-        # Can be removed once playlists can be created via API
-        try:
-            _ = os.stat(DB_PATH)
-        except OSError as ex:
-            if ex.errno == ENOENT:
-                print("No playlist DB found, trying to build DB from tag dirs")
-                builddb()
-
         with BTreeFileManager(DB_PATH) as playlistdb, \
              AudioContext(hwconfig.I2S_DIN, hwconfig.I2S_DCLK, hwconfig.I2S_LRCLK) as audioctx:
 
@@ -130,24 +129,6 @@ def run():
             asyncio.get_event_loop().run_forever()
 
 
-def builddb():
-    """
-    For testing, build a playlist db based on the previous tag directory format.
-    Can be removed once uploading files / playlist via the web api is possible.
-    """
-    try:
-        os.unlink(DB_PATH)
-    except OSError:
-        pass
-    with BTreeFileManager(DB_PATH) as db:
-        for name, type_, _, _ in os.ilistdir(b'/sd'):
-            if type_ != 0x4000:
-                continue
-            fl = [b'/sd/' + name + b'/' + x for x in os.listdir(b'/sd/' + name) if x.endswith(b'.mp3')]
-            db.createPlaylistForTag(name, fl)
-    os.sync()
-
-
 def error_blink():
     while True:
         if machine.Pin(hwconfig.BUTTONS[0], machine.Pin.IN, machine.Pin.PULL_UP).value() == 0:

software/src/utils/config.py

@@ -26,6 +26,7 @@ class Configuration:
         'WIFI': {
             'SSID': '',
             'PASSPHRASE': '',
+            'SECURITY': 'wpa_wpa2',
         },
         'VOLUME_MAX': 255,
         'VOLUME_BOOT': 16,
@@ -100,6 +101,9 @@ class Configuration:
     def get_wifi_passphrase(self) -> str:
         return self._get('WIFI')['PASSPHRASE']
 
+    def get_wifi_security(self) -> str:
+        return self._get('WIFI')['SECURITY']
+
     def get_volume_max(self) -> int:
         return self._get('VOLUME_MAX')
 
@@ -126,6 +130,9 @@ class Configuration:
         self._validate(self.DEFAULT_CONFIG, config)
         if 'TAGMODE' in config and config['TAGMODE'] not in ['tagremains', 'tagstartstop']:
             raise ValueError("Invalid TAGMODE: Must be 'tagremains' or 'tagstartstop'")
+        if 'WLAN' in config and 'SECURITY' in config['WLAN'] and \
+           config['WLAN']['SECURITY'] not in ['open', 'wpa_wpa2', 'wpa3', 'wpa2_wpa3']:
+            raise ValueError("Invalid WLAN SECURITY: Must be 'open', 'wpa_wpa2', 'wpa3' or 'wpa2_wpa3'")
         self._merge_configs(self.config, config)
         self.config = config
         self._save()

software/src/webserver.py

@@ -204,7 +204,7 @@ async def audiofiles_get(request):
 
 
 async def stream_to_file(stream, file_, length):
-    data = array('b', range(16384))
+    data = array('b', range(4096))
     bytes_copied = 0
     while True:
         bytes_read = await stream.readinto(data)
@@ -235,16 +235,19 @@ async def audiofile_upload(request):
     if type_ == 'directory':
         if length != 0:
             return 'directory request may not have content', 400
-        os.mkdir(path)
-        return '', 204
-    with open(path, 'wb') as newfile:
         try:
+            os.mkdir(path)
+        except OSError as ex:
+            return f'error creating directory: {ex}', 500
+        return '', 204
+    try:
+        with open(path, 'wb') as newfile:
             if length > Request.max_body_length:
                 bytes_copied = await stream_to_file(request.stream, newfile, length)
             else:
                 bytes_copied = newfile.write(request.body)
-        except OSError as ex:
-            return f'error writing data to file: {ex}', 500
+    except OSError as ex:
+        return f'error writing data to file: {ex}', 500
     if bytes_copied == length:
         return '', 204
     else: