Skip to content

Commit

Permalink
minimal-launchpad: Handle different scenarios error by showing proper…
Browse files Browse the repository at this point in the history 
… pop-up.
  • Loading branch information
Rushikesh Patange committed Nov 11, 2023
1 parent 34924ac commit 1d27cde
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 13 deletions.
141 changes: 140 additions & 1 deletion minimal-launchpad/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,146 @@
</head>

<body class="d-flex flex-column h-100" style="align-items: center">
<!-- Modal for reset device starts-->
<!-- Modal for error troubleshoot starts-->
<button type="button" id="errorTroubleshootModalToggleButton" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#errorTroubleshootModal" hidden>
Error Troubleshoot Modal Toggle Button
</button>
<div class="modal fade" id="errorTroubleshootModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="errorTroubleshootModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="errorTroubleshootModalTitle">Connection In Progress</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" hidden></button>
</div>
<div class="modal-body">
<p id="errorMessageDescription">It's taking longer than usual for connecting the device.</p>
<p class="errorMessage" id="errorMessage" style="display: none;"></p>
<p>Refer to the troubleshooting guide below for assistance in resolving the issue.</p>
<div class="accordion" id="troubleshootAccordion">
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" style="background-color: #eee;" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Troubleshooting Guide
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-bs-parent="#troubleshootAccordion">
<div class="accordion-body" style="font-size: 12px;">
<div class="container mt-2">
<div>
<div class="col-xs-12">
<div class="col-xs-12 mt-2">
<h4 class="topic mb-2" style="font-size: 14px;"><b>Device Connection
Issue</b></h4>
<p>
If your device is not shown in list that pop-up while connection
establishing step then your device might be not connected properly
to port
or their might be the
<strong>browser compatability issue</strong>. Please
ensure that it is properly connected to the port. Reseating
connection cable might also helps to resolve this issue. If your device is connected to any other application, please
disconnect it and try again.
</p>
</div>
<div class="col-xs-12 mt-2">
<h4 class="topic mb-2" style="font-size: 14px;"><b>Browser Compatability
Issue</b></h4>
<p>
<span style="color: #e63f36">
This tool is not supported on Safari & Firefox browsers yet!
</span>
Please try using another browser like
<strong>Google Chrome</strong> with supported version.
</p>
<p>
ESP Launchpad makes use of <strong>Web Serial API</strong> to
communicate with the device. Currently Safari & Firefox browsers
don't support it yet. We will add support for this browser as soon
as Safari & Firefox starts supporting Web Serial API. Please find
more about <strong>Web Serial API</strong> browser compatability
guide
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
target="_blank">here</a>
</p>
</div>
<div class="col-xs-12 mt-2">
<h4 class="topic mb-2" style="font-size: 14px;"><b>Device Compatability
Issue</b></h4>
<p>
If you are using older devices or older versions of device then
sometimes you may face an issue in
connection establishing step or firmware flashing step. Please try
that steps by pressing boot
button provided on device.
<details>
<summary>List of devices that supported by ESP Launchpad</summary>
<ol>
<li>ESP32</li>
<li>ESP32-C3</li>
<li>ESP32-C6</li>
<li>ESP32-H2</li>
<li>ESP32-S2</li>
<li>ESP32-S3</li>
<li>ESP8266</li>
</ol>
</details>
</p>
</div>
<div class="col-xs-12 mt-2" id="browserSupport">
<h4 class="topic mb-2" style="font-size: 14px;"><b>Driver Compatability
Issue</b></h4>
<p>
It has been seen that on <strong>windows system</strong> with latest
<strong>Silicon Lab CP210x USB
to UART Bridge</strong>
there are device connection or flashing issues.We are looking into
it to resolve the issue.
You can still try by downgrading silicon lab CP210x USB to UART
Bridge driver version to
<code>6.7.x</code> that can resolve issue on temporarily basis.
</p>
</div>
</div>
</div>
<hr />
<div style="text-align: center;">
<p>If you still unable to troubleshoot the problem or face any other issues
please report them on <a
href="https://github.com/espressif/esp-launchpad/issues"
target="_blank">ESP launchpad Issues</a></p>
<p>We will be happy to help you resolve your issues !</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer border-top-0">
<div class="field-container" data-toggle="tooltip" data-bs-placement="top"
title="You can wait some more time, and we'll continue to attempt the connection"
style="display: inline-block">
<button type="button" class="app-button btn btn-outline-primary" data-bs-dismiss="modal"
id="waitButton">
Wait For Connection
</button>
</div>
<div class="field-container" data-toggle="tooltip" data-bs-placement="top"
title="You can try it again !" style="display: inline-block">
<button type="button" class="app-button btn btn-outline-dark" onClick="window.location.reload();">
Try Again
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal for error troubleshoot ends-->

