Skip to content

Commit

Permalink
Feature: Add support for displaying Markdown in the default launchpad. (
Browse files Browse the repository at this point in the history 
espressif#45)

Co-authored-by: Rushikesh Patange <rushikesh.patange@espressif.com>
  • Loading branch information
@RushikeshPatange
RushikeshPatange and Rushikesh Patange committed Oct 9, 2023
1 parent 636ce63 commit bbe5c8a
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 11 deletions.
6 changes: 6 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,12 @@ td img {
display: none;
}

.appinfocontainer {
max-height: 400px;
overflow-y: auto;
margin-top: 3rem;
}

@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
Expand Down
18 changes: 12 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link href="css/styles.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link href="css/xterm.css" rel="stylesheet" />
<link href="minimal-launchpad/minimal_ui_styles.css" rel="stylesheet" />
</head>
<body class="d-flex flex-column h-100">
<!-- Modal for flashiing status-->
Expand Down Expand Up @@ -284,15 +285,19 @@ <h5 class="pt-4 pb-2 lh-lg">Choose your own built firmware image from the local

<!-- Console tab content - start -->
<div class="container main-page-tab-panel" data-tab-panel-id="console">
<div class="row">
<div class="col-xs-12 ">
<div class="row" id="consolePageWrapper">
<div class="appinfocontainer col-6" id="appInfoContainer" style="display:none;">
<div id="appInfo"></div>
</div>
<div class="col-12 fade-in-down" id="terminalContainer" style="display:none;">
<div class="button-container text-end mb-sm-3">
<div class="field-container" data-toggle="tooltip" data-placement="right" title="Reset your device" style="display:inline-block">
<button type="button" class="app-button btn btn-outline-dark" id="consoleStartButton" disabled
>Reset Device</button>
<div class="field-container" data-toggle="tooltip" data-placement="right" title="Reset your device" style="display:inline-block;">
<button type="button" class="app-button btn btn-outline-dark" id="consoleStartButton" disabled>
Reset Device
</button>
</div>
</div>
<div class="fade-in-down" id="terminal"></div>
<div id="terminal"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -433,6 +438,7 @@ <h4 class=" mb-4" style="color: #e63f36;"><b>Publish your own firmware apps</b><
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.3/pako.js"></script>
<script type="text/javascript" src="node_modules/toml-js/src/toml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>

<script src="js/index.js" type="module"></script>
<!-- Bootstrap core JS-->
Expand Down
84 changes: 79 additions & 5 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const setupQRCodeContainer = document.getElementById("setupQRCodeContainer");
const setupQRCodeContainerQS = document.getElementById("setupQRCodeContainerQS");
const setupLogoContainer = document.getElementById("setupLogoContainer");
const setupLogoContainerQS = document.getElementById("setupLogoContainerQS");
const appInfoContainer = document.getElementById("appInfoContainer");
const terminalContainer = document.getElementById("terminalContainer");
const appInfo = document.getElementById("appInfo");
const consolePageWrapper = document.getElementById("consolePageWrapper");

let resizeTimeout = false;

Expand Down Expand Up @@ -58,8 +62,7 @@ let ios_app_url = "";
let android_app_url = "";
let setup_payload_logo_url = "";
let setup_qrcode_payload = "";

terminal.style.display = "none";
let markdown_payload_url = "";

disconnectButton.style.display = "none";
eraseButton.style.display = "none";
Expand Down Expand Up @@ -129,6 +132,9 @@ function buildQuickTryUI_v1_0() {
if(supported_apps) {
addDeviceTypeOption(supported_apps);
populateSupportedChipsets(config[supported_apps[0]]);
if (config[supported_apps[0]]["readme.text"]) {
markdown_payload_url = config[supported_apps[0]]["readme.text"];
}
}
setAppURLs(config[supported_apps[0]]);
}
Expand Down Expand Up @@ -214,6 +220,11 @@ $('#frameworkSel').on('change', function() {
$('#device').on('change', function() {
populateSupportedChipsets(config[deviceTypeSelect.value]);
setAppURLs(config[deviceTypeSelect.value]);
if (config[deviceTypeSelect.value]["readme.text"]) {
markdown_payload_url = config[deviceTypeSelect.value]["readme.text"];
} else {
markdown_payload_url = "";
}
});

$(function () {
Expand Down Expand Up @@ -276,7 +287,7 @@ function postConnectControls() {
disconnectButton.style.display = "initial";
eraseButton.style.display = "initial";
filesDiv.style.display = "initial";
terminal.style.display = "block"
terminalContainer.style.display = "block";
}
else
lblConnTo.innerHTML = "<b><span style='color:red'>Unable to detect device. Please ensure the device is not connected in another application</span></b>";
Expand Down Expand Up @@ -334,6 +345,7 @@ resetButton.onclick = async () => {

eraseButton.onclick = async () => {
postFlashClick();
terminalContainer.classList.remove("fade-in-down");
eraseButton.disabled = true;
$('#v-pills-console-tab').click();
await esploader.erase_flash();
Expand Down Expand Up @@ -393,7 +405,7 @@ disconnectButton.onclick = async () => {
await device.close();
}
}
terminal.style.display = "none";
terminalContainer.style.display = "none";
term.clear();
connected = false;
$("#baudrates").prop("disabled", false);
Expand All @@ -409,6 +421,7 @@ disconnectButton.onclick = async () => {
lblConnTo.style.display = "none";
alertDiv.style.display = "none";
ensureConnect.style.display = "initial";
clearAppInfoHistory();
cleanUp();
};

Expand Down Expand Up @@ -485,6 +498,7 @@ programButton.onclick = async () => {

fileArr.push({data:fileObj.data, address:offset});
}
clearAppInfoHistory();
$('#v-pills-console-tab').click();
try {
const flashOptions = {
Expand All @@ -497,6 +511,7 @@ programButton.onclick = async () => {
};
await esploader.write_flash(flashOptions);
postFlashDone();
terminalContainer.classList.remove("fade-in-down");
} catch (e) {
}
}
Expand Down Expand Up @@ -645,6 +660,22 @@ function cleanUpOldFlashHistory() {

}

function clearAppInfoHistory(triggeringAction = "") {
switch (triggeringAction) {
case "handleFlashCleanup":
appInfoContainer.classList.remove("slide-up", "bounce");
terminalContainer.classList.remove("slide-right");
break;
default:
appInfo.innerHTML = "";
appInfoContainer.style.display = "none";
appInfoContainer.classList.remove("slide-up", "bounce");
terminalContainer.classList.add("col-12", "fade-in-down");
terminalContainer.classList.remove("col-6", "slide-right");
break;
}
}

flashButton.onclick = async () => {
if(chipSetsRadioGroup.querySelectorAll("input[type=radio]:checked").length!== 0){
let flashFile = $("input[type='radio'][name='chipType']:checked").val();
Expand All @@ -653,13 +684,37 @@ flashButton.onclick = async () => {
progressMsgQS.style.display = "inline";

cleanUpOldFlashHistory();
clearAppInfoHistory();
postFlashClick();
await downloadAndFlash(file_server_url + flashFile);


if (markdown_payload_url) {
let response = await fetch(markdown_payload_url);
let mdContent = await response.text();
let htmlText = utilities.mdToHtmlConverter(mdContent);

appInfo.innerHTML = htmlText;
appInfoContainer.style.display = "block";
appInfoContainer.classList.add("slide-up");
terminalContainer.classList.remove("col-12", "fade-in-down");
terminalContainer.classList.add("col-6", "slide-right");

setTimeout(() => {
appInfoContainer.classList.add("bounce");
}, 2500);

setTimeout(() => {
clearAppInfoHistory("handleFlashCleanup");
}, 5000);

utilities.resizeTerminal(fitAddon);
}

buildAppLinks();
$("#statusModal").click();
esploader.status = "started";
postFlashDone();
terminalContainer.classList.remove("fade-in-down");
}else{
let previousState = lblConnTo.innerHTML;
let alertChipsetSelectMsg = `<b><span style="color:red">Unable to flash device. Please ensure that chipset type is selected before flashing.</span></b>`;
Expand Down Expand Up @@ -711,3 +766,22 @@ $( window ).resize(function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => utilities.resizeTerminal(fitAddon), 300);
});

function removeClassesOnMediaQuery() {
const mediaQuery = window.matchMedia("(max-width: 992px)");
function handleMediaQueryChange(mediaQuery) {
if (mediaQuery.matches) {
appInfoContainer.classList.remove("col-6");
terminalContainer.classList.remove("col-6");
consolePageWrapper.classList.add("flex-column-reverse");
} else {
appInfoContainer.classList.add("col-6");
terminalContainer.classList.add("col-6");
consolePageWrapper.classList.remove("flex-column-reverse");
}
}
handleMediaQueryChange(mediaQuery);
mediaQuery.addListener(handleMediaQueryChange);
}

removeClassesOnMediaQuery();
6 changes: 6 additions & 0 deletions js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,12 @@ export function isWebUSBSerialSupported() {
return (isSafari || isFirefox);
}

export function mdToHtmlConverter(markdownContent) {
let converter = new showdown.Converter({ tables: true });
converter.setFlavor('github');
return converter.makeHtml(markdownContent);
}

// unused functions
function convertUint8ArrayToBinaryString(u8Array) {
var i, len = u8Array.length, b_str = "";
Expand Down

0 comments on commit bbe5c8a

Please sign in to comment.