-
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
200 additions
and
11 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
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 |
|---|---|---|
|
|
@@ -7,15 +7,15 @@ | |
| <meta charset="UTF-8"> | ||
| <title>DJ | KB Overlay</title> | ||
| <meta name="description" content="A customisable pressure sensitive display for your Wooting keyboard!"> | ||
| <link rel="shortcut icon" type="image/png" href="woootcon.ico" /> | ||
| <link rel="shortcut icon" type="image/png" href="pages/globaldefault/pageicon.ico" /> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <meta name="theme-color" content="#131313"> | ||
|
|
||
| <!-- css stylesheets --> | ||
| <link rel='stylesheet' type='text/css' href="styles.css"> | ||
| <link rel='stylesheet' type='text/css' href="pages/globaldefault/styles.css"> | ||
| <link rel="stylesheet" | ||
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> | ||
| <script type="text/javascript" src="data/wootingLayouts.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/data/wootingLayouts.js"></script> | ||
| </head> | ||
|
|
||
| <!-- BODY --> | ||
|
|
@@ -169,21 +169,21 @@ <h2>Lan Connection</h2> | |
|
|
||
| <!-- SCRIPTING --> | ||
| <!-- mouse event based script --> | ||
| <script type="text/javascript" src="js/mousehandlers.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/mousehandlers.js"></script> | ||
|
|
||
| <!-- key pool script --> | ||
| <script type="text/javascript" src="js/keypool.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/keypool.js"></script> | ||
|
|
||
| <!-- key menu and key customisation --> | ||
| <script type="text/javascript" src="js/keymenu.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/keymenu.js"></script> | ||
|
|
||
| <!-- keyboard related scripts --> | ||
| <script type="text/javascript" src="js/keyboard.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/keyboard.js"></script> | ||
|
|
||
| <!-- websockets related scripts --> | ||
| <script type="text/javascript" src="js/websocket.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/websocket.js"></script> | ||
|
|
||
| <!-- toolbar settings related scripts --> | ||
| <script type="text/javascript" src="js/toolbarfunctions.js"></script> | ||
| <script type="text/javascript" src="pages/globaldefault/js/toolbarfunctions.js"></script> | ||
|
|
||
| </html> | ||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Binary file not shown.
File renamed without changes.
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,189 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <!-- HEAD --> | ||
|
|
||
| <head> | ||
| <!-- page information --> | ||
| <meta charset="UTF-8"> | ||
| <title>KeysMe x Wooting | KB Overlay</title> | ||
| <meta name="description" content="A customisable pressure sensitive display for your Wooting keyboard!"> | ||
| <link rel="shortcut icon" type="image/png" href="../globaldefault/pageicon.ico" /> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <meta name="theme-color" content="#131313"> | ||
|
|
||
| <!-- css stylesheets --> | ||
| <link rel='stylesheet' type='text/css' href="../globaldefault/styles.css"> | ||
| <link rel="stylesheet" | ||
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> | ||
| <script type="text/javascript" src="../globaldefault/data/wootingLayouts.js"></script> | ||
| </head> | ||
|
|
||
| <!-- BODY --> | ||
|
|
||
| <body> | ||
| <!-- keyboard and keys display --> | ||
| <section id="keyboard"></section> | ||
|
|
||
| <!-- popup to add more keys to screen --> | ||
| <section id="keyPool" class="tabmenu"> | ||
| <h2>Add keys</h2> | ||
| <input type="search" id="keyPoolInput" placeholder="Search" oninput="buildOptions()"> | ||
| <div id="keyPoolOptions"></div> | ||
| </section> | ||
|
|
||
| <!-- optional logging information --> | ||
| <div id="optionalInfo"> | ||
| <h1 id="values">Start pressing!</h1> | ||
| <hr> | ||
| <h2 id="output"></h2> | ||
| </div> | ||
|
|
||
| <!-- floating toolbar --> | ||
| <div id="toolbar" class="mouseOver"> | ||
| <!-- settings popup menu --> | ||
| <div id="settings" class="tabmenu"> | ||
| <h2>Customisation</h2> | ||
| <section class="flexRows"> | ||
| <div>Active: | ||
| <input type="color" id="activeColorPicker" > | ||
| </div> | ||
| <div>Inactive: | ||
| <input type="color" id="inactiveColorPicker"> | ||
| </div> | ||
| <div>Accent: | ||
| <input type="color" id="accentColorPicker"> | ||
| </div> | ||
| <div>Key Background: | ||
| <input type="color" id="keyBgColorPicker"> | ||
| </div> | ||
| <div>Key Opacity: | ||
| <input type="range" step=0.1 min=0 max=1 id="keyBgOpacityPicker"> | ||
| </div> | ||
| <div>Background: | ||
| <input type="color" id="backgroundColorPicker"> | ||
| </div> | ||
| </section> | ||
|
|
||
| <hr> | ||
|
|
||
| <section class="flexRows"> | ||
| <div>Accessiblity mode: | ||
| <label class="switch"> | ||
| <input type="checkbox" id="inputCheckbox"> | ||
| <span class="slider round"></span> | ||
| </label> | ||
| </div> | ||
| <div>Round progress: | ||
| <label class="switch"> | ||
| <input type="checkbox" id="roundingCheckbox"> | ||
| <span class="slider round"></span> | ||
| </label> | ||
| </div> | ||
| <div>Instant transitions: | ||
| <label class="switch"> | ||
| <input type="checkbox" id="transitionCheckbox"> | ||
| <span class="slider round"></span> | ||
| </label> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="presets" class="tabmenu"> | ||
| <h2>Presets</h2> | ||
| <textarea id="presetInput" placeholder="Paste preset here"></textarea> | ||
| <button onclick="loadState()">Save</button> | ||
| <button onclick="copyToClipboard()">Copy to clipboard</button> | ||
| <button onclick="pasteFromClipboard()">Load from clipboard</button> | ||
| <hr> | ||
| <h3>Saved</h3> | ||
| <div id="savedPresets"> | ||
| <button onclick="loadPreset(0)" id="preset0Name">Empty</button> <button onclick="savePreset(0)">💾</button> | ||
| <button onclick="loadPreset(1)" id="preset1Name">Empty</button> <button onclick="savePreset(1)">💾</button> | ||
| <button onclick="loadPreset(2)" id="preset2Name">Empty</button> <button onclick="savePreset(2)">💾</button> | ||
| </div> | ||
| <hr> | ||
| <h3>Wooting layouts</h3> | ||
| <div id="defaultPresets"> | ||
|
|
||
| </div> | ||
| <a href="https://github.com/DjCrqss/Woot-verlay/wiki/Presets" target="_blank">Community presets</a> | ||
| </div> | ||
|
|
||
| <div id="lanSettings" class="tabmenu"> | ||
| <h2>Lan Connection</h2> | ||
| <p>Connect to external client.<br>Press connect and wait ~3 seconds.</p> | ||
| <input type="text" id="lanInput" placeholder="192.168.x.x"> | ||
| <button onclick="connectToExternalLan()">Connect</button> | ||
| </div> | ||
|
|
||
| <!-- icons --> | ||
| <i class="material-symbols-outlined" onclick="toggleVisiblity('keyPool')">add_circle<span class="infoField">Add | ||
| keys</span></i> | ||
| <i class="material-symbols-outlined" onclick="toggleVisiblity('settings')">settings<span | ||
| class="infoField">Customise</span></i> | ||
| <i class="material-symbols-outlined" onclick="toggleVisiblity('presets')">bookmarks<span | ||
| class="infoField">Presets</span></i> | ||
| <i class="material-symbols-outlined" onclick="toggleVisiblity('lanSettings')">magic_tether<span | ||
| class="infoField">LAN connection</span></i> | ||
| <i class="material-symbols-outlined" onclick="toggleVisiblity('optionalInfo')">visibility<span | ||
| class="infoField">Toggle info</span></i> | ||
| </div> | ||
|
|
||
| <!-- Key option dialog --> | ||
| <div id="keyOptionDialog"> | ||
| <span>Rename: | ||
| <input type="text" id="keyLabel" placeholder="New name" style="width: 100%" | ||
| onkeydown="if(event.keyCode === 13) updateKeyLabel(this)"> | ||
| </span> | ||
| <span>Fill dir. | ||
| <table class="directions"> | ||
| <tr> | ||
| <td id="topLeft" onclick=updateKeySettings(this.id)>🡦</td> | ||
| <td id="top" onclick=updateKeySettings(this.id)>🡣</td> | ||
| <td id="topRight" onclick=updateKeySettings(this.id)>🡧</td> | ||
| </tr> | ||
| <tr> | ||
| <td id="left" onclick=updateKeySettings(this.id)>🡢</td> | ||
| <td id="centre" onclick=updateKeySettings(this.id)>⤫</td> | ||
| <td id="right" onclick=updateKeySettings(this.id)>🡠</td> | ||
| </tr> | ||
| <tr> | ||
| <td id="bottomLeft" onclick=updateKeySettings(this.id)>🡥</td> | ||
| <td id="bottom" onclick=updateKeySettings(this.id)>🡡</td> | ||
| <td id="bottomRight" onclick=updateKeySettings(this.id)>🡤</td> | ||
| </tr> | ||
| </table> | ||
| <table class="directions"> | ||
| <tr> | ||
| <td id="vertical" onclick=updateKeySettings(this.id)>⥊</td> | ||
| <td id="horizontal" onclick=updateKeySettings(this.id)>⥍</td> | ||
| </tr> | ||
| </table> | ||
| </span> | ||
|
|
||
| <span class="deleteButton" onclick=removeKey()>Remove</span> | ||
| </div> | ||
| </body> | ||
|
|
||
|
|
||
| <!-- SCRIPTING --> | ||
| <!-- mouse event based script --> | ||
| <script type="text/javascript" src="../globaldefault/js/mousehandlers.js"></script> | ||
|
|
||
| <!-- key pool script --> | ||
| <script type="text/javascript" src="../globaldefault/js/keypool.js"></script> | ||
|
|
||
| <!-- key menu and key customisation --> | ||
| <script type="text/javascript" src="../globaldefault/js/keymenu.js"></script> | ||
|
|
||
| <!-- keyboard related scripts --> | ||
| <script type="text/javascript" src="../globaldefault/js/keyboard.js"></script> | ||
|
|
||
| <!-- websockets related scripts --> | ||
| <script type="text/javascript" src="../globaldefault/js/websocket.js"></script> | ||
|
|
||
| <!-- toolbar settings related scripts --> | ||
| <script type="text/javascript" src="../globaldefault/js/toolbarfunctions.js"></script> | ||
|
|
||
| </html> |