serialMonitor added

A-S-T-U-C-E · Dec 31, 2021 · 26c017c · 26c017c
1 parent c4bf8d7
commit 26c017c
Show file tree

Hide file tree

Showing 13 changed files with 1,698 additions and 154 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -13,6 +13,7 @@ v0.9.0
 - add conversion tool text <-> binary
 - add colors conversion tool
 - add conversion blocks to send data in SenML format
+- add WebSerial API
 
 v0.8.1
 - finish text blocks translation in Arudino code

diff --git a/S4E/js/boards.js b/S4E/js/boards.js
@@ -67,8 +67,17 @@ Code.changeBoard = function() {
     document.getElementById("boardDescriptionSelector").value = newBoard;
     document.getElementById("boardSelected_span").textContent = profile["default"].description;
     document.getElementById("portSelected_span").textContent = ' : ' + document.getElementById('serialMenu').options[document.getElementById('serialMenu').selectedIndex].value;
-    localStorage.setItem("availableSpeed", JSON.stringify(profile.default['serialList']));
+    sessionStorage.setItem("availableSpeed", JSON.stringify(profile.default['serialList']));
     window.history.pushState({}, "S4E", Code.addReplaceParamToUrl(window.location.search, "board", newBoard));
+    //update serial speed list in serial monitor
+    document.getElementById('serialConnectSpeed_Menu').length = 0;
+    var serialConnectSpeedAvailable = profile.default['serialList'];
+    serialConnectSpeedAvailable.forEach((serialConnectSpeed) => {
+        var option = document.createElement('option');
+        option.value = serialConnectSpeed;
+        option.text = serialConnectSpeed;
+        document.getElementById('serialConnectSpeed_Menu').appendChild(option);
+    });
     // "reboot" elements
     document.getElementById('overlayForModals').style.display = "none";
     document.getElementById('boardListModal').classList.remove('show');
@@ -78,34 +87,4 @@ Code.changeBoard = function() {
     var xml = Blockly.Xml.workspaceToDom(Code.mainWorkspace);
     Code.mainWorkspace.clear()
     Blockly.Xml.domToWorkspace(xml, Code.mainWorkspace);
-};
-
-/**
- * Set COM port
- */
-Code.setPort = function() {
-    var serialPortMenu = document.getElementById('serialMenu');
-    var newPort = encodeURIComponent(serialPortMenu.options[serialPortMenu.selectedIndex].value);
-    document.getElementById('overlayForModals').style.display = "none";
-    document.getElementById('portListModal').classList.remove('show');
-    document.getElementById("portSelected_span").textContent = ' : ' + newPort;
-    if (newPort != 'none') {
-        document.getElementById('serialButton').classList.add('active');
-        document.getElementById('serialButton').title = newPort;
-        document.getElementById('serialButton').onmouseover = function() {
-            document.getElementById("content_hoverButton").textContent = newPort;
-        };
-        document.getElementById('serialButton').onmouseout = function() {
-            document.getElementById("content_hoverButton").textContent = "";
-        }
-    } else {
-        document.getElementById('serialButton').classList.remove('active');
-        document.getElementById('serialButton').title = MSG['serialButtonSpan'];
-        document.getElementById('serialButton').onmouseover = function() {
-            document.getElementById("content_hoverButton").textContent = MSG['serialButtonSpan'];
-        };
-        document.getElementById('serialButton').onmouseout = function() {
-            document.getElementById("content_hoverButton").textContent = "";
-        };
-    }
 };
diff --git a/index.html b/index.html
@@ -232,6 +232,7 @@
                 <span id="verifyButton_span" class="fas fa-tasks">
                 </span>
             </button>
+            <!-- <button id="serialButton" class="iconButtons"> -->
             <!-- <button id="serialButton" class="iconButtons" onclick="Code.portsListModalShow()"> -->
             <button id="serialButton" class="iconButtons" onclick="Code.getPorts()">
                 <span id="serialButton_span" class="fab fa-usb">
@@ -1266,28 +1267,27 @@
     <script src="./S4E/categories/servo/servo.arduino"></script>
     <script src="./S4E/categories/X-NUCLEO-IKS01A3/X-NUCLEO-IKS01A3.arduino"></script>
     <script>
-        var require = {
+        require('../resources/app.asar/Arrowhead.js');
+        require('../resources/app.asar/renderer.js');
+        require('../resources/app.asar/menu_functions.js');
+        require('../resources/app.asar/menu_CLI_functions.js');
+        require('../resources/app.asar/menu_IDE_functions.js');
+        // require('../Arrowhead.js');
+        // require('../renderer.js');
+        // require('../menu_functions.js');
+        // require('../menu_CLI_functions.js');
+        // require('../menu_IDE_functions.js');
+    </script>
+    <script src="./tools/vs/loader.js"></script>
+    <script>
+        require.config({
             paths: {
                 'vs': './tools/vs'
             }
-        };
+        });
     </script>
-    <script src="./tools/vs/loader.js"></script>
     <script src="./tools/vs/editor/editor.main.nls.js"></script>
     <script src="./tools/vs/editor/editor.main.js"></script>
-
-    <script>
-        // require('../resources/app.asar/Arrowhead.js');
-        // require('../resources/app.asar/renderer.js');
-        // require('../resources/app.asar/menu_functions.js');
-        // require('../resources/app.asar/menu_CLI_functions.js');
-        // require('../resources/app.asar/menu_IDE_functions.js');
-        // require('./Arrowhead.js');
-        // require('./renderer.js');
-        // require('./menu_functions.js');
-        // require('./menu_CLI_functions.js');
-        // require('./menu_IDE_functions.js');
-    </script>
     <script type="text/javascript">
         window.onload = function() {
             if (document.readyState === 'complete') {
@@ -1313,7 +1313,6 @@
             }
         }
     </script>
-
 </body>
 
 </HTML>
diff --git a/js/blockly_playground.js b/js/blockly_playground.js
@@ -184,7 +184,6 @@ function setOnOffLine() {
         document.getElementById('verifyButton').disabled = false;
         document.getElementById('serialButton').disabled = false;
         document.getElementById('uploadButton').disabled = false;
-        document.getElementById('serialConnectButton').disabled = false;
         document.getElementById('serialMenu').disabled = false;
         // not same button if in Electron or browser, if local nodejs watches events
         document.getElementById('wiringButton').setAttribute('onclick', '');
@@ -206,7 +205,6 @@ function setOnOffLine() {
         document.getElementById('verifyButton').disabled = true;
         document.getElementById('serialButton').disabled = true;
         document.getElementById('uploadButton').disabled = true;
-        document.getElementById('serialConnectButton').disabled = true;
         document.getElementById('serialMenu').disabled = true;
         // not same button if in Electron or browser, if web just webpages launched in browser
         document.getElementById('wiringButton').setAttribute('onclick', './tools/hackcable/index.html');

diff --git a/js/buttons_functions.js b/js/buttons_functions.js
@@ -104,11 +104,18 @@ Code.blockPicture = function() {
 Code.copyToClipboard = function() {
     if (document.selection) { // IE
         var range = document.body.createTextRange();
-        range.moveToElementText(Code.editor.getValue());
+        if (Code.editor)
+            range.moveToElementText(Code.editor.getValue());
+        else range.moveToElementText(Blockly.Arduino.workspaceToCode(Code.mainWorkspace));
         range.select();
         document.execCommand("copy");
     } else if (window.getSelection) {
-        navigator.clipboard.writeText(Code.editor.getValue())
+        if (Code.editor)
+            navigator.clipboard.writeText(Code.editor.getValue())
+            .then(() => { console.log('Code copied!') })
+            .catch((error) => { console.log('Copy failed! ${error}') });
+        else
+            navigator.clipboard.writeText(Blockly.Arduino.workspaceToCode(Code.mainWorkspace))
             .then(() => { console.log('Code copied!') })
             .catch((error) => { console.log('Copy failed! ${error}') });
     }
@@ -220,16 +227,16 @@ Code.boardsListModalShow = function() {
     window.addEventListener('click', Code.boardsListModalHide, 'once');
     Code.boardDescription();
 };
-// Code.portsListModalShow = function() {
-//     document.getElementById('overlayForModals').style.display = "block";
-//     document.getElementById('portListModal').classList.add('show');
-//     var portValue = document.getElementById("serialMenu").value;
-//     if (portValue !== 'none') {
-//         document.getElementById("serialMenu").selectedIndex = portValue;
-//         document.getElementById("serialMenu").value = portValue;
-//     }
-//     window.addEventListener('click', Code.portsListModalHide, 'once');
-// };
+Code.portsListModalShow = async function() {
+    document.getElementById('overlayForModals').style.display = "block";
+    document.getElementById('portListModal').classList.add('show');
+    var portValue = document.getElementById("serialMenu").value;
+    if (portValue !== 'none') {
+        document.getElementById("serialMenu").selectedIndex = portValue;
+        document.getElementById("serialMenu").value = portValue;
+    }
+    window.addEventListener('click', Code.portsListModalHide, 'once');
+};
 Code.flowsListModalShow = function() {
     document.getElementById('overlayForModals').style.display = "block";
     document.getElementById('flowsListModal').classList.add('show');
@@ -239,10 +246,10 @@ document.getElementById("closeModalBoards").onclick = function() {
     document.getElementById('overlayForModals').style.display = "none";
     document.getElementById('boardListModal').classList.remove('show');
 };
-// document.getElementById("closeModalPorts").onclick = function() {
-//     document.getElementById('overlayForModals').style.display = "none";
-//     document.getElementById('portListModal').classList.remove('show');
-// };
+document.getElementById("closeModalPorts").onclick = function() {
+    document.getElementById('overlayForModals').style.display = "none";
+    document.getElementById('portListModal').classList.remove('show');
+};
 document.getElementById("closeModalFlows").onclick = function() {
     document.getElementById('overlayForModals').style.display = "none";
     document.getElementById('flowsListModal').classList.remove('show');
@@ -254,12 +261,12 @@ Code.boardsListModalHide = function(event) {
         document.getElementById('boardListModal').classList.remove('show');
     }
 };
-// Code.portsListModalHide = function(event) {
-//     if (document.getElementById('portListModal_content').contains(event.target)) {} else {
-//         document.getElementById('overlayForModals').style.display = "none";
-//         document.getElementById('portListModal').classList.remove('show');
-//     }
-// };
+Code.portsListModalHide = function(event) {
+    if (document.getElementById('portListModal_content').contains(event.target)) {} else {
+        document.getElementById('overlayForModals').style.display = "none";
+        document.getElementById('portListModal').classList.remove('show');
+    }
+};
 Code.flowsListModalHide = function(event) {
     if (document.getElementById('flowsListModal_content').contains(event.target)) {} else {
         document.getElementById('overlayForModals').style.display = "none";
@@ -874,29 +881,23 @@ Code.getPorts = async function() {
     if (!('serial' in navigator)) {
         Blockly.alert("This site requires the experimental Web Serial API. Your browser either does not support this, or does not have it enabled.");
     } else try {
+        // request WebSerial API for port list
+        // in Electron it fires 'select-serial-port' in main.js
         Code.serialPort = await navigator.serial.requestPort();
         document.getElementById('serialButton').className = 'iconButtonsClicked';
         window.sessionStorage.setItem('portSelected', true);
-        const { usbProductId, usbVendorId } = Code.serialPort.getInfo();
-        document.getElementById('portSelected_span').innerHTML = 'connected';
-        // navigator.usb.getDevices()
-        //     .then(devices => {
-        //         devices.forEach(device => {
-        //             if (device.vendorId == usbVendorId)
-        //                 console.log("Product name: " + device.productName);
-        //         });
-        //     })
-        //     .catch(error => { Blockly.alert(error); });
     } catch (error) {
-        Blockly.alert('no port selected')
-        document.getElementById('serialButton').className = 'iconButtons';
-        window.sessionStorage.setItem('portSelected', false);
-        document.getElementById('portSelected_span').innerHTML = 'not connected';
+        if (!Code.serialPort) {
+            Blockly.alert('no port selected')
+            document.getElementById('serialButton').className = 'iconButtons';
+            window.sessionStorage.setItem('portSelected', false);
+        }
     }
 }
-navigator.usb.addEventListener("connect", (event) => {
+navigator.serial.addEventListener("connect", (event) => {
     Blockly.alert('New device connected');
 });
-navigator.usb.addEventListener("disconnect", (event) => {
+navigator.serial.addEventListener("disconnect", (event) => {
     Blockly.alert('Device disconnected');
+    // console.log(event.target)
 });
diff --git a/js/dialog.js b/js/dialog.js
@@ -90,7 +90,8 @@ function showSerialMonitorModalDialog() {
     var id = 'serialMonitorModalDialog';
     var dialog = new DialogBox(id, callbackDialogSerialMonitorModal);
     dialog.showDialog();
-    var serialConnectSpeedAvailable = JSON.parse(localStorage.getItem("availableSpeed"));
+    var serialConnectSpeedAvailable = JSON.parse(sessionStorage.getItem("availableSpeed"));
+    document.getElementById('serialConnectSpeed_Menu').length = 0;
     serialConnectSpeedAvailable.forEach((serialConnectSpeed) => {
         var option = document.createElement('option');
         option.value = serialConnectSpeed;
@@ -112,7 +113,7 @@ function showSerialMonitorModalDialog() {
                 _serialModal.style.height = serialModal_old_height + "px";
                 document.getElementById("serialMonitorModalDialogContent").style.width = "calc(100% - 32px)";
                 document.getElementById("serialModalTitle_titlebar").style.width = "calc(100% - 32px)";
-                _maximiniSerial == 'mini'
+                _maximiniSerial = 'mini'
             }
         }
     }

diff --git a/js/init.js b/js/init.js
@@ -75,7 +75,7 @@ Code.renderContent = function() {
             else
                 Code.editor.setValue(generatedCode);
         }
-        var diff = JsDiff.diffWords(PREVIOUS_CODE_, generatedCode);
+        var diff = Diff.diffWords(PREVIOUS_CODE_, generatedCode);
         var resultStringArray = [];
         for (var i = 0; i < diff.length; i++) {
             if (!diff[i].removed) {