micrOSDevToolKit 2.1.5__py3-none-any.whl → 2.26.1__py3-none-any.whl

micrOS/source/web/filesui.js

@@ -0,0 +1,338 @@
+let selected = null;
+let selectedEl = null;              // DOM element of selected file row
+let selectedDir = 'user_data';     // fallback
+let _editorScriptLoaded = false;
+let editorFile = null;             // 🔹 track what's currently opened in editor
+
+// 🔹 Simple root message output
+let _msgTimer, _fadeTimer;
+function popUpMsg(msg) {
+  let el = document.getElementById('root-message');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'root-message';
+    Object.assign(el.style, {
+      position: 'fixed',
+      top: '8px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      background: 'rgba(220, 60, 60, 0.9)',     // warm UI red
+      color: '#fff',
+      padding: '6px 12px',
+      borderRadius: '4px',
+      fontSize: '12px',
+      zIndex: '99999',
+      transition: 'opacity 0.4s ease',
+      opacity: '0'
+    });
+    document.body.appendChild(el);
+  }
+  el.textContent = msg;
+  el.style.display = 'block';
+  requestAnimationFrame(() => el.style.opacity = '1');
+  // Clean timers
+  clearTimeout(_msgTimer);
+  clearTimeout(_fadeTimer);
+  // Start timer
+  _msgTimer = setTimeout(() => {
+    el.style.opacity = '0';
+    _fadeTimer = setTimeout(() => el.style.display = 'none', 400);
+  }, 5000);
+}
+
+// 🔹 centralized selection clear
+function clearSelection() {
+  document
+    .querySelectorAll('#list .file-item')
+    .forEach(x => x.className = 'file-item');
+
+  selected = null;
+  selectedEl = null;
+}
+
+function load() {
+  console.info('load.loadDirs');
+
+  loadDirs().then(() => {
+    console.info('load.loadFiles:', selectedDir);
+    loadFiles();
+  });
+  console.info('load.loadDiskUsage');
+  updateDiskUsage();
+}
+
+function loadFiles() {
+  const contentList = document.getElementById('list');
+
+  // 🔹 Enter loading state
+  contentList.classList.add('loading');
+
+  fetch('/fs/list', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    body: selectedDir || '/'
+  })
+    .then(r => r.json())
+    .then(files => {
+       list.innerHTML = '';
+       clearSelection();
+       // 🔹 Empty folder placeholder
+       if (!Array.isArray(files) || files.length === 0) {
+         const d = document.createElement('div');
+         d.className = 'file-item placeholder';
+         d.textContent = '.empty';
+         d.style.opacity = '0.5';
+         d.style.pointerEvents = 'none'; // 🔹 non-clickable
+         list.appendChild(d);
+
+         console.info("Files loaded (empty folder)");
+         return;
+       }
+       // 🔹 Files listing
+       files.forEach(f => {
+         const name = f.path.split('/').pop();
+         const d = document.createElement('div');
+         d.className = 'file-item';
+         d.textContent = `${name} ${f.size}B`;
+
+         d.onclick = (e) => {
+           e.stopPropagation();
+
+           if (selectedEl === d) {
+             clearSelection();
+             return;
+           }
+
+           clearSelection();
+           d.className = 'file-item sel';
+           selected = name;
+           selectedEl = d;
+         };
+
+         list.appendChild(d);
+       });
+
+       console.info("Files loaded");
+      })
+    .catch(err => {
+      console.error("load failed:", err);
+      popUpMsg("Failed to load files: " + err.message);
+    })
+    .finally(() => {
+      // 🔹 Exit loading state (success or error)
+      contentList.classList.remove('loading');
+    });
+}
+
+function loadDirs() {
+  return fetch('/fs/dirs')
+    .then(r => r.json())
+    .then(dirs => {
+      const container = document.getElementById('folder-path');
+      container.innerHTML = '';
+
+      if (!Array.isArray(dirs) || !dirs.length) return;
+
+      dirs.forEach(dir => {
+        const normalized = dir.replace(/^\/+/, '');
+        const d = document.createElement('div');
+        d.className = 'dir-item';
+        d.textContent = normalized;
+
+        d.onclick = () => {
+          document
+            .querySelectorAll('#folder-path .dir-item')
+            .forEach(x => x.className = 'dir-item');
+
+          d.className = 'dir-item sel';
+          selectedDir = normalized;
+          console.info('dirChange.loadFiles:', selectedDir);
+          loadFiles();
+        };
+
+        // 🔹 Selection logic
+        if (!selectedDir) {
+          selectedDir = normalized;
+          d.className = 'dir-item sel';
+        }
+        else if (normalized === selectedDir) {
+          d.className = 'dir-item sel';
+        }
+
+        container.appendChild(d);
+        console.info("Folders loaded");
+      });
+
+      // 🔹 Fallback if folder vanished
+      if (
+        !container.querySelector('.dir-item.sel') &&
+        container.firstChild
+      ) {
+        selectedDir = container.firstChild.textContent;
+        container.firstChild.classList.add('sel');
+      }
+    })
+    .catch(err => {
+      console.error("dirs load failed:", err);
+      popUpMsg("Failed to load folders: " + err.message);
+    })
+}
+
+function uploadFile() {
+  const f = file.files[0];
+  if (!f) return;
+
+  const fd = new FormData();
+  const targetPath = `${selectedDir}/${f.name}`;
+  // This sets filename="selectedDir/file.txt" in multipart
+  fd.append('file', f, targetPath);
+
+  console.info("uploadFile:", targetPath);
+  fetch('/fs/files', { method: 'POST', body: fd })
+    .then(async r => {
+      if (!r.ok) {
+        const resp = (await r.text()) || r.statusText;
+        throw new Error(`${r.status} - ${resp}`);
+      }
+      return r;
+    })
+    .then(load)
+    .catch(err => {
+      console.error("uploadFile error:", err);
+      popUpMsg("Upload failed: " + err.message);
+    });
+}
+
+function openFile() {
+  if (!selected) return;
+  const resource = `/${selectedDir}/${selected}`;
+  console.info('openFile:', resource);
+  window.open(resource);
+}
+
+function download() {
+  if (!selected) return;
+
+  const resource = `/${selectedDir}/${selected}`;
+  console.info('download:', resource);
+
+  const a = document.createElement('a');
+  a.href = resource;
+  a.download = selected;
+  a.click();
+}
+
+function deleteFile() {
+  if (!selected) return;
+
+  const toDelete = `/${selectedDir}/${selected}`;
+  console.info("deleteFile:", toDelete);
+
+  fetch('/fs/files', { method: 'DELETE', body: toDelete })
+    .then(async r => {
+      if (!r.ok) {
+        const resp = (await r.text()) || r.statusText;
+        throw new Error(`${r.status} - ${resp}`);
+      }
+      return r;
+    })
+    .then(() => {
+      // 🔹 If the deleted file is open in editor → DESTROY editor
+      if (_editorScriptLoaded && editorFile === toDelete) {
+        window.destroyEditor?.();
+        editorFile = null;
+        console.info("deleteFile: editor destroyed");
+      }
+    })
+    .then(load)
+    .catch(err => {
+      console.error("deleteFile failed:", err);
+      popUpMsg("Delete failed: " + err.message);
+    });
+}
+
+function loadEditorScript() {
+  if (_editorScriptLoaded) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = '../editor.js';
+    s.onload = () => {
+      _editorScriptLoaded = true;
+      resolve();
+    };
+    s.onerror = reject;
+    document.head.appendChild(s);
+  });
+}
+
+async function editor() {
+  const filename = selected ?? `LM_blinky.py`;
+  const resource = `/${selectedDir}/${filename}`;
+  console.info('editor:', resource);
+
+  await loadEditorScript();
+
+  let container = document.getElementById('editor');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'editor';
+  }
+
+  window.createEditor(container);
+
+  // 🔹 placement delegated to editor.js
+  window.openEditor(resource, {
+    anchor: selectedEl,
+    list: document.getElementById('list')
+  });
+
+  editorFile = resource; // 🔹 track currently opened file
+}
+
+function updateDiskUsage() {
+  fetch('/fs/usage')
+    .then(r => r.json())
+    .then(data => {
+      const usedMB = (data.used / (1024 * 1024)).toFixed(1);
+      const freeMB = (data.free / (1024 * 1024)).toFixed(1);
+      const total = data.used + data.free;
+      const percent = total ? (data.used / total) * 100 : 0;
+
+      document.getElementById('disktext').textContent =
+        `Disk: ${usedMB} MB used / ${freeMB} MB free`;
+
+      document.getElementById('diskused').style.width =
+        `${percent.toFixed(1)}%`;
+
+      console.info("DiskUsage: update");
+    })
+    .catch(err => {
+      console.error("disk usage failed:", err);
+      popUpMsg("Disk usage unavailable: " +  err.message);
+    })
+}
+
+// 🔹 Global outside-click handler
+document.addEventListener('click', (e) => {
+  // Ignore toolbar / editor buttons
+  if (e.target.closest('button')) return;
+
+  // If editor is open, keep selection locked
+  if (_editorScriptLoaded && editorFile) return;
+
+  const list = document.getElementById('list');
+  const editor = document.getElementById('editor');
+
+  if (
+    list &&
+    !list.contains(e.target) &&
+    (!editor || !editor.contains(e.target))
+  ) {
+    clearSelection();
+  }
+});
+
+load();

