Skip to content

Commit 445e1d8

Browse files
DjCrqssDjCrqss
authored
Merge pull request #49 from DjCrqss/48-osu-themes
48 osu styling and customisation
2 parents 69655fa + 3bbc03d commit 445e1d8

File tree

11 files changed

+758
-68
lines changed

11 files changed

+758
-68
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ Presets are available to save and import. They can be found [here in the project
2222
A special mode for OSU! players that displays the Z and X keys with a histogram of the pressure values! View here and add to your streams using this link:
2323
[OSU-lay page.](https://djcrqss.github.io/Woot-verlay/pages/osulay/)
2424

25+
Make sure to make the display size in OBS at least 1300x700.
26+
2527

2628
<br clear="both"/><br><br>
2729
<img src="https://github.com/DjCrqss/Woot-verlay/assets/25734612/dde0c084-6368-48a5-a633-597200856cd0" width="60%" align="right"/>

‎pages/globaldefault/js/animations.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function connectedAnim(){
3030
document.body.appendChild(cover);
3131
}
3232

33-
function disconnectedAnim(){
33+
function disconnectedAnim(optionalText){
3434
// create div coverintg the whole screen
3535
var cover1 = document.createElement('div');
3636
cover1.style.position = "fixed";
@@ -56,7 +56,7 @@ function disconnectedAnim(){
5656
}, 2500);
5757
}, 750);
5858

59-
displayToast("Disconnected from client.", "rgb(101, 50, 50)");
59+
displayToast(optionalText || "Disconnected from client.", "rgb(101, 50, 50)");
6060

6161
// display onscreen
6262
document.body.appendChild(cover1);

‎pages/globaldefault/js/mousehandlers.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ function mouseOverVisibility() {
1616
}
1717

1818
// function to toggle visiblity of an element
19-
function toggleVisiblity(elmnt) {
19+
function toggleVisiblity(elmnt, sender) {
20+
// remove toolbaritemactive class from all elements with class 'toolbaritem'
21+
var toolbarItemElements = document.getElementsByClassName("toolbaritem");
22+
for (var i = 0; i < toolbarItemElements.length; i++) {
23+
toolbarItemElements[i].classList.remove("toolbaritemactive");
24+
}
25+
2026
var x = document.getElementById(elmnt);
2127

2228
// find all elements with class 'tabmenu' and hide them
@@ -30,6 +36,7 @@ function toggleVisiblity(elmnt) {
3036
x.style.visibility = "hidden";
3137
} else {
3238
x.style.visibility = "visible";
39+
sender.classList.add("toolbaritemactive");
3340
}
3441
}
3542

‎pages/globaldefault/styles.css

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,16 @@ h2, h3 {
8787
position: fixed;
8888
top: 0;
8989
right: min(40vw, 500px);
90-
padding: 0 1em;
90+
padding: 0 1.25em;
9191
background: var(--elem-prim-bg);
9292
backdrop-filter: blur(5px);
93-
min-width: 200px;
93+
min-width: 150px;
9494
min-height: 60px;
9595
border: 1px solid var(--elem-sec-border);
9696
border-top: 0;
9797
border-radius: 0 0 var(--elem-border-radius) var(--elem-border-radius);
9898
display: flex;
99-
gap: 1em;
99+
gap: 1.1em;
100100
justify-content: space-evenly;
101101
transition: opacity 0.5s;
102102
opacity: 0;
@@ -132,13 +132,12 @@ h2, h3 {
132132
}
133133

134134
/* Setting panels */
135-
#settings {
136-
visibility: hidden;
135+
.tabmenu{
137136
background-color: var(--elem-sec-bg);
138137
border: 1px solid var(--elem-sec-border);
139138
border-radius: 12px;
140139

141-
width: 100%;
140+
min-width: max(100%, 250px);
142141
min-height: 60px;
143142
max-height: calc(100vh - 80px);
144143
overflow-y: scroll;
@@ -153,32 +152,14 @@ h2, h3 {
153152
gap: 1em;
154153

155154
overflow: auto;
156-
}
157155

158-
#presets,
159-
#lanSettings, #languages {
160-
visibility: hidden;
161-
background-color: var(--elem-sec-bg);
162-
border: 1px solid var(--elem-sec-border);
163-
border-radius: 12px;
164-
165-
width: 100%;
166-
min-height: 60px;
167-
max-height: calc(100vh - 80px);
168-
overflow-y: scroll;
169-
padding: 12px;
156+
padding: 2em;
170157
box-sizing: border-box;
171158

172-
position: absolute;
173-
top: 70px;
174-
175-
display: flex;
176-
flex-direction: column;
177-
gap: 0.5em;
178-
179-
overflow: auto
159+
visibility: hidden;
180160
}
181161

162+
182163
#savedPresets{
183164
display: grid;
184165
grid-template-columns: 1fr min-content;
@@ -247,7 +228,7 @@ button:active {
247228

248229
hr {
249230
opacity: 0.05;
250-
margin: 1em 1em;
231+
margin: 0.1em 0.1em;
251232
}
252233

253234

@@ -283,6 +264,7 @@ hr {
283264
#keyPool {
284265
/* width: 28vw; */
285266
width: min(420px, 32vw);
267+
min-width: 0;
286268
height: 94vh;
287269
position: fixed;
288270
top: 3vh;

‎pages/osulay/Torus-Regular.otf

62.5 KB
Binary file not shown.

‎pages/osulay/Torus-SemiBold.otf

64.4 KB
Binary file not shown.

‎pages/osulay/index.html

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="description" content="A customisable pressure sensitive display for your Wooting keyboard!">
1010
<link rel="shortcut icon" type="image/png" href="../globaldefault/pageicon.ico" />
1111
<meta name="viewport" content="width=device-width">
12-
<meta name="theme-color" content="#131313">
12+
<meta name="theme-color" content="#18171C">
1313

1414
<!-- css stylesheets -->
1515
<link rel='stylesheet' type='text/css' href="../globaldefault/styles.css">
@@ -25,14 +25,114 @@
2525
<canvas id="osuCanvas"></canvas>
2626
<div id="zKey" class="keyIcon"></div>
2727
<div id="xKey" class="keyIcon"></div>
28+
29+
<!-- floating toolbar -->
30+
<div id="toolbar" class="mouseOver">
31+
<!-- customisation -->
32+
<div id="settings" class="tabmenu">
33+
<h2 data-i18n="menus.customise.title">Customise</h2>
34+
<section class="flexRows">
35+
<div><span data-i18n="menus.customise.active">Active</span>
36+
<input type="color" id="activeColorPicker" >
37+
</div>
38+
<div><span data-i18n="menus.customise.inactive">Inactive:</span>
39+
<input type="color" id="inactiveColorPicker">
40+
</div>
41+
<div><span data-i18n="menus.customise.accent">Accent</span>
42+
<input type="color" id="accentColorPicker">
43+
</div>
44+
<div><span data-i18n="menus.customise.background">Background</span>
45+
<input type="color" id="backgroundColorPicker">
46+
</div>
47+
</section>
48+
49+
<hr>
50+
51+
<section class="flexRows">
52+
<div><span data-i18n="menus.customise.scrollspeed">Scroll speed</span>
53+
<input type="range" step=1 min=1 max=8 id="scrollSpeedPicker">
54+
</div>
55+
<div><span data-i18n="menus.customise.endfade">End fade</span>
56+
<label class="switch">
57+
<input type="checkbox" id="endFadeCheckbox">
58+
<span class="slider round"></span>
59+
</label>
60+
</div>
61+
</section>
62+
63+
<hr>
64+
65+
<section class="flexRows">
66+
<div><span data-i18n="menus.customise.smoothing">Smoothing</span>
67+
<input type="range" step=0.1 min=0.1 max=1 id="smoothingPicker">
68+
</div>
69+
<div><span data-i18n="menus.customise.thickness">thickness</span>
70+
<input type="range" step=1 min=1 max=5 id="thicknessPicker">
71+
</div>
72+
<!-- <div><span data-i18n="menus.customise.instanttransitions">Instant transitions</span>
73+
<label class="switch">
74+
<input type="checkbox" id="endfadeCheckbox">
75+
<span class="slider round"></span>
76+
</label>
77+
</div> TODO: not yet working -->
78+
<div><span data-i18n="menus.customise.inactivefadeout">Fade on inactivity</span>
79+
<label class="switch">
80+
<input type="checkbox" id="inactiveFadeCheckbox">
81+
<span class="slider round"></span>
82+
</label>
83+
</div>
84+
</section>
85+
86+
<hr>
87+
88+
<section class="flexRows">
89+
<div><span data-i18n="menus.customise.accessiblitymode">Accessiblity mode</span>
90+
<label class="switch">
91+
<input type="checkbox" id="inputCheckbox">
92+
<span class="slider round"></span>
93+
</label>
94+
</div>
95+
<div><span data-i18n="menus.customise.instanttransitions">Instant Transitions</span>
96+
<label class="switch">
97+
<input type="checkbox" id="instantTransitionsCheckbox">
98+
<span class="slider round"></span>
99+
</label>
100+
</div>
101+
</section>
102+
103+
<span id="reset" onclick="resetSettings()" data-i18n="menus.customise.reset">Reset</span>
104+
</div>
105+
106+
<!-- LAN -->
107+
<div id="lanSettings" class="tabmenu">
108+
<h2 data-i18n="menus.lanconnection.title">Lan Connection</h2>
109+
<p data-i18n="menus.lanconnection.desc">Connect to external client.<br>Press connect and wait ~3 seconds.</p>
110+
<input type="text" id="lanInput" placeholder="192.168.x.x">
111+
<button onclick="connectToExternalLan()" data-i18n="menus.lanconnection.connect">Connect</button>
112+
</div>
113+
114+
<!-- languages -->
115+
<div id="languages" class="tabmenu">
116+
<h2 data-i18n="menus.language.title">Language</h2>
117+
<button data-lang="en">English</button>
118+
<button data-lang="zh">Chinese (简体字)</button>
119+
</div>
120+
121+
<!-- icons -->
122+
<span class="toolbaritem" onclick="toggleVisiblity('settings', this)"><div class="toolbarlabel"><i class="material-symbols-outlined" style="margin-top: 0.2em;">settings</i>customise</div></span>
123+
<span class="toolbaritem" onclick="toggleVisiblity('lanSettings', this)"><div class="toolbarlabel"><i class="material-symbols-outlined">magic_tether</i>LAN</div></span>
124+
<span class="toolbaritem" onclick="toggleVisiblity('languages', this)"><div class="toolbarlabel"><i class="material-symbols-outlined">translate</i>language</div></span>
125+
</div>
28126
</body>
29127

30128

31129
<!-- animation scripts -->
130+
<script type="text/javascript" src="toolbarfunctions.js"></script>
32131
<script type="text/javascript" src="osucanvas.js"></script>
33132
<script type="text/javascript" src="../globaldefault/js/animations.js"></script>
34133

35-
<!-- translations -->
134+
<!-- global scripts -->
135+
<script type="text/javascript" src="../globaldefault/js/mousehandlers.js"></script>
36136
<script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
37137
<script type="text/javascript" src="../globaldefault/data/languages.js" defer></script>
38138

0 commit comments

Comments
 (0)