terminal settings page and backend

html_orig/_debug_replacements.php

@@ -8,11 +8,12 @@
 return [
 	'%term_title%' => 'ESP8266 Wireless Terminal',
 
-	'%b1%' => '1',
-	'%b2%' => '2',
-	'%b3%' => '3',
-	'%b4%' => '4',
-	'%b5%' => '5',
+	'%btn1%' => '1',
+	'%btn2%' => '2',
+	'%btn3%' => '3',
+	'%btn4%' => '4',
+	'%btn5%' => '5',
+
 	'%screenData%' => '{
 		 "w": 26, "h": 10,
 		 "x": 0, "y": 0,
@@ -50,4 +51,12 @@ return [
 	'%sta_addr_ip%' => '192.168.0.33',
 	'%sta_addr_mask%' => '255.255.255.0',
 	'%sta_addr_gw%' => '192.168.0.1',
+
+	'%sta_mac%' => 'ab:cd:ef:01:23:45',
+	'%ap_mac%' => '01:23:45:ab:cd:ef',
+
+	'%term_width%' => '26',
+	'%term_height%' => '10',
+	'%default_bg%' => '0',
+	'%default_fg%' => '7',
 ];

html_orig/_pages.php

@@ -17,17 +17,22 @@ if (! function_exists('pg')) {
 	}
 }
 
-pg('cfg_wifi', 'cfg', '/cfg/wifi');
-pg('cfg_wifi_conn', '', '/wifi/connecting'); // page without menu that tries to show the connection progress
-pg('cfg_network', 'cfg', '/cfg/network');
-//pg('cfg_term', 'cfg', '/cfg/term');
-pg('help', 'cfg page-help', '/help');
+pg('cfg_wifi',        'cfg', '/cfg/wifi');
+pg('cfg_wifi_conn',   '',    '/cfg/wifi/connecting');
+pg('wifi_connstatus', 'api', '/cfg/wifi/connstatus');
+pg('wifi_set',        'api', '/cfg/wifi/set');
+pg('wifi_scan',       'api', '/cfg/wifi/scan');
+
+pg('cfg_network',     'cfg', '/cfg/network');
+pg('network_set',     'api', '/cfg/network/set');
+
+pg('cfg_app',        'cfg', '/cfg/app');
+pg('app_set',        'api', '/cfg/app/set');
+
+pg('help',  'cfg page-help',  '/help');
 pg('about', 'cfg page-about', '/about');
-pg('term', 'term', '/', 'title.term');
+pg('term',  'term',           '/', 'title.term');
 
 // ajax API
-pg('wifi_set', 'api', '/wifi/set');//'/cfg/wifi/set');
-pg('wifi_scan', 'api', '/wifi/scan');//'/cfg/wifi/scan');
-pg('wifi_connstatus', 'api', '/wifi/connstatus');
 
 return $pages;

html_orig/css/app.css

@@ -489,14 +489,17 @@ ul > * {
   margin-top: 1rem;
   padding: 0.61805rem 1rem;
   border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.07); }
+  background-color: rgba(255, 255, 255, 0.07);
+  box-shadow: 0 0 4px black;
+  border: 1px solid #4f4f4f; }
   @media screen and (max-width: 544px) {
     .Box {
       margin-top: 0.61805rem; } }
   h1 + .Box {
     margin-top: 0; }
   .Box h2 {
-    margin-top: 0; }
+    margin-top: 0;
+    margin-bottom: 0 !important; }
   .Box.wide {
     width: initial;
     max-width: initial; }
@@ -515,13 +518,26 @@ ul > * {
           right: 0;
           top: 0;
           margin-top: 0.61805rem; } }
+  .Box.str.mobopen .Row.buttons {
+    top: 0;
+    margin-top: 0.61805rem; }
+  .Box .Row.explain {
+    max-width: 600px;
+    margin-left: 0; }
+    @media screen and (max-width: 544px) {
+      .Box .Row.explain {
+        margin-top: 60px; } }
+  .Box.mobopen .Row.explain {
+    margin-top: 12px; }
+    @media screen and (max-width: 544px) {
+      .Box.mobopen .Row.explain {
+        margin-top: 18px; } }
 
 @media screen and (max-width: 544px) {
   .Box.mobcol h2 {
     position: relative;
     cursor: pointer;
-    padding-right: 1.3rem;
-    margin-bottom: 0 !important; }
+    padding-right: 1.3rem; }
     .Box.mobcol h2::after {
       position: absolute;
       right: 0;
@@ -732,7 +748,7 @@ form {
 input[type="number"], input[type="password"], input[type="text"], textarea, select, label.select-wrap {
   width: 250px; }
 
-input[type="number"] {
+input[type="number"], input.short {
   width: 125px; }
 
 .Box.errors .list {
@@ -741,46 +757,46 @@ input[type="number"] {
 .Box.errors .lead {
   color: white; }
 
-form .Row {
+.Row {
   vertical-align: middle;
   margin: 12px auto;
   text-align: left;
   display: flex;
   flex-direction: row;
   align-items: center; }
-  form .Row:first-child {
+  .Row:first-child {
     margin-top: 0; }
-  form .Row:last-child {
+  .Row:last-child {
     margin-bottom: 0; }
-  form .Row .spacer {
+  .Row .spacer {
     width: 160px; }
     @media screen and (max-width: 544px) {
-      form .Row .spacer {
+      .Row .spacer {
         display: none; } }
-  form .Row.buttons {
+  .Row.buttons {
     margin: 16px auto; }
-    form .Row.buttons input, form .Row.buttons .button {
+    .Row.buttons input, .Row.buttons .button {
       margin-right: 0.61805rem; }
-  form .Row.centered {
+  .Row.centered {
     justify-content: center; }
-  form .Row.message {
+  .Row.message {
     font-size: 1em;
     text-shadow: 1px 1px 3px black;
     text-align: center; }
-    form .Row.message.error {
+    .Row.message.error {
       color: crimson; }
-    form .Row.message.ok {
+    .Row.message.ok {
       color: #0fe851; }
-  form .Row.separator {
+  .Row.separator {
     padding-top: 14px;
     border-top: 2px solid rgba(255, 255, 255, 0.1); }
-  form .Row textarea {
+  .Row textarea {
     display: inline-block;
     vertical-align: top;
     min-height: 10rem;
     flex-grow: 1;
     resize: vertical; }
-  form .Row label {
+  .Row label {
     font-weight: bold;
     color: white;
     display: inline-block;
@@ -795,32 +811,33 @@ form .Row {
     user-select: none;
     white-space: nowrap;
     word-wrap: normal; }
-  form .Row label.error {
+  .Row label.error {
     color: crimson; }
-  form .Row input[type="range"] {
+  .Row input[type="range"] {
     width: 200px; }
   @media screen and (max-width: 544px) {
-    form .Row {
-      flex-direction: column; }
-      form .Row.buttons, form .Row.centered, form .Row.checkbox {
+    .Row {
+      flex-direction: column;
+      margin: 6px auto; }
+      .Row.buttons, .Row.centered, .Row.checkbox {
         flex-direction: row; }
-      form .Row.buttons {
+      .Row.buttons {
         justify-content: center; }
-        form .Row.buttons :last-child {
+        .Row.buttons :last-child {
           margin-right: 0; }
-      form .Row label {
+      .Row label {
         padding-left: 0;
         text-align: left;
         width: auto; }
-      form .Row .checkbox-wrap {
+      .Row .checkbox-wrap {
         order: 1;
         text-align: left;
         padding-bottom: 0;
         border-radius: .4px;
         width: auto; }
-        form .Row .checkbox-wrap + label {
+        .Row .checkbox-wrap + label {
           width: auto; }
-      form .Row input[type="number"], form .Row input[type="password"], form .Row input[type="text"], form .Row textarea, form .Row input[type="range"], form .Row textarea {
+      .Row input[type="number"], .Row input[type="password"], .Row input[type="text"], .Row textarea, .Row input[type="range"], .Row textarea, .Row select {
         width: 100%; } }
 
 form span.required {

html_orig/lang/en.php

@@ -5,7 +5,7 @@ return [
 
 	'menu.cfg_wifi' => 'WiFi Settings',
 	'menu.cfg_network' => 'Network Configuration',
-	'menu.cfg_term' => 'Terminal Settings',
+	'menu.cfg_app' => 'Terminal Settings',
 	'menu.about' => 'About ESPTerm',
 	'menu.help' => 'Quick Reference',
 	'menu.term' => 'Back to Terminal',
@@ -13,8 +13,46 @@ return [
 
 	'title.term' => 'Terminal',
 
-	'net.ap' => 'DHCP Server',
-	'net.sta' => 'DHCP Client',
+	'net.ap' => 'DHCP Server (AP)',
+	'net.sta' => 'DHCP Client (Station)',
+	'net.sta_mac' => 'Station MAC',
+	'net.ap_mac' => 'AP MAC',
+	'net.details' => 'MAC addresses',
+
+	'app.defaults' => 'Initial settings',
+	'app.explain_initials' => '
+		Those are the initial settings used after ESPTerm restarts, and they
+		will also be applied immediately after you submit this form.
+		They can be subsequently changed by ESC commands, but those changes
+		aren\'t persistent and will be lost when the device powers off.',
+
+	'app.term_title' => 'Header text',
+	'app.term_width' => 'Screen width',
+	'app.term_height' => 'Screen height',
+	'app.default_fg' => 'Base text color',
+	'app.default_bg' => 'Base background',
+	'app.btn1' => 'Button 1 text',
+	'app.btn2' => 'Button 2 text',
+	'app.btn3' => 'Button 3 text',
+	'app.btn4' => 'Button 4 text',
+	'app.btn5' => 'Button 5 text',
+
+	'color.0' => 'Black',
+	'color.1' => 'Dark Red',
+	'color.2' => 'Dark Green',
+	'color.3' => 'Dim Yellow',
+	'color.4' => 'Deep Blue',
+	'color.5' => 'Dark Violet',
+	'color.6' => 'Dark Cyan',
+	'color.7' => 'Silver',
+	'color.8' => 'Gray',
+	'color.9' => 'Light Red',
+	'color.10' => 'Light Green',
+	'color.11' => 'Light Yellow',
+	'color.12' => 'Light Blue',
+	'color.13' => 'Light Violet',
+	'color.14' => 'Light Cyan',
+	'color.15' => 'White',
 
 	'net.explain_sta' => '
 		Those settings affect the built-in DHCP client used for 
@@ -42,16 +80,14 @@ return [
 	'wifi.ap' => 'Built-in Access Point',
 	'wifi.sta' => 'Connect to External Network',
 
-	'wifi.enable' => 'Enabled:',
-	'wifi.tpw' => 'Transmit Power:',
-	'wifi.ap_channel' => 'Channel:',
-	'wifi.ap_ssid' => 'AP SSID:',
-	'wifi.ap_password' => 'Password:',
-	'wifi.ap_hidden' => 'Hide SSID:',
-	'wifi.sta_info' => 'Selected:',
+	'wifi.enable' => 'Enabled',
+	'wifi.tpw' => 'Transmit power',
+	'wifi.ap_channel' => 'Channel',
+	'wifi.ap_ssid' => 'AP SSID',
+	'wifi.ap_password' => 'Password',
+	'wifi.ap_hidden' => 'Hide SSID',
+	'wifi.sta_info' => 'Selected',
 
-	'wifi.sta_ssid' => 'Network SSID:',
-	'wifi.sta_password' => 'Password:',
 	'wifi.not_conn' => 'Not connected.',
 	'wifi.sta_none' => 'None',
 	'wifi.sta_active_pw' => '🔒',
@@ -67,10 +103,11 @@ return [
 	'wifi.conn.back_to_config' => 'Back to WiFi config',
 	'wifi.conn.telemetry_lost' => 'Telemetry lost, something went wrong. Try again...',
 
-	'wifi.conn.idle' =>"Preparing to connect",
+	'wifi.conn.disabled' =>"Station mode is disabled.",
+	'wifi.conn.idle' =>"Idle, not connected and with no IP.",
 	'wifi.conn.success' => "Connected! Received IP ",
 	'wifi.conn.working' => "Connecting to selected AP",
-	'wifi.conn.fail' => "Connection failed, check your password and try again.",
+	'wifi.conn.fail' => "Connection failed, check settings & try again. Cause: ",
 
 	'apply' => 'Apply!',
 	'enabled' => 'Enabled',

html_orig/pages/cfg_app.php

@@ -0,0 +1,71 @@
+<form class="Box mobopen str" action="<?= e(url('app_set')) ?>" method="GET">
+	<h2><?= tr('app.defaults') ?></h2>
+
+	<div class="Row buttons">
+		<input type="submit" value="<?= tr('apply') ?>">
+	</div>
+
+	<div class="Row explain">
+		<?= tr('app.explain_initials') ?>
+	</div>
+
+	<div class="Row">
+		<label for="term_width"><?= tr('app.term_width') ?></label>
+		<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="%term_width%" required>
+	</div>
+
+	<div class="Row">
+		<label for="term_height"><?= tr('app.term_height') ?></label>
+		<input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="%term_height%" required>
+	</div>
+
+	<div class="Row">
+		<label for="default_fg"><?= tr("app.default_fg") ?></label>
+		<select name="default_fg" id="default_fg">
+			<?php for($i=0; $i<16; $i++): ?>
+			<option value="<?=$i?>"><?= tr("color.$i") ?></option>
+			<?php endfor; ?>
+		</select>
+		<script>qs('#default_fg').selectedIndex = %default_fg%;</script>
+	</div>
+
+	<div class="Row">
+		<label for="default_bg"><?= tr("app.default_bg") ?></label>
+		<select name="default_bg" id="default_bg">
+			<?php for($i=0; $i<16; $i++): ?>
+				<option value="<?=$i?>"><?= tr("color.$i") ?></option>
+			<?php endfor; ?>
+		</select>
+		<script>qs('#default_bg').selectedIndex = %default_bg%;</script>
+	</div>
+
+	<div class="Row">
+		<label for="term_title"><?= tr('app.term_title') ?></label>
+		<input type="text" name="term_title" id="term_title" value="%term_title%" required>
+	</div>
+
+	<div class="Row">
+		<label for="btn1"><?= tr("app.btn1") ?></label>
+		<input class="short" type="text" name="btn1" id="btn1" value="%btn1%">
+	</div>
+
+	<div class="Row">
+		<label for="btn2"><?= tr("app.btn2") ?></label>
+		<input class="short" type="text" name="btn2" id="btn2" value="%btn2%">
+	</div>
+
+	<div class="Row">
+		<label for="btn3"><?= tr("app.btn3") ?></label>
+		<input class="short" type="text" name="btn3" id="btn3" value="%btn3%">
+	</div>
+
+	<div class="Row">
+		<label for="btn4"><?= tr("app.btn4") ?></label>
+		<input class="short" type="text" name="btn4" id="btn4" value="%btn4%">
+	</div>
+
+	<div class="Row">
+		<label for="btn5"><?= tr("app.btn5") ?></label>
+		<input class="short" type="text" name="btn5" id="btn5" value="%btn5%">
+	</div>
+</form>

html_orig/pages/cfg_network.php

@@ -2,15 +2,14 @@
 $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 ?>
 
-<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
+<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
 	<h2><?= tr('net.ap') ?></h2>
 
 	<div class="Row buttons">
 		<input type="submit" value="<?= tr('apply') ?>">
 	</div>
 
-	<div class="Row mq-phone" style="height: 35px"></div>
-	<div class="Row" style="max-width: 600px; margin-left: 0">
+	<div class="Row explain">
 		<?= tr('net.explain_ap') ?>
 	</div>
 
@@ -41,15 +40,14 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 	</div>
 </form>
 
-<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
+<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
 	<h2><?= tr('net.sta') ?></h2>
 
 	<div class="Row buttons">
 		<input type="submit" value="<?= tr('apply') ?>">
 	</div>
 
-	<div class="Row mq-phone" style="height: 35px"></div>
-	<div class="Row" style="max-width: 600px; margin-left: 0">
+	<div class="Row explain">
 		<?= tr('net.explain_sta') ?>
 	</div>
 
@@ -74,3 +72,14 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 		<input type="text" name="sta_addr_gw" id="sta_addr_gw" value="%sta_addr_gw%" <?=$ipmask?> required>
 	</div>
 </form>
+
+<div class="Box mobcol">
+	<h2><?= tr('net.details') ?></h2>
+
+	<div class="Row">
+		<label><?= tr('net.sta_mac') ?></label><input type="text" readonly value="%sta_mac%">
+	</div>
+	<div class="Row">
+		<label><?= tr('net.ap_mac') ?></label><input type="text" readonly value="%ap_mac%">
+	</div>
+</div>

html_orig/pages/cfg_wifi_conn.php

@@ -10,6 +10,7 @@
 	var abortTmeo;
 
 	var messages = <?= json_encode([
+		'disabled' => tr('wifi.conn.disabled'),
 		'idle' => tr('wifi.conn.idle'),
 		'success' => tr('wifi.conn.success'),
 		'working' => tr('wifi.conn.working'),
@@ -25,6 +26,7 @@
 				var done = false;
 				var msg = messages[data.status] || '...';
 				if (data.status == 'success') msg += data.ip;
+				if (data.status == 'fail') msg += data.cause;
 
 				$("#status").html(msg);
 

html_orig/pages/term.php

@@ -13,11 +13,11 @@
 	<div id="screen"></div>
 
 	<div id="buttons">
-		<button data-n="1" class="btn-blue">%b1%</button><!--
-		--><button data-n="2" class="btn-blue">%b2%</button><!--
-		--><button data-n="3" class="btn-blue">%b3%</button><!--
-		--><button data-n="4" class="btn-blue">%b4%</button><!--
-		--><button data-n="5" class="btn-blue">%b5%</button>
+		<button data-n="1" class="btn-blue">%btn1%</button><!--
+		--><button data-n="2" class="btn-blue">%btn2%</button><!--
+		--><button data-n="3" class="btn-blue">%btn3%</button><!--
+		--><button data-n="4" class="btn-blue">%btn4%</button><!--
+		--><button data-n="5" class="btn-blue">%btn5%</button>
 	</div>
 </div>
 

html_orig/sass/form/_form_layout.scss

@@ -5,7 +5,7 @@ form { @include naked(); }
 	width: $form-field-w;
 }
 
-input[type="number"] {
+input[type="number"], input.short {
 	width: $form-field-w/2;
 }
 
@@ -20,7 +20,7 @@ input[type="number"] {
 	}
 }
 
-form .Row {
+.Row {
 	vertical-align: middle;
 	margin: 12px auto;
 	text-align: left;
@@ -132,6 +132,7 @@ form .Row {
 	// special phone style
 	@include media($phone) {
 		flex-direction: column;
+		margin: 6px auto;
 
 		&.buttons, &.centered, &.checkbox {
 			flex-direction: row;
@@ -165,7 +166,7 @@ form .Row {
 			}
 		}
 
-		#{$all-text-inputs}, input[type="range"], textarea {
+		#{$all-text-inputs}, input[type="range"], textarea, select {
 			width: 100%;
 		}
 	}

html_orig/sass/layout/_box.scss

@@ -15,10 +15,13 @@
 
 	h2 {
 		margin-top: 0;
+		margin-bottom: 0 !important;
 	}
 
 	border-radius: 3px;
 	background-color: rgba(white, .07);
+	box-shadow: 0 0 4px black;
+	border: 1px solid #4f4f4f;
 
 	&.wide {
 		width: initial;
@@ -52,6 +55,25 @@
 			}
 		}
 	}
+
+	&.str.mobopen .Row.buttons {
+		top: 0;
+		margin-top: dist(-1);
+	}
+
+	.Row.explain {
+		max-width: 600px; margin-left: 0;
+		@include media($phone) {
+			margin-top: 60px;
+		}
+	}
+	&.mobopen .Row.explain {
+		margin-top: 12px; // default from .Row
+
+		@include media($phone) {
+			margin-top: 18px;
+		}
+	}
 }
 
 @include media($phone) {
@@ -71,8 +93,6 @@
 				font-weight: bold;
 				transform: translate(0,-50%) rotate(90deg);
 			}
-
-			margin-bottom: 0 !important;
 		}
 
 		&.expanded h2::after {