Modified HTML pages to allow building Demo version

7 years ago · f8e3454250
parent 184ef1ec36
commit f8e3454250
14 changed files with 164 additions and 46 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 html/
+html_demo/
 build/
 firmware/
 espfs/mkespfsimage/*.o
--- a/build_demo.sh
+++ b/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
--- a/html_orig/_debug_replacements.php
+++ b/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 debug1235',
+	'btn5' => 'Help',
+	'bm1' => '01,'.ord('y'),
+	'bm2' => '01,'.ord('n'),
+	'bm3' => '',
+	'bm4' => '',
+	'bm5' => '05',
+	'labels_seq' => ESP_DEMO ? 'ESPTerm Web UI DemoOKCancelHelp' : 'TESPTerm local debugOKCancelHelp',

 	'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,
 ];
--- a/html_orig/_pages.php
+++ b/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;
--- a/html_orig/base.php
+++ b/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;
 }

--- a/html_orig/build_html.php
+++ b/html_orig/build_html.php
@ -16,23 +16,34 @@ 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;
-	echo "Generating: $_k ($p->title)\n";
-	$_GET['page'] = $_k;
-	ob_flush();                                   // print the message
-	ob_clean();                                   // clean up
-	include(__DIR__ . '/index.php');
-	$s = ob_get_contents();                       // grab the output
-
-	// 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');
+	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
+		include(__DIR__ . '/index.php');
+		$s = ob_get_contents();                       // grab the output
+
+		// 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 = $dest . $_k . ((in_array($_k, $no_tpl_files)||ESP_DEMO) ? '.html' : '.tpl');
 	file_put_contents($of, $s);                   // write to a file
 }

--- a/html_orig/index.php
+++ b/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';
--- a/html_orig/js/app.js
+++ b/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':
--- a/html_orig/jssrc/term_conn.js
+++ b/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");
--- a/html_orig/jssrc/term_screen.js
+++ b/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':
--- a/html_orig/jssrc/wifi.js
+++ b/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) {
--- a/html_orig/lang/en.php
+++ b/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',
--- a/html_orig/pages/_cfg_menu.php
+++ b/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
--- a/html_orig/pages/_head.php
+++ b/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">