wirtz
/
esp-link
mirror of https://github.com/jeelabs/esp-link.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix styling of console and make it 100% height

Browse Source
v2.1
Thorsten von Eicken 9 years ago
parent 65583e6af6
commit 6a7d1c8e04
3 changed files with 350 additions and 261 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 100
      html/console.html
  2. 69
      html/console.js
  3. 442
      html/style.css

100
html/console.html
Unescape View File

@ -1,33 +1,67 @@
<div id="main"> <div id="main" class="flex-fill flex-vbox">
<div class="header"> <div class="header">
<h1>Microcontroller Console</h1> <h1>Microcontroller Console</h1>
</div> </div>
<div class="content"> <div class="content flex-fill flex-vbox">
<p>The Microcontroller console shows the last 1024 characters
received from UART0, to which a microcontroller is typically attached.
The UART is configured for 8 bits, no parity, 1 stop bit (8N1).</p>
<p> <p>
<a id="reset-button" class="pure-button button-primary" href="#">Reset µC</a> <a id="reset-button" class="pure-button button-primary" href="#">Reset µC</a>
&nbsp;Baud: &nbsp;&nbsp;Baud:
<span id="baud-btns"></span> <select id="baud-sel" class="pure-button" href="#">
<option value="460800">460800</option>
<option value="250000">250000</option>
<option value="230400">230400</option>
<option value="115200">115200</option>
<option value="57600">57600</option>
<option value="38400">38400</option>
<option value="19200">19200</option>
<option value="9600">9600</option>
</select>
&nbsp;&nbsp;Pgm baud:
<select id="baud-pgm" class="pure-button">
<option value="same">same</option>
<option value="460800">460800</option>
<option value="250000">250000</option>
<option value="230400">230400</option>
<option value="115200">115200</option>
<option value="57600">57600</option>
<option value="38400">38400</option>
<option value="19200">19200</option>
<option value="9600">9600</option>
</select>
&nbsp;&nbsp;Fmt: 8N1
</p> </p>
<pre class="console" id="console"></pre>
<legend>Console entry</legend>
<input type="text" id="input-text" value="">
<label>History buffer</label>
<select id="send-history" size="5" style="width:100%"></select>
<p>Type the command and press <b>ENTER</b>.
Press <b>ESC</b> to clear the entry.
The <b>UP</b>/<b>DOWN</b> arrow keys can be used to get previously sent commands from history.
<div class="pure-g"> <div class="pure-g">
<div class="form-horizontal pure-u-1-2"> <div class="pure-u-1-4"><legend><b>Console</b></legend></div>
<input type="checkbox" id="input-add-cr" checked> <div class="pure-u-3-4"></div>
<label>Append CR (\r)</label> </div>
<pre class="console flex-fill" id="console">--- No Content ---</pre>
<div>
<div class="pure-g">
<div class="pure-u-1-4"><legend><b>Console entry</b></legend></div>
<div class="pure-u-2-4">
<legend>(ENTER to submit, ESC to clear)</legend>
</div>
<div class="pure-u-1-4">
<legend>Add:
<input type="checkbox" id="input-add-cr" checked class="inline"><label>CR(\r)</label>
<input type="checkbox" id="input-add-lf" checked class="inline"><label>LF(\n)</label>
</legend>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<span style="float:right; width:10px;"></span>
<input type="text" class="console-in" id="input-text" value="">
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-4"><legend><b>History buffer</b></legend></div>
<div class="pure-u-2-4"><legend>(UP/DOWN arrows to select)</legend></div>
<div class="pure-u-1-4"></div>
</div> </div>
<div class="form-horizontal pure-u-1-2"> <div class="pure-g">
<input type="checkbox" id="input-add-lf" checked> <div class="pure-u-1-1"><select class="console-in" id="send-history" size="5"></select></div>
<label>Append LF (\n)</label>
</div> </div>
</div> </div>
</div> </div>
@ -37,14 +71,12 @@
<script type="text/javascript">console_url = "/console/text"</script> <script type="text/javascript">console_url = "/console/text"</script>
<script src="console.js"></script> <script src="console.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var rates = [9600, 57600, 115200, 250000];
onLoad(function() { onLoad(function() {
fetchText(100, true); fetchText(100, true);
$("#reset-button").addEventListener("click", function(e) { $("#reset-button").addEventListener("click", function(e) {
e.preventDefault(); e.preventDefault();
var co = $("#console"); var co = $("#console");
co.innerHTML = ""; co.innerHTML = "";
ajaxSpin('POST', "/console/reset", ajaxSpin('POST', "/console/reset",
function(resp) { showNotification("uC reset"); co.textEnd = 0; }, function(resp) { showNotification("uC reset"); co.textEnd = 0; },
@ -52,14 +84,26 @@
); );
}); });
rates.forEach(function(r) { baudButton(r); });
ajaxJson('GET', "/console/baud", ajaxJson('GET', "/console/baud",
function(data) { showRate(data.rate); }, function(data) { $("#baud-sel").value = data.rate; },
function(s, st) { showNotification(st); } function(s, st) { showNotification(st); }
); );
bnd($("#baud-sel"), "change", function(ev) {
ev.preventDefault();
var baud = $("#baud-sel").value;
ajaxSpin('POST', "/console/baud?rate="+baud,
function(resp) { showNotification("" + baud + " baud set"); },
function(s, st) { showWarning("Error setting baud rate: " + st); }
);
});
consoleSendInit(); consoleSendInit();
addClass($('html')[0], "height100");
addClass($('body')[0], "height100");
addClass($('#layout'), "height100");
addClass($('#layout'), "flex-vbox");
}); });
</script> </script>
</body></html> </body></html>

