From f8e3454250681844caec465bf084a12e25a6f21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Thu, 7 Sep 2017 16:31:15 +0200 Subject: [PATCH] Modified HTML pages to allow building Demo version --- .gitignore | 1 + build_demo.sh | 26 ++++++++++++++ html_orig/_debug_replacements.php | 57 +++++++++++++++++++------------ html_orig/_pages.php | 2 ++ html_orig/base.php | 25 ++++++++++++++ html_orig/build_html.php | 41 ++++++++++++++-------- html_orig/index.php | 12 ++++--- html_orig/js/app.js | 18 ++++++++-- html_orig/jssrc/term_conn.js | 11 +++++- html_orig/jssrc/term_screen.js | 1 + html_orig/jssrc/wifi.js | 6 +++- html_orig/lang/en.php | 1 + html_orig/pages/_cfg_menu.php | 2 +- html_orig/pages/_head.php | 7 +++- 14 files changed, 164 insertions(+), 46 deletions(-) create mode 100755 build_demo.sh diff --git a/.gitignore b/.gitignore index 119a231..6702851 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ html/ +html_demo/ build/ firmware/ espfs/mkespfsimage/*.o diff --git a/build_demo.sh b/build_demo.sh new file mode 100755 index 0000000..158ef7c --- /dev/null +++ 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 diff --git a/html_orig/_debug_replacements.php b/html_orig/_debug_replacements.php index b02463f..e1f1391 100644 --- 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, ]; diff --git a/html_orig/_pages.php b/html_orig/_pages.php index 4be6cf6..c2d9ad7 100644 --- 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; diff --git a/html_orig/base.php b/html_orig/base.php index a922358..592450a 100644 --- 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', <<path; if (DEBUG) return "/index.php?page=$name"; + if (ESP_DEMO) return "$name.html"; else return $_pages[$name]->path; } diff --git a/html_orig/build_html.php b/html_orig/build_html.php index 4d1269f..78f3aea 100755 --- 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 = ""; + } 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 } diff --git a/html_orig/index.php b/html_orig/index.php index fbd94a4..895546d 100644 --- 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]+/", '
', $str); include_str($str); -} else { - echo "404"; } require __DIR__ . '/pages/_tail.php'; diff --git a/html_orig/js/app.js b/html_orig/js/app.js index a3f59d2..fb25582 100644 --- 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': diff --git a/html_orig/jssrc/term_conn.js b/html_orig/jssrc/term_conn.js index f158886..21be843 100644 --- 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"); diff --git a/html_orig/jssrc/term_screen.js b/html_orig/jssrc/term_screen.js index 23f0683..7f8fad0 100644 --- 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': diff --git a/html_orig/jssrc/wifi.js b/html_orig/jssrc/wifi.js index 8ab541b..ebed158 100644 --- 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) { diff --git a/html_orig/lang/en.php b/html_orig/lang/en.php index d2366c7..3e63611 100644 --- a/html_orig/lang/en.php +++ b/html_orig/lang/en.php @@ -2,6 +2,7 @@ return [ 'appname' => 'ESPTerm', + 'appname_demo' => 'ESPTerm DEMO', 'menu.cfg_wifi' => 'WiFi Settings', 'menu.cfg_network' => 'Network Settings', diff --git a/html_orig/pages/_cfg_menu.php b/html_orig/pages/_cfg_menu.php index 570c623..db01711 100644 --- a/html_orig/pages/_cfg_menu.php +++ b/html_orig/pages/_cfg_menu.php @@ -1,5 +1,5 @@