<div id="main" class="maincontainer container">
<!-- Responsive navbar-->
Expand Down
58 changes: 46 additions & 12 deletions minimal-launchpad/minimal_ui_index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ const lblConnTo = document.getElementById("lblConnTo");
const message = document.getElementById("message");
const commandForm = document.getElementById("commandForm");
const commandInput = document.getElementById("commandInput");
const errorTroubleshootModalToggleButton = document.getElementById("errorTroubleshootModalToggleButton");
const errorTroubleshootModal = document.getElementById("errorTroubleshootModal");
const errorTroubleshootModalTitle = document.getElementById("errorTroubleshootModalTitle");
const waitButton = document.getElementById("waitButton");
const errorMessage = document.getElementById("errorMessage");
const errorMessageDescription = document.getElementById("errorMessageDescription");
const deviceConnectionDelayTimeout = 30000;
let deviceConnectionTimeout = undefined;
const commandHistory = [];
let historyIndex = -1;

Expand Down Expand Up @@ -83,6 +91,14 @@ async function downloadAndFlash() {
};
await esploader.write_flash(flashOptions);
} catch (error) {
errorTroubleshootModalToggleButton.click();
waitButton.style.display = "none";
errorTroubleshootModalTitle.textContent = "Flashing Error";
errorMessageDescription.textContent = "There is an error while flashing the firmware onto the device.";
errorMessage.textContent = `Error: ${error.message}`;
errorMessage.style.display = "block";
term.writeln(`\x1b[1;31mError: ${error.message}`);
throw "Flashing Error";
}
}

Expand All @@ -92,7 +108,9 @@ function MDtoHtml() {
converter.setFlavor('github');
try {
fetch(config[config[application][0]].readme.text).then(response => {
return response.text();
if (response.ok) {
return response.text();
}
}).then(result => {
let htmlText = converter.makeHtml(result);
if (htmlText) {
Expand Down Expand Up @@ -174,6 +192,9 @@ async function connectToDevice() {
device = await navigator.serial.requestPort({
filters: utilities.usbPortFilters
});
deviceConnectionTimeout = setTimeout(function() {
errorTroubleshootModalToggleButton.click();
}, deviceConnectionDelayTimeout);
transport = new Transport(device);
}
spinner.style.display = "flex";
Expand All @@ -200,12 +221,27 @@ async function connectToDevice() {
connected = true;

chipDesc = await esploader.main_fn();
clearTimeout(deviceConnectionTimeout);
if (errorTroubleshootModal.classList.contains("show")) {
errorTroubleshootModalToggleButton.click();
}
chip = esploader.chip.CHIP_NAME;

await esploader.flash_id();
} catch (e) {
} catch (error) {
clearTimeout(deviceConnectionTimeout);
if (!errorTroubleshootModal.classList.contains("show")) {
errorTroubleshootModalToggleButton.click();
}
waitButton.style.display = "none";
errorTroubleshootModalTitle.textContent = "Connection Error";
errorMessageDescription.textContent = "There is an error while connecting to the device.";
errorMessage.textContent = `Error: ${error.message}`;
errorMessage.style.display = "block";
throw "Connection Error";
} finally {
spinner.style.display = "none";
}
spinner.style.display = "none";
}

connectButton.onclick = async () => {
Expand All @@ -231,15 +267,6 @@ connectButton.onclick = async () => {
setTimeout(() => {
productInfoContainer.classList.add("bounce");
}, 2500)
} else {
alertContainer.style.display = "block";
lblConnTo.innerHTML = "<b><span style='color:red'>Unable to connect device. Please ensure the device is not connected in another application</span></b>";
lblConnTo.style.display = "block";
setTimeout(() => {
alertContainer.style.display = "none";
connectButton.style.display = "inline-flex";
connected = false;
}, 5000)
}
} catch (error) {
if (error.message === "Failed to execute 'requestPort' on 'Serial': No port selected by the user.") {
Expand Down Expand Up @@ -333,6 +360,13 @@ function autoResize() {
commandInput.style.height = commandInput.scrollHeight + "px";
}

waitButton.onclick = () => {
clearTimeout(deviceConnectionTimeout);
deviceConnectionTimeout = setTimeout(function(){
errorTroubleshootModalToggleButton.click();
}, deviceConnectionDelayTimeout);
}

$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
Expand Down
7 changes: 7 additions & 0 deletions minimal-launchpad/minimal_ui_styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,13 @@
animation: bounce 2s ease-in-out;
}

.errorMessage {
font-size: 14px;
background-color: #f1d2d2;
border: 1px solid #d4bcbc;
color: #a35c5c;
padding: 5px;
}
@keyframes bounce {

0%,
Expand Down

0 comments on commit 1d27cde

Please sign in to comment.