69
html/console.js
Unescape View File

@ -1,3 +1,5 @@
//===== Fetching console text
function fetchText(delay, repeat) { function fetchText(delay, repeat) {
var el = $("#console"); var el = $("#console");
if (el.textEnd == undefined) { if (el.textEnd == undefined) {
@ -34,37 +36,14 @@ function retryLoad(repeat) {
fetchText(1000, repeat); fetchText(1000, repeat);
} }
//===== Console page //===== Text entry
function showRate(rate) {
rates.forEach(function(r) {
var el = $("#"+r+"-button");
el.className = el.className.replace(" button-selected", "");
});
var el = $("#"+rate+"-button");
if (el != null) el.className += " button-selected";
}
function baudButton(baud) {
$("#baud-btns").appendChild(m(
' <a id="'+baud+'-button" href="#" class="pure-button">'+baud+'</a>'));
$("#"+baud+"-button").addEventListener("click", function(e) {
e.preventDefault();
ajaxSpin('POST', "/console/baud?rate="+baud,
function(resp) { showNotification("" + baud + " baud set"); showRate(baud); },
function(s, st) { showWarning("Error setting baud rate: " + st); }
);
});
}
function consoleSendInit() { function consoleSendInit() {
var sendHistory = $("#send-history"); var sendHistory = $("#send-history");
var inputText = $("#input-text"); var inputText = $("#input-text");
var inputAddCr = $("#input-add-cr"); var inputAddCr = $("#input-add-cr");
var inputAddLf = $("#input-add-lf"); var inputAddLf = $("#input-add-lf");
function findHistory(text) { function findHistory(text) {
for (var i = 0; i < sendHistory.children.length; i++) { for (var i = 0; i < sendHistory.children.length; i++) {
if (text == sendHistory.children[i].value) { if (text == sendHistory.children[i].value) {
@ -119,28 +98,30 @@ function consoleSendInit() {
inputText.addEventListener("keydown", function(e) { inputText.addEventListener("keydown", function(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 38: /* the up arrow key pressed */ case 38: /* the up arrow key pressed */
e.preventDefault(); e.preventDefault();
navHistory(-1); navHistory(-1);
break; break;
case 40: /* the down arrow key pressed */ case 40: /* the down arrow key pressed */
e.preventDefault(); e.preventDefault();
navHistory(+1); navHistory(+1);
break; break;
case 27: /* the escape key pressed */ case 27: /* the escape key pressed */
e.preventDefault(); e.preventDefault();
inputText.value = ""; inputText.value = "";
sendHistory.value = ""; sendHistory.value = "";
break; break;
case 13: /* the enter key pressed */ case 13: /* the enter key pressed */
e.preventDefault(); e.preventDefault();
var text = inputText.value; var text = inputText.value;
if (inputAddCr.checked) text += '\r'; if (inputAddCr.checked) text += '\r';
if (inputAddLf.checked) text += '\n'; if (inputAddLf.checked) text += '\n';
ajaxSpin('POST', "/console/send?text=" + encodeURIComponent(text), pushHistory(inputText.value);
function(resp) { showNotification("uC sent"); pushHistory(inputText.value); }, inputText.value = "";
function(s, st) { showWarning("Error sending text to uC"); } ajaxSpin('POST', "/console/send?text=" + encodeURIComponent(text),
); function(resp) { showNotification("Text sent"); },
break; function(s, st) { showWarning("Error sending text"); }
);
break;
} }
}); });
} }

442
html/style.css
Unescape View File

@ -1,10 +1,10 @@
/* All fonts */ /* All fonts */
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
font-family: sans-serif; font-family: sans-serif;
} }
input[type="text"], input[type="password"], textarea { input[type="text"], input[type="password"], textarea {
width: 100%; width: 100%;
} }
input[type=checkbox] { input[type=checkbox] {
@ -16,71 +16,71 @@ body {
color: #777; color: #777;
} }
a:visited, a:link { a:visited, a:link {
color: #009; color: #009;
} }
a:hover { a:hover {
color: #00c; color: #00c;
} }
.card { .card {
background-color: #eee; background-color: #eee;
padding: 1em; padding: 1em;
margin: 0.5em; margin: 0.5em;
-moz-border-radius: 0.5em; -moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em; -webkit-border-radius: 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
border: 0px solid #000000; border: 0px solid #000000;
} }
/* click-to-edit fields */ /* click-to-edit fields */
.click-to-edit { .click-to-edit {
position: relative; position: relative;
} }
.edit-off { .edit-off {
cursor: pointer; cursor: pointer;
} }
.click-to-edit input, .click-to-edit textarea { .click-to-edit input, .click-to-edit textarea {
color: black; color: black;
background-color: #eee; background-color: #eee;
width: 100%; width: 100%;
} }
div.edit-on.popup { div.edit-on.popup {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 20px; left: 20px;
background-color: cornsilk; background-color: cornsilk;
color: #333; color: #333;
font-size: 80%; font-size: 80%;
line-height: 110%; line-height: 110%;
z-index: 100; z-index: 100;
padding: 3px; padding: 3px;
} }
/* wifi AP selection form */ /* wifi AP selection form */
#aps label div { #aps label div {
display: inline-block; display: inline-block;
margin: 0em 0.2em; margin: 0em 0.2em;
} }
fieldset.radios { fieldset.radios {
border: none; border: none;
padding-left: 0px; padding-left: 0px;
} }
fieldset fields { fieldset fields {
clear: both; clear: both;
} }
#pin-mux input { #pin-mux input {
display: block; display: block;
margin-top: 0.4em; margin-top: 0.4em;
float: left; float: left;
} }
#pin-mux label { #pin-mux label {
display: block; display: block;
margin: 0em 0.2em 0em 1em; margin: 0em 0.2em 0em 1em;
width: 90%; width: 90%;
} }
.pure-table td, .pure-table th { .pure-table td, .pure-table th {
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
} }
/* make images size-up */ /* make images size-up */
@ -91,273 +91,337 @@ fieldset fields {
/* Add transition to containers so they can push in and out */ /* Add transition to containers so they can push in and out */
#layout, #menu, .menu-link { #layout, #menu, .menu-link {
-webkit-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
/* This is the parent `<div>` that contains the menu and the content area */ /* This is the parent `<div>` that contains the menu and the content area */
#layout { #layout {
position: relative; position: relative;
padding-left: 0; padding-left: 0;
} }
#layout.active #menu { #layout.active #menu {
left: 150px; left: 150px;
width: 150px; width: 150px;
} }
#layout.active .menu-link { #layout.active .menu-link {
left: 150px; left: 150px;
} }
div.tt { div.tt {
font-family: monospace; font-family: monospace;
font-size: 120%; font-size: 120%;
color: #390; color: #390;
background-color: #ddd; background-color: #ddd;
padding: 2px; padding: 2px;
margin: 2px 0; margin: 2px 0;
line-height: 100%; line-height: 100%;
} }
/* The content `<div>` */ /* The content `<div>` */
.content { .content {
margin: 0 auto; margin: 0 auto;
padding: 0 2em; padding: 0 2em;
max-width: 800px; max-width: 800px;
margin-bottom: 50px; margin-bottom: 20px;
line-height: 1.6em; line-height: 1.6em;
width: 100%;
box-sizing: border-box;
} }
.header { .header {
margin: 0; margin: 0;
color: #333; color: #333;
text-align: center; text-align: center;
padding: 2.5em 2em 0; padding: 2.5em 2em 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background-color: #fc0; background-color: #fc0;
} }
.header h1 { .header h1 {
margin: 0.2em 0; margin: 0.2em 0;
font-size: 3em; font-size: 3em;
font-weight: 300; font-weight: 300;
} }
.header h1 .esp { .header h1 .esp {
font-size: 1.25em; font-size: 1.25em;
} }
.jl { .jl {
font: normal 800 1.5em sans-serif; font: normal 800 1.5em sans-serif;
position: relative; position: relative;
bottom: 19px; bottom: 19px;
color: #9d1414; color: #9d1414;
margin-left: 3px; margin-left: 3px;
} }
.content-subhead { .content-subhead {
margin: 50px 0 20px 0; margin: 50px 0 20px 0;
font-weight: 300; font-weight: 300;
color: #888; color: #888;
} }
form button { form button {
margin-top: 0.5em; margin-top: 0.5em;
} }
.button-primary { .button-primary {
background-color: #99f; background-color: #99f;
} }
.button-selected { .button-selected {
background-color: #fc6; background-color: #fc6;
}
select.pure-button {
padding: 0.465em 1em;
color: #009; /* same as a:link */
}
input.inline {
float:none;
margin-right: 0px;
margin-left: 0.5em;
} }
/* Text console */ /* Text console */
pre.console { pre.console {
background-color: #663300; background-color: #663300;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
border: 0px solid #000000; border: 0px solid #000000;
color: #66ff66; color: #66ff66;
padding: 5px; padding: 5px;
overflow: scroll;
margin: 0px;
} }
pre.console a { pre.console a {
color: #66ff66; color: #66ff66;
}
.console-in {
background-color: #fff0b3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 0px solid #630;
color: #0c0;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.console-in option:checked {
background-image: linear-gradient(#fc0, #fc0);
}
/* console flex */
/*
.hbox,.vbox {
box-sizing: border-box;
moz-box-sizing: border-box;
webkit-box-sizing: border-box;
}
*/
.flex-hbox, .flex-vbox {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
.flex-hbox {
flex-direction: row;
ms-flex-direction: row;
webkit-flex-direction: row;
}
.flex-vbox {
flex-direction: column;
ms-flex-direction: column;
webkit-flex-direction: column;
/*width: 100%; */
}
.flex-fill {
flex: 1 1 auto;
ms-flex: 1 1 auto;
webkit-flex: 1 1 auto;
}
.height100 {
height: 100%;
} }
/* log page */ /* log page */
.dbg-btn, #refresh-button { .dbg-btn, #refresh-button {
vertical-align: baseline; vertical-align: baseline;
} }
.lock-icon { .lock-icon {
background-image: url("/wifi/icons.png"); background-image: url("/wifi/icons.png");
background-color: transparent; background-color: transparent;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: inline-block; display: inline-block;
} }
#menu { #menu {
margin-left: -150px; margin-left: -150px;
width: 150px; width: 150px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
background: #191818; background: #191818;
overflow: visible; overflow: visible;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#menu a { #menu a {
color: #999; color: #999;
border: none; border: none;
padding: 0.6em 0 0.6em 0.6em; padding: 0.6em 0 0.6em 0.6em;
} }
#menu .pure-menu, #menu .pure-menu ul { #menu .pure-menu, #menu .pure-menu ul {
border: none; border: none;
background: transparent; background: transparent;
} }
#menu .pure-menu ul, #menu .pure-menu .menu-item-divided { #menu .pure-menu ul, #menu .pure-menu .menu-item-divided {
border-top: 1px solid #333; border-top: 1px solid #333;
} }
#menu .pure-menu li a:hover, #menu .pure-menu li a:focus { #menu .pure-menu li a:hover, #menu .pure-menu li a:focus {
background: #333; background: #333;
} }
#menu .pure-menu-selected, #menu .pure-menu-heading { #menu .pure-menu-selected, #menu .pure-menu-heading {
background: #9d1414; background: #9d1414;
} }
#menu .pure-menu-selected a { #menu .pure-menu-selected a {
color: #fff; color: #fff;
} }
#menu .pure-menu-heading { #menu .pure-menu-heading {
font-size: 110%; font-size: 110%;
color: #fff; color: #fff;
margin: 0; margin: 0;
text-transform: none; text-transform: none;
} }
#menu .pure-menu-heading img { #menu .pure-menu-heading img {
vertical-align: middle; vertical-align: middle;
top: -1px; top: -1px;
position: relative; position: relative;
} }
#menu .pure-menu-item { #menu .pure-menu-item {
height:2em; height:2em;
} }
/* -- Dynamic Button For Responsive Menu -------------------------------------*/ /* -- Dynamic Button For Responsive Menu -------------------------------------*/
.menu-link { .menu-link {
position: fixed; position: fixed;
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
background: #000; background: #000;
background: rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
font-size: 10px; font-size: 10px;
z-index: 10; z-index: 10;
width: 2em; width: 2em;
height: auto; height: auto;
padding: 2.1em 1.6em; padding: 2.1em 1.6em;
} }
.menu-link:hover, .menu-link:focus { .menu-link:hover, .menu-link:focus {
background: #000; background: #000;
} }
.menu-link span { .menu-link span {
position: relative; position: relative;
display: block; display: block;
} }
.menu-link span, .menu-link span:before, .menu-link span:after { .menu-link span, .menu-link span:before, .menu-link span:after {
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
height: 0.2em; height: 0.2em;
} }
.menu-link span:before, .menu-link span:after { .menu-link span:before, .menu-link span:after {
position: absolute; position: absolute;
margin-top: -0.6em; margin-top: -0.6em;
content: " "; content: " ";
} }
.menu-link span:after { .menu-link span:after {
margin-top: 0.6em; margin-top: 0.6em;
} }
/* -- Responsive Styles (Media Queries) ------------------------------------- */ /* -- Responsive Styles (Media Queries) ------------------------------------- */
@media (min-width: 56em) { @media (min-width: 56em) {
.header, .content { .header, .content {
padding-left: 2em; padding-left: 2em;
padding-right: 2em; padding-right: 2em;
} }
#layout { #layout {
padding-left: 150px; padding-left: 150px;
left: 0; left: 0;
} }
#menu { #menu {
left: 150px; left: 150px;
} }
.menu-link { .menu-link {
position: fixed; position: fixed;
left: 150px; left: 150px;
display: none; display: none;
} }
#layout.active .menu-link { #layout.active .menu-link {
left: 150px; left: 150px;
} }
} }
@media (max-width: 56em) { @media (max-width: 56em) {
#layout.active { #layout.active {
position: relative; position: relative;
left: 150px; left: 150px;
} }
} }
/*===== spinners and notification messages */ /*===== spinners and notification messages */
#messages { #messages {
position: absolute; position: absolute;
left: 25%; left: 25%;
width: 50%; width: 50%;
top: 10; top: 10;
z-index: 200; z-index: 200;
font-size: 110%; font-size: 110%;
text-align: center; text-align: center;
} }
#warning { #warning {
background-color: #933; background-color: #933;
color: #fcc; color: #fcc;
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
} }
#notification { #notification {
background-color: #693; background-color: #693;
color: #cfc; color: #cfc;
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
} }
#spinner { #spinner {
position: absolute; position: absolute;
right: 10%; right: 10%;
top: 20; top: 20;
z-index: 1000; z-index: 1000;
} }
.spinner { .spinner {
height: 50px; height: 50px;
@ -373,10 +437,10 @@ pre.console a {
border-radius: 100%; border-radius: 100%;
} }
.spinner-small { .spinner-small {
display: inline-block; display: inline-block;
height: 1em; height: 1em;
width: 1em; width: 1em;
border-width: 4px; border-width: 4px;
} }
@-webkit-keyframes rotation { @-webkit-keyframes rotation {

Write Preview
Loading…
Cancel
Save