Modified HTML pages to allow building Demo version

pull/111/merge
Ondřej Hruška 7 years ago
parent 184ef1ec36
commit f8e3454250
  1. 1
      .gitignore
  2. 26
      build_demo.sh
  3. 57
      html_orig/_debug_replacements.php
  4. 2
      html_orig/_pages.php
  5. 25
      html_orig/base.php
  6. 21
      html_orig/build_html.php
  7. 12
      html_orig/index.php
  8. 18
      html_orig/js/app.js
  9. 11
      html_orig/jssrc/term_conn.js
  10. 1
      html_orig/jssrc/term_screen.js
  11. 6
      html_orig/jssrc/wifi.js
  12. 1
      html_orig/lang/en.php
  13. 2
      html_orig/pages/_cfg_menu.php
  14. 7
      html_orig/pages/_head.php

1
.gitignore vendored

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

@ -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

@ -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,
];

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

@ -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;
}

@ -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
}

@ -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';

@ -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':

@ -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");

@ -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':

@ -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) {

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

@ -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

@ -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">

Loading…
Cancel
Save