arch/osc-triggers
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add website

Browse source
This commit is contained in:
Gabriel Simmer 2023-04-25 10:08:19 +01:00
parent 16a9b23f11
commit 0aa7b58fd3
Signed by: arch
GPG key ID: C81B106D46C5B875
2 changed files with 241 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
website/index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OSC Triggers</title>
<meta name="description" content="OSC Keybind Triggers" />
<meta name="author" content="Gabriel Simmer" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="/xess.css" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏳️‍🌈</text></svg>">
</head>
<body>
<main>
<h1>OSC Triggers</h1>
<h2>Trigger keypresses and macros from OSC messages</h2>
<hr />
<h3>What is OSC?</h3>
<p>OSC is a communication protocol primarily intended for sound devices but has been
adopted for other things as well, such as VRChat leveraging it to make interactions
between the game and other software possible.</p>
<h3>What is OSC Triggers?</h3>
<p>OSC Triggers allows us to map "events" to actual keypresses on the host computer,
either over the network or from localhost. It's currently developed with a focus
on VRChat OSC integration, but is written in a fairly generic way.</p>
<h3>How do I use it?</h3>
<p>OSC Triggers doesn't <i>currently</i> have a user interface, but the configuration file is
designed to be as straightforward as possible with <a href="https://toml.io/en/">TOML</a>.
Here's an example configuration file that will issue a keypress for the F24 key
when the user mutes themselves in VRChat:
<pre><code>[[mapping]]
event = "/avatar/parameters/MuteSelf"
key = "F24"</code></pre>
The event is entirely dependant on the program you're using. You can see an example
list of VRChat OSC events <a href="https://raw.githubusercontent.com/vrchat-community/osc/main/files/avatar-parameters/configs/example-avatar-config.json">here</a>. Custom parameters can be added with some work in Unity.</p>
<h3>Where can I download it?</h3>
<p>Downloads are coming soon. If you know a bit of Rust, you can build it yourself from
the repository <a href="https://git.sr.ht/~gmem/osc-triggers">here</a>.</p>
<h3>How can I get in touch?</h3>
<p>You can reach out with Mastodon at <a href="https://floofy.tech/@arch">floofy.tech/@arch</a>, or with Discord: <code>arch#1919</code>. No, there is no Discord server.</p>
</main>
</body>

195
website/xess.css Normal file
View file

@ -0,0 +1,195 @@
/*
Copyright (c) 2021 Xe <me@christine.website>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
:root {
--selection: hsla(var(--accent-color), 80%, 30%, 100%);
--selection-light: hsla(var(--accent-color), 50%, 80%, 100%);
--background: hsla(var(--background-color), 100%, 10%, 100%);
--background-light: hsla(var(--background-color), 10%, 95%, 100%);
--text: hsla(var(--text-color), 0%, 90%, 100%);
--text-light: hsla(var(--text-color), 90%, 5%, 100%);
--pre-background: hsla(var(--background-color), 90%, 5%, 100%);
--pre-background-light: hsla(var(--background-color), 10%, 80%, 100%);
--a-background: hsla(var(--background-color), 90%, 5%, 100%);
--a-background-light: hsla(var(--background-color), 30%, 90%, 100%);
--a-color: hsla(var(--accent-color), 70%, 85%, 100%);
--a-color-light: hsla(var(--accent-color), 80%, 10%, 100%);
--blockquote-border: 0.5ch solid hsla(var(--accent-color), 80%, 80%, 100%);
--blockquote-border-light: 0.5ch solid hsla(var(--accent-color), 50%, 30%, 100%);
}
main {
font-family: var(--font-family);
max-width: var(--width);
padding: var(--padding);
margin: auto;
}
@media only screen and (max-device-width: 736px) {
main {
padding: 0rem;
}
}
::selection {
background: var(--selection);
}
body {
background: var(--background);
color: var(--text);
}
pre {
font-family: var(--pre-font-family);
background-color: var(--pre-background);
padding: 1em;
border: 0;
}
a, a:active, a:visited {
color: var(--selection);
background-color: var(--a-background);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--header-font-family);
margin-bottom: .1rem;
}
blockquote {
border-left: var(--blockquote-border);
margin: 0.5em 10px;
padding: 0.5em 10px;
}
footer {
align: center;
}
@media (prefers-color-scheme: light) {
::selection {
background: var(--selection-light);
}
body {
background: var(--background-light);
color: var(--text-light);
}
pre {
background-color: var(--pre-background-light);
padding: 1em;
border: 0;
}
a, a:active, a:visited {
color: var(--a-color-light);
background-color: var(--a-background-light);
}
h1, h2, h3, h4, h5 {
margin-bottom: .1rem;
}
blockquote {
border-left: var(--blockquote-border-light);
margin: 0.5em 10px;
padding: 0.5em 10px;
}
}
/** Custom **/
main {
font-family: monospace, monospace;
max-width: 38rem;
padding: 2rem;
margin: auto;
}
@media only screen and (max-device-width: 736px) {
main {
padding: 0rem;
}
}
::selection {
background: #d3869b;
}
body {
background: #282828;
color: #ebdbb2;
}
pre {
background-color: #3c3836;
padding: 1em;
border: 0;
}
a, a:active, a:visited {
color: #b16286;
background-color: #1d2021;
}
h1, h2, h3, h4, h5 {
margin-bottom: .1rem;
}
blockquote {
border-left: 1px solid #bdae93;
margin: 0.5em 10px;
padding: 0.5em 10px;
}
footer {
align: center;
}
@media (prefers-color-scheme: light) {
body {
background: #fbf1c7;
color: #3c3836;
}
pre {
background-color: #ebdbb2;
padding: 1em;
border: 0;
}
a, a:active, a:visited {
color: #b16286;
background-color: #f9f5d7;
}
h1, h2, h3, h4, h5 {
margin-bottom: .1rem;
}
blockquote {
border-left: 1px solid #655c54;
margin: 0.5em 10px;
padding: 0.5em 10px;
}
}