Import canvas version from old ESPTerm repo

branch canvas, 0caadb6f412855052e4a3276a8411cc36166ea4a

jssrc/soft_keyboard.js

@@ -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())
+})

jssrc/term_conn.js

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

jssrc/term_input.js

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

jssrc/utils.js

@@ -128,12 +128,12 @@ function Chr(n) {
 }
 
 /** Decode number from 2B encoding */
-function parse2B(s, i) {
+function parse2B(s, i=0) {
 	return (s.charCodeAt(i++) - 1) + (s.charCodeAt(i) - 1) * 127;
 }
 
 /** 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;
 }
 

package.json

@@ -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 $@"
+  }
+}

packcss.sh

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

packjs.sh

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

pages/term.php

@@ -41,7 +41,12 @@
 <h1><!-- Screen title gets loaded here by JS --></h1>
 
 <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">
 		<button data-n="1"></button><!--
@@ -52,10 +57,9 @@
 	</div>
 </div>
 
-<textarea id="softkb-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-
 <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="<?= 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><!--
@@ -68,15 +72,6 @@
 		window.noAutoShow = true;
 		termInit(); // the screen will be loaded via ajax
 		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) {
 		console.error(e);
 		console.error("Fail, reloading in 3s…");
@@ -84,10 +79,4 @@
 			location.reload(true);
 		}, 3000);
 	}
-
-	function kbOpen(yes) {
-		var i = qs('#softkb-input');
-		if (yes) i.focus();
-		else i.blur();
-	}
 </script>

sass/app.scss

@@ -20,7 +20,7 @@ $c-form-highlight-a: #2ea1f9;
 
 $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) {
 	@return modular-scale($x, 1rem, $golden);

sass/pages/_term.scss

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