More webUI improvements
Robert Stein
parent
21c08432cd
commit
0be2ccb26d
|
|
@ -0,0 +1,255 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
<style>.hidden{display:none} .bx--form-item{margin-bottom:20px};</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="cv-header bx--header">
|
||||||
|
<a href="index.html" class="cv-header-name bx--header__name">
|
||||||
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
||||||
|
V4.0
|
||||||
|
</a>
|
||||||
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
||||||
|
<div class="bx--header__global">
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
||||||
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
||||||
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
||||||
|
<ul class="cv-switcher bx--switcher__item">
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
||||||
|
<div class="bx--toast-notification__details">
|
||||||
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
||||||
|
<div class="bx--toast-notification__subtitle">
|
||||||
|
<span>88%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bx--grid bx--grid--full-width" style='margin-top:88px'>
|
||||||
|
<div class="page-header" style="margin-bottom:20px"><h4 class="page-header__label">Configure</h4><h1 id="page-title" class="page-header__title">Station</h1></div>
|
||||||
|
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--data-table-container " data-table>
|
||||||
|
<div class="bx--data-table-header">
|
||||||
|
<h4 class="bx--data-table-header__title">Printers to monitor</h4>
|
||||||
|
<p class="bx--data-table-header__description">Configuration</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="bx--table-toolbar ">
|
||||||
|
<div class="bx--toolbar-content">
|
||||||
|
<button class="bx--btn bx--btn--sm bx--btn--primary">
|
||||||
|
Add new
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></path></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<table class="bx--data-table" >
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th><span class="bx--table-header-label">Name</span></th>
|
||||||
|
<th><span class="bx--table-header-label">Type</span></th>
|
||||||
|
<th><span class="bx--table-header-label">Hostname</span></th>
|
||||||
|
<th><span class="bx--table-header-label">IP</span></th>
|
||||||
|
<th><span class="bx--table-header-label">State</span></th>
|
||||||
|
<th><span class="bx--table-header-label">Api Key/User/Password</span></th>
|
||||||
|
<th class="bx--table-column-menu" style="width: 3.25rem"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>I3 Mega</td>
|
||||||
|
<td>Klipper</td>
|
||||||
|
<td>--</td>
|
||||||
|
<td>192.168.0.241:7125</td>
|
||||||
|
<td>Offline</td>
|
||||||
|
<td>Offline</td>
|
||||||
|
<td class="bx--table-column-menu" style="width: 3.25rem">
|
||||||
|
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
|
||||||
|
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" data-floating-menu-direction="bottom">
|
||||||
|
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
|
||||||
|
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
|
||||||
|
<div class="bx--overflow-menu-options__option-content">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
|
||||||
|
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
|
||||||
|
<div class="bx--overflow-menu-options__option-content">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<form action="/updateweatherconfig" method="get">
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="isWeatherEnabled" type="checkbox" name="isWeatherEnabled">
|
||||||
|
<label class="bx--toggle-input__label" for="isWeatherEnabled"
|
||||||
|
aria-label="example toggle with state indicator text">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Display Weather when printer is off deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Display Weather when printer is off activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="metric" type="checkbox" name="metric" checked="checked">
|
||||||
|
<label class="bx--toggle-input__label" for="metric"
|
||||||
|
aria-label="example toggle with state indicator text">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Show in Celsius</span>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Show in Fahrenheit</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="openWeatherMapApiKey" class="bx--label">OpenWeatherMap API Key (get from <a href="https://openweathermap.org/" target="_BLANK">here</a>)</label>
|
||||||
|
<input id="openWeatherMapApiKey" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="openWeatherMapApiKey"
|
||||||
|
value="e6df83d1aa3df77420f265a2e263a5d3"
|
||||||
|
maxlength="60">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="city1" class="bx--label">Zeuthen (<a href="http://openweathermap.org/find" target="_BLANK"><i class="fa fa-search"></i> Search for City ID</a>)</label>
|
||||||
|
<input id="city1" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="city1"
|
||||||
|
value="2804646"
|
||||||
|
onkeypress="return isNumberKey(event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto bx--select">
|
||||||
|
<label for="language" class="bx--label">Weather Language</label>
|
||||||
|
<div class="bx--select-input__wrapper">
|
||||||
|
<select id="language" class="bx--select-input" name="language">
|
||||||
|
<option class="bx--select-option">ar</option>
|
||||||
|
<option class="bx--select-option">bg</option>
|
||||||
|
<option class="bx--select-option">ca</option>
|
||||||
|
<option class="bx--select-option">cz</option>
|
||||||
|
<option class="bx--select-option" selected="">de</option>
|
||||||
|
<option class="bx--select-option">el</option>
|
||||||
|
<option class="bx--select-option">en</option>
|
||||||
|
<option class="bx--select-option">fa</option>
|
||||||
|
<option class="bx--select-option">fi</option>
|
||||||
|
<option class="bx--select-option">fr</option>
|
||||||
|
<option class="bx--select-option">gl</option>
|
||||||
|
<option class="bx--select-option">hr</option>
|
||||||
|
<option class="bx--select-option">hu</option>
|
||||||
|
<option class="bx--select-option">it</option>
|
||||||
|
<option class="bx--select-option">ja</option>
|
||||||
|
<option class="bx--select-option">kr</option>
|
||||||
|
<option class="bx--select-option">la</option>
|
||||||
|
<option class="bx--select-option">lt</option>
|
||||||
|
<option class="bx--select-option">mk</option>
|
||||||
|
<option class="bx--select-option">nl</option>
|
||||||
|
<option class="bx--select-option">pl</option>
|
||||||
|
<option class="bx--select-option">pt</option>
|
||||||
|
<option class="bx--select-option">ro</option>
|
||||||
|
<option class="bx--select-option">ru</option>
|
||||||
|
<option class="bx--select-option">se</option>
|
||||||
|
<option class="bx--select-option">sk</option>
|
||||||
|
<option class="bx--select-option">sl</option>
|
||||||
|
<option class="bx--select-option">es</option>
|
||||||
|
<option class="bx--select-option">tr</option>
|
||||||
|
<option class="bx--select-option">ua</option>
|
||||||
|
<option class="bx--select-option">vi</option>
|
||||||
|
<option class="bx--select-option">zh_cn</option>
|
||||||
|
<option class="bx--select-option">zh_tw</option>
|
||||||
|
</select>
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<button class="bx--btn bx--btn--primary" type="submit">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<script>function isNumberKey(e){var h=e.which?e.which:event.keyCode;return!(h>31&&(h<48||h>57))}</script>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSidebar() {
|
||||||
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.add('hidden');
|
||||||
|
}
|
||||||
|
function openWifiInfo() {
|
||||||
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
<style>.hidden{display:none} .bx--form-item{margin-bottom:20px};</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="cv-header bx--header">
|
||||||
|
<a href="index.html" class="cv-header-name bx--header__name">
|
||||||
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
||||||
|
V4.0
|
||||||
|
</a>
|
||||||
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
||||||
|
<div class="bx--header__global">
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
||||||
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
||||||
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
||||||
|
<ul class="cv-switcher bx--switcher__item">
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
||||||
|
<div class="bx--toast-notification__details">
|
||||||
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
||||||
|
<div class="bx--toast-notification__subtitle">
|
||||||
|
<span>88%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bx--grid bx--grid--full-width" style='margin-top:88px'>
|
||||||
|
<div class="page-header" style="margin-bottom:20px"><h4 class="page-header__label">Configure</h4><h1 id="page-title" class="page-header__title">Station</h1></div>
|
||||||
|
|
||||||
|
<form action="/updatestationconfig" method="get">
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="isClockEnabled" type="checkbox" name="isClockEnabled">
|
||||||
|
<label class="bx--toggle-input__label" for="isClockEnabled">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Display Clock when printer is off deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Display Clock when printer is off activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="is24hour" type="checkbox" name="is24hour">
|
||||||
|
<label class="bx--toggle-input__label" for="is24hour">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Use 24 Hour Clock (military time) deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Use 24 Hour Clock (military time) activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="invDisp" type="checkbox" name="invDisp">
|
||||||
|
<label class="bx--toggle-input__label" for="invDisp">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Flip display orientation deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Flip display orientation activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="useFlash" type="checkbox" name="useFlash">
|
||||||
|
<label class="bx--toggle-input__label" for="useFlash">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Flash System LED on Service Calls deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Flash System LED on Service Calls activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto bx--select">
|
||||||
|
<label for="refresh" class="bx--label">Clock Sync / Weather Refresh (minutes)</label>
|
||||||
|
<div class="bx--select-input__wrapper">
|
||||||
|
<select id="refresh" class="bx--select-input" name="refresh">
|
||||||
|
<option class="bx--select-option">10</option>
|
||||||
|
<option class="bx--select-option">15</option>
|
||||||
|
<option class="bx--select-option">20</option>
|
||||||
|
<option class="bx--select-option">30</option>
|
||||||
|
<option class="bx--select-option">60</option>
|
||||||
|
</select>
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="utcoffset" class="bx--label">UTC Time Offset</label>
|
||||||
|
<input id="utcoffset" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="utcoffset"
|
||||||
|
value="0"
|
||||||
|
maxlength="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="isBasicAuth" type="checkbox" name="isBasicAuth">
|
||||||
|
<label class="bx--toggle-input__label" for="isBasicAuth">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Use Security Credentials for Configuration Changes deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Use Security Credentials for Configuration Changes activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="userid" class="bx--label">User ID (for this interface)</label>
|
||||||
|
<input id="userid" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="userid"
|
||||||
|
value="admin"
|
||||||
|
maxlength="20">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="stationpassword" class="bx--label">Password (for this interface)</label>
|
||||||
|
<input id="stationpassword" type="password"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="stationpassword"
|
||||||
|
value="admin"
|
||||||
|
maxlength="20">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<button class="bx--btn bx--btn--primary" type="submit">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSidebar() {
|
||||||
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.add('hidden');
|
||||||
|
}
|
||||||
|
function openWifiInfo() {
|
||||||
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
<style>.hidden{display:none} .bx--form-item{margin-bottom:20px};</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="cv-header bx--header">
|
||||||
|
<a href="index.html" class="cv-header-name bx--header__name">
|
||||||
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
||||||
|
V4.0
|
||||||
|
</a>
|
||||||
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
||||||
|
<div class="bx--header__global">
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
||||||
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
||||||
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
||||||
|
<ul class="cv-switcher bx--switcher__item">
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
||||||
|
<div class="bx--toast-notification__details">
|
||||||
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
||||||
|
<div class="bx--toast-notification__subtitle">
|
||||||
|
<span>88%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bx--grid bx--grid--full-width" style='margin-top:88px'>
|
||||||
|
<div class="page-header" style="margin-bottom:20px"><h4 class="page-header__label">Configure</h4><h1 id="page-title" class="page-header__title">Weather</h1></div>
|
||||||
|
|
||||||
|
|
||||||
|
<form action="/updateweatherconfig" method="get">
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="isWeatherEnabled" type="checkbox" name="isWeatherEnabled">
|
||||||
|
<label class="bx--toggle-input__label" for="isWeatherEnabled"
|
||||||
|
aria-label="example toggle with state indicator text">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Display Weather when printer is off deactivated</span>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Display Weather when printer is off activated</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--col--auto bx--form-item">
|
||||||
|
<input class="bx--toggle-input bx--toggle-input--small" id="metric" type="checkbox" name="metric" checked="checked">
|
||||||
|
<label class="bx--toggle-input__label" for="metric"
|
||||||
|
aria-label="example toggle with state indicator text">
|
||||||
|
<span class="bx--toggle__switch">
|
||||||
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
||||||
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="bx--toggle__text--on" aria-hidden="true">Show in Celsius</span>
|
||||||
|
<span class="bx--toggle__text--off" aria-hidden="true">Show in Fahrenheit</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="openWeatherMapApiKey" class="bx--label">OpenWeatherMap API Key (get from <a href="https://openweathermap.org/" target="_BLANK">here</a>)</label>
|
||||||
|
<input id="openWeatherMapApiKey" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="openWeatherMapApiKey"
|
||||||
|
value="e6df83d1aa3df77420f265a2e263a5d3"
|
||||||
|
maxlength="60">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<label for="city1" class="bx--label">Zeuthen (<a href="http://openweathermap.org/find" target="_BLANK"><i class="fa fa-search"></i> Search for City ID</a>)</label>
|
||||||
|
<input id="city1" type="text"
|
||||||
|
class="bx--text-input"
|
||||||
|
name="city1"
|
||||||
|
value="2804646"
|
||||||
|
onkeypress="return isNumberKey(event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto bx--select">
|
||||||
|
<label for="language" class="bx--label">Weather Language</label>
|
||||||
|
<div class="bx--select-input__wrapper">
|
||||||
|
<select id="language" class="bx--select-input" name="language">
|
||||||
|
<option class="bx--select-option">ar</option>
|
||||||
|
<option class="bx--select-option">bg</option>
|
||||||
|
<option class="bx--select-option">ca</option>
|
||||||
|
<option class="bx--select-option">cz</option>
|
||||||
|
<option class="bx--select-option" selected="">de</option>
|
||||||
|
<option class="bx--select-option">el</option>
|
||||||
|
<option class="bx--select-option">en</option>
|
||||||
|
<option class="bx--select-option">fa</option>
|
||||||
|
<option class="bx--select-option">fi</option>
|
||||||
|
<option class="bx--select-option">fr</option>
|
||||||
|
<option class="bx--select-option">gl</option>
|
||||||
|
<option class="bx--select-option">hr</option>
|
||||||
|
<option class="bx--select-option">hu</option>
|
||||||
|
<option class="bx--select-option">it</option>
|
||||||
|
<option class="bx--select-option">ja</option>
|
||||||
|
<option class="bx--select-option">kr</option>
|
||||||
|
<option class="bx--select-option">la</option>
|
||||||
|
<option class="bx--select-option">lt</option>
|
||||||
|
<option class="bx--select-option">mk</option>
|
||||||
|
<option class="bx--select-option">nl</option>
|
||||||
|
<option class="bx--select-option">pl</option>
|
||||||
|
<option class="bx--select-option">pt</option>
|
||||||
|
<option class="bx--select-option">ro</option>
|
||||||
|
<option class="bx--select-option">ru</option>
|
||||||
|
<option class="bx--select-option">se</option>
|
||||||
|
<option class="bx--select-option">sk</option>
|
||||||
|
<option class="bx--select-option">sl</option>
|
||||||
|
<option class="bx--select-option">es</option>
|
||||||
|
<option class="bx--select-option">tr</option>
|
||||||
|
<option class="bx--select-option">ua</option>
|
||||||
|
<option class="bx--select-option">vi</option>
|
||||||
|
<option class="bx--select-option">zh_cn</option>
|
||||||
|
<option class="bx--select-option">zh_tw</option>
|
||||||
|
</select>
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--form-item bx--col bx--col--auto">
|
||||||
|
<button class="bx--btn bx--btn--primary" type="submit">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<script>function isNumberKey(e){var h=e.which?e.which:event.keyCode;return!(h>31&&(h<48||h>57))}</script>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSidebar() {
|
||||||
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.add('hidden');
|
||||||
|
}
|
||||||
|
function openWifiInfo() {
|
||||||
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
<style>.hidden{display:none}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="cv-header bx--header">
|
||||||
|
<a href="index.html" class="cv-header-name bx--header__name">
|
||||||
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
||||||
|
V4.0
|
||||||
|
</a>
|
||||||
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
||||||
|
<div class="bx--header__global">
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
||||||
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
||||||
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
||||||
|
<ul class="cv-switcher bx--switcher__item">
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
||||||
|
<div class="bx--toast-notification__details">
|
||||||
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
||||||
|
<div class="bx--toast-notification__subtitle">
|
||||||
|
<div>88%</div>
|
||||||
|
<span>88%</span>
|
||||||
|
<span>88%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bx--grid bx--grid--full-width" style='margin-top:88px'>
|
||||||
|
<div class='bx--row'>
|
||||||
|
<div class='bx--col-md-4'>
|
||||||
|
<form method='POST' action='' enctype='multipart/form-data'>
|
||||||
|
<div class='cv-file-uploader cv-form-item bx--form-item'>
|
||||||
|
<strong class='bx--file--label'>Update Firmware</strong>
|
||||||
|
<p class='bx--label-description'>Select the firmware you want to upload</p>
|
||||||
|
<div data-file='' class='bx--file'>
|
||||||
|
<label for='firmware' role='button' tabindex='0' class='bx--file-browse-btn'>
|
||||||
|
<div data-file-drop-container='' class='bx--file__drop-container'>
|
||||||
|
Drag and drop file here or upload
|
||||||
|
<input type='file' id='firmware' accept='.bin,.bin.gz' class='bx--file-input' name='firmware' onchange='document.getElementById("ffile").innerHTML = ""'>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div data-file-container='' class='bx--file-container' id='ffile'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type='submit' value='Update Firmware' class='bx--btn bx--btn--danger'>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class='bx--col-md-4'>
|
||||||
|
<form method='POST' action='' enctype='multipart/form-data'>
|
||||||
|
<div class='cv-file-uploader cv-form-item bx--form-item'>
|
||||||
|
<strong class='bx--file--label'>Update FileSystem</strong>
|
||||||
|
<p class='bx--label-description'>Select the filesystem you want to upload</p>
|
||||||
|
<div data-file='' class='bx--file'>
|
||||||
|
<label for='filesystem' role='button' tabindex='0' class='bx--file-browse-btn'>
|
||||||
|
<div data-file-drop-container='' class='bx--file__drop-container'>
|
||||||
|
Drag and drop file here or upload
|
||||||
|
<input type='file' id='filesystem' accept='.bin,.bin.gz' class='bx--file-input' name='filesystem' onchange="document.getElementById('fsys').innerHTML = ''">
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div data-file-container='' class='bx--file-container' id='fsys'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type='submit' value='Update FileSystem' class='bx--btn bx--btn--danger'>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSidebar() {
|
||||||
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.add('hidden');
|
||||||
|
}
|
||||||
|
function openWifiInfo() {
|
||||||
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
<style>.hidden{display:none}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="cv-header bx--header">
|
||||||
|
<a href="index.html" class="cv-header-name bx--header__name">
|
||||||
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
||||||
|
V4.0
|
||||||
|
</a>
|
||||||
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
||||||
|
<div class="bx--header__global">
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
||||||
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
||||||
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
||||||
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
||||||
|
<ul class="cv-switcher bx--switcher__item">
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
||||||
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
||||||
|
<div class="bx--toast-notification__details">
|
||||||
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
||||||
|
<div class="bx--toast-notification__subtitle">
|
||||||
|
<span>88%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bx--grid bx--grid--full-width" style='margin-top:60px'>
|
||||||
|
<div class="page-header" style='margin-bottom:20px'><h4 class="page-header__label">Firmware</h4><h1 id="page-title" class="page-header__title">Update</h1></div>
|
||||||
|
|
||||||
|
<div class='bx--row'>
|
||||||
|
<div class='bx--col-md-4'>
|
||||||
|
<form method='POST' action='' enctype='multipart/form-data'>
|
||||||
|
<div class='cv-file-uploader cv-form-item bx--form-item'>
|
||||||
|
<strong class='bx--file--label'>Update Firmware</strong>
|
||||||
|
<p class='bx--label-description'>Select the firmware you want to upload</p>
|
||||||
|
<div data-file='' class='bx--file'>
|
||||||
|
<label for='firmware' role='button' tabindex='0' class='bx--file-browse-btn'>
|
||||||
|
<div data-file-drop-container='' class='bx--file__drop-container'>
|
||||||
|
Drag and drop file here or upload
|
||||||
|
<input type='file' id='firmware' accept='.bin,.bin.gz' class='bx--file-input' name='firmware' onchange='document.getElementById("ffile").innerHTML = ""'>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div data-file-container='' class='bx--file-container' id='ffile'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type='submit' value='Update Firmware' class='bx--btn bx--btn--danger'>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class='bx--col-md-4'>
|
||||||
|
<form method='POST' action='' enctype='multipart/form-data'>
|
||||||
|
<div class='cv-file-uploader cv-form-item bx--form-item'>
|
||||||
|
<strong class='bx--file--label'>Update FileSystem</strong>
|
||||||
|
<p class='bx--label-description'>Select the filesystem you want to upload</p>
|
||||||
|
<div data-file='' class='bx--file'>
|
||||||
|
<label for='filesystem' role='button' tabindex='0' class='bx--file-browse-btn'>
|
||||||
|
<div data-file-drop-container='' class='bx--file__drop-container'>
|
||||||
|
Drag and drop file here or upload
|
||||||
|
<input type='file' id='filesystem' accept='.bin,.bin.gz' class='bx--file-input' name='filesystem' onchange="document.getElementById('fsys').innerHTML = ''">
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div data-file-container='' class='bx--file-container' id='fsys'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type='submit' value='Update FileSystem' class='bx--btn bx--btn--danger'>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSidebar() {
|
||||||
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.add('hidden');
|
||||||
|
}
|
||||||
|
function openWifiInfo() {
|
||||||
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
||||||
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -18,51 +18,6 @@ static const char THEME_FORM[] PROGMEM = "<p>Theme Color <select class='w3-opt
|
||||||
"<p><label>Password </label><input class='w3-input w3-border w3-margin-bottom' type='password' name='stationpassword' value='%STATIONPASSWORD%'></p>"
|
"<p><label>Password </label><input class='w3-input w3-border w3-margin-bottom' type='password' name='stationpassword' value='%STATIONPASSWORD%'></p>"
|
||||||
"<button class='w3-button w3-block w3-grey w3-section w3-padding' type='submit'>Save</button></form>";
|
"<button class='w3-button w3-block w3-grey w3-section w3-padding' type='submit'>Save</button></form>";
|
||||||
|
|
||||||
static const char WEATHER_FORM[] PROGMEM = "<form class='w3-container' action='/updateweatherconfig' method='get'><h2>Weather Config:</h2>"
|
|
||||||
"<p><input name='isWeatherEnabled' class='w3-check w3-margin-top' type='checkbox' %IS_WEATHER_CHECKED%> Display Weather when printer is off</p>"
|
|
||||||
"<label>OpenWeatherMap API Key (get from <a href='https://openweathermap.org/' target='_BLANK'>here</a>)</label>"
|
|
||||||
"<input class='w3-input w3-border w3-margin-bottom' type='text' name='openWeatherMapApiKey' value='%WEATHERKEY%' maxlength='60'>"
|
|
||||||
"<p><label>%CITYNAME1% (<a href='http://openweathermap.org/find' target='_BLANK'><i class='fa fa-search'></i> Search for City ID</a>) "
|
|
||||||
"<input class='w3-input w3-border w3-margin-bottom' type='text' name='city1' value='%CITY1%' onkeypress='return isNumberKey(event)'></p>"
|
|
||||||
"<p><input name='metric' class='w3-check w3-margin-top' type='checkbox' %METRIC%> Use Metric (Celsius)</p>"
|
|
||||||
"<p>Weather Language <select class='w3-option w3-padding' name='language'>%LANGUAGEOPTIONS%</select></p>"
|
|
||||||
"<button class='w3-button w3-block w3-grey w3-section w3-padding' type='submit'>Save</button></form>"
|
|
||||||
"<script>function isNumberKey(e){var h=e.which?e.which:event.keyCode;return!(h>31&&(h<48||h>57))}</script>";
|
|
||||||
|
|
||||||
static const char LANG_OPTIONS[] PROGMEM = "<option>ar</option>"
|
|
||||||
"<option>bg</option>"
|
|
||||||
"<option>ca</option>"
|
|
||||||
"<option>cz</option>"
|
|
||||||
"<option>de</option>"
|
|
||||||
"<option>el</option>"
|
|
||||||
"<option>en</option>"
|
|
||||||
"<option>fa</option>"
|
|
||||||
"<option>fi</option>"
|
|
||||||
"<option>fr</option>"
|
|
||||||
"<option>gl</option>"
|
|
||||||
"<option>hr</option>"
|
|
||||||
"<option>hu</option>"
|
|
||||||
"<option>it</option>"
|
|
||||||
"<option>ja</option>"
|
|
||||||
"<option>kr</option>"
|
|
||||||
"<option>la</option>"
|
|
||||||
"<option>lt</option>"
|
|
||||||
"<option>mk</option>"
|
|
||||||
"<option>nl</option>"
|
|
||||||
"<option>pl</option>"
|
|
||||||
"<option>pt</option>"
|
|
||||||
"<option>ro</option>"
|
|
||||||
"<option>ru</option>"
|
|
||||||
"<option>se</option>"
|
|
||||||
"<option>sk</option>"
|
|
||||||
"<option>sl</option>"
|
|
||||||
"<option>es</option>"
|
|
||||||
"<option>tr</option>"
|
|
||||||
"<option>ua</option>"
|
|
||||||
"<option>vi</option>"
|
|
||||||
"<option>zh_cn</option>"
|
|
||||||
"<option>zh_tw</option>";
|
|
||||||
|
|
||||||
static const char COLOR_THEMES[] PROGMEM = "<option>red</option>"
|
static const char COLOR_THEMES[] PROGMEM = "<option>red</option>"
|
||||||
"<option>pink</option>"
|
"<option>pink</option>"
|
||||||
"<option>purple</option>"
|
"<option>purple</option>"
|
||||||
|
|
@ -101,10 +56,12 @@ void WebServer::setup() {
|
||||||
this->server->on("/", []() { obj->displayPrinterStatus(); });
|
this->server->on("/", []() { obj->displayPrinterStatus(); });
|
||||||
this->server->on("/systemreset", []() { obj->handleSystemReset(); });
|
this->server->on("/systemreset", []() { obj->handleSystemReset(); });
|
||||||
this->server->on("/forgetwifi", []() { obj->handleWifiReset(); });
|
this->server->on("/forgetwifi", []() { obj->handleWifiReset(); });
|
||||||
this->server->on("/updateconfig", []() { obj->handleUpdateConfig(); });
|
this->server->on("/configurestation", []() { obj->handleConfigureStation(); });
|
||||||
this->server->on("/updateweatherconfig", []() { obj->handleUpdateWeather(); });
|
this->server->on("/configureprinter", []() { obj->handleConfigurePrinter(); });
|
||||||
this->server->on("/configure", []() { obj->handleConfigure(); });
|
|
||||||
this->server->on("/configureweather", []() { obj->handleWeatherConfigure(); });
|
this->server->on("/configureweather", []() { obj->handleWeatherConfigure(); });
|
||||||
|
this->server->on("/updateconfig", []() { obj->handleUpdateConfig(); });
|
||||||
|
this->server->on("/updatestationconfig", []() { obj->handleUpdateStation(); });
|
||||||
|
this->server->on("/updateweatherconfig", []() { obj->handleUpdateWeather(); });
|
||||||
this->server->on("/update", HTTP_GET, []() { obj->handleUpdatePage(); });
|
this->server->on("/update", HTTP_GET, []() { obj->handleUpdatePage(); });
|
||||||
this->server->onNotFound([]() { obj->redirectHome(); });
|
this->server->onNotFound([]() { obj->redirectHome(); });
|
||||||
this->serverUpdater->setup(this->server, "/update", this->globalDataController->getWebserverUsername(), this->globalDataController->getWebserverPassword());
|
this->serverUpdater->setup(this->server, "/update", this->globalDataController->getWebserverUsername(), this->globalDataController->getWebserverPassword());
|
||||||
|
|
@ -252,28 +209,7 @@ void WebServer::displayPrinterStatus() {
|
||||||
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
||||||
}
|
}
|
||||||
|
|
||||||
void WebServer::handleSystemReset() {
|
|
||||||
if (!this->authentication()) {
|
|
||||||
return this->server->requestAuthentication();
|
|
||||||
}
|
|
||||||
this->debugController->printLn("Reset System Configuration");
|
|
||||||
if (this->globalDataController->resetConfig()) {
|
|
||||||
redirectHome();
|
|
||||||
ESP.restart();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void WebServer::handleWifiReset() {
|
|
||||||
if (!this->authentication()) {
|
|
||||||
return this->server->requestAuthentication();
|
|
||||||
}
|
|
||||||
//WiFiManager
|
|
||||||
//Local intialization. Once its business is done, there is no need to keep it around
|
|
||||||
redirectHome();
|
|
||||||
WiFiManager wifiManager;
|
|
||||||
wifiManager.resetSettings();
|
|
||||||
ESP.restart();
|
|
||||||
}
|
|
||||||
|
|
||||||
void WebServer::handleUpdateConfig() {
|
void WebServer::handleUpdateConfig() {
|
||||||
boolean flipOld = this->globalDataController->isDisplayInverted();
|
boolean flipOld = this->globalDataController->isDisplayInverted();
|
||||||
|
|
@ -349,23 +285,7 @@ void WebServer::findMDNS() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
void WebServer::handleUpdateWeather() {
|
/*
|
||||||
if (!this->authentication()) {
|
|
||||||
return this->server->requestAuthentication();
|
|
||||||
}
|
|
||||||
this->globalDataController->setWeatherShow(this->server->hasArg("isWeatherEnabled"));
|
|
||||||
this->globalDataController->setWeatherApiKey(this->server->arg("openWeatherMapApiKey"));
|
|
||||||
this->globalDataController->setWeatherCityId(this->server->arg("city1").toInt());
|
|
||||||
this->globalDataController->setWeatherIsMetric(this->server->hasArg("metric"));
|
|
||||||
this->globalDataController->setWeatherLang(this->server->arg("language"));
|
|
||||||
this->globalDataController->writeSettings();
|
|
||||||
|
|
||||||
//isClockOn = false; // this will force a check for the display
|
|
||||||
//checkDisplay();
|
|
||||||
this->globalDataController->getTimeClient()->resetLastEpoch();
|
|
||||||
this->redirectHome();
|
|
||||||
}
|
|
||||||
|
|
||||||
void WebServer::handleConfigure() {
|
void WebServer::handleConfigure() {
|
||||||
if (!this->authentication()) {
|
if (!this->authentication()) {
|
||||||
return this->server->requestAuthentication();
|
return this->server->requestAuthentication();
|
||||||
|
|
@ -470,58 +390,33 @@ void WebServer::handleConfigure() {
|
||||||
form.replace("%PRINTERPASS%", this->globalDataController->getPrinterAuthPass());
|
form.replace("%PRINTERPASS%", this->globalDataController->getPrinterAuthPass());
|
||||||
this->server->sendContent(form);
|
this->server->sendContent(form);
|
||||||
|
|
||||||
form = FPSTR(CLOCK_FORM);
|
|
||||||
|
|
||||||
String isClockChecked = "";
|
|
||||||
if (DISPLAYCLOCK) {
|
|
||||||
isClockChecked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%IS_CLOCK_CHECKED%", isClockChecked);
|
|
||||||
String is24hourChecked = "";
|
|
||||||
if (this->globalDataController->getClockIs24h()) {
|
|
||||||
is24hourChecked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%IS_24HOUR_CHECKED%", is24hourChecked);
|
|
||||||
String isInvDisp = "";
|
|
||||||
if (this->globalDataController->isDisplayInverted()) {
|
|
||||||
isInvDisp = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%IS_INVDISP_CHECKED%", isInvDisp);
|
|
||||||
String isFlashLED = "";
|
|
||||||
if (USE_FLASH) {
|
|
||||||
isFlashLED = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%USEFLASH%", isFlashLED);
|
|
||||||
String hasPSUchecked = "";
|
|
||||||
if (this->globalDataController->hasPrinterPsu()) {
|
|
||||||
hasPSUchecked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%HAS_PSU_CHECKED%", hasPSUchecked);
|
|
||||||
|
|
||||||
String options = "<option>10</option><option>15</option><option>20</option><option>30</option><option>60</option>";
|
|
||||||
options.replace(">"+String(this->globalDataController->getClockResyncMinutes())+"<", " selected>"+String(this->globalDataController->getClockResyncMinutes())+"<");
|
|
||||||
form.replace("%OPTIONS%", options);
|
|
||||||
|
|
||||||
this->server->sendContent(form);
|
|
||||||
|
|
||||||
form = FPSTR(THEME_FORM);
|
|
||||||
|
|
||||||
String themeOptions = FPSTR(COLOR_THEMES);
|
|
||||||
themeOptions.replace(">"+String(this->globalDataController->getWebserverTheme())+"<", " selected>"+String(this->globalDataController->getWebserverTheme())+"<");
|
|
||||||
form.replace("%THEME_OPTIONS%", themeOptions);
|
|
||||||
form.replace("%UTCOFFSET%", String(this->globalDataController->getClockUtcOffset()));
|
|
||||||
String isUseSecurityChecked = "";
|
|
||||||
if (this->globalDataController->getWebserverIsBasicAuth()) {
|
|
||||||
isUseSecurityChecked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%IS_BASICAUTH_CHECKED%", isUseSecurityChecked);
|
|
||||||
form.replace("%USERID%", String(this->globalDataController->getWebserverUsername()));
|
|
||||||
form.replace("%STATIONPASSWORD%", String(this->globalDataController->getWebserverPassword()));
|
|
||||||
|
|
||||||
this->server->sendContent(form);
|
this->server->sendContent(form);
|
||||||
|
|
||||||
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
void WebServer::handleConfigurePrinter() {
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
}
|
}
|
||||||
|
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Printers");
|
||||||
|
|
||||||
|
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -538,6 +433,48 @@ void WebServer::handleConfigure() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Send station configuration page to client
|
||||||
|
*/
|
||||||
|
void WebServer::handleConfigureStation() {
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
|
}
|
||||||
|
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Station");
|
||||||
|
WebserverMemoryVariables::sendStationConfigForm(this->server, this->globalDataController);
|
||||||
|
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Update configuration for station
|
||||||
|
*/
|
||||||
|
void WebServer::handleUpdateStation() {
|
||||||
|
boolean flipOld = this->globalDataController->isDisplayInverted();
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
|
}
|
||||||
|
|
||||||
|
this->globalDataController->setDisplayClock(this->server->hasArg("isClockEnabled"));
|
||||||
|
this->globalDataController->setIsDisplayInverted(this->server->hasArg("invDisp"));
|
||||||
|
this->globalDataController->setUseLedFlash(this->server->hasArg("useFlash"));
|
||||||
|
this->globalDataController->setClockIs24h(this->server->hasArg("is24hour"));
|
||||||
|
this->globalDataController->setClockResyncMinutes(this->server->arg("refresh").toInt());
|
||||||
|
this->globalDataController->setClockUtcOffset(this->server->arg("utcoffset").toFloat());
|
||||||
|
this->globalDataController->setWebserverIsBasicAuth(this->server->hasArg("isBasicAuth"));
|
||||||
|
String temp = this->server->arg("userid");
|
||||||
|
this->globalDataController->setWebserverUsername(temp);
|
||||||
|
temp = this->server->arg("stationpassword");
|
||||||
|
this->globalDataController->setWebserverPassword(temp);
|
||||||
|
this->globalDataController->writeSettings();
|
||||||
|
|
||||||
|
if (this->globalDataController->isDisplayInverted() != flipOld) {
|
||||||
|
this->globalDataController->getDisplayClient()->flipDisplayUpdate();
|
||||||
|
}
|
||||||
|
this->globalDataController->getDisplayClient()->handleUpdate();
|
||||||
|
this->globalDataController->getTimeClient()->resetLastEpoch();
|
||||||
|
this->redirectHome();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief Send weather configuration page to client
|
* @brief Send weather configuration page to client
|
||||||
*/
|
*/
|
||||||
|
|
@ -546,34 +483,58 @@ void WebServer::handleWeatherConfigure() {
|
||||||
return this->server->requestAuthentication();
|
return this->server->requestAuthentication();
|
||||||
}
|
}
|
||||||
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Weather");
|
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Weather");
|
||||||
|
WebserverMemoryVariables::sendWeatherConfigForm(this->server, this->globalDataController);
|
||||||
String html = "";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
String form = FPSTR(WEATHER_FORM);
|
|
||||||
String isWeatherChecked = "";
|
|
||||||
if (DISPLAYWEATHER) {
|
|
||||||
isWeatherChecked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%IS_WEATHER_CHECKED%", this->globalDataController->getWeatherShow() ? "1" : "0");
|
|
||||||
form.replace("%WEATHERKEY%", this->globalDataController->getWeatherApiKey());
|
|
||||||
form.replace("%CITYNAME1%", this->globalDataController->getWeatherClient()->getCity(0));
|
|
||||||
form.replace("%CITY1%", String(this->globalDataController->getWeatherCityId()));
|
|
||||||
String checked = "";
|
|
||||||
if (this->globalDataController->getWeatherIsMetric()) {
|
|
||||||
checked = "checked='checked'";
|
|
||||||
}
|
|
||||||
form.replace("%METRIC%", checked);
|
|
||||||
String options = FPSTR(LANG_OPTIONS);
|
|
||||||
options.replace(">"+String(this->globalDataController->getWeatherLang())+"<", " selected>"+String(this->globalDataController->getWeatherLang())+"<");
|
|
||||||
form.replace("%LANGUAGEOPTIONS%", options);
|
|
||||||
this->server->sendContent(form);
|
|
||||||
|
|
||||||
|
|
||||||
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Update configuration for weather
|
||||||
|
*/
|
||||||
|
void WebServer::handleUpdateWeather() {
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
|
}
|
||||||
|
this->globalDataController->setWeatherShow(this->server->hasArg("isWeatherEnabled"));
|
||||||
|
this->globalDataController->setWeatherApiKey(this->server->arg("openWeatherMapApiKey"));
|
||||||
|
this->globalDataController->setWeatherCityId(this->server->arg("city1").toInt());
|
||||||
|
this->globalDataController->setWeatherIsMetric(this->server->hasArg("metric"));
|
||||||
|
this->globalDataController->setWeatherLang(this->server->arg("language"));
|
||||||
|
this->globalDataController->writeSettings();
|
||||||
|
|
||||||
|
this->globalDataController->getDisplayClient()->handleUpdate();
|
||||||
|
this->globalDataController->getTimeClient()->resetLastEpoch();
|
||||||
|
this->redirectHome();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Reset internal configuration data
|
||||||
|
*/
|
||||||
|
void WebServer::handleSystemReset() {
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
|
}
|
||||||
|
this->debugController->printLn("Reset System Configuration");
|
||||||
|
if (this->globalDataController->resetConfig()) {
|
||||||
|
redirectHome();
|
||||||
|
ESP.restart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Reset internal WiFi configuration data
|
||||||
|
*/
|
||||||
|
void WebServer::handleWifiReset() {
|
||||||
|
if (!this->authentication()) {
|
||||||
|
return this->server->requestAuthentication();
|
||||||
|
}
|
||||||
|
//WiFiManager
|
||||||
|
//Local intialization. Once its business is done, there is no need to keep it around
|
||||||
|
redirectHome();
|
||||||
|
WiFiManager wifiManager;
|
||||||
|
wifiManager.resetSettings();
|
||||||
|
ESP.restart();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief Send firmware/filesystem update page to client
|
* @brief Send firmware/filesystem update page to client
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -26,8 +26,10 @@ public:
|
||||||
void handleSystemReset();
|
void handleSystemReset();
|
||||||
void handleWifiReset();
|
void handleWifiReset();
|
||||||
void handleUpdateConfig();
|
void handleUpdateConfig();
|
||||||
|
void handleUpdateStation();
|
||||||
void handleUpdateWeather();
|
void handleUpdateWeather();
|
||||||
void handleConfigure();
|
void handleConfigurePrinter();
|
||||||
|
void handleConfigureStation();
|
||||||
void handleWeatherConfigure();
|
void handleWeatherConfigure();
|
||||||
void handleUpdatePage();
|
void handleUpdatePage();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -33,59 +33,30 @@ void WebserverMemoryVariables::sendHeader(
|
||||||
server->setContentLength(CONTENT_LENGTH_UNKNOWN);
|
server->setContentLength(CONTENT_LENGTH_UNKNOWN);
|
||||||
server->send(200, "text/html", "");
|
server->send(200, "text/html", "");
|
||||||
|
|
||||||
server->sendContent("<!DOCTYPE HTML>"
|
server->sendContent(String(FPSTR(HEADER_BLOCK1)));
|
||||||
"<html><head><title>PrintBuddy</title><link rel='icon' href='data:;base64,='>"
|
|
||||||
"<meta charset='UTF-8'>"
|
|
||||||
"<meta name='viewport' content='width=device-width, initial-scale=1'>"
|
|
||||||
);
|
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
server->sendContent("<meta http-equiv=\"refresh\" content=\"30\">");
|
server->sendContent("<meta http-equiv=\"refresh\" content=\"30\">");
|
||||||
}
|
}
|
||||||
server->sendContent("<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>"
|
server->sendContent(String(FPSTR(HEADER_BLOCK2)));
|
||||||
"<link rel='stylesheet' href='https://unpkg.com/carbon-components/css/carbon-components.min.css'></style>"
|
|
||||||
"<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.1/css/all.css'>"
|
|
||||||
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>"
|
|
||||||
"<style>.hidden{display:none}</style>"
|
|
||||||
"</head><body>"
|
|
||||||
"<header class='cv-header bx--header'>"
|
|
||||||
"<a href='/' class='cv-header-name bx--header__name'>"
|
|
||||||
);
|
|
||||||
server->sendContent("<span class='bx--header__name--prefix'>PrintBuddy </span>V" + String(VERSION));
|
server->sendContent("<span class='bx--header__name--prefix'>PrintBuddy </span>V" + String(VERSION));
|
||||||
server->sendContent("</a>"
|
server->sendContent(String(FPSTR(HEADER_BLOCK3)));
|
||||||
"<nav class='cv-header-nav bx--header__nav'></nav>"
|
|
||||||
"<div class='bx--header__global'>"
|
|
||||||
"<button type='button' class='cv-header-global-action bx--header__action' onclick='openWifiInfo()'>"
|
|
||||||
"<i class='fas fa-wifi' style='color: white; font-size: 20px;'></i>"
|
|
||||||
"</button>"
|
|
||||||
"<button type='button' class='cv-header-global-action bx--header__action' onclick='openSidebar()'>"
|
|
||||||
"<svg focusable='false' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='20' height='20' viewBox='0 0 32 32' aria-hidden='true'>"
|
|
||||||
"<path d='M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z'></path>"
|
|
||||||
"</svg>"
|
|
||||||
"</button>"
|
|
||||||
"</div>"
|
|
||||||
"<div id='sidebar' class='cv-header-panel bx--header-panel'>"
|
|
||||||
"<ul class='cv-switcher bx--switcher__item'>"
|
|
||||||
);
|
|
||||||
server->sendContent(String(FPSTR(MENUE_ITEMS)));
|
server->sendContent(String(FPSTR(MENUE_ITEMS)));
|
||||||
server->sendContent("</ul>"
|
server->sendContent(String(FPSTR(HEADER_BLOCK4)));
|
||||||
"</div>"
|
|
||||||
"<div class='bx--toast-notification bx--toast-notification--info hidden' style='position: absolute; right: -16px; top: 40px;' id='wifiinfo'>"
|
uint32_t heapFree = 0;
|
||||||
"<div class='bx--toast-notification__details'>"
|
uint16_t heapMax = 0;
|
||||||
"<h3 class='bx--toast-notification__title'>WiFi Signal Strength</h3>"
|
uint8_t heapFrag = 0;
|
||||||
"<div class='bx--toast-notification__subtitle'><span>"
|
ESP.getHeapStats(&heapFree, &heapMax, &heapFrag);
|
||||||
);
|
|
||||||
server->sendContent(String(rssi) + "%");
|
server->sendContent("<div>WiFi Signal Strength: " + String(rssi) + "%</div>");
|
||||||
server->sendContent("</span></div>"
|
server->sendContent("<div>ESP ChipID: " + String(ESP.getChipId()) + "</div>");
|
||||||
"</div>"
|
server->sendContent("<div>ESP CoreVersion: " + String(ESP.getCoreVersion()) + "</div>");
|
||||||
"</div>"
|
server->sendContent("<div>Heap (frag/free/max): " + String(heapFrag) + "|" + String(heapFree) + "|" + String(heapMax) + "</div>");
|
||||||
"</header>"
|
server->sendContent(String(FPSTR(HEADER_BLOCK5)));
|
||||||
"<script>function openSidebar(){document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');document.getElementById('wifiinfo').classList.add('hidden');};function openWifiInfo(){document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');document.getElementById('wifiinfo').classList.toggle('hidden');}</script>"
|
|
||||||
"<br><div class='bx--grid bx--grid--full-width' style='margin-top:60px'>"
|
|
||||||
"<div class='page-header' style='margin-bottom:20px'><h4 class='page-header__label'>");
|
|
||||||
server->sendContent(pageLabel);
|
server->sendContent(pageLabel);
|
||||||
server->sendContent("</h4><h1 id='page-title' class='page-header__title'>");
|
server->sendContent("</h4><h1 id='page-title' class='page-header__title'>");
|
||||||
server->sendContent(pageTitle);
|
server->sendContent(pageTitle);
|
||||||
server->sendContent("</h1></div><div class='bx--row'>");
|
server->sendContent("</h1></div>");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -94,8 +65,7 @@ void WebserverMemoryVariables::sendHeader(
|
||||||
* @param globalDataController Access to global data
|
* @param globalDataController Access to global data
|
||||||
*/
|
*/
|
||||||
void WebserverMemoryVariables::sendFooter(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
void WebserverMemoryVariables::sendFooter(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
||||||
server->sendContent("<br><br><br></div></div>");
|
server->sendContent(String(FPSTR(FOOTER_BLOCK)));
|
||||||
server->sendContent("<script src='https://unpkg.com/carbon-components/scripts/carbon-components.min.js'></script></body></html>");
|
|
||||||
server->sendContent("");
|
server->sendContent("");
|
||||||
server->client().stop();
|
server->client().stop();
|
||||||
globalDataController->ledOnOff(false);
|
globalDataController->ledOnOff(false);
|
||||||
|
|
@ -109,3 +79,106 @@ void WebserverMemoryVariables::sendFooter(ESP8266WebServer *server, GlobalDataCo
|
||||||
void WebserverMemoryVariables::sendUpdateForm(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
void WebserverMemoryVariables::sendUpdateForm(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
||||||
server->sendContent(FPSTR(UPDATE_FORM));
|
server->sendContent(FPSTR(UPDATE_FORM));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Send out configuration for weather
|
||||||
|
* @param server Send out instancce
|
||||||
|
* @param globalDataController Access to global data
|
||||||
|
*/
|
||||||
|
void WebserverMemoryVariables::sendWeatherConfigForm(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
||||||
|
String isWeatherChecked = "";
|
||||||
|
String isMetricChecked = "";
|
||||||
|
if (globalDataController->getWeatherShow()) {
|
||||||
|
isWeatherChecked = "checked='checked'";
|
||||||
|
}
|
||||||
|
if (globalDataController->getWeatherIsMetric()) {
|
||||||
|
isMetricChecked = "checked='checked'";
|
||||||
|
}
|
||||||
|
|
||||||
|
String form = FPSTR(WEATHER_FORM1);
|
||||||
|
form.replace("%IS_WEATHER_CHECKED%", isWeatherChecked);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(WEATHER_FORM2);
|
||||||
|
form.replace("%METRIC%", isMetricChecked);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(WEATHER_FORM3);
|
||||||
|
form.replace("%WEATHERKEY%", globalDataController->getWeatherApiKey());
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(WEATHER_FORM4);
|
||||||
|
form.replace("%CITY1%", String(globalDataController->getWeatherCityId()));
|
||||||
|
form.replace("%CITYNAME1%", globalDataController->getWeatherClient()->getCity(0));
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(WEATHER_FORM_OPTIONS);
|
||||||
|
form.replace(">"+String(globalDataController->getWeatherLang())+"<", " selected>"+String(globalDataController->getWeatherLang())+"<");
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(WEATHER_FORM5);
|
||||||
|
server->sendContent(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Send out configuration for station
|
||||||
|
* @param server Send out instancce
|
||||||
|
* @param globalDataController Access to global data
|
||||||
|
*/
|
||||||
|
void WebserverMemoryVariables::sendStationConfigForm(ESP8266WebServer *server, GlobalDataController *globalDataController) {
|
||||||
|
String isClockChecked = "";
|
||||||
|
String is24hourChecked = "";
|
||||||
|
String isInvDisp = "";
|
||||||
|
String isFlashLED = "";
|
||||||
|
String isUseSecurityChecked = "";
|
||||||
|
if (globalDataController->isDisplayInverted()) {
|
||||||
|
isInvDisp = "checked='checked'";
|
||||||
|
}
|
||||||
|
if (globalDataController->useLedFlash()) {
|
||||||
|
isFlashLED = "checked='checked'";
|
||||||
|
}
|
||||||
|
if (globalDataController->getDisplayClock()) {
|
||||||
|
isClockChecked = "checked='checked'";
|
||||||
|
}
|
||||||
|
if (globalDataController->getClockIs24h()) {
|
||||||
|
is24hourChecked = "checked='checked'";
|
||||||
|
}
|
||||||
|
if (globalDataController->getWebserverIsBasicAuth()) {
|
||||||
|
isUseSecurityChecked = "checked='checked'";
|
||||||
|
}
|
||||||
|
|
||||||
|
String form = FPSTR(STATION_CONFIG_FORM1);
|
||||||
|
form.replace("%IS_CLOCK_CHECKED%", isClockChecked);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM2);
|
||||||
|
form.replace("%IS_24HOUR_CHECKED%", is24hourChecked);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM3);
|
||||||
|
form.replace("%IS_INVDISP_CHECKED%", isInvDisp);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM4);
|
||||||
|
form.replace("%USEFLASH%", isFlashLED);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM5);
|
||||||
|
String options = FPSTR(STATION_CONFIG_FORM5OPT);
|
||||||
|
options.replace(">"+String(globalDataController->getClockResyncMinutes())+"<", " selected>"+String(globalDataController->getClockResyncMinutes())+"<");
|
||||||
|
form.replace("%OPTIONS%", options);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM6);
|
||||||
|
form.replace("%UTCOFFSET%", String(globalDataController->getClockUtcOffset()));
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM7);
|
||||||
|
form.replace("%IS_BASICAUTH_CHECKED%", isUseSecurityChecked);
|
||||||
|
server->sendContent(form);
|
||||||
|
|
||||||
|
form = FPSTR(STATION_CONFIG_FORM8);
|
||||||
|
form.replace("%USERID%", globalDataController->getWebserverUsername());
|
||||||
|
form.replace("%STATIONPASSWORD%", globalDataController->getWebserverPassword());
|
||||||
|
server->sendContent(form);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,71 @@
|
||||||
*/
|
*/
|
||||||
static const char MENUE_ITEMS[] PROGMEM =
|
static const char MENUE_ITEMS[] PROGMEM =
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/'><i class='fa fa-home'></i> Home</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/'><i class='fa fa-home'></i> Home</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/configure'><i class='fa fa-cog'></i> Configure</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/configureprinter'><i class='fas fa-print'></i></i> Configure Printers</a></li>"
|
||||||
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/configurestation'><i class='fa fa-cog'></i> Configure Station</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/configureweather'><i class='fa fa-cloud'></i> Weather</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/configureweather'><i class='fa fa-cloud'></i> Weather</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/systemreset' onclick='return confirm(\"Do you want to reset to default settings?\")'><i class='fa fa-undo'></i> Reset Settings</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/systemreset' onclick='return confirm(\"Do you want to reset to default settings?\")'><i class='fa fa-undo'></i> Reset Settings</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/forgetwifi' onclick='return confirm(\"Do you want to forget to WiFi connection?\")'><i class='fa fa-wifi'></i> Forget WiFi</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/forgetwifi' onclick='return confirm(\"Do you want to forget to WiFi connection?\")'><i class='fa fa-wifi'></i> Forget WiFi</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/update'><i class='fa fa-wrench'></i> Firmware Update</a></li>"
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='/update'><i class='fa fa-wrench'></i> Firmware Update</a></li>"
|
||||||
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='https://github.com/Qrome' target='_blank'><i class='fa fa-question-circle'></i> About</a></li>";
|
"<li class='cv-switcher-item bx--switcher__item'><a class='cv-switcher-item-link bx--switcher__item-link' href='https://github.com/Qrome' target='_blank'><i class='fa fa-question-circle'></i> About</a></li>";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Basic header/footer blocks
|
||||||
|
*/
|
||||||
|
static const char HEADER_BLOCK1[] PROGMEM = "<!DOCTYPE HTML>"
|
||||||
|
"<html><head><title>PrintBuddy</title><link rel='icon' href='data:;base64,='>"
|
||||||
|
"<meta charset='UTF-8'>"
|
||||||
|
"<meta name='viewport' content='width=device-width, initial-scale=1'>";
|
||||||
|
|
||||||
|
static const char HEADER_BLOCK2[] PROGMEM = "<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>"
|
||||||
|
"<link rel='stylesheet' href='https://unpkg.com/carbon-components/css/carbon-components.min.css'></style>"
|
||||||
|
"<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.1/css/all.css'>"
|
||||||
|
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>"
|
||||||
|
"<style>.hidden{display:none} .bx--form-item{margin-bottom:20px} .bx--table-column-menu{width: 3.25rem}</style>"
|
||||||
|
"</head><body>"
|
||||||
|
"<header class='cv-header bx--header'>"
|
||||||
|
"<a href='/' class='cv-header-name bx--header__name'>";
|
||||||
|
|
||||||
|
static const char HEADER_BLOCK3[] PROGMEM = "</a>"
|
||||||
|
"<nav class='cv-header-nav bx--header__nav'></nav>"
|
||||||
|
"<div class='bx--header__global'>"
|
||||||
|
"<button type='button' class='cv-header-global-action bx--header__action' onclick='openChipInfo()'>"
|
||||||
|
"<i class='fas fa-microchip' style='color: white; font-size: 20px;'></i>"
|
||||||
|
"</button>"
|
||||||
|
"<button type='button' class='cv-header-global-action bx--header__action' onclick='openSidebar()'>"
|
||||||
|
"<svg focusable='false' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='20' height='20' viewBox='0 0 32 32' aria-hidden='true'>"
|
||||||
|
"<path d='M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z'></path>"
|
||||||
|
"</svg>"
|
||||||
|
"</button>"
|
||||||
|
"</div>"
|
||||||
|
"<div id='sidebar' class='cv-header-panel bx--header-panel'>"
|
||||||
|
"<ul class='cv-switcher bx--switcher__item'>";
|
||||||
|
|
||||||
|
static const char HEADER_BLOCK4[] PROGMEM = "</ul>"
|
||||||
|
"</div>"
|
||||||
|
"<div class='bx--toast-notification bx--toast-notification--info hidden' style='position: absolute; right: -16px; top: 40px;' id='chipinfo'>"
|
||||||
|
"<div class='bx--toast-notification__details'>"
|
||||||
|
"<h3 class='bx--toast-notification__title'>ESP Details</h3>"
|
||||||
|
"<div class='bx--toast-notification__subtitle'>";
|
||||||
|
|
||||||
|
static const char HEADER_BLOCK5[] PROGMEM = "</div>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"</header>"
|
||||||
|
"<script>function openSidebar(){document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');document.getElementById('chipinfo').classList.add('hidden');};function openChipInfo(){document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');document.getElementById('chipinfo').classList.toggle('hidden');}</script>"
|
||||||
|
"<br><div class='bx--grid bx--grid--full-width' style='margin-top:60px'>"
|
||||||
|
"<div class='page-header' style='margin-bottom:20px'><h4 class='page-header__label'>";
|
||||||
|
|
||||||
|
static const char FOOTER_BLOCK[] PROGMEM = "<br><br><br></div>"
|
||||||
|
"<script src='https://unpkg.com/carbon-components/scripts/carbon-components.min.js'></script>"
|
||||||
|
"</body>"
|
||||||
|
"</html>";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Controls for update firmware/filesystem
|
* Controls for update firmware/filesystem
|
||||||
*/
|
*/
|
||||||
static const char UPDATE_FORM[] PROGMEM = "<div class='bx--col-md-4'>"
|
static const char UPDATE_FORM[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--col-md-4'>"
|
||||||
"<form method='POST' action='' enctype='multipart/form-data'>"
|
"<form method='POST' action='' enctype='multipart/form-data'>"
|
||||||
"<div class='cv-file-uploader cv-form-item bx--form-item'>"
|
"<div class='cv-file-uploader cv-form-item bx--form-item'>"
|
||||||
"<strong class='bx--file--label'>Update Firmware</strong>"
|
"<strong class='bx--file--label'>Update Firmware</strong>"
|
||||||
|
|
@ -54,8 +108,232 @@ static const char UPDATE_FORM[] PROGMEM = "<div class='bx--col-md-4'>"
|
||||||
"</div>"
|
"</div>"
|
||||||
"<input type='submit' value='Update FileSystem' class='bx--btn bx--btn--danger'>"
|
"<input type='submit' value='Update FileSystem' class='bx--btn bx--btn--danger'>"
|
||||||
"</form>"
|
"</form>"
|
||||||
|
"</div>"
|
||||||
"</div>";
|
"</div>";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Controls for weather configuration
|
||||||
|
*/
|
||||||
|
static const char WEATHER_FORM1[] PROGMEM = "<form action='/updateweatherconfig' method='get'>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='isWeatherEnabled' type='checkbox' name='isWeatherEnabled' %IS_WEATHER_CHECKED%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='isWeatherEnabled'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Display Weather when printer is off deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Display Weather when printer is off activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char WEATHER_FORM2[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='metric' type='checkbox' name='metric' %METRIC%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='metric'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Show in Celsius</span>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Show in Fahrenheit</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char WEATHER_FORM3[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<label for='openWeatherMapApiKey' class='bx--label'>OpenWeatherMap API Key (get from <a href='https://openweathermap.org/' target='_BLANK'>here</a>)</label>"
|
||||||
|
"<input id='openWeatherMapApiKey' type='text' class='bx--text-input' name='openWeatherMapApiKey' value='%WEATHERKEY%' maxlength='60'>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char WEATHER_FORM4[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<label for='city1' class='bx--label'>%CITYNAME1% (<a href='http://openweathermap.org/find' target='_BLANK'><i class='fa fa-search'></i> Search for City ID</a>)</label>"
|
||||||
|
"<input id='city1' type='text' class='bx--text-input' name='city1' value='%CITY1%' onkeypress='return isNumberKey(event)'>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto bx--select'>"
|
||||||
|
"<label for='language' class='bx--label'>Weather Language</label>"
|
||||||
|
"<div class='bx--select-input__wrapper'>"
|
||||||
|
"<select id='language' class='bx--select-input' name='language'>";
|
||||||
|
|
||||||
|
static const char WEATHER_FORM5[] PROGMEM = "</select>"
|
||||||
|
"<svg focusable='false' preserveAspectRatio='xMidYMid meet' style='will-change: transform;' xmlns='http://www.w3.org/2000/svg' class='bx--select__arrow' width='10' height='6' viewBox='0 0 10 6' aria-hidden='true'><path d='M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z'></path></svg>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<button class='bx--btn bx--btn--primary' type='submit'>Save</button>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"</form>"
|
||||||
|
"<script>function isNumberKey(e){var h=e.which?e.which:event.keyCode;return!(h>31&&(h<48||h>57))}</script>";
|
||||||
|
|
||||||
|
static const char WEATHER_FORM_OPTIONS[] PROGMEM = "<option class='bx--select-option'>ar</option>"
|
||||||
|
"<option class='bx--select-option'>bg</option>"
|
||||||
|
"<option class='bx--select-option'>ca</option>"
|
||||||
|
"<option class='bx--select-option'>cz</option>"
|
||||||
|
"<option class='bx--select-option'>de</option>"
|
||||||
|
"<option class='bx--select-option'>el</option>"
|
||||||
|
"<option class='bx--select-option'>en</option>"
|
||||||
|
"<option class='bx--select-option'>fa</option>"
|
||||||
|
"<option class='bx--select-option'>fi</option>"
|
||||||
|
"<option class='bx--select-option'>fr</option>"
|
||||||
|
"<option class='bx--select-option'>gl</option>"
|
||||||
|
"<option class='bx--select-option'>hr</option>"
|
||||||
|
"<option class='bx--select-option'>hu</option>"
|
||||||
|
"<option class='bx--select-option'>it</option>"
|
||||||
|
"<option class='bx--select-option'>ja</option>"
|
||||||
|
"<option class='bx--select-option'>kr</option>"
|
||||||
|
"<option class='bx--select-option'>la</option>"
|
||||||
|
"<option class='bx--select-option'>lt</option>"
|
||||||
|
"<option class='bx--select-option'>mk</option>"
|
||||||
|
"<option class='bx--select-option'>nl</option>"
|
||||||
|
"<option class='bx--select-option'>pl</option>"
|
||||||
|
"<option class='bx--select-option'>pt</option>"
|
||||||
|
"<option class='bx--select-option'>ro</option>"
|
||||||
|
"<option class='bx--select-option'>ru</option>"
|
||||||
|
"<option class='bx--select-option'>se</option>"
|
||||||
|
"<option class='bx--select-option'>sk</option>"
|
||||||
|
"<option class='bx--select-option'>sl</option>"
|
||||||
|
"<option class='bx--select-option'>es</option>"
|
||||||
|
"<option class='bx--select-option'>tr</option>"
|
||||||
|
"<option class='bx--select-option'>ua</option>"
|
||||||
|
"<option class='bx--select-option'>vi</option>"
|
||||||
|
"<option class='bx--select-option'>zh_cn</option>"
|
||||||
|
"<option class='bx--select-option'>zh_tw</option>";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Controls for station configuration
|
||||||
|
*/
|
||||||
|
static const char STATION_CONFIG_FORM1[] PROGMEM = "<form action='/updatestationconfig' method='get'>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--col bx--col--auto bx--form-item'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='isClockEnabled' type='checkbox' name='isClockEnabled' %IS_CLOCK_CHECKED%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='isClockEnabled'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Display Clock when printer is off deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Display Clock when printer is off activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM2[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--col bx--col--auto bx--form-item'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='is24hour' type='checkbox' name='is24hour' %IS_24HOUR_CHECKED%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='is24hour'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Use 24 Hour Clock (military time) deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Use 24 Hour Clock (military time) activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM3[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--col bx--col--auto bx--form-item'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='invDisp' type='checkbox' name='invDisp' %IS_INVDISP_CHECKED%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='invDisp'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Flip display orientation deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Flip display orientation activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM4[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--col bx--col--auto bx--form-item'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='useFlash' type='checkbox' name='useFlash' %USEFLASH%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='useFlash'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Flash System LED on Service Calls deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Flash System LED on Service Calls activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM5[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto bx--select'>"
|
||||||
|
"<label for='refresh' class='bx--label'>Clock Sync / Weather Refresh (minutes)</label>"
|
||||||
|
"<div class='bx--select-input__wrapper'>"
|
||||||
|
"<select id='refresh' class='bx--select-input' name='refresh'>"
|
||||||
|
"%OPTIONS%"
|
||||||
|
"</select>"
|
||||||
|
"<svg focusable='false' preserveAspectRatio='xMidYMid meet' style='will-change: transform;' xmlns='http://www.w3.org/2000/svg' class='bx--select__arrow' width='10' height='6' viewBox='0 0 10 6' aria-hidden='true'><path d='M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z'></path></svg>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM5OPT[] PROGMEM = "<option class='bx--select-option'>10</option>"
|
||||||
|
"<option class='bx--select-option'>15</option>"
|
||||||
|
"<option class='bx--select-option'>20</option>"
|
||||||
|
"<option class='bx--select-option'>30</option>"
|
||||||
|
"<option class='bx--select-option'>60</option>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM6[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<label for='utcoffset' class='bx--label'>UTC Time Offset</label>"
|
||||||
|
"<input id='utcoffset' type='text' class='bx--text-input' name='utcoffset' value='%UTCOFFSET%' maxlength='1'>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM7[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--col bx--col--auto bx--form-item'>"
|
||||||
|
"<input class='bx--toggle-input bx--toggle-input--small' id='isBasicAuth' type='checkbox' name='isBasicAuth' %IS_BASICAUTH_CHECKED%>"
|
||||||
|
"<label class='bx--toggle-input__label' for='isBasicAuth'>"
|
||||||
|
"<span class='bx--toggle__switch'>"
|
||||||
|
"<svg class='bx--toggle__check' width='6px' height='5px' viewBox='0 0 6 5'>"
|
||||||
|
"<path d='M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z' />"
|
||||||
|
"</svg>"
|
||||||
|
"<span class='bx--toggle__text--off' aria-hidden='true'>Use Security Credentials for Configuration Changes deactivated</span>"
|
||||||
|
"<span class='bx--toggle__text--on' aria-hidden='true'>Use Security Credentials for Configuration Changes activated</span>"
|
||||||
|
"</span>"
|
||||||
|
"</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
static const char STATION_CONFIG_FORM8[] PROGMEM = "<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<label for='userid' class='bx--label'>User ID (for this interface)</label>"
|
||||||
|
"<input id='userid' type='text' class='bx--text-input' name='userid' value='%USERID%' maxlength='20'>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<label for='stationpassword' class='bx--label'>Password (for this interface)</label>"
|
||||||
|
"<input id='stationpassword' type='password' class='bx--text-input' name='stationpassword' value='%STATIONPASSWORD%'>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"<div class='bx--row'>"
|
||||||
|
"<div class='bx--form-item bx--col bx--col--auto'>"
|
||||||
|
"<button class='bx--btn bx--btn--primary' type='submit'>Save</button>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"</form>";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief Class to generate HTML content from Memory
|
* @brief Class to generate HTML content from Memory
|
||||||
*/
|
*/
|
||||||
|
|
@ -66,4 +344,6 @@ public:
|
||||||
static void sendFooter(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
static void sendFooter(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
||||||
|
|
||||||
static void sendUpdateForm(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
static void sendUpdateForm(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
||||||
|
static void sendWeatherConfigForm(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
||||||
|
static void sendStationConfigForm(ESP8266WebServer *server, GlobalDataController *globalDataController);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue