Modified HTML pages to allow building Demo version

.gitignore

@@ -1,4 +1,5 @@
 html/
+html_demo/
 build/
 firmware/
 espfs/mkespfsimage/*.o

build_demo.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+echo "-- Preparing WWW files --"
+
+[[ -e html_demo ]] && rm -r html_demo
+mkdir -p html_demo/img
+mkdir -p html_demo/js
+mkdir -p html_demo/css
+
+cd html_orig
+sh ./packjs.sh
+ESP_DEMO=1 php ./build_html.php
+cd ..
+
+cp html_orig/js/app.js html_demo/js/
+
+sass html_orig/sass/app.scss html_demo/css/app.css
+rm html_demo/css/app.css.map
+
+cp html_orig/img/* html_demo/img/
+cp html_orig/favicon.ico html_demo/favicon.ico
+
+# cleanup
+find html_demo/ -name "*.orig" -delete
+find html_demo/ -name "*.xcf" -delete
+find html_demo/ -name "*~" -delete

html_orig/_debug_replacements.php

@@ -5,15 +5,30 @@
  * without esphttpd. This is needed mainly for places where the replacements
  * are given to JavaScript, to avoid syntax errors with
  */
+
+$vers = '???';
+$f = file_get_contents(__DIR__ . '/../user/version.h');
+preg_match_all('/#define FW_V_.*? (\d+)/', $f, $vm);
+#define FW_V_MAJOR 1
+#define FW_V_MINOR 0
+#define FW_V_PATCH 0
+
+$vers = $vm[1][0].'.'.$vm[1][1].'.'.$vm[1][2];
+
 return [
-	'term_title' => 'ESPTerm local debug',
+	'term_title' => ESP_DEMO ? 'ESPTerm Web UI Demo' : 'ESPTerm local debug',
 
-	'btn1' => '1',
-	'btn2' => '2',
-	'btn3' => '3',
+	'btn1' => 'OK',
+	'btn2' => 'Cancel',
+	'btn3' => '',
 	'btn4' => '',
-	'btn5' => '5',
-	'labels_seq' => 'TESPTerm local debug
1
2
3

5',
+	'btn5' => 'Help',
+	'bm1' => '01,'.ord('y'),
+	'bm2' => '01,'.ord('n'),
+	'bm3' => '',
+	'bm4' => '',
+	'bm5' => '05',
+	'labels_seq' => ESP_DEMO ? 'ESPTerm Web UI Demo
OK
Cancel


Help' : 'TESPTerm local debug
OK
Cancel


Help',
 
 	'parser_tout_ms' => 10,
 	'display_tout_ms' => 15,
@@ -21,25 +36,25 @@ return [
 	'fn_alt_mode' => '1',
 
 	'opmode' => '2',
-	'sta_enable' => '0',
+	'sta_enable' => '1',
 	'ap_enable' => '1',
 
 	'tpw' => '60',
 	'ap_channel' => '7',
-	'ap_ssid' => 'ESP-123456',
-	'ap_password' => 'Passw0rd!',
+	'ap_ssid' => 'TERM-027451',
+	'ap_password' => '',
 	'ap_hidden' => '0',
 
-	'sta_ssid' => 'Chlivek',
-	'sta_password' => 'windows XP is The Best',
-	'sta_active_ip' => '1.2.3.4',
-	'sta_active_ssid' => 'Chlivek',
+	'sta_ssid' => 'Cisco',
+	'sta_password' => 'Passw0rd!',
+	'sta_active_ip' => ESP_DEMO ? '192.168.82.66' : '192.168.0.19',
+	'sta_active_ssid' => 'Cisco',
 
-	'vers_fw' => '1.2.3',
+	'vers_fw' => $vers,
 	'date' => date('Y-m-d'),
 	'time' => date('G:i'),
-	'vers_httpd' => '4.5.6',
-	'vers_sdk' => '1.52',
+	'vers_httpd' => '0.4',
+	'vers_sdk' => '010502',
 	'githubrepo' => 'https://github.com/MightyPork/esp-vt100-firmware',
 
 	'ap_dhcp_time' => '120',
@@ -53,11 +68,11 @@ return [
 	'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',
+	'sta_mac' => '5c:cf:7f:02:74:51',
+	'ap_mac' => '5e:cf:7f:02:74:51',
 
-	'term_width' => '26',
-	'term_height' => '10',
+	'term_width' => '80',
+	'term_height' => '25',
 	'default_bg' => '0',
 	'default_fg' => '7',
 	'show_buttons' => '1',
@@ -67,5 +82,5 @@ return [
 	'uart_stopbits' => 1,
 	'uart_parity' => 2,
 
-	'theme' => 5,
+	'theme' => 0,
 ];

html_orig/_pages.php

@@ -43,6 +43,8 @@ pg('term',  'term',           '', '/', 'title.term');
 
 pg('reset_screen',  'api',     '', '/system/cls', 'title.term');
 
+pg('index',  'api',           '', '/', '');
+
 // ajax API
 
 return $pages;

html_orig/base.php

@@ -23,6 +23,30 @@ define('DEBUG', !$prod);
 $root = DEBUG ? json_encode(ESP_IP) : 'location.host';
 define('JS_WEB_ROOT', $root);
 
+define('ESP_DEMO', (bool)getenv('ESP_DEMO'));
+if (ESP_DEMO) {
+	define('DEMO_SCREEN', '"S\u0019\u0001Q\u0001\u0017\u0001K\u0001\u0015\u0004\u0003\b\u0001 \u0002P\u0001┌ESPTerm─Demo─\u0002\u0002\u0001\u0003\u0002\u000131\u0003\u0003\u000132\u0003\u0004\u00013\u0002\u0002\u0001\u0003\u0005\u000134\u0003\u0006\u000135\u0003\u0007\u000136\u0003\b\u000137\u0003\t\u000190\u0003\n\u000191\u0003\u000b\u000192\u0003\f\u000193\u0003\r\u000194\u0003\u000e\u000195\u0003\u000f\u000196\u0003\u0010\u000197\u0003\b\u0001─\u0002\r\u0001┐ \u0002\u0015\u0001│ \u00029\u0001│ \u0002\u0004\u0001│\u0002\t\u0001 \u0002\b\u0001│\u0004\u0002\u0001Bold \u0004\u0003\u0001F\u0004\u0003\u0001a\u0004\u0003\u0001i\u0004\u0003\u0001n\u0004\u0003\u0001t\u0004\u0003\u0001 \u0004\u0005\u0001I\u0004\u0005\u0001t\u0004\u0005\u0001a\u0004\u0005\u0001l\u0004\u0005\u0001i\u0004\u0005\u0001c\u0004\u0005\u0001 \u0004\t\u0001U\u0004\t\u0001n\u0004\t\u0001d\u0004\t\u0001e\u0004\t\u0001r\u0004\t\u0001l\u0004\t\u0001i\u0004\t\u0001n\u0004\t\u0001e\u0004\u0001\u0001 \u0004\u0011\u0001B\u0004\u0011\u0001l\u0004\u0011\u0001i\u0004\u0011\u0001n\u0004\u0011\u0001k\u0004\u0011\u0001 \u0001q\u0001\u0001Inverse\u0003\b\u0001 \u0004A\u0001S\u0004A\u0001t\u0004A\u0001r\u0004A\u0001i\u0004A\u0001k\u0004A\u0001e\u0004\u0001\u0001 \u0004!\u0001F\u0004!\u0001r\u0004!\u0001a\u0004!\u0001k\u0004!\u0001t\u0004!\u0001u\u0004!\u0001r\u0004\u0001\u0001 │ \u0002\u0002\u0001─\u0002\u0002\u0001\u0003\n\u0002 \u0002\t\u0001\u0003\b\u0001─\u0002\u0002\u0001 \u0002\u0006\u0001│ \u00029\u0001│ \u0002\u0002\u0001─\u0002\u0002\u0001\u0003\n\u0002 \u0003\u0002\u0002ESP826\u0002\u0002\u0001\u0003\n\u0002 \u0003\b\u0001─\u0002\u0002\u0001 \u0002\u0006\u0001└─\u00029\u0001┤ \u0002\u0002\u0001─\u0002\u0002\u0001\u0003\n\u0002 \u0002\t\u0001\u0003\b\u0001─\u0002\u0002\u0001 \u0002@\u0001│ \u0002\u0002\u0001─\u0002\u0002\u0001\u0003\n\u0002 \u0003\u0002\u0002(@)#\u0002\u0004\u0001\u0003\n\u0002 \u0003\b\u0001─\u0002\u0002\u0001 \u0002\u0007\u0001\u0003O\u0001 This is a static demo of the ESPTerm Web Interface \u0002\u0004\u0001\u0003\b\u0001 \u0002\u0002\u0001│ \u0002\u0002\u0001─\u0002\u0002\u0001\u0003\n\u0002 \u0002\t\u0001\u0003\b\u0001─\u0002\u0002\u0001 \u0002\u0007\u0001\u0003O\u0001 \u00027\u0001\u0003\b\u0001 \u0002\u0002\u0001│ \u0002\u0004\u0001│\u0002\t\u0001 \u0002\t\u0001\u0003O\u0001 Try the links beneath this scre\u0002\u0002\u0001n to browse the menu. \u0003\b\u0001 \u0002\u0002\u0001♦ \u0002\u0016\u0001\u0003O\u0001 \u00027\u0001\u0003\b\u0001 \u0002\u0019\u0001\u0003O\u0001 <°)\u0002\u0003\u0001>< ESPTerm ful\u0002\u0002\u0001y sup\u0002\u0002\u0001orts UTF-8 お は よ ー \u0002\u0002\u0001><(\u0002\u0003\u0001°> \u0003\b\u0001 \u0002\u0019\u0001\u0003O\u0001 \u00027\u0001\u0003\b\u0001 \u0002i\u0001\u0003\u000b\u0001Other interesting features:\u0003\b\u0001 \u0002\u0018\u0001↓ \u0002n\u0001\u0003\u0003\u0001- Almost ful\u0002\u0002\u0001 VT10\u0002\u0002\u0001 emulation \u0003\b\u0001 \u0003\u0006\u0001()\u0003\b\u0001 \u0003\u0006\u0001()\u0003\b\u0001 \u0002\b\u0001Funguje tu čeština! \u0002\u0011\u0001\u0003\u0005\u0001- Xterm-like mouse tracking\u0003\b\u0001 \u0002\u0003\u0001=\u0002\u0002\u0001\u0003\t\u0002°.°\u0003\b\u0001=\u0002\u0002\u0001 \u0003\u0006\u0001<-\u0002\u0003\u0001, \u0003\b\u0001 \u0002$\u0001\u0003\u0004\u0001- File upload utility\u0003\b\u0001 \u0002\n\u0001\'\u0002\u0002\u0001 \'\u0002\u0002\u0001 \u0002\u0002\u0001\u0003\u0006\u0001 \u0002\u0004\u0001mouse\u0003\b\u0001 \u0002!\u0001\u0003\u0002\u0001- User-friendly config interface\u0003\b\u0001 \u00020\u0001\u0003\u000e\u0001-\u0003\u0002\u0001 \u0003\u000e\u0001Advanced WiFi & network set\u0002\u0002\u0001ings\u0003\b\u0001 \u0002\u0011\u0001\u0003\f\u0001Try ESPTerm today!\u0003\b\u0001 \u0002\u000b\u0001- Built-in help page \u0002\u001a\u0001\u0003\u0007\u0001-\u0002\u0002\u0001>\u0003\b\u0001 \u0002\u0002\u0001\u0003\f\u0001Pre-built binaries\u0003\b\u0001 \u0003\f\u0001are\u0003\b\u0001 \u0002\"\u0001\u0003\u0007\u0001link on the About page \u0002\u0002\u0001\u0003\f\u0001available on GitHub! \u0003\b\u0001 \u0002U\u0001"');
+	define('DEMO_APS', <<<APS
+{
+ "result": {
+  "inProgress": 0,
+  "APs": [
+   {"essid": "Cisco", "bssid": "88:f7:c7:52:b3:99", "rssi": 205, "rssi_perc": 100, "enc": 4, "channel": 7},
+   {"essid": "UPC Wi-Free", "bssid": "8a:f7:c7:52:b3:9b", "rssi": 203, "rssi_perc": 100, "enc": 5, "channel": 1},
+   {"essid": "UPC Wi-Free", "bssid": "0a:95:2a:0c:84:31", "rssi": 166, "rssi_perc": 32, "enc": 5, "channel": 1},
+   {"essid": "MujO2Internet_2EEB96", "bssid": "d0:60:8c:2e:eb:96", "rssi": 174, "rssi_perc": 48, "enc": 4, "channel": 4},
+   {"essid": "Internet", "bssid": "38:72:c0:32:bd:0d", "rssi": 164, "rssi_perc": 28, "enc": 2, "channel": 10},
+   {"essid": "MyO2Internet_08C850", "bssid": "78:c1:a7:08:c8:50", "rssi": 186, "rssi_perc": 72, "enc": 4, "channel": 11},
+   {"essid": "UPC Wi-Free", "bssid": "06:7c:34:9a:6f:7c", "rssi": 167, "rssi_perc": 34, "enc": 0, "channel": 11},
+   {"essid": "Internet_B0", "bssid": "5c:f4:ab:11:3b:b3", "rssi": 175, "rssi_perc": 50, "enc": 3, "channel": 13},
+   {"essid": "UPC5716805", "bssid": "08:95:2a:0c:84:3f", "rssi": 165, "rssi_perc": 30, "enc": 4, "channel": 1}
+    ]
+ }
+}
+APS
+);
+}
+
 define('LOCALE', isset($_GET['locale']) ? $_GET['locale'] : 'en');
 
 $_messages = require(__DIR__ . '/lang/' . LOCALE . '.php');
@@ -37,6 +61,7 @@ function url($name, $relative = false)
 	if ($relative) return $_pages[$name]->path;
 
 	if (DEBUG) return "/index.php?page=$name";
+	if (ESP_DEMO) return "$name.html";
 	else return $_pages[$name]->path;
 }
 

html_orig/build_html.php

@@ -16,10 +16,21 @@ function process_html($s) {
 
 $no_tpl_files = ['help', 'cfg_wifi_conn'];
 
+$dest = ESP_DEMO ? __DIR__ . '/../html_demo/' : __DIR__ . '/../html/';
+
 ob_start();
 foreach($_pages as $_k => $p) {
-	if ($p->bodyclass == 'api') continue;
+	if ($p->bodyclass == 'api') {
+		if (ESP_DEMO) {
+			$target = 'term.html';
+			echo "Generating: ~$_k.html -> $target\n";
+			$s = "<!DOCTYPE HTML><meta http-equiv=\"refresh\" content=\"0;url=$target\">";
+		} else {
+			continue;
+		}
+	} else {
 		echo "Generating: $_k ($p->title)\n";
+
 		$_GET['page'] = $_k;
 		ob_flush();                                   // print the message
 		ob_clean();                                   // clean up
@@ -29,10 +40,10 @@ foreach($_pages as $_k => $p) {
 		// remove newlines and comments
 		// as tests have shown, it saves just a couple kilobytes,
 		// making it not a very big improvement at the expense of ugly html.
-//	$s = process_html($s);
-
-	ob_clean();                                   // clean up
-	$of = __DIR__ . '/../html/' . $_k . (in_array($_k, $no_tpl_files) ? '.html' : '.tpl');
+		//	$s = process_html($s);
+		ob_clean();
+	}                                 // clean up
+	$of = $dest . $_k . ((in_array($_k, $no_tpl_files)||ESP_DEMO) ? '.html' : '.tpl');
 	file_put_contents($of, $s);                   // write to a file
 }
 

html_orig/index.php

@@ -7,9 +7,15 @@ if (!isset($_GET['page'])) $_GET['page'] = 'term';
 $_GET['PAGE_TITLE'] = $_pages[$_GET['page']]->title . ' :: ' . APP_NAME;
 $_GET['BODYCLASS'] = $_pages[$_GET['page']]->bodyclass;
 
-require __DIR__ . '/pages/_head.php';
 $_pf = __DIR__ . '/pages/'.$_GET['page'].'.php';
 
+if (!file_exists($_pf)) {
+	header("Location: /", true, 302);
+	die();
+}
+
+require __DIR__ . '/pages/_head.php';
+
 $include_re = '/<\?php\s*(require|include)\s*\(?\s*?(?:__DIR__\s*\.)?\s*(["\'])(.*?)\2\s*\)?;\s*\?>/';
 
 if (file_exists($_pf)) {
@@ -25,7 +31,7 @@ if (file_exists($_pf)) {
 		}
 	}, $f);
 
-	if (DEBUG)
+	if (DEBUG || ESP_DEMO)
 		$str = tplSubs($f,  require(__DIR__ . '/_debug_replacements.php'));
 	else $str = $f;
 
@@ -39,8 +45,6 @@ if (file_exists($_pf)) {
 
 	$str = preg_replace("/\s*(\\\\\\\\)[\n \t]+/", '<br>', $str);
 	include_str($str);
-} else {
-	echo "404";
 }
 
 require __DIR__ . '/pages/_tail.php';

html_orig/js/app.js

@@ -1567,7 +1567,11 @@ function tr(key) { return _tr[key] || '?'+key+'?'; }
 
 	/** Ask the CGI what APs are visible (async) */
 	function scanAPs() {
-		$.get('http://'+_root+'/cfg/wifi/scan', onScan);
+		if (_demo) {
+			onScan(_demo_aps, 200);
+		} else {
+			$.get('http://' + _root + '/cfg/wifi/scan', onScan);
+		}
 	}
 
 	function rescan(time) {
@@ -1658,7 +1662,10 @@ var Conn = (function() {
 	}
 
 	function doSend(message) {
-		//console.log("TX: ", message);
+		if (_demo) {
+			console.log("TX: ", message);
+			return true; // Simulate success
+		}
 		if (xoff) {
 			// TODO queue
 			console.log("Can't send, flood control.");
@@ -1678,6 +1685,12 @@ var Conn = (function() {
 	}
 
 	function init() {
+		if (_demo) {
+			console.log("Demo mode!");
+			Screen.load(_demo_screen);
+			showPage();
+			return;
+		}
 		heartbeat();
 
 		ws = new WebSocket("ws://"+_root+"/term/update.ws");
@@ -2344,6 +2357,7 @@ var Screen = (function () {
 
 	/** Load screen content from a binary sequence (new) */
 	function load(str) {
+		//console.log(JSON.stringify(str));
 		var content = str.substr(1);
 		switch(str.charAt(0)) {
 			case 'S':

html_orig/jssrc/term_conn.js

@@ -52,7 +52,10 @@ var Conn = (function() {
 	}
 
 	function doSend(message) {
-		//console.log("TX: ", message);
+		if (_demo) {
+			console.log("TX: ", message);
+			return true; // Simulate success
+		}
 		if (xoff) {
 			// TODO queue
 			console.log("Can't send, flood control.");
@@ -72,6 +75,12 @@ var Conn = (function() {
 	}
 
 	function init() {
+		if (_demo) {
+			console.log("Demo mode!");
+			Screen.load(_demo_screen);
+			showPage();
+			return;
+		}
 		heartbeat();
 
 		ws = new WebSocket("ws://"+_root+"/term/update.ws");

html_orig/jssrc/term_screen.js

@@ -354,6 +354,7 @@ var Screen = (function () {
 
 	/** Load screen content from a binary sequence (new) */
 	function load(str) {
+		//console.log(JSON.stringify(str));
 		var content = str.substr(1);
 		switch(str.charAt(0)) {
 			case 'S':

html_orig/jssrc/wifi.js

@@ -120,7 +120,11 @@
 
 	/** Ask the CGI what APs are visible (async) */
 	function scanAPs() {
-		$.get('http://'+_root+'/cfg/wifi/scan', onScan);
+		if (_demo) {
+			onScan(_demo_aps, 200);
+		} else {
+			$.get('http://' + _root + '/cfg/wifi/scan', onScan);
+		}
 	}
 
 	function rescan(time) {

html_orig/lang/en.php

@@ -2,6 +2,7 @@
 
 return [
 	'appname' => 'ESPTerm',
+	'appname_demo' => 'ESPTerm<sup> DEMO</sup>',
 
 	'menu.cfg_wifi' => 'WiFi Settings',
 	'menu.cfg_network' => 'Network Settings',

html_orig/pages/_cfg_menu.php

@@ -1,5 +1,5 @@
 <nav id="menu">
-	<div id="brand" tabindex=0><?= tr('appname') ?></div>
+	<div id="brand" tabindex=0><?= tr('appname'.(ESP_DEMO?'_demo':'')) ?></div>
 	<a href="<?= e(url('term')) ?>" class="icn-back"><?= tr('menu.term') ?></a>
 	<?php
 	// generate the menu

html_orig/pages/_head.php

@@ -7,7 +7,12 @@
 	<title><?= $_GET['PAGE_TITLE'] ?></title>
 	<link href="/css/app.css" rel="stylesheet">
 	<script src="/js/app.js"></script>
-	<script>var _root = <?= JS_WEB_ROOT ?>;</script>
+	<script>
+		var _root = <?= JS_WEB_ROOT ?>;
+		var _demo = <?= (int)ESP_DEMO ?>;
+		<?php if($_GET['page']=='term'): ?>var _demo_screen = <?= ESP_DEMO ? DEMO_SCREEN : 0 ?>;<?php endif; ?>
+		<?php if($_GET['page']=='cfg_wifi'): ?>var _demo_aps = <?= ESP_DEMO ? json_encode(DEMO_APS) : '' ?>;<?php endif; ?>
+	</script>
 </head>
 <body class="<?= $_GET['BODYCLASS'] ?>">
 <div id="outer">