Comments (2)
So long as you're not expecting simple-keyboard to handle detection of the mouse inputs like it can with a physical keyboard, this is easily achievable in just like how the numpad works in the full keyboard demo. In my project I'm using react-simple-keyboard.
This is how I define the mouse:
let commonKeyboardOptions = {
...
syncInstanceInputs: true,
}
const keyboardMouseExtraOptions = {
...commonKeyboardOptions,
layout: {
default: ["{mouseextra2}", "{mouseextra1}"],
},
display: {
"{mouseextra2}": "Mouse Extra 2 ↑",
"{mouseextra1}": "↓ Mouse Extra 1",
}
};
const keyboardMousePrimaryOptions = {
...commonKeyboardOptions,
layout: {
default: ["{wheelup}", "{mouse1} {mousemiddle} {mouse2}", "{wheeldown}"];,
},
display: {
"{mouse1}": "Mouse 1",
"{mouse2}": "Mouse 2",
"{wheelup}": "Wheel Up",
"{mousemiddle}": "Middle",
"{wheeldown}": "Wheel Down",
}
};
The HTML:
<div className="mouse">
<Keyboard baseClass={"simple-keyboard-mouse-extra"}
{...keyboardMouseExtraOptions}
/>
<Keyboard baseClass={"simple-keyboard-mouse-primary"}
{...keyboardMousePrimaryOptions}
/>
</div>
Some SCSS that's passable. It's not pretty but it is functional:
.mouse {
display: flex;
display-items: flex-end;
text-align: center;
.simple-keyboard-mouse-extra {
display: flex;
flex-direction: column;
justify-content: center;
width: 100px;
.hg-button-mouseextra1, .hg-button-mouseextra2 {
height: 85px;
}
}
.simple-keyboard-mouse-primary {
display: flex;
flex-direction: column;
justify-content: center;
.hg-button-wheelup {
flex: 0 0 100px;
}
.hg-button-wheeldown {
flex: 0 0 100px;
}
}
}
Note that my project deals with external hotkey files for a different program, so the keycodes for mouse buttons are predetermined. When a mouse key is selected I look up the keycode and go from there.
let keycodes = {
...
'{mouseextra2}': 251,
'{mouseextra1}': 252,
'{mousemiddle}': 253,
'{wheeldown}': 254,
'{wheelup}': 255,
}
How you handle storing of keybinds as well as detection of pressing hotkeys is up to you. For my use case it works great.
from simple-keyboard.
I would also vouch for a custom solution as shown by @Patchnote-v2. I will track this as a Proposal in case we want to make this a built-in in a future version.
from simple-keyboard.
Related Issues (20)
- Japanese Flick Input (Mobile) HOT 3
- excludeFromLayout doesnt work HOT 2
- can i use in vue3? HOT 1
- Keyboard button not showing with tailwind HOT 2
- Not responsive on mobile HOT 1
- CSS partialy Apply HOT 1
- BackSpace Issue HOT 1
- need more layers (right alt) HOT 2
- Button Hold : Allow additional keys via options HOT 6
- `layoutCandidates` is not case sensitive HOT 1
- When simple-keyboard is used with accessibility voice over turned on, hitting q enters 1 in input HOT 1
- Simple-keyboard Not Rendering HOT 2
- When set layoutCandidatesPageSize = 15, There is an issue with the background color of the candidate box
- Not displaying keyboard outside app.component HOT 1
- Virtual Keyboard, keys are coming all white HOT 1
- Can this component be dragged by the mouse motor? HOT 2
- When multiple virtual keyboard instances are used, only one instance can get activeInputElement HOT 1
- Is there any working example for the integration of Japanese keyboard with IME input HOT 2
- Request for Multi-language Keyboard Support (e.g., Turkish, Arabic) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-keyboard.