Merge branch 'master' of github.com:1RandomDev/xTool-Connect

Author: 1RandomDev

main/app.js

@@ -72,6 +72,9 @@ app.whenReady().then(() => {
         appSettings = {...appSettings, ...settings};
         saveSettings();
     });
+    ipcMain.handle('settings:updateFirmware', (event, updatePath) => {
+        return deviceController.updateFirmware(updatePath);
+    });
 
     ipcMain.handle('wifiSetup:connect', (event, credentials) => {
         return deviceController.setupWifi(credentials);

main/device-controller.js

@@ -131,7 +131,7 @@ module.exports.getInfo = async () => {
         return {};
     }
 
-    const settings = {};
+    const settings = { ipAddress: deviceAddress };
 
     try {
         let res = await axios.get(`http://${deviceAddress}:8080/getmachinetype`);
@@ -377,15 +377,34 @@ module.exports.getProgress = async () => {
 
 module.exports.control = async (action) => {
     if(!connected) {
-        console.error('Sending control message faild: Not connected');
+        console.error('Sending control message failed: Not connected');
         return;
     }
 
     try {
         await axios.get(`http://${deviceAddress}:8080/cnc/data?action=${action}`);
         if(action == 'stop') await this.executeGcode('M108\nM112 N0\nM9 S0 N0\n');
     } catch(err) {
-        console.error('Sending control message faild:', err);
+        console.error('Sending control message failed:', err);
     }
     return;
 };
+
+module.exports.updateFirmware = async (updatePath) => {
+    if(!connected) {
+        console.error('Firmware update failed: Not connected');
+        return false;
+    }
+
+    try {
+        const form = new FormData();
+        form.append('file', fs.createReadStream(updatePath), 'update.bin');
+
+        const res = await axios.post(`http://${deviceAddress}:8080/upgrade`, form);
+        console.log(res.data);
+        return res.data == 'OK';
+    } catch(err) {
+        console.error('Firmware update failed:', err);
+        return false;
+    }
+}

main/preload.js

@@ -11,6 +11,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   scanDevices: () => ipcRenderer.invoke('deviceMenu:discover'),
   getSettings: () => ipcRenderer.invoke('settings:get'),
   saveSettings: (settings) => ipcRenderer.invoke('settings:save', settings),
+  updateFirmware: (updatePath) => ipcRenderer.invoke('settings:updateFirmware', updatePath),
   uploadGcode: (path, type) => ipcRenderer.invoke('control:uploadGcode', path, type),
   moveLaser: (direction) => ipcRenderer.invoke('control:moveLaser', direction),
   setLaserDot: (active) => ipcRenderer.invoke('control:setLaserDot', active),

renderer/assets/css/index.css

@@ -32,3 +32,46 @@ body {
     width: 35px;
     background-image: url("../img/plus-circle.svg");
 }
+
+#deviceDiscovery {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    left: 20px;
+    max-height: 150px;
+    overflow-y: auto;
+    background-color: #252627;
+    border: 1px solid #a0a0a0;
+    border-radius: 4px;
+}
+#deviceDiscovery .scanning {
+    display: none;
+    text-align: center;
+    color: #d1d1d1;
+    margin: 10px;
+}
+#deviceDiscovery .rescan {
+    text-align: center;
+    margin: 4px;
+}
+#deviceDiscovery .rescan .rescanBtn {
+    color: #a3a3a3;
+    text-decoration: none;
+}
+#deviceDiscovery .rescan .rescanBtn:hover {
+    text-decoration: underline;
+}
+#deviceDiscovery .device {
+    padding: 10px 15px;
+    border-top: 1px solid #575757;
+    box-sizing: content-box;
+    cursor: pointer;
+}
+#deviceDiscovery .device:hover {
+    background-color: #343536;
+    transition: 0.2s;
+}
+#deviceDiscovery .device .ip {
+    float: right;
+    color: #999999;
+}

renderer/assets/js/index.js

@@ -1,6 +1,7 @@
 const ipAddressField = document.getElementById('ipAddressField');
 const connectBtn = document.getElementById('connectBtn');
 const autoConnectOpt = document.getElementById('autoConnectOpt');
