Integrate Tracky Mouse
parent
d900ef1129
commit
ae07f3f62d
Binary file not shown.
After Width: | Height: | Size: 330 B |
|
@ -11,6 +11,7 @@
|
||||||
<!-- <link href="lib/os-gui/windows-98.css" rel="stylesheet" type="text/css"> -->
|
<!-- <link href="lib/os-gui/windows-98.css" rel="stylesheet" type="text/css"> -->
|
||||||
<!-- <link href="lib/os-gui/windows-default.css" rel="stylesheet" type="text/css" title="Windows Default"> -->
|
<!-- <link href="lib/os-gui/windows-default.css" rel="stylesheet" type="text/css" title="Windows Default"> -->
|
||||||
<!-- <link href="lib/os-gui/peggys-pastels.css" rel="alternate stylesheet" type="text/css" title="Peggy's Pastels"> -->
|
<!-- <link href="lib/os-gui/peggys-pastels.css" rel="alternate stylesheet" type="text/css" title="Peggy's Pastels"> -->
|
||||||
|
<link href="lib/tracky-mouse/tracky-mouse.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="images/icons/apple-icon-180x180.png">
|
<link rel="apple-touch-icon" href="images/icons/apple-icon-180x180.png">
|
||||||
<!-- Chrome will pick the largest image for some reason, instead of the most appropriate one. -->
|
<!-- Chrome will pick the largest image for some reason, instead of the most appropriate one. -->
|
||||||
|
@ -1482,6 +1483,7 @@
|
||||||
<script src="lib/FileSaver.js"></script>
|
<script src="lib/FileSaver.js"></script>
|
||||||
<script src="lib/font-detective.js"></script>
|
<script src="lib/font-detective.js"></script>
|
||||||
<script src="lib/libtess.min.js"></script>
|
<script src="lib/libtess.min.js"></script>
|
||||||
|
<script src="lib/tracky-mouse/tracky-mouse.js"></script>
|
||||||
<script src="lib/os-gui/parse-theme.js"></script>
|
<script src="lib/os-gui/parse-theme.js"></script>
|
||||||
<script src="lib/os-gui/$Window.js"></script>
|
<script src="lib/os-gui/$Window.js"></script>
|
||||||
<script src="lib/os-gui/$MenuBar.js"></script>
|
<script src="lib/os-gui/$MenuBar.js"></script>
|
||||||
|
|
56
src/app.js
56
src/app.js
|
@ -1261,7 +1261,61 @@ const eye_gaze_mode_config = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function init_eye_gaze_mode() {
|
var tracky_mouse_deps_promise;
|
||||||
|
|
||||||
|
async function init_eye_gaze_mode() {
|
||||||
|
if (!tracky_mouse_deps_promise) {
|
||||||
|
TrackyMouse.dependenciesRoot = "lib/tracky-mouse";
|
||||||
|
tracky_mouse_deps_promise = TrackyMouse.loadDependencies();
|
||||||
|
}
|
||||||
|
await tracky_mouse_deps_promise;
|
||||||
|
|
||||||
|
const $tracky_mouse_window = $Window({
|
||||||
|
title: "Tracky Mouse",
|
||||||
|
icon: "tracky-mouse",
|
||||||
|
});
|
||||||
|
$tracky_mouse_window.addClass("tracky-mouse-window");
|
||||||
|
const tracky_mouse_container = $tracky_mouse_window.$content[0];
|
||||||
|
|
||||||
|
TrackyMouse.init(tracky_mouse_container);
|
||||||
|
TrackyMouse.useCamera();
|
||||||
|
|
||||||
|
$tracky_mouse_window.center();
|
||||||
|
|
||||||
|
let last_el_over;
|
||||||
|
TrackyMouse.onPointerMove = (x, y) => {
|
||||||
|
const target = document.elementFromPoint(x, y) || document.body;
|
||||||
|
if (target !== last_el_over) {
|
||||||
|
if (last_el_over) {
|
||||||
|
const event = new /*PointerEvent*/$.Event("pointerleave", Object.assign(get_event_options({ x, y }), {
|
||||||
|
button: 0,
|
||||||
|
buttons: 1,
|
||||||
|
bubbles: false,
|
||||||
|
cancelable: false,
|
||||||
|
}));
|
||||||
|
// last_el_over.dispatchEvent(event);
|
||||||
|
$(last_el_over).trigger(event);
|
||||||
|
}
|
||||||
|
const event = new /*PointerEvent*/$.Event("pointerenter", Object.assign(get_event_options({ x, y }), {
|
||||||
|
button: 0,
|
||||||
|
buttons: 1,
|
||||||
|
bubbles: false,
|
||||||
|
cancelable: false,
|
||||||
|
}));
|
||||||
|
// target.dispatchEvent(event);
|
||||||
|
$(target).trigger(event);
|
||||||
|
last_el_over = target;
|
||||||
|
}
|
||||||
|
const event = new PointerEvent/*$.Event*/("pointermove", Object.assign(get_event_options({ x, y }), {
|
||||||
|
button: 0,
|
||||||
|
buttons: 1,
|
||||||
|
}));
|
||||||
|
target.dispatchEvent(event);
|
||||||
|
// $(target).trigger(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
// tracky_mouse_container.querySelector(".tracky-mouse-canvas").classList.add("inset-deep");
|
||||||
|
|
||||||
const circle_radius_max = 50; // dwell indicator size in pixels
|
const circle_radius_max = 50; // dwell indicator size in pixels
|
||||||
const hover_timespan = 500; // how long between the dwell indicator appearing and triggering a click
|
const hover_timespan = 500; // how long between the dwell indicator appearing and triggering a click
|
||||||
const averaging_window_timespan = 500;
|
const averaging_window_timespan = 500;
|
||||||
|
|
|
@ -17,8 +17,8 @@ function show_help() {
|
||||||
|
|
||||||
// awkward shim to interface with my own stupid code
|
// awkward shim to interface with my own stupid code
|
||||||
window.TITLEBAR_ICON_SIZE = 16;
|
window.TITLEBAR_ICON_SIZE = 16;
|
||||||
window.$Icon = ()=> {
|
window.$Icon = (name)=> {
|
||||||
return $("<img src='images/chm-16x16.png'>");
|
return $(`<img src='images/${name}-16x16.png'>`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// shared code with 98.js.org
|
// shared code with 98.js.org
|
||||||
|
|
|
@ -703,7 +703,7 @@ html, body, .jspaint {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
|
/* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
|
||||||
.window:not(.edit-colors-window) .window-content label {
|
.window:not(.edit-colors-window):not(.tracky-mouse-window) .window-content label {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
|
@ -703,7 +703,7 @@ html, body, .jspaint {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
|
/* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
|
||||||
.window:not(.edit-colors-window) .window-content label {
|
.window:not(.edit-colors-window):not(.tracky-mouse-window) .window-content label {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
|
Loading…
Reference in New Issue