mirror of
https://github.com/c3d/DB48X-on-DM42.git
synced 2024-09-28 03:20:53 +02:00
48calc.org: Fix mouse click position
Fix handling of mouse click position. The coordinates were computed relative to the wrong dimensions, so the buttons were all the more unreliable the more they were at the bottom and to the right. Fixes: #1096 Signed-off-by: Christophe de Dinechin <christophe@dinechin.org>
This commit is contained in:
parent
a62e4425d0
commit
4c2306d2a5
1 changed files with 264 additions and 325 deletions
187
wasm/index.html
187
wasm/index.html
|
@ -129,72 +129,6 @@
|
|||
<canvas id="lcdCanvas"></canvas>
|
||||
<canvas id="keyCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="try-this" style="overflow:scroll; height:200px;">
|
||||
<h2>Try this: Plotting a function</h2>
|
||||
<p>
|
||||
Try the following key sequence, where you need to hit the Shift
|
||||
key as a separate key, and observe what happens with each key:
|
||||
</p>
|
||||
<p align="center">
|
||||
<table width="640px">
|
||||
<tr><th>Key to type</th><th>What happens</th></tr>
|
||||
<tr><td>F</td> <td>Enter expression</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>ENTER</td> <td>ALPHA mode</td></tr>
|
||||
<tr><td>X</td> <td>Enter variable name X</td></tr>
|
||||
<tr><td>ENTER</td> <td>Put X on the stack</td></tr>
|
||||
<tr><td>ENTER</td> <td>Duplicate X</td></tr>
|
||||
<tr><td>3</td> <td>Enter number 3</td></tr>
|
||||
<tr><td>.</td> <td>3.</td></tr>
|
||||
<tr><td>4</td> <td>3.4</td></tr>
|
||||
<tr><td>2</td> <td>3.42</td></tr>
|
||||
<tr><td>*</td> <td>Put 3.42 times X on stack</td></tr>
|
||||
<tr><td>J</td> <td>Compute sin(3.42·X)</td></tr>
|
||||
<tr><td>M</td> <td>Swap stack levels 1 and 2</td></tr>
|
||||
<tr><td>K</td> <td>Compute cos(X)</td></tr>
|
||||
<tr><td>/</td> <td>Compute sin(3.42·X)/cos(X)</td></tr>
|
||||
<tr><td>Shift</td> <td>Left shift</td></tr>
|
||||
<tr><td>N</td> <td>Select MODES menu</td></tr>
|
||||
<tr><td>F2</td> <td>Select Radians mode</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>Shift</td> <td>Right Shift</td></tr>
|
||||
<tr><td>O</td> <td>PLOT menu</td></tr>
|
||||
<tr><td>F1</td> <td>Draw function</td></tr>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<h2>Try this: Computing 200 digits of pi</h2>
|
||||
<p>
|
||||
Try the following key sequence, where you need to hit the Shift
|
||||
key as a separate key, and observe what happens with each key:
|
||||
</p>
|
||||
<p align="center">
|
||||
<table width="640px">
|
||||
<tr><th>Key to type</th><th>What happens</th></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>N</td> <td>MODES menu</td></tr>
|
||||
<tr><td>F2</td> <td>RADIANS mode</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>O</td> <td>DISP menu</td></tr>
|
||||
<tr><td>2</td> <td>Enter number 2</td></tr>
|
||||
<tr><td>0</td> <td>20</td></tr>
|
||||
<tr><td>0</td> <td>200</td></tr>
|
||||
<tr><td>F6</td> <td>200-digit precision</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>M</td> <td>Last Arg (Recall 200)</td></tr>
|
||||
<tr><td>F5</td> <td>200 significant digits shown</td></tr>
|
||||
|
||||
<tr><td>1</td> <td>Enter number 1</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>L</td> <td>Compute arc-tangent of 1</td></tr>
|
||||
<tr><td>4</td> <td>Enter number 4</td></tr>
|
||||
<tr><td>*</td> <td>Compute pi</td></tr>
|
||||
<tr><td>Shift</td> <td>Left Shift</td></tr>
|
||||
<tr><td>.</td> <td>SHOW function (show full screen)</td></tr>
|
||||
</table>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
@ -237,24 +171,25 @@
|
|||
<script src="/user/themes/quark/js/site.js"></script>
|
||||
|
||||
<script>
|
||||
document.getElementsByTagName('body')[0].onscroll = function(event) {
|
||||
document.getElementsByTagName('body')[0].onscroll = function(event) {
|
||||
event.preventDefault();
|
||||
};
|
||||
};
|
||||
|
||||
const DEBUG = false;
|
||||
const SIM_LCD_H = 240; // Height of the LCD
|
||||
const SIM_LCD_SCANLINE = 416; // Width of the LCD scanline
|
||||
const SIM_LCD_OFFSET = 16;
|
||||
const BPP = 1; // Bits per pixel
|
||||
const WORD_SIZE = 32; // Size of the word in bits
|
||||
const MASK = (1 << BPP) - 1; // Mask to extract BPP bits
|
||||
const KB_RATIO = 1.3; // Keyboard aspect ratio
|
||||
let keyBuffer = []; // keyBuffer
|
||||
let threadSince = 0;
|
||||
let threadInterval = 50; // 50ms
|
||||
const DEBUG = false;
|
||||
const SIM_LCD_H = 240; // Height of the LCD
|
||||
const SIM_LCD_SCANLINE = 416; // Width of the LCD scanline
|
||||
const SIM_LCD_OFFSET = 16;
|
||||
const SIM_LCD_W = SIM_LCD_SCANLINE - SIM_LCD_OFFSET;
|
||||
const BPP = 1; // Bits per pixel
|
||||
const WORD_SIZE = 32; // Size of the word in bits
|
||||
const MASK = (1 << BPP) - 1; // Mask to extract BPP bits
|
||||
const KB_RATIO = 1.3; // Keyboard aspect ratio
|
||||
let keyBuffer = []; // keyBuffer
|
||||
let threadSince = 0;
|
||||
let threadInterval = 50; // 50ms
|
||||
|
||||
// Keyboard mapping with key areas
|
||||
const key_map = [
|
||||
// Keyboard mapping with key areas
|
||||
const key_map = [
|
||||
[ 38, 0.03, 0.15, 0.03, 0.10 ], // Qt::Key_F1,
|
||||
[ 39, 0.20, 0.32, 0.03, 0.10 ], // Qt::Key_F2,
|
||||
[ 40, 0.345, 0.47, 0.03, 0.10 ], // Qt::Key_F3,
|
||||
|
@ -305,9 +240,9 @@
|
|||
[ 35, 0.42, 0.55, 0.89, 0.97 ], // Qt::Key_Period,
|
||||
[ 36, 0.62, 0.74, 0.89, 0.97 ], // Qt::Key_Question,
|
||||
[ 37, 0.81, 0.95, 0.89, 0.97 ], // Qt::Key_Plus,
|
||||
];
|
||||
];
|
||||
|
||||
const keystroke_map = {
|
||||
const keystroke_map = {
|
||||
"0": 34,
|
||||
"1": 29,
|
||||
"2": 30,
|
||||
|
@ -373,18 +308,18 @@
|
|||
"ArrowRight": 23,
|
||||
"ArrowUp": 18,
|
||||
"ArrowDown": 23,
|
||||
};
|
||||
};
|
||||
|
||||
// canvas for the keyboard
|
||||
const canvas_key = document.getElementById('keyCanvas');
|
||||
const KEY_H = SIM_LCD_SCANLINE * KB_RATIO;
|
||||
const KEY_W = SIM_LCD_SCANLINE - SIM_LCD_OFFSET;
|
||||
canvas_key.width = KEY_W;
|
||||
canvas_key.height = KEY_H;
|
||||
const ctx_key = canvas_key.getContext('2d');
|
||||
ctx_key.clearRect( 0, 0, KEY_W, KEY_H);
|
||||
// debug presses
|
||||
if (DEBUG) {
|
||||
// canvas for the keyboard
|
||||
const canvas_key = document.getElementById('keyCanvas');
|
||||
const KEY_H = SIM_LCD_SCANLINE * KB_RATIO;
|
||||
const KEY_W = SIM_LCD_W;
|
||||
canvas_key.width = KEY_W;
|
||||
canvas_key.height = KEY_H;
|
||||
const ctx_key = canvas_key.getContext('2d');
|
||||
ctx_key.clearRect( 0, 0, KEY_W, KEY_H);
|
||||
// debug presses
|
||||
if (DEBUG) {
|
||||
ctx_key.strokeStyle = "red";
|
||||
for (let i=0; i<key_map.length; i++) {
|
||||
ctx_key.beginPath();
|
||||
|
@ -395,28 +330,32 @@
|
|||
ctx_key.lineTo(key_map[i][1]*KEY_W, key_map[i][3]*KEY_H);
|
||||
ctx_key.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// get the mouse/touch position
|
||||
const getMousePosition = function(canvas, event) {
|
||||
let rect = canvas.getBoundingClientRect();
|
||||
let x = (event.clientX - rect.left) / rect.width;
|
||||
let y = (event.clientY - rect.top) / rect.height;
|
||||
let xx = x * canvas.width;
|
||||
let yy = y * canvas.height;
|
||||
if (DEBUG) {
|
||||
console.log("clicked x: " + x, " y: " + y + " xx:" + xx + " yy: " + yy);
|
||||
}
|
||||
|
||||
// get the mouse/touch position
|
||||
const getMousePosition = function(canvas, event) {
|
||||
let rect = canvas.getBoundingClientRect();
|
||||
let x = event.clientX - rect.left;
|
||||
let y = event.clientY - rect.top;
|
||||
if (DEBUG) {
|
||||
console.log("clicked x: " + x, " y: " + y);
|
||||
}
|
||||
// should use html elements for the keys in future
|
||||
for (let i=0; i<key_map.length; i++) {
|
||||
if (x > key_map[i][1]*KEY_W && x < key_map[i][2]*KEY_W && y > key_map[i][3]*KEY_H && y < key_map[i][4]*KEY_H) {
|
||||
if (x > key_map[i][1] && x < key_map[i][2] &&
|
||||
y > key_map[i][3] && y < key_map[i][4]) {
|
||||
if (DEBUG) {
|
||||
console.log("clicked:", key_map[i][0]);
|
||||
}
|
||||
keyBuffer.push(key_map[i][0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const processKey = function() {
|
||||
const processKey = function() {
|
||||
if (keyBuffer.length > 0) {
|
||||
let key = keyBuffer.shift();
|
||||
if (DEBUG) {
|
||||
|
@ -427,15 +366,15 @@
|
|||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// add an event listener to the canvas so we can parse the key presses
|
||||
canvas_key.addEventListener("mousedown", function (e) {
|
||||
// add an event listener to the canvas so we can parse the key presses
|
||||
canvas_key.addEventListener("mousedown", function (e) {
|
||||
getMousePosition(canvas_key, e);
|
||||
});
|
||||
});
|
||||
|
||||
// add an event listener to the canvas so we can parse the key presses
|
||||
document.addEventListener("keyup", (event)=>{
|
||||
// add an event listener to the canvas so we can parse the key presses
|
||||
document.addEventListener("keyup", (event)=>{
|
||||
// check that event.key matches a key in the keystroke_map
|
||||
if (Object.keys(keystroke_map).includes(event.key)) {
|
||||
keyBuffer.push(keystroke_map[event.key]);
|
||||
|
@ -444,21 +383,21 @@
|
|||
console.log("Key not found in keystroke_map: ", event.key);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// draw the LCD panel
|
||||
const canvas = document.getElementById('lcdCanvas');
|
||||
canvas.width = SIM_LCD_SCANLINE - SIM_LCD_OFFSET;
|
||||
canvas.height = SIM_LCD_H;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
// draw the LCD panel
|
||||
const canvas = document.getElementById('lcdCanvas');
|
||||
canvas.width = SIM_LCD_W;
|
||||
canvas.height = SIM_LCD_H;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
|
||||
// parse the LCD data and draw to the canvas
|
||||
const drawBitmap = function(canvasId, dataArray, width, height) {
|
||||
// parse the LCD data and draw to the canvas
|
||||
const drawBitmap = function(canvasId, dataArray, width, height) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = SIM_LCD_SCANLINE - SIM_LCD_OFFSET;
|
||||
canvas.width = SIM_LCD_W;
|
||||
canvas.height = SIM_LCD_H;
|
||||
|
||||
const imageData = ctx.createImageData(width, height);
|
||||
|
@ -485,10 +424,10 @@
|
|||
|
||||
// offset -16 pixels to the left
|
||||
ctx.putImageData(imageData, -SIM_LCD_OFFSET, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Module.onRuntimeInitialized = function() {
|
||||
Module.onRuntimeInitialized = function() {
|
||||
|
||||
// initialise the calculator
|
||||
console.log("loaded wasm...");
|
||||
|
@ -522,7 +461,7 @@
|
|||
}
|
||||
|
||||
window.requestAnimationFrame(checkRPL);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue