Skip to content

Commit

Permalink
Merge pull request #25 from RushikeshPatange/feature/setup_payload_su…
Browse files Browse the repository at this point in the history 
…pport

Feature Added Support For Setup Payload Logo And Qrcode
  • Loading branch information
@RushikeshPatange
RushikeshPatange committed Aug 31, 2023
2 parents 2e125db + b45a4d5 commit 4baf218
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 5 deletions.
18 changes: 15 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ <h4 class="modal-title"><span style="color: #17a2b8;"> ESP Firmware Flashing Sta
<div><p>Flashing of firmware is completed! Click the <b>'Reset Device'</b> button on the Console Tab to reset your device with the new flashed firnware.
<br><br>
<span id="appDownloadLink"></span>
<br /><br />
<span id="setupPayloadInfoText"></span>
</p>
</div>
<hr>
Expand All @@ -42,7 +44,11 @@ <h4 class="modal-title"><span style="color: #17a2b8;"> ESP Firmware Flashing Sta
</div>
<div id="qrIOSRow">
<div id="iosAppLogo" style="padding-bottom: 5px;"></div>
<div id='qrcodeIOSApp'></div>
<div id='qrcodeIOSApp' style="padding-right: 40px;"></div>
</div>
<div id="setupPayloadRow" class="ms-auto">
<div id="setupLogoContainer" style="padding-bottom: 5px;"></div>
<div id='setupQRCodeContainer'></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -207,8 +213,10 @@ <h5 class="pt-4 pb-2 lh-lg"><span id="qtLabel">Choose from some of ESP's pre-bui
<button class="app-button submit-form-button btn btn-outline-dark" id="flashButton" disabled>Flash</button>
</div>
</div>
<div class="field-container">
<div class="mt-xl-5 ">
<span id="progressMsgQS" style="display:none"><i>This may take a short while. Check console for the progress</i></span>
<br /><br />
<span id="setupPayloadInfoTextQS"></span>
</div>
<br><br>
<div>
Expand All @@ -219,7 +227,11 @@ <h5 class="pt-4 pb-2 lh-lg"><span id="qtLabel">Choose from some of ESP's pre-bui
</div>
<div id="qrIOSRowQS">
<div id="iosAppLogoQS" style="padding-bottom: 5px;"></div>
<div id='qrcodeIOSAppQS' style="padding-bottom: 40px;"></div>
<div id='qrcodeIOSAppQS' style="padding-right: 40px;"></div>
</div>
<div id="setupPayloadRowQS" class="ms-auto">
<div id="setupLogoContainerQS" style="padding-bottom: 5px;"></div>
<div id='setupQRCodeContainerQS'></div>
</div>
</div>
</div>
Expand Down
62 changes: 60 additions & 2 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ const deviceTypeSelect = document.getElementById("device");
const frameworkSelect = document.getElementById("frameworkSel");
const chipSetsRadioGroup = document.getElementById("chipsets");
const mainContainer = document.getElementById("mainContainer");
const setupPayloadRow = document.getElementById("setupPayloadRow");
const setupPayloadRowQS = document.getElementById("setupPayloadRowQS");
const setupQRCodeContainer = document.getElementById("setupQRCodeContainer");
const setupQRCodeContainerQS = document.getElementById("setupQRCodeContainerQS");
const setupLogoContainer = document.getElementById("setupLogoContainer");
const setupLogoContainerQS = document.getElementById("setupLogoContainerQS");

let resizeTimeout = false;

import * as utilities from "./utils.js";
Expand Down Expand Up @@ -49,6 +56,8 @@ let esploader;
let connected = false;
let ios_app_url = "";
let android_app_url = "";
let setup_payload_logo_url = "";
let setup_qrcode_payload = "";

terminal.style.display = "none";

Expand Down Expand Up @@ -177,6 +186,8 @@ function populateSupportedChipsets(deviceConfig) {
function setAppURLs(appConfig) {
ios_app_url = appConfig.ios_app_url;
android_app_url = appConfig.android_app_url;
setup_payload_logo_url = appConfig.setup_payload_logo;
setup_qrcode_payload = appConfig.setup_payload;
}

$('#frameworkSel').on('change', function() {
Expand Down Expand Up @@ -499,8 +510,9 @@ async function downloadAndFlash(fileURL) {
function buildAppLinks(){
let hrElement = document.getElementById("preview_body").querySelector("hr");
hrElement.style.display = "block";
let defaultAppURLsHTML = "Note: You can download phone app from the app store and interact with your device. Scan the QRCode to access the respective apps.<br>";
let defaultAppURLsHTML = "Note: You can download phone app from the app store and interact with your device. Scan the QRCode to access the respective apps.";
let appURLsHTML = "";
let setupPayloadInfo = "To set up the device, use a supported phone app to scan the QRCode located on the right-hand side.";

if(android_app_url){
new QRCode(document.getElementById("qrcodeAndroidApp"), {
Expand Down Expand Up @@ -551,8 +563,45 @@ function buildAppLinks(){
$("#iosAppLogoQS").html("<a href='" + ios_app_url + "' target='_blank'><img src='./assets/appstore_download.png' height='50' width='130'></a>");
appURLsHTML = defaultAppURLsHTML;
}

if (setup_qrcode_payload) {
new QRCode(setupQRCodeContainer, {
text: setup_qrcode_payload,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});

new QRCode(setupQRCodeContainerQS, {
text: setup_qrcode_payload,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});

if (setup_payload_logo_url) {
setupLogoContainer.innerHTML = `<img src=${setup_payload_logo_url} height='50' width='130' />`;
setupLogoContainerQS.innerHTML = `<img src=${setup_payload_logo_url} height='50' width='130' />`;
} else {
let emptyPayloadLogoCSS = `position:relative; top:50px`
setupQRCodeContainer.style.cssText = emptyPayloadLogoCSS;
setupQRCodeContainerQS.style.cssText = emptyPayloadLogoCSS;
}

document.getElementById("setupPayloadInfoText").innerText = setupPayloadInfo;
document.getElementById("setupPayloadInfoTextQS").innerText = setupPayloadInfo;

} else {
setupPayloadRow.style.display = "none";
setupPayloadRowQS.style.display = "none";
}

if(appURLsHTML === defaultAppURLsHTML){
$("#progressMsgQS").html("Firmware Image flashing is complete. " + appURLsHTML);
$("#progressMsgQS").html("Firmware Image flashing is complete.<br /><br />" + appURLsHTML);
$("#appDownloadLink").html(appURLsHTML);
}else{
$("#progressMsgQS").html("Firmware Image flashing is complete. ");
Expand All @@ -570,6 +619,15 @@ function cleanUpOldFlashHistory() {
$("#qrcodeAndroidAppQS").html("");
$("#qrcodeIOSApp").html("");
$("#qrcodeIOSAppQS").html("");
$("#setupLogoContainer").html("");
$("#setupLogoContainerQS").html("");
$("#setupPayloadInfoText").text("");
$("#setupPayloadInfoTextQS").text("");
$("#setupQRCodeContainer").html("");
$("#setupQRCodeContainerQS").html("");
setupQRCodeContainer.style.cssText = "";
setupQRCodeContainerQS.style.cssText = "";

}

flashButton.onclick = async () => {
Expand Down

0 comments on commit 4baf218

Please sign in to comment.