commit 33ae0ca3d481651b5eb3343bc2a3c17bb3dde61e
parent 2d2cbcdce9b54594d541b9d8fba8dab7d1034fae
Author: tongong <tongong@gmx.net>
Date: Sat, 15 Jan 2022 21:58:08 +0100
added about text
Diffstat:
3 files changed, 42 insertions(+), 5 deletions(-)
diff --git a/src/components/page-about.js b/src/components/page-about.js
@@ -4,7 +4,37 @@ module.exports = () => {
return {
view: () => m("div",
m("h1", "sleepykeeb"),
- m("p", "This is an experimental idea for a keyboard layout / input method with only three keys."),
+ m("p", "This is an experimental idea for a keyboard layout / input method with only three keys (labeled Key 1, Key 2 and Key 3)."),
+ m("h2", "idea"),
+ m("p", "The basic idea is to encode characters with movements / gestures using the three keys. A gesture made of two keys (you press the first key then the second one and release in any order) has three possibilities for the first key and two for the second one. There are thus 6 such gestures:"),
+ m("ul",
+ m("li", "G1: K1 -> K2"),
+ m("li", "G2: K2 -> K1"),
+ m("li", "G3: K2 -> K3"),
+ m("li", "G4: K3 -> K2"),
+ m("li", "G5: K1 -> K3"),
+ m("li", "G6: K3 -> K1")
+ ),
+ m("p", "Combining two of these gestures enables 36 characters - enough for the English alphabet and all 10 digits (the mapping is ([number of the first gesture] - 1) * 6 + [number of the second gesture] in a string \"a...z0...9\"). Additionally there are four special gestures:"),
+ m("ul",
+ m("li", "G7: tap K1 to enter ' '"),
+ m("li", "G8: tap K2 to start a new note / a new thought"),
+ m("li", "G9: tap K3 to enter '.'"),
+ m("li", "G10: press all three keys simultaneously to delete a character")
+ ),
+ m("h2", "keymaps"),
+ m("p", "The three keys are currently mapped to ",
+ m("kbd", "j"),
+ ", ",
+ m("kbd", "k"),
+ " and ",
+ m("kbd", "l"),
+ ". In training mode you can (and have to on the first occurrence of each character) use ",
+ m("kbd", "h"),
+ " to show a hint. In input mode you can toggle the ui using ",
+ m("kbd", "b"),
+ "."
+ ),
m("h2", "inspiration"),
m("p", "The main inspiration for this project stems from these two findings on hackernews:"),
m("ul",
diff --git a/src/components/page-input.js b/src/components/page-input.js
@@ -3,11 +3,11 @@ const input = require("../modules/input.js");
const keyBoxes = require("./key-boxes.js");
module.exports = () => {
- let written = "> ";
+ let written = "";
let blind = false;
let oninput = (c) => {
// clear input on "-" -> new bullet point / new thought
- if (c == "-") written = "> ";
+ if (c == "-") written = "";
else if (c == input.deletechar)
written = written.substring(0, written.length - 1)
else written += c;
@@ -18,7 +18,7 @@ module.exports = () => {
};
return {
view: () => m("div",
- m("div.inputTop", written),
+ m("div.inputTop", "> " + written),
m("div.inputBottom", m(keyBoxes, {
inputCallback: oninput,
keyCallback: blindhandler
diff --git a/src/styles.css b/src/styles.css
@@ -24,12 +24,19 @@ a:hover {
font-weight: bold;
}
h1 {
+ margin-top: 20px;
text-align: center;
line-height: 1.1em;
}
.invisible {
display: none !important;
}
+kbd {
+ border: 1px solid #EEE;
+ border-bottom: 3px solid #EEE;
+ border-radius: 5px;
+ padding: 0.1rem;
+}
/* LAYOUT */
@@ -48,7 +55,7 @@ h1 {
}
.main-content {
height: calc(100vh - 70px);
- overflow-y: hidden;
+ overflow-y: scroll;
overflow-x: hidden;
}
.main-content > div {