+const deviceDiscovery = document.getElementById('deviceDiscovery');
 
 ipAddressField.addEventListener('keyup', () => {
     connectBtn.disabled = ipAddressField.value == '';
@@ -11,6 +12,7 @@ ipAddressField.addEventListener('keypress', event => {
     }
 });
 connectBtn.addEventListener('click', () => {
+    if(connectBtn.classList.contains('running')) return;
     connectBtn.classList.add('running');
     window.electronAPI.saveSettings({deviceAddress: ipAddressField.value});
 
@@ -27,6 +29,10 @@ connectBtn.addEventListener('click', () => {
 autoConnectOpt.addEventListener('change', () => {
     window.electronAPI.saveSettings({autoConnect: autoConnectOpt.checked});
 });
+deviceDiscovery.querySelector('.rescanBtn').addEventListener('click', event => {
+    event.preventDefault();
+    scanDevices();
+});
 
 (async () => {
     const settings = await window.electronAPI.getSettings();
@@ -37,9 +43,39 @@ autoConnectOpt.addEventListener('change', () => {
     if(settings.autoConnect && await window.electronAPI.firstConnect()) {
         connectBtn.click();
     }
+
+    const params = new URLSearchParams(window.location.search);
+    if(params.get('message') == 'timeout') {
+        toastr.error('Connection to device lost. Please check your internet connection and reconnect.', 'Connection lost');
+        if(settings.autoConnect) {
+            setTimeout(() => {
+                connectBtn.click();
+            }, 5000);
+        }
+    }
+
+    scanDevices();
 })();
 
-const params = new URLSearchParams(window.location.search);
-if(params.get('message') == 'timeout') {
-    toastr.error('Connection to device lost. Please check your internet connection and reconnect.', 'Connection lost');
+async function scanDevices() {
+    const rescan = deviceDiscovery.querySelector('.rescan');
+    const scanning = deviceDiscovery.querySelector('.scanning');
+    rescan.style.display = 'none';
+    scanning.style.display = 'block';
+
+    const devices = await window.electronAPI.scanDevices();
+    for(let dev of deviceDiscovery.querySelectorAll('.device')) dev.remove();
+    devices.forEach(dev => {
+        const element = document.createElement('div');
+        element.classList.add('device');
+        element.innerHTML = `<span class="name">${dev.name}</span><span class="ip">${dev.ip}</span>`;
+        element.onclick = () => {
+            ipAddressField.value = dev.ip;
+            connectBtn.click();
+        };
+        deviceDiscovery.appendChild(element);
+    });
+
+    rescan.style.display = null;
+    scanning.style.display = null;
 }

renderer/assets/js/settings.js

@@ -14,6 +14,18 @@ settingsContainer.addEventListener('change', event => {
         settingsContainer.querySelector('[name="crossOffsetY"]').disabled = value == '1';
     }
 });
+document.getElementById('updateButton').addEventListener('click', async event => {
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.bin';
+    input.onchange = () => {
+        toastr.success('The device will restart after the update has been completed.', 'Started firmware update');
+        event.target.innerText = 'Uploading...';
+        event.target.disabled = true;
+        window.electronAPI.updateFirmware(input.files[0].path);
+    };
+    input.click();
+});
 
 (async () => {
     const deviceInfo = await window.electronAPI.getDeviceInfo();

renderer/index.html

@@ -23,6 +23,15 @@ <h2>Connect your device</h2>
             <label for="autoConnectOpt">Auto connect</label>
         </div>
     </div>
+    <div id="deviceDiscovery">
+        <div class="scanning">
+            <div class="ld ld-spin ld-ring"></div>&nbsp;
+            Scanning for devices
+        </div>
+        <div class="rescan">
+            <a href="" class="rescanBtn">Scan again</a>
+        </div>
+    </div>
     <script src="assets/js/jquery.min.js"></script>
     <script src="assets/js/toastr.min.js"></script>
     <script src="assets/js/index.js"></script>

renderer/settings.html

@@ -73,13 +73,16 @@ <h3>Device info</h3>
             <label for="firmwareVersion">Firmware version</label>
             <span class="info" name="firmwareVersion"></span>
         </div>
-        <button id="updateButton" class="defaultButton">Check for updates</button>
+        <button id="updateButton" class="defaultButton">Manual Update</button>
 
         <label for="serialNumber">Serial number</label>
         <span class="info" name="serialNumber"></span>
 
         <label for="macAddress">MAC address</label>
         <span class="info" name="macAddress"></span>
+
+        <label for="ipAddress">IP address</label>
+        <span class="info" name="ipAddress"></span>
     </div>
 
     <script src="assets/js/jquery.min.js"></script>