diff --git a/html/console.html b/html/console.html index 6cb74af7..187c8f3a 100644 --- a/html/console.html +++ b/html/console.html @@ -39,7 +39,10 @@ <h1>Microcontroller Console</h1> <div class="pure-u-1-4"><legend><b>Console</b></legend></div> <div class="pure-u-3-4"></div> </div> - <pre class="console flex-fill" id="console">--- No Content ---</pre> + <div class="fullscreen-box"> + <div class="fullscreen-control"></div> + <pre class="console flex-fill" id="console">--- No Content ---</pre> + </div> <div> <div class="pure-g"> <div class="pure-u-1-4"><legend><b>Console entry</b></legend></div> @@ -96,6 +99,12 @@ <h1>Microcontroller Console</h1> function(s, st) { showWarning("Error clearing buffer in uC"); } ); }); + + $(".fullscreen-control")[0].addEventListener("click", function(e) { + e.preventDefault(); + var fbc = this.parentNode.classList; + fbc[fbc.contains("full") ? "remove" : "add"].call(fbc, "full"); + }); ajaxJson('GET', "/console/baud", function(data) { $("#baud-sel").value = data.rate; }, diff --git a/html/log.html b/html/log.html index 884cf205..f4be5113 100644 --- a/html/log.html +++ b/html/log.html @@ -1,60 +1,69 @@ - <div id="main"> - <div class="header"> - <h1>Debug Log</h1> - </div> +<div id="main"> + <div class="header"> + <h1>Debug Log</h1> + </div> - <div class="content"> - <p>The debug log shows the most recent characters printed by the esp-link software itself to - its own debug log.</p> - <div class="pure-g"> - <p class="pure-u-1-4" style="vertical-align: baseline;width:40%"> - <a id="refresh-button" class="pure-button button-primary" href="#">Refresh</a> - <a id="reset-button" class="dbg-btn pure-button button-primary" href="#">Reset esp-link</a> - </p> - <p class="pure-u-3-4" style="vertical-align: baseline;width:60%"> - UART debug log: - <a id="dbg-auto" class="dbg-btn pure-button" href="#">auto</a> - <a id="dbg-off" class="dbg-btn pure-button" href="#">off</a> - <a id="dbg-on0" class="dbg-btn pure-button" href="#">on uart0</a> - <a id="dbg-on1" class="dbg-btn pure-button" href="#">on uart1</a> - </p> - </div> + <div class="content"> + <p>The debug log shows the most recent characters printed by the esp-link software itself to + its own debug log.</p> + <div class="pure-g"> + <p class="pure-u-1-4" style="vertical-align: baseline;width:40%"> + <a id="refresh-button" class="pure-button button-primary" href="#">Refresh</a> + <a id="reset-button" class="dbg-btn pure-button button-primary" href="#">Reset esp-link</a> + </p> + <p class="pure-u-3-4" style="vertical-align: baseline;width:60%"> + UART debug log: + <a id="dbg-auto" class="dbg-btn pure-button" href="#">auto</a> + <a id="dbg-off" class="dbg-btn pure-button" href="#">off</a> + <a id="dbg-on0" class="dbg-btn pure-button" href="#">on uart0</a> + <a id="dbg-on1" class="dbg-btn pure-button" href="#">on uart1</a> + </p> + </div> + <div class="fullscreen-box"> + <div class="fullscreen-control"></div> <pre id="console" class="console" style="margin-top: 0px;"></pre> </div> </div> </div> +</div> <script type="text/javascript">console_url = "/log/text"</script> <script src="console.js"></script> <script type="text/javascript"> - onLoad(function() { +onLoad(function() { + fetchText(100, false); + + $("#refresh-button").addEventListener("click", function(e) { + e.preventDefault(); fetchText(100, false); + }); - $("#refresh-button").addEventListener("click", function(e) { + $("#reset-button").addEventListener("click", function (e) { e.preventDefault(); - fetchText(100, false); - }); - - $("#reset-button").addEventListener("click", function (e) { - e.preventDefault(); - var co = $("#console"); - co.innerHTML = ""; - ajaxSpin('POST', "/log/reset", - function (resp) { showNotification("Resetting esp-link"); co.textEnd = 0; fetchText(2000, false); }, - function (s, st) { showWarning("Error resetting esp-link"); } - ); - }); + var co = $("#console"); + co.innerHTML = ""; + ajaxSpin('POST', "/log/reset", + function (resp) { showNotification("Resetting esp-link"); co.textEnd = 0; fetchText(2000, false); }, + function (s, st) { showWarning("Error resetting esp-link"); } + ); + }); + + $(".fullscreen-control")[0].addEventListener("click", function(e) { + e.preventDefault(); + var fbc = this.parentNode.classList; + fbc[fbc.contains("full") ? "remove" : "add"].call(fbc, "full"); + }); - ["auto", "off", "on0", "on1"].forEach(function(mode) { - bnd($('#dbg-'+mode), "click", function(el) { - ajaxJsonSpin('POST', "/log/dbg?mode="+mode, - function(data) { showNotification("UART mode " + data.mode); showDbgMode(data.mode); }, - function(s, st) { showWarning("Error setting UART mode: " + st); } - ); - }); + ["auto", "off", "on0", "on1"].forEach(function(mode) { + bnd($('#dbg-'+mode), "click", function(el) { + ajaxJsonSpin('POST', "/log/dbg?mode="+mode, + function(data) { showNotification("UART mode " + data.mode); showDbgMode(data.mode); }, + function(s, st) { showWarning("Error setting UART mode: " + st); } + ); }); - - ajaxJson('GET', "/log/dbg", function(data) { showDbgMode(data.mode); }, function() {}); }); + + ajaxJson('GET', "/log/dbg", function(data) { showDbgMode(data.mode); }, function() {}); +}); </script> </body></html> diff --git a/html/style.css b/html/style.css index 1bb11cd3..acc6f369 100644 --- a/html/style.css +++ b/html/style.css @@ -69,7 +69,7 @@ a:hover { } .click-to-edit span:active, .click-to-edit div:active { box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; - border-color: #000\9; + border-color: #000; } /* Firefox: Get rid of the inner focus border */ .click-to-edit span::-moz-focus-inner, @@ -248,14 +248,59 @@ input.inline { margin-left: 0.5em; } +/* Console fullscreen */ +.fullscreen-box { + position: relative; +} + +.fullscreen-box.full { + position: fixed; + height: 100vh; + width: 100vw; + left: 0; + top: 0; + z-index: 1001; +} + +.fullscreen-box > .fullscreen-control { + position: absolute; + border-radius: 2px; + top: 16px; + right: 16px; + width: 1em; + height: 1em; + text-align: center; + background: #00000025; + padding: 15px; + line-height: 1em; + color: #fff; + cursor: pointer; +} + +.fullscreen-box > .fullscreen-control::before { + content: "F"; +} + +.fullscreen-box.full > .fullscreen-control::before { + content: "X"; +} + +.fullscreen-box > pre.console { + height: 500px; +} + +.fullscreen-box.full > pre.console { + height: 100vh; +} + /* Text console */ pre.console { + box-sizing: border-box; background-color: #663300; border-radius: 5px; border: 0px solid #000000; color: #66ff66; padding: 5px; - overflow: scroll; margin: 0px; }