Main.js rewrite (v1.0.1)

Big main.js rewrite and added settings

main.js

@@ -6,10 +6,15 @@ const fs = require('fs')
 const path = require('path');
 const { json } = require('body-parser');
 const { exit } = require('process');
-let settingsWindow = null;
+const { open } = require('fs/promises');
 const icon = __dirname + '/src/res/Icon.png'
 const iconTray = __dirname + '/src/res/IconTray.png'
 
+let settingsWindow = null;
+let musicWidget = null;
+let batteryWidget = null;
+let deviceCareWidget = null;
+let weatherWidget = null;
 
 const folderPath = path.join(os.homedir(), 'AppData', 'Local', 'OneUI-Widgets');
 
@@ -32,97 +37,142 @@ const positionData = {
     }
 };
 
+const stateData = {
+    musicWidget: {
+        show: "true"
+    },
+    batteryWidget: {
+        show: "true"
+    },
+    deviceCareWidget: {
+        show: "true"
+    },
+    weatherWidget: {
+        show: "true"
+    }
+};
+
 const positionJSON = JSON.stringify(positionData, null, 4);  // null and 4 for pretty formatting
 
 if (!fs.existsSync(folderPath + "\\widgetPositions.json")) fs.writeFileSync(folderPath + "\\widgetPositions.json", positionJSON)
 
