Import canvas version from old ESPTerm repo

branch canvas, 0caadb6f412855052e4a3276a8411cc36166ea4a
cpsdqs/unified-input
Ondřej Hruška 7 years ago
parent 20165f5306
commit 7d08250f46
  1. BIN
      fontello/fontello.zip
  2. 85
      jssrc/soft_keyboard.js
  3. 1
      jssrc/term_conn.js
  4. 2
      jssrc/term_input.js
  5. 1134
      jssrc/term_screen.js
  6. 4
      jssrc/utils.js
  7. 2189
      package-lock.json
  8. 14
      package.json
  9. 5
      packcss.sh
  10. 15
      packjs.sh
  11. 27
      pages/term.php
  12. 6
      sass/_fontello.scss
  13. 2
      sass/app.scss
  14. 49
      sass/pages/_term.scss
  15. 1510
      yarn.lock

Binary file not shown.

@ -0,0 +1,85 @@
$.ready(() => {
const input = qs('#softkb-input')
let keyboardOpen = false
let updateInputPosition = function () {
if (!keyboardOpen) return
let [x, y] = Screen.gridToScreen(Screen.cursor.x, Screen.cursor.y)
input.style.transform = `translate(${x}px, ${y}px)`
}
input.addEventListener('focus', () => {
keyboardOpen = true
updateInputPosition()
})
input.addEventListener('blur', () => (keyboardOpen = false))
Screen.on('cursor-moved', updateInputPosition)
window.kbOpen = function openSoftKeyboard (open) {
keyboardOpen = open
updateInputPosition()
if (open) input.focus()
else input.blur()
}
let lastCompositionString = '';
let compositing = false;
let sendInputDelta = function (newValue) {
let resend = false;
if (newValue.length > lastCompositionString.length) {
if (newValue.startsWith(lastCompositionString)) {
// characters have been added at the end
Input.sendString(newValue.substr(lastCompositionString.length))
} else resend = true;
} else if (newValue.length < lastCompositionString.length) {
if (lastCompositionString.startsWith(newValue)) {
// characters have been removed at the end
Input.sendString('\b'.repeat(lastCompositionString.length -
newValue.length))
} else resend = true;
} else if (newValue !== lastCompositionString) resend = true;
if (resend) {
// the entire string changed; resend everything
Input.sendString('\b'.repeat(lastCompositionString.length) +
newValue)
}
lastCompositionString = newValue;
}
input.addEventListener('keydown', e => {
if (e.key === 'Unidentified') return;
e.preventDefault();
input.value = '';
if (e.key === 'Backspace') Input.sendString('\b')
else if (e.key === 'Enter') Input.sendString('\x0d')
})
input.addEventListener('input', e => {
e.stopPropagation();
if (e.isComposing) {
sendInputDelta(e.data);
} else {
if (e.data) Input.sendString(e.data);
else if (e.inputType === 'deleteContentBackward') {
lastCompositionString
sendInputDelta('');
}
}
})
input.addEventListener('compositionstart', e => {
lastCompositionString = '';
compositing = true;
});
input.addEventListener('compositionend', e => {
lastCompositionString = '';
compositing = false;
input.value = '';
});
Screen.on('open-soft-keyboard', () => input.focus())
})

@ -11,6 +11,7 @@ var Conn = (function () {
function onOpen(evt) { function onOpen(evt) {
console.log("CONNECTED"); console.log("CONNECTED");
heartbeat();
doSend("i"); doSend("i");
} }

@ -142,6 +142,8 @@ var Input = (function() {
else if (evt.which) str = String.fromCodePoint(evt.which); else if (evt.which) str = String.fromCodePoint(evt.which);
if (str.length>0 && str.charCodeAt(0) >= 32) { if (str.length>0 && str.charCodeAt(0) >= 32) {
// console.log("Typed ", str); // console.log("Typed ", str);
// prevent space from scrolling
if (e.which === 32) e.preventDefault();
sendStrMsg(str); sendStrMsg(str);
} }
}); });

File diff suppressed because it is too large Load Diff

@ -128,12 +128,12 @@ function Chr(n) {
} }
/** Decode number from 2B encoding */ /** Decode number from 2B encoding */
function parse2B(s, i) { function parse2B(s, i=0) {
return (s.charCodeAt(i++) - 1) + (s.charCodeAt(i) - 1) * 127; return (s.charCodeAt(i++) - 1) + (s.charCodeAt(i) - 1) * 127;
} }
/** Decode number from 3B encoding */ /** Decode number from 3B encoding */
function parse3B(s, i) { function parse3B(s, i=0) {
return (s.charCodeAt(i) - 1) + (s.charCodeAt(i+1) - 1) * 127 + (s.charCodeAt(i+2) - 1) * 127 * 127; return (s.charCodeAt(i) - 1) + (s.charCodeAt(i+1) - 1) * 127 + (s.charCodeAt(i+2) - 1) * 127 * 127;
} }

2189
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,14 @@
{
"name": "html_orig",
"version": "1.0.0",
"description": "ESPTerm HTML",
"license": "UNLICENSED",
"devDependencies": {
"babel-minify": "^0.2.0",
"node-sass": "^4.5.3"
},
"scripts": {
"minify": "babel-minify $@",
"sass": "node-sass $@"
}
}

@ -0,0 +1,5 @@
#!/bin/bash
echo "Building css..."
npm run sass -- --output-style compressed sass/app.scss > css/app.css

