-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added mouse-speed and mouse-flick modules
- Loading branch information
Showing
8 changed files
with
293 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| # Modules | ||
|
|
||
| ## Mouse speed (`mouse-speed.html`) | ||
| Displays mouse speed overlay. Open file in text editor to adjust settings. Browser source parameters: Width: `500`, Height: `100`. | ||
|
|
||
|  | ||
|
|
||
| ## Mouse movement (`mouse-movement.html`) | ||
| Displays circle indicating current mouse movement direction. Open file in text editor to adjust settings. Browser source parameters: Width: `800`, Height: `800`. | ||
|
|
||
|  | ||
|
|
||
| ## Flicks (`mouse-flick.html`) | ||
| Displays text when you perform flick in FPV games (in other words when mouse moves some distance horizontally at some period of time). Open file in text editor to adjust settings. Browser source parameters: Width: `300`, Height: `100`. | ||
|
|
||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <script> | ||
| // ms, check mouse horizontal movement in this time interval | ||
| const checkingInterval = 400; | ||
|
|
||
| // in mouse raw units | ||
| // adjust this to match your DPI and mouse sensitivity in game | ||
| const flickMovementThreshold = 1000; | ||
|
|
||
| // milliseconds, without fadeout animation | ||
| const textDisplayInterval = 250; | ||
| </script> | ||
| <style> | ||
| body { | ||
| /*background-color: black;*/ /* uncomment this to debug in browser */ | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| text-align: center; | ||
| } | ||
| #mouse-flick { | ||
| display: inline-block; | ||
| color: red; | ||
| text-shadow: 0 0 4px rgb(253, 253, 18); | ||
| font-family: Verdana; | ||
| font-size: 60px; | ||
| } | ||
| #mouse-flick.fadeout { | ||
| animation: fadeout 0.25s ease-out; /* fade animation */ | ||
| animation-fill-mode: forwards; | ||
| } | ||
| @keyframes fadeout { | ||
| from { | ||
| opacity: 1; | ||
| } | ||
| to { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| </style> | ||
| <script> | ||
| let listHead = null; | ||
| let listTail = null; | ||
| let deltaX = 0; | ||
| let state = null; | ||
|
|
||
| function listenWebSocket() { | ||
| let ws = new WebSocket('ws://' + location.host + '/ws'); | ||
| ws.onopen = function () { | ||
| // listen for MoveEvent's | ||
| ws.send(JSON.stringify({ listen: 'RawMouseMovement' })); | ||
| }; | ||
| ws.onmessage = function (event) { | ||
| var data = JSON.parse(event.data); | ||
|
|
||
| if (data.type == 'Ping') { | ||
| // reply to ping messages | ||
| ws.send(JSON.stringify({ ping: data.ping })); | ||
| return; | ||
| } | ||
|
|
||
| if (data.type == 'RawMouseMovement') { | ||
| // MoveEvent | ||
| processEvent(data); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| function processEvent(evt) { | ||
| let now = window.performance.now(); | ||
| evt.time = now; | ||
| if (listHead == null) { | ||
| listHead = listTail = evt; | ||
| deltaX = evt.dx; | ||
| return; | ||
| } else { | ||
| listTail.next = evt; | ||
| listTail = evt; | ||
| deltaX += evt.dx; | ||
| } | ||
|
|
||
| while (listHead && (now - listHead.time) > checkingInterval) { | ||
| deltaX -= listHead.dx; | ||
| listHead = listHead.next; | ||
| if (!listHead) { | ||
| listTail = null; | ||
| } | ||
| } | ||
|
|
||
| if (Math.abs(deltaX) > flickMovementThreshold && state == null) { | ||
| let div = document.getElementById('mouse-flick'); | ||
| div.style.display = ''; | ||
| div.classList.remove('fadeout'); | ||
| state = 'show'; | ||
| listHead = listTail = null; | ||
| deltaX = 0; | ||
| setTimeout(function () { | ||
| div.classList.add('fadeout'); | ||
| state = null; | ||
| }, textDisplayInterval); | ||
| } | ||
| } | ||
|
|
||
| function initDiv() { | ||
| let div = document.getElementById('mouse-flick'); | ||
| div.style.display = 'none'; | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function() { | ||
| initDiv(); | ||
| listenWebSocket(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div id="mouse-flick">Flick!</div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <script> | ||
| // raw mouse sensitivy, also called DPI | ||
| const cpi = 1200; | ||
|
|
||
| // speed value will be updated only after specified period | ||
| const refreshMs = 100; | ||
|
|
||
| const decimals = 2; | ||
|
|
||
| // this is just for visual, no effect on value displayed | ||
| const units = 'inch/sec'; | ||
|
|
||
| // speed in inches/sec is multiplied by this value, you can use this settings to convert to different units | ||
| const multiplier = 1; | ||
| // const multiplier = 1.0 / 39; // meters per second | ||
| // const multiplier = 1.0 / 10.936; // km/hour | ||
| // const multiplier = 1.0 / 17.6; // miles/hour | ||
|
|
||
| // use this table to specify color gradient for different speed values | ||
| // first element should always have value=0 | ||
| const gradientTable = [ | ||
| // red/green/blue [0..256), opacity [0..1], speed - mouse speed | ||
| { red: 255, green: 255, blue: 255, opacity: 1.0, speed: 0.0 }, // white at speed=0 | ||
| { red: 255, green: 255, blue: 71, opacity: 1.0, speed: 10 }, // yellow at speed=10 | ||
| { red: 255, green: 71, blue: 71, opacity: 1.0, speed: 20 }, // red at speed = 20 | ||
|
|
||
| // single color example | ||
| // uncomment line below to use it, and remove above lines | ||
| // { red: 255, green: 255, blue: 255, opacity: 1.0, speed: 0.0 } | ||
| ]; | ||
| </script> | ||
| <style> | ||
| body { | ||
| /*background-color: black;*/ /* uncomment this to debug in browser */ | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| text-align: center; | ||
| } | ||
| #mouse-speed { | ||
| display: inline-block; | ||
| font-family: Verdana; | ||
| font-size: 60px; | ||
| } | ||
| </style> | ||
| <script> | ||
| let queue = new Array(); | ||
|
|
||
| function listenWebSocket() { | ||
| let ws = new WebSocket('ws://' + location.host + '/ws'); | ||
| ws.onopen = function () { | ||
| // listen for MoveEvent's | ||
| ws.send(JSON.stringify({ listen: 'RawMouseMovement' })); | ||
| }; | ||
| ws.onmessage = function (event) { | ||
| var data = JSON.parse(event.data); | ||
|
|
||
| if (data.type == 'Ping') { | ||
| // reply to ping messages | ||
| ws.send(JSON.stringify({ ping: data.ping })); | ||
| return; | ||
| } | ||
|
|
||
| if (data.type == 'RawMouseMovement') { | ||
| // MoveEvent | ||
| queue.push(data); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| function startRefreshTimer() { | ||
| let hex = function (val) { | ||
| if (val < 0) { | ||
| val = 0; | ||
| } | ||
| if (val >= 256) { | ||
| val = 255; | ||
| } | ||
| if (val < 16) { | ||
| return '0' + val.toString(16); | ||
| } else { | ||
| return val.toString(16); | ||
| } | ||
| }; | ||
| setInterval(function () { | ||
| let distance = 0; | ||
| for (let i = 0; i < queue.length; i++) { | ||
| let dx = queue[i].dx; | ||
| let dy = queue[i].dy; | ||
| distance += Math.sqrt(dx * dx + dy * dy); | ||
| } | ||
| queue.splice(0, queue.length); | ||
| let speedInchPerSec = 1000 * distance / refreshMs / cpi; | ||
| let speed = multiplier * speedInchPerSec; | ||
|
|
||
| let element = document.getElementById('mouse-speed'); | ||
| element.innerText = speed.toFixed(decimals) + ' ' + units; | ||
|
|
||
| let curr = null; | ||
| let next = null; | ||
| for (let i = 0; i < gradientTable.length; i++) { | ||
| if (gradientTable[i].speed >= speed) { | ||
| next = gradientTable[i]; | ||
| if (i > 0) { | ||
| curr = gradientTable[i - 1]; | ||
| } else { | ||
| curr = next; | ||
| } | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| if (next == null) { | ||
| curr = next = gradientTable[gradientTable.length - 1]; | ||
| } | ||
|
|
||
| let delta = next.speed - curr.speed; | ||
| if (delta == 0) { | ||
| element.style.color = '#' + hex(curr.red) + hex(curr.green) + hex(curr.blue); | ||
| element.style.opacity = curr.opacity; | ||
| } else { | ||
| let factor = (speed - curr.speed) / delta; | ||
| let r = curr.red + Math.round((next.red - curr.red) * factor); | ||
| let g = curr.green + Math.round((next.green - curr.green) * factor); | ||
| let b = curr.blue + Math.round((next.blue - curr.blue) * factor); | ||
| let o = curr.opacity + (next.opacity - curr.opacity) * factor; | ||
| element.style.color = '#' + hex(r) + hex(g) + hex(b); | ||
| element.style.opacity = Math.round(o * 1000) / 1000; | ||
| } | ||
|
|
||
| }, refreshMs); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function() { | ||
| listenWebSocket(); | ||
| startRefreshTimer(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div id="mouse-speed"></div> | ||
| </body> | ||
| </html> |