+const stateJSON = JSON.stringify(stateData, null, 4);  // null and 4 for pretty formatting
+
+if (!fs.existsSync(folderPath + "\\widgetStates.json")) fs.writeFileSync(folderPath + "\\widgetStates.json", stateJSON)
+
 app.on('ready', () => {
     tray = new Tray(iconTray)
     const contextMenu = Menu.buildFromTemplate([
+        { label: 'Settings', click: () => { openSettings(); } },
+        { type: 'separator' },
         { role: 'quit' },
     ])
     tray.setToolTip('OneUI Windows')
     tray.setContextMenu(contextMenu)
 
-
-    musicWidget = new BrowserWindow({
-        width: 390,
-        height: 125,
-        frame: false,
-        transparent: true,
-        resizable: false,
-        skipTaskbar: true,
-        webPreferences: {
-            contextIsolation: false,
-            nodeIntegration: true,
+    function openSettings() {
+        if (settingsWindow) {
+            // If the settings window already exists, focus on it
+            if (settingsWindow.isMinimized()) settingsWindow.restore();
+            settingsWindow.focus();
+            return;
         }
-    });
-
-    musicWidget.loadFile('./src/music.html');
-
-    musicWidget.setIgnoreMouseEvents(true)
-
-    batteryWidget = new BrowserWindow({
-        width: 390,
-        height: 125,
-        frame: false,
-        transparent: true,
-        resizable: false,
-        skipTaskbar: true,
-        webPreferences: {
-            contextIsolation: false,
-            nodeIntegration: true,
-        }
-    });
-
-    batteryWidget.loadFile('./src/battery.html');
-
-    batteryWidget.setIgnoreMouseEvents(true)
-
-    deviceCareWidget = new BrowserWindow({
-        width: 390,
-        height: 125,
-        frame: false,
-        transparent: true,
-        resizable: false,
-        skipTaskbar: true,
-        webPreferences: {
-            contextIsolation: false,
-            nodeIntegration: true,
-        }
-    });
-
-    deviceCareWidget.loadFile('./src/deviceCare.html');
-
-    deviceCareWidget.setIgnoreMouseEvents(true)
-
-    weatherWidget = new BrowserWindow({
-        width: 390,
-        height: 125,
-        frame: false,
-        transparent: true,
-        resizable: false,
-        skipTaskbar: true,
-        webPreferences: {
-            contextIsolation: false,
-            nodeIntegration: true,
-        }
-    });
 
-    weatherWidget.loadFile('./src/weather.html');
+        // Create a new settings window
+        settingsWindow = new BrowserWindow({
+            width: 400,
+            height: 600,
+            webPreferences: {
+                contextIsolation: false,
+                nodeIntegration: true,
+            }
+        });
+
+        settingsWindow.loadFile('./src/settings.html'); // Load your HTML file here
+
+        settingsWindow.on('closed', () => {
+            settingsWindow = null;
+        });
+    }
 
-    weatherWidget.setIgnoreMouseEvents(true)
+    const widgetsData = {
+        widgets: [
+            {
+                "name": "musicWidget",
+                "width": 390,
+                "height": 125,
+                "html": "./src/music.html"
+            },
+            {
+                "name": "batteryWidget",
+                "width": 390,
+                "height": 125,
+                "html": "./src/battery.html"
+            },
+            {
+                "name": "deviceCareWidget",
+                "width": 390,
+                "height": 125,
+                "html": "./src/deviceCare.html"
+            },
+            {
+                "name": "weatherWidget",
+                "width": 390,
+                "height": 125,
+                "html": "./src/weather.html"
+            }
+        ]
+    }
 
-    function setPositions() {
-        const jsonData = JSON.parse(fs.readFileSync(folderPath + "\\widgetPositions.json", 'utf8'));
-        musicWidget.setPosition(parseInt(jsonData.musicWidget.x), parseInt(jsonData.musicWidget.y));
-        batteryWidget.setPosition(parseInt(jsonData.batteryWidget.x), parseInt(jsonData.batteryWidget.y));
-        deviceCareWidget.setPosition(parseInt(jsonData.deviceCareWidget.x), parseInt(jsonData.deviceCareWidget.y));
-        weatherWidget.setPosition(parseInt(jsonData.weatherWidget.x), parseInt(jsonData.weatherWidget.y));
+    function setStates() {
+        const widgetStates = JSON.parse(fs.readFileSync(folderPath + "\\widgetStates.json"))
+        const widgetPositions = JSON.parse(fs.readFileSync(folderPath + "\\widgetPositions.json"))
+        widgetsData.widgets.forEach(widget => {
+            if (widgetStates[widget.name].show == "true" && eval(widget.name) == null) {
+                const widgetWindow = new BrowserWindow({
+                    width: widget.width,
+                    height: widget.height,
+                    frame: false,
+                    transparent: true,
+                    resizable: false,
+                    skipTaskbar: true,
+                    webPreferences: {
+                        contextIsolation: false,
+                        nodeIntegration: true,
+                    }
+                });
+
+                widgetWindow.webContents.openDevTools()
+
+                eval(`${widget.name} = widgetWindow`)
+
+                if (eval(widget.name) != null) {
+                    widgetWindow.setBounds({
+                        width: 390,
+                        height: 125,
+                        x: parseInt(widgetPositions[widget.name].x),
+                        y: parseInt(widgetPositions[widget.name].y)
+                    });
+                }
+
+                widgetWindow.loadFile(path.join(__dirname, widget.html));
+
+                widgetWindow.on('closed', () => {
+                    eval(`${widget.name} = null`);
+                    // Handle window closed event as needed
+                });
+            } else if (widgetStates[widget.name].show != "true" && eval(widget.name) != null) {
+                eval(`${widget.name}.destroy()`);
+                eval(`${widget.name} = null`);
+            }
+
+        });
     }
 
-    setPositions()
-    setInterval(setPositions, 3000)
+    setStates()
+    setInterval(function () {
+        setStates();
+    }, 500);
 });
 
 try {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oneui-desktop-widgets",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "description": "",
   "main": "main.js",
   "scripts": {

src/css/settings.css

@@ -0,0 +1,52 @@
+:root {
+    --text: #fafafa;
+    --secondary: #bcbcbc;
+    --background: #010101;
+    --background-secondary: #171719;
+    --separator-horizontal: rgba(62, 62, 62, 0.5);
+    --separator-vertical: rgba(45, 45, 45, 0.3);
+}
+
+body {
+    background-color: var(--background);
+    color: var(--text);
+    font-family: 'Samsung', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+bubble {
+    background-color: var(--background-secondary);
+    padding: 20px 20px 20px 20px;
+    border-radius: 33px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.bubble-info {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+seperatorhorizontal {
+    border-bottom: 3px solid var(--separator-horizontal);
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+seperatorvertical {
+    border-left: 2px solid var(--separator-vertical);
+    margin-right: 5px;
+    height: 20px;
+    width: 3px;
+    box-sizing: border-box;
+    display: flex;
+}

src/css/toggle.css

@@ -0,0 +1,63 @@
+:root {
+    --on-background: #FAFAFA;
+    --on-primary: white;
+    --app-accent: #4f4ae1;
+}
+
+/* The switch - the box around the toggle-slider */
+.oui-container-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.toggle {
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: relative;
+    display: block;
+    width: 39px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: #646368;
+    cursor: pointer;
+}
+
+.toggle-slider:after {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    border: 1px solid #646368;
+    background-color: var(--on-primary);
+    transition: .2s;
+}
+
+input:checked+.toggle-slider {
+    background-color: var(--app-accent);
+    border-color: var(--app-accent);
+}
+
+input:focus+.toggle-slider {
+    box-shadow: 0 0 1px var(--app-accent);
+}
+
+input:checked+.toggle-slider:after {
+    transform: translateX(20px);
+    border-color: var(--app-accent);
+}
+
+.oui-container-toggle:hover .toggle-slider:after {
+    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.container-position {
+    display: flex;
+    flex-direction: column;
+}

src/js/settings.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const folderPath = path.join(os.homedir(), 'AppData', 'Local', 'OneUI-Widgets');
+const jsonFilePath = path.join(folderPath, 'widgetStates.json');
+
+window.addEventListener('DOMContentLoaded', () => {
+    const jsonData = JSON.parse(fs.readFileSync(jsonFilePath, 'utf8'));
+
+    function updateWidgetState(widgetName, checkbox) {
+        jsonData[widgetName].show = checkbox.checked.toString();
+        fs.writeFileSync(jsonFilePath, JSON.stringify(jsonData, null, 4), 'utf8');
+    }
+
+    const checkboxes = [
+        { name: 'musicWidget', element: document.getElementById('music-checkbox') },
+        { name: 'batteryWidget', element: document.getElementById('battery-checkbox') },
+        { name: 'deviceCareWidget', element: document.getElementById('deviceCare-checkbox') },
+        { name: 'weatherWidget', element: document.getElementById('weather-checkbox') },
+    ];
+
+    checkboxes.forEach((checkbox) => {
+        checkbox.element.checked = jsonData[checkbox.name].show === 'true';
+
+        checkbox.element.addEventListener('change', (event) => {
+            updateWidgetState(checkbox.name, event.target);
+        });
+    });
+});

src/music.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">