micrOS/source/{index.html → web/index.html}

@@ -6,14 +6,56 @@
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
     <title>microWeb</title>
     <link rel="stylesheet" href="ustyle.css">
+    <style>
+      hr {
+          border: none;
+          height: 2px;
+          background: rgba(255, 255, 255, 0.25);
+          margin: 16px 0;
+      }
+      #restInfoHeader {
+          margin-bottom: 12px;
+      }
+      /* Container */
+      .endpoint-groups {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          margin-bottom: 12px;
+          width: 100%;
+      }
+
+      /* Group cards */
+      .endpoint-group {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 6px;
+          padding: 8px;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.12);
+          backdrop-filter: blur(2px);
+          max-width: 100%;
+      }
+
+      /* Prevent buttons from getting tiny */
+      .endpoint-group button {
+          white-space: nowrap;
+      }
+    </style>
     <script src="uapi.js" defer></script>
 </head>
 <body>
     <img src="https://github.com/BxNxM/micrOS/blob/master/media/logo_mini.png?raw=true" alt="micrOS Logo" width="60" height="60">
     <h1> microWeb server </h1>
-    <p id="restInfo"></p>
+    <div id="restInfo">
+        <div id="restInfoHeader"></div>
+        <div id="endpointHint">🔗 Endpoints:</div>
+        <div id="endpointGroups" class="endpoint-groups"></div>
+    </div>
+    <hr>
     <h2>🚀 REST API</h2>
-    <p>Clickable examples 🕹</p>
+    <p>Shortcuts:</p>
     <button onclick="restAPI('system/info')">SysInfo</button>
     <button onclick="restAPI('system/alarms')">Alarms</button>
     <button onclick="restAPI('system/clock')">Clock</button>

micrOS/source/web/uapi.js

@@ -0,0 +1,103 @@
+// CORE MICROS BACKEND INTERFACE
+
+const BASE_URL = `http://${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
+
+function restAPICore(cmd, timeout=5000) {
+    const query = `${BASE_URL}/rest/${cmd.trim().replace(/\s+/g, '/')}`;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+    const startTime = performance.now();
+
+    return fetch(query, { signal: controller.signal })
+        .then(response => {
+            clearTimeout(timeoutId);
+            if (!response.ok) {throw new Error(`restAPICore code NOK: ${response.status}`);}
+            return response.json().then(data => ({response: data,
+                delta: (performance.now() - startTime).toFixed(0), query
+            }));
+        }).catch(error => {
+            clearTimeout(timeoutId);
+            console.error('Error in restAPICore:', error);
+            throw error;
+        });
+}
+
+function restAPI(cmd='', consoleOut=true, timeout=5000) {
+    if (cmd === '') {cmd = document.getElementById('restCmdInput').value;}
+    return restAPICore(cmd, timeout).then(({ response, delta, query }) => {
+            if (consoleOut) {restConsole(query, response, delta);}
+            return response;
+        }).catch(error => {
+            if (error.name === 'AbortError') {console.error(`Timeout (${timeout}ms) - restAPICore: ${cmd}`);
+            } else {console.error('Error in restAPI:', error);}
+            return { response: null, delta: 0, query: 'restAPI error' };
+        });
+}
+
+function restConsole(apiUrl, data, delta) {
+    // UPDATES: restConsoleUrl, restConsoleResponse, restConsoleTime
+    document.getElementById('restConsoleUrl').innerHTML = `<strong>Generated URL:</strong><br> <a href="${apiUrl}" target="_blank" style="color: white;">${apiUrl}</a>`;
+    document.getElementById('restConsoleResponse').innerHTML = JSON.stringify(data, null, 4).replace(/\\n/g, "<br/>" + "&nbsp;".repeat(15));
+    document.getElementById('restConsoleTime').innerHTML = `⏱ Response time: ${delta} ms`;
+}
+
+function renderEndpointGroups(endpoints) {
+    const container = document.getElementById('endpointGroups');
+    if (!container) {return;}
+    container.innerHTML = '';
+    if (!Array.isArray(endpoints) || endpoints.length === 0) {return;}
+    const groups = endpoints.reduce((acc, endpoint) => {
+        const trimmed = endpoint.replace(/^\/+/, '');
+        if (!trimmed) {return acc;}
+        const root = trimmed.split('/')[0];
+        acc[root] = acc[root] || [];
+        acc[root].push(trimmed);
+        return acc;
+    }, {});
+    Object.keys(groups).sort().forEach(group => {
+        const entries = groups[group].sort();
+        const isSingle = entries.length === 1 && entries[0] === group;
+        if (isSingle) {
+            const button = document.createElement('button');
+            button.textContent = group;
+            button.onclick = () => window.open(`/${group}`, '_blank');
+            container.appendChild(button);
+            return;
+        }
+        const groupEl = document.createElement('div');
+        groupEl.className = 'endpoint-group';
+        const title = document.createElement('span');
+        title.className = 'endpoint-group-title';
+        title.textContent = group;
+        groupEl.appendChild(title);
+        entries.forEach(entry => {
+            const label = entry === group ? group : entry.replace(`${group}/`, '');
+            const button = document.createElement('button');
+            button.textContent = label;
+            button.onclick = () => window.open(`/${entry}`, '_blank');
+            groupEl.appendChild(button);
+        });
+        container.appendChild(groupEl);
+    });
+}
+
+function restInfo(showPages=true) {
+    // UPDATES: 'restInfo' and restConsole(...)
+    restAPICore(cmd = '').then(({ response, delta, query }) => {
+        // Update API Console
+        restConsole(query, response, delta)
+        // Update 'restInfo' tag
+        const result = response['result'];
+        const auth = result.auth ? "🔑" : "";
+        let infoHeader = `micrOS: ${result.micrOS} ❖ node: ${result.node}${auth}`;
+        if (showPages) {
+            const endpoints = result['usr_endpoints'] ? Array.from(result['usr_endpoints']) : [];
+            renderEndpointGroups(endpoints);
+        }
+        document.getElementById('restInfoHeader').innerHTML = infoHeader;
+    }).catch(error => {
+        console.error('Error in restAPI:', error);
+    });
+}
+
+// Designed by BxNxM |/|/|/|/

micrOS/source/web/udashboard.js

@@ -0,0 +1,129 @@
+// API HELPER FUNCTION - get module exposed widgets
+function moduleHelp(module) {
+    const endpoint = `${module}/help/True`;
+    console.log(`[API] Endpoint: ${endpoint}`);
+    return restAPI(endpoint).then(({ result }) => {
+        const parsedWidgets = result.map(item => JSON.parse(item.replace(/\\"/g, '"')));
+        console.log(`Parsed ${module} help:`, parsedWidgets);
+        return parsedWidgets;
+    }).catch(error => {
+        console.error(error);
+        return [];
+    });
+}
+
+// PAGE GENERATION
+
+function containerAppendChild(elements, container) {
+    // Append list of elements into the container aka draw elements :D
+    if (!elements || !container) {
+        console.error("Inputs array or container element is missing.");
+        return;
+    }
+    elements.forEach(function(element) {
+        container.appendChild(element);});
+}
+
+function generateElement(type, module, lm_call="", options={}) {
+    // type: slider, button, box, h1, h2, p, li, etc.
+    // data: rest command
+    console.log(`type: ${type}`);
+    const data = `${module}/${lm_call}`;
+    console.log(`data: ${data}`);
+    const container = document.getElementById(`container-${module}`);
+    if(!container) {
+        console.error("No container");
+    }
+    if (type === 'slider') {
+        // Create slider widget
+        sliderWidget(container, data, options)
+    } else if (type === 'button') {
+        // Create button widget
+        buttonWidget(container, data, options)
+    } else if (type === 'textbox') {
+        // Create textbox widget
+        textBoxWidget(container, data, options)
+    } else if (type === 'color') {
+        // Create color palette widget
+        colorPaletteWidget(container, data, options)
+    } else if (type === 'joystick') {
+        // Create joystick widget
+        joystickWidget(container, data, options)
+    } else {
+        // Create other elements
+        const element = document.createElement(type);
+        element.textContent = `🧬 ${module}`;
+        containerAppendChild([element], container);
+    }
+}
+
+function autoTitleLen(widgets, lm_call) {
+    try {
+        const func = lm_call.split('/')[0].split(' ')[0];
+        const count = widgets.reduce((accumulator, { lm_call }) => accumulator + (lm_call.split(' ')[0] === func ? 1 : 0), 0);
+        return count > 1 ? 2 : 1;
+    } catch (error) {
+        console.error(error);
+        return 1;
+    }
+}
+
+function craftModuleWidgets(module, widgets) {
+    if (!widgets.length) {
+        console.log(`${module} no exposed widgets`);
+        return;
+    }
+
+    console.log(`Craft widget to ${module}`);
+    // Create HTML elements for widgets
+    const widgets_section = document.getElementById('widgets-section');
+    const widget_container = document.createElement('ol');
+    widget_container.id = `container-${module}`;
+    widget_container.className = "widget";
+    widgets_section.appendChild(widget_container);
+    // Create widget title
+    generateElement('h2', module);
+
+    const widgetTypeOptions = {
+        button: item => ({title_len: autoTitleLen(widgets, item.lm_call), options: item.options }),
+        slider: item => ({title_len: autoTitleLen(widgets, item.lm_call), range: item.range }),
+        color: item => ({title_len: autoTitleLen(widgets, item.lm_call), range: item.range }),
+        textbox: item => ({title_len: autoTitleLen(widgets, item.lm_call), refresh: item.refresh }),
+        joystick: item => ({title_len: autoTitleLen(widgets, item.lm_call), range: item.range })
+    };
+
+    // Create control elements for widget
+    widgets.forEach(item => {
+        let { type, lm_call } = item;
+        lm_call = lm_call.replace(/\s/g, '/');
+        const type_options = widgetTypeOptions[type] ? widgetTypeOptions[type](item) : null;
+        if (!type_options) {
+            console.log(`Unsupported micrOS widget html_type: ${type}`);
+            return;
+        }
+
+        try {
+            console.log("adding widget controls");
+            generateElement(type, module, lm_call, type_options);
+        } catch (error) {
+            console.error(error);
+        }
+    });
+}
+
+function DynamicWidgetLoad() {
+    restAPI('modules').then(data => {
+        const app_list = data.result;
+        app_list.forEach(module => {
+            moduleHelp(module).then(widgets => {
+                craftModuleWidgets(module, widgets);
+            }).catch(error => {
+                console.error(`Error processing module ${module}:`, error);
+            });
+        });
+    }).catch(error => {
+        console.error('Error loading modules:', error);
+    });
+}
+
+// craftModuleWidgets

micrOS/source/web/ustyle.css

@@ -0,0 +1,55 @@
+@keyframes backgroundAnimation {
+    0% {background-position: 0% 50%;}
+    50% {background-position: 100% 50%;}
+    100% {background-position: 0% 50%;}
+}
+body {
+    min-height: 100vh;
+    min-width: 100vw;
+    margin: 3%;
+    padding: env(safe-area-inset-top)
+             env(safe-area-inset-right)
+             env(safe-area-inset-bottom)
+             env(safe-area-inset-left);
+    background: linear-gradient(110deg, #4b3c66, #21184f, #712336);
+    background-size: 200% 200%;
+    animation: backgroundAnimation 15s infinite;
+    color: #d9d9d9;
+    font-family: 'Verdana', Sans-serif;
+}
+p {
+    word-wrap: break-word;
+}
+pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+button {
+    background-color: #e7e7e7; /* Gray */
+    border: none;
+    color: black;
+    font-size: 14px;
+    border-radius: 4px;
+    transition-duration: 0.4s;
+}
+button:hover {
+    background-color: #555555; /* Black */
+    color: white;
+}
+ol.widget {
+    list-style-type: none;
+    padding: 0px;
+    margin-right: 40px;
+}
+#widgets-section {
+  display: flex; /* Display list items horizontally */
+  flex-wrap: wrap; /* Wrap items to multiple lines if needed */
+}
+@media (max-width: 768px) { /* Adjust the breakpoint as needed */
+  #widgets-section {
+    flex-direction: column; /* Display list items vertically */
+  }
+  ol.widget {
+    margin-right: 0px;
+  }
+}