Skip to content

Commit

Permalink
feat: show application configuration on quick start page
Browse files Browse the repository at this point in the history
  • Loading branch information
Rushikesh Patange committed May 14, 2024
1 parent 3c4eacb commit 5177125
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 56 deletions.
4 changes: 4 additions & 0 deletions config/config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ firmware_images_url = "<URL to your firmware images directory>"
# There should be a config section per listed App
supported_apps = ["YOUR_FIRMWARE_APP_NAME"]

# Optional: This should be a publicly accessible URL of the application configuration markdown file
# The markdown file will display the application configuration.
# It might include details such as the revisions of esp-idf, esp-matter, etc. or any other application configuration
config_readme_url = "<APP_CONFIG_README_FILE_URL>"

[YOUR_FIRMWARE_APP_NAME]
# ESP32 Chipsets for which you have a supported Firmware App. Define a property for each supported chipset in the given format.
Expand Down
13 changes: 13 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,11 @@ td img {
margin-top: 3rem;
}

.app-config-info-container {
max-width: 25rem;
max-height: 20rem;
}

@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
Expand All @@ -271,6 +276,10 @@ td img {
.navbar-brand .tagline {
display: none;
}
.app-config-info-container {
min-width: 100%;
margin: 2rem 0rem;
}
}

@media (max-width: 992px) {
Expand All @@ -296,6 +305,10 @@ td img {
.form > .field-container > label {
margin-bottom: 15px;
}

.form-config-info-container-wrapper {
display: block !important;
}
}
@keyframes fadeInDown {
from {
Expand Down
112 changes: 57 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,73 +170,75 @@ <h4 class="topic" data-target-tab-panel-id="about">
<div class="container tabs-section main-page-tab-panel" data-tab-panel-id="quickstart">
<h5 class="pt-4 pb-2 lh-lg"><span id="qtLabel">Choose from some of ESP's pre-built, out-of-the-box examples to flash and play</span></h5>
<div class="form">
<div class="field-container">
<label>
Select Application
</label>
<div class="field">
<select name="device" id="device">
<option value="Matter-AllClustersApp">Matter-AllClustersApp</option>
<option value="RainMaker-Fan">RainMaker-Fan</option>
<option value="RainMaker-GPIO">RainMaker-GPIO</option>
<option value="RainMaker-HomekitSwitch">RainMaker-HomekitSwitch</option>
<option value="RainMaker-LedLight">RainMaker-LedLight</option>
<option value="RainMaker-MultiDevice">RainMaker-MultiDevice</option>
<option value="RainMaker-Switch">RainMaker-Switch</option>
<option value="RainMaker-TemperatureSensor">RainMaker-TemperatureSensor</option>
</select>
</div>
</div>

<div class="field-container">
<label>
ESP Chipset Type
</label>
<div class="field">
<div id="chipsets">
<div class="form-check-inline">
<label class="form-check-label" for="radio1">ESP32&nbsp;
<input type="radio" checked class="form-check-input" name="chipType" id="radio1" value="esp32_matter_all-clusters-app_te6_merged.bin">
</label>
<div class="d-flex justify-content-between flex-wrap form-config-info-container-wrapper">
<div class="form-container">
<div class="field-container">
<label>
Select Application
</label>
<div class="field">
<select name="device" id="device">
<option value="Matter-AllClustersApp">Matter-AllClustersApp</option>
<option value="RainMaker-Fan">RainMaker-Fan</option>
<option value="RainMaker-GPIO">RainMaker-GPIO</option>
<option value="RainMaker-HomekitSwitch">RainMaker-HomekitSwitch</option>
<option value="RainMaker-LedLight">RainMaker-LedLight</option>
<option value="RainMaker-MultiDevice">RainMaker-MultiDevice</option>
<option value="RainMaker-Switch">RainMaker-Switch</option>
<option value="RainMaker-TemperatureSensor">RainMaker-TemperatureSensor</option>
</select>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">ESP32-C3&nbsp;
<input type="radio" class="form-check-input" name="chipType" id="radio2" value="esp32c3_matter_all-clusters-app_te6_merged.bin">
</label>
</div>
<div class="field-container">
<label>
ESP Chipset Type
</label>
<div class="field">
<div id="chipsets">
<div class="form-check-inline">
<label class="form-check-label" for="radio1">ESP32&nbsp;
<input type="radio" checked class="form-check-input" name="chipType" id="radio1" value="esp32_matter_all-clusters-app_te6_merged.bin">
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">ESP32-C3&nbsp;
<input type="radio" class="form-check-input" name="chipType" id="radio2" value="esp32c3_matter_all-clusters-app_te6_merged.bin">
</label>
</div>
</div>
</div>
</div>
<div class="field-container">
<div class="field-container" title="Click on 'Connect' button in top Menu" style="display:inline-block" data-toggle="tooltip" id="flashWrapper">
<button class="app-button submit-form-button btn btn-outline-dark" id="flashButton" disabled>Flash</button>
</div>
</div>
</div>
</div>

<div class="field-container">

<div class="field-container" title="Click on 'Connect' button in top Menu" style="display:inline-block" data-toggle="tooltip" id="flashWrapper">
<button class="app-button submit-form-button btn btn-outline-dark" id="flashButton" disabled>Flash</button>
<div class="card text-dark bg-light app-config-info-container" id="appConfigInfoContainer" style="display: none;">
<div class="card-header">Application Configuration&colon;</div>
<div class="card-body overflow-auto" id="appConfigInfo"></div>
</div>
</div>
<div class="mt-xl-5 ">
<div class="mt-xl-5" id="progressMsgContainerQS" style="display:none">
<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>
<br><br>
</div>
<br><br>
<div>
<div id='qrcodeContainerQS' style='display:flex'>
<div id="qrAndroidRowQS">
<div id="androidAppLogoQS" style="padding-bottom: 5px;"></div>
<div id='qrcodeAndroidAppQS' style="padding-right: 40px;"></div>
</div>
<div id="qrIOSRowQS">
<div id="iosAppLogoQS" style="padding-bottom: 5px;"></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 id='qrcodeContainerQS' style='display:flex'>
<div id="qrAndroidRowQS">
<div id="androidAppLogoQS" style="padding-bottom: 5px;"></div>
<div id='qrcodeAndroidAppQS' style="padding-right: 40px;"></div>
</div>
<div id="qrIOSRowQS">
<div id="iosAppLogoQS" style="padding-bottom: 5px;"></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>
<br> <br>
</div>
</div>
<!-- Quick start tab content - end -->
Expand Down
19 changes: 18 additions & 1 deletion js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ const appInfoContainer = document.getElementById("appInfoContainer");
const terminalContainer = document.getElementById("terminalContainer");
const appInfo = document.getElementById("appInfo");
const consolePageWrapper = document.getElementById("consolePageWrapper");
const appConfigInfoContainer = document.getElementById("appConfigInfoContainer");
const appConfigInfo = document.getElementById("appConfigInfo");
const progressMsgContainerQS = document.getElementById("progressMsgContainerQS");

let resizeTimeout = false;

Expand Down Expand Up @@ -69,6 +72,7 @@ let setup_qrcode_payload = "";
let markdown_payload_url = "";
let isFlashByDIYMode = false;
let isFlashByQuickTryMode = false;
let config_readme_url = "";

disconnectButton.style.display = "none";
eraseButton.style.display = "none";
Expand Down Expand Up @@ -133,8 +137,20 @@ async function buildQuickTryUI() {


//Parsing of toml based on v1.0 and builing UI accordingly.
function buildQuickTryUI_v1_0() {
async function buildQuickTryUI_v1_0() {
const supported_apps = config["supported_apps"];
config_readme_url = config['config_readme_url'] || '';
if (config_readme_url) {
try {
let response = await fetch(config_readme_url);
let mdContent = await response.text();
let htmlText = utilities.mdToHtmlConverter(mdContent);
appConfigInfoContainer.style.display = "flex";
appConfigInfo.innerHTML = htmlText;
} catch (e) {
appConfigInfoContainer.style.display = "none";
}
}
if(supported_apps) {
addDeviceTypeOption(supported_apps);
populateSupportedChipsets(config[supported_apps[0]]);
Expand Down Expand Up @@ -707,6 +723,7 @@ flashButton.onclick = async () => {
var file_server_url = config.firmware_images_url;

progressMsgQS.style.display = "inline";
progressMsgContainerQS.style.display = "block";

cleanUpOldFlashHistory();
clearAppInfoHistory();
Expand Down

0 comments on commit 5177125

Please sign in to comment.