@ -0,0 +1,15 @@
#!/bin/bash
echo "Packing js..."
cat jssrc/chibi.js \
jssrc/keymaster.js \
jssrc/utils.js \
jssrc/modal.js \
jssrc/notif.js \
jssrc/appcommon.js \
jssrc/lang.js \
jssrc/wifi.js \
jssrc/term_* \
jssrc/term.js \
jssrc/soft_keyboard.js | npm run --silent minify > js/app.js

@ -41,7 +41,12 @@
<h1><!-- Screen title gets loaded here by JS --></h1> <h1><!-- Screen title gets loaded here by JS --></h1>
<div id="term-wrap"> <div id="term-wrap">
<div id="screen" class="theme-%theme%"></div> <div id="screen" class="theme-%theme%">
<input id="softkb-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
<div id="touch-select-menu">
<button id="touch-select-copy-btn">Copy</button>
</div>
</div>
<div id="action-buttons"> <div id="action-buttons">
<button data-n="1"></button><!-- <button data-n="1"></button><!--
@ -52,10 +57,9 @@
</div> </div>
</div> </div>
<textarea id="softkb-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<nav id="term-nav"> <nav id="term-nav">
<a href="#" onclick="kbOpen(true);return false" class="mq-tablet-max"><i class="icn-keyboard"></i><span><?= tr('term_nav.keybd') ?></span></a><!-- <a href="#" onclick="toggleFitScreen();return false" class="mq-tablet-max"><i id="resize-button-icon" class="icn-resize-small"></i></a><!--
--><a href="#" onclick="kbOpen(true);return false" class="mq-tablet-max"><i class="icn-keyboard"></i><span><?= tr('term_nav.keybd') ?></span></a><!--
--><a href="#" onclick="TermUpl.open();return false"><i class="icn-download"></i><span><?= tr('term_nav.upload') ?></span></a><!-- --><a href="#" onclick="TermUpl.open();return false"><i class="icn-download"></i><span><?= tr('term_nav.upload') ?></span></a><!--
--><a href="<?= url('cfg_term') ?>" class="x-term-conf-btn"><i class="icn-configure"></i><span><?= tr('term_nav.config') ?></span></a><!-- --><a href="<?= url('cfg_term') ?>" class="x-term-conf-btn"><i class="icn-configure"></i><span><?= tr('term_nav.config') ?></span></a><!--
--><a href="<?= url('cfg_wifi') ?>" class="x-term-conf-btn"><i class="icn-wifi"></i><span><?= tr('term_nav.wifi') ?></span></a><!-- --><a href="<?= url('cfg_wifi') ?>" class="x-term-conf-btn"><i class="icn-wifi"></i><span><?= tr('term_nav.wifi') ?></span></a><!--
@ -68,15 +72,6 @@
window.noAutoShow = true; window.noAutoShow = true;
termInit(); // the screen will be loaded via ajax termInit(); // the screen will be loaded via ajax
Screen.load('%j:labels_seq%'); Screen.load('%j:labels_seq%');
// auto-clear the input box
$('#softkb-input').on('input', function(e) {
setTimeout(function(){
var str = $('#softkb-input').val();
$('#softkb-input').val('');
Input.sendString(str);
}, 1);
});
} catch(e) { } catch(e) {
console.error(e); console.error(e);
console.error("Fail, reloading in 3s…"); console.error("Fail, reloading in 3s…");
@ -84,10 +79,4 @@
location.reload(true); location.reload(true);
}, 3000); }, 3000);
} }
function kbOpen(yes) {
var i = qs('#softkb-input');
if (yes) i.focus();
else i.blur();
}
</script> </script>

File diff suppressed because one or more lines are too long

@ -20,7 +20,7 @@ $c-form-highlight-a: #2ea1f9;
$c-modal-bg: #242426; $c-modal-bg: #242426;
$screen-stack: "DejaVu Sans Mono", "Liberation Mono", "Inconsolata", monospace; $screen-stack: "DejaVu Sans Mono", "Liberation Mono", "Inconsolata", "Menlo", monospace;
@function dist($x) { @function dist($x) {
@return modular-scale($x, 1rem, $golden); @return modular-scale($x, 1rem, $golden);

@ -21,31 +21,46 @@ body.term {
padding: 6px; padding: 6px;
display: inline-block; display: inline-block;
border: 2px solid #3983CD; border: 2px solid #3983CD;
position: relative;
font-size: 20px; // some font heights cause visual glitches with some font renderers. This should be configurable. font-size: 20px; // some font heights cause visual glitches with some font renderers. This should be configurable.
font-family: $screen-stack; font-family: $screen-stack;
span { canvas.selectable {
white-space: pre; cursor: text;
} }
> span { @include noselect();
position: relative;
cursor: pointer;
&::before { // Dummy input field used to open soft keyboard
content: " "; #softkb-input {
position: absolute;
// compensate for padding
top: 6px;
left: 6px;
width: 1em;
height: 1em;
background: none;
border: none;
resize: none;
overflow: hidden;
opacity: 0;
outline: 0 none !important;
caret-color: transparent;
color: transparent;
@include click-through;
} }
> span { #touch-select-menu {
display: none;
position: absolute; position: absolute;
left: 0; // compensate for padding
z-index: 1; top: 6px;
} left: 6px;
}
&.noselect { &.open {
@include noselect(); display: block;
}
} }
} }
@ -118,12 +133,6 @@ body.term {
text-align: center; text-align: center;
} }
// Dummy input field used to open android keyboard
#softkb-input {
position: absolute;
top: -9999px;
}
#fu_modal { #fu_modal {
align-items: flex-start; align-items: flex-start;
} }

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save