pull/125/head
Matthias Grimm 2020-12-15 12:02:46 -06:00
commit 4688de9aaa
9 changed files with 1360 additions and 208 deletions

View File

@ -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&nbsp;</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(&quot;Do you want to reset to default settings?&quot;)"><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(&quot;Do you want to forget to WiFi connection?&quot;)"><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>

View File

@ -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&nbsp;</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(&quot;Do you want to reset to default settings?&quot;)"><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(&quot;Do you want to forget to WiFi connection?&quot;)"><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>

View File

@ -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&nbsp;</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(&quot;Do you want to reset to default settings?&quot;)"><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(&quot;Do you want to forget to WiFi connection?&quot;)"><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>

105
html-ui/index.html Normal file
View File

@ -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&nbsp;</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(&quot;Do you want to reset to default settings?&quot;)"><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(&quot;Do you want to forget to WiFi connection?&quot;)"><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>

105
html-ui/upload.html Normal file
View File

@ -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&nbsp;</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(&quot;Do you want to reset to default settings?&quot;)"><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(&quot;Do you want to forget to WiFi connection?&quot;)"><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>

View File

@ -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>"
"<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>"
"<option>pink</option>"
"<option>purple</option>"
@ -101,10 +56,12 @@ void WebServer::setup() {
this->server->on("/", []() { obj->displayPrinterStatus(); });
this->server->on("/systemreset", []() { obj->handleSystemReset(); });
this->server->on("/forgetwifi", []() { obj->handleWifiReset(); });
this->server->on("/updateconfig", []() { obj->handleUpdateConfig(); });
this->server->on("/updateweatherconfig", []() { obj->handleUpdateWeather(); });
this->server->on("/configure", []() { obj->handleConfigure(); });
this->server->on("/configurestation", []() { obj->handleConfigureStation(); });
this->server->on("/configureprinter", []() { obj->handleConfigurePrinter(); });
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->onNotFound([]() { obj->redirectHome(); });
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);
}
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() {
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() {
if (!this->authentication()) {
return this->server->requestAuthentication();
@ -470,55 +390,27 @@ void WebServer::handleConfigure() {
form.replace("%PRINTERPASS%", this->globalDataController->getPrinterAuthPass());
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);
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
}*/
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'";
void WebServer::handleConfigurePrinter() {
if (!this->authentication()) {
return this->server->requestAuthentication();
}
form.replace("%IS_BASICAUTH_CHECKED%", isUseSecurityChecked);
form.replace("%USERID%", String(this->globalDataController->getWebserverUsername()));
form.replace("%STATIONPASSWORD%", String(this->globalDataController->getWebserverPassword()));
this->server->sendContent(form);
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Printers");
WebserverMemoryVariables::sendFooter(this->server, this->globalDataController);
}
@ -538,6 +430,51 @@ 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
*/
@ -546,34 +483,58 @@ void WebServer::handleWeatherConfigure() {
return this->server->requestAuthentication();
}
WebserverMemoryVariables::sendHeader(this->server, this->globalDataController, "Configure", "Weather");
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::sendWeatherConfigForm(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
*/

View File

@ -26,8 +26,10 @@ public:
void handleSystemReset();
void handleWifiReset();
void handleUpdateConfig();
void handleUpdateStation();
void handleUpdateWeather();
void handleConfigure();
void handleConfigurePrinter();
void handleConfigureStation();
void handleWeatherConfigure();
void handleUpdatePage();
};

View File

@ -33,59 +33,30 @@ void WebserverMemoryVariables::sendHeader(
server->setContentLength(CONTENT_LENGTH_UNKNOWN);
server->send(200, "text/html", "");
server->sendContent("<!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'>"
);
server->sendContent(String(FPSTR(HEADER_BLOCK1)));
if (refresh) {
server->sendContent("<meta http-equiv=\"refresh\" content=\"30\">");
}
server->sendContent("<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}</style>"
"</head><body>"
"<header class='cv-header bx--header'>"
"<a href='/' class='cv-header-name bx--header__name'>"
);
server->sendContent(String(FPSTR(HEADER_BLOCK2)));
server->sendContent("<span class='bx--header__name--prefix'>PrintBuddy&nbsp;</span>V" + String(VERSION));
server->sendContent("</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 id='sidebar' class='cv-header-panel bx--header-panel'>"
"<ul class='cv-switcher bx--switcher__item'>"
);
server->sendContent(String(FPSTR(HEADER_BLOCK3)));
server->sendContent(String(FPSTR(MENUE_ITEMS)));
server->sendContent("</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>"
);
server->sendContent(String(rssi) + "%");
server->sendContent("</span></div>"
"</div>"
"</div>"
"</header>"
"<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(String(FPSTR(HEADER_BLOCK4)));
uint32_t heapFree = 0;
uint16_t heapMax = 0;
uint8_t heapFrag = 0;
ESP.getHeapStats(&heapFree, &heapMax, &heapFrag);
server->sendContent("<div>WiFi Signal Strength: " + String(rssi) + "%</div>");
server->sendContent("<div>ESP ChipID: " + String(ESP.getChipId()) + "</div>");
server->sendContent("<div>ESP CoreVersion: " + String(ESP.getCoreVersion()) + "</div>");
server->sendContent("<div>Heap (frag/free/max): " + String(heapFrag) + "|" + String(heapFree) + "|" + String(heapMax) + "</div>");
server->sendContent(String(FPSTR(HEADER_BLOCK5)));
server->sendContent(pageLabel);
server->sendContent("</h4><h1 id='page-title' class='page-header__title'>");
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
*/
void WebserverMemoryVariables::sendFooter(ESP8266WebServer *server, GlobalDataController *globalDataController) {
server->sendContent("<br><br><br></div></div>");
server->sendContent("<script src='https://unpkg.com/carbon-components/scripts/carbon-components.min.js'></script></body></html>");
server->sendContent(String(FPSTR(FOOTER_BLOCK)));
server->sendContent("");
server->client().stop();
globalDataController->ledOnOff(false);
@ -109,3 +79,106 @@ void WebserverMemoryVariables::sendFooter(ESP8266WebServer *server, GlobalDataCo
void WebserverMemoryVariables::sendUpdateForm(ESP8266WebServer *server, GlobalDataController *globalDataController) {
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);
}

View File

@ -9,17 +9,71 @@
*/
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='/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='/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>";
/**
* 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
*/
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'>"
"<div class='cv-file-uploader cv-form-item bx--form-item'>"
"<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>"
"<input type='submit' value='Update FileSystem' class='bx--btn bx--btn--danger'>"
"</form>"
"</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
*/
@ -66,4 +344,6 @@ public:
static void sendFooter(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);
};