skelbon
/
conductor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout done

This commit is contained in:
joe 2025-04-24 13:19:06 +01:00
parent e6ed178aac
commit 0e31c0ea1d
5 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/instruments/instruments.json
View File

@ -92,7 +92,7 @@
"midi-channel-name": "conductorToms",
"image": {
"filename": "toms.svg",
"yPos": "81%",
"yPos": "62%",
"width": "100",
"height": "100"
}

2
assets/instruments/orchestral-bass/bass.svg
View File

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.33 18.79" width="100" height="100"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M19.09,7.44c0,4.11-3.32,7.44-7.42,7.44s-7.42-3.33-7.42-7.44S7.56,0,11.66,0s7.42,3.33,7.42,7.44"/><path class="cls-2" d="M22.83,9.31c0,4.96-5,8.98-11.16,8.98S.5,14.27.5,9.31"/></g></svg>
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.33 18.79" width="200" height="200"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M19.09,7.44c0,4.11-3.32,7.44-7.42,7.44s-7.42-3.33-7.42-7.44S7.56,0,11.66,0s7.42,3.33,7.42,7.44"/><path class="cls-2" d="M22.83,9.31c0,4.96-5,8.98-11.16,8.98S.5,14.27.5,9.31"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 482 B

1
src/midi.js
View File

@ -1,6 +1,5 @@
export async function sendMidiMessage(midiChannelName, sampleNumber) {
try {
const midiAccess = await navigator.requestMIDIAccess();
const availableMidiOutputs = midiAccess.outputs.values();
let midiOut;

5
src/script.js
View File

@ -4,8 +4,8 @@ import { DataStream } from "./socket.js";
import { Renderer } from "./render.js";
document.addEventListener("DOMContentLoaded", async () => {
sendMidiMessage();
const midiAccess = await navigator.requestMIDIAccess();
const conductor = new Conductor();
await conductor.init();
const dataStream = new DataStream();
@ -24,8 +24,7 @@ document.addEventListener("DOMContentLoaded", async () => {
const randomSampleNumber = Math.floor(Math.random() * numSamples);
renderer.placeIcon(selectedInstrument);
sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1);
console.log(selectedInstrument.midiChannelName, randomSampleNumber + 1);
sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess);
});
dataStream.init();

9
styles.css
View File

@ -78,6 +78,7 @@ html {
position: absolute;
top: 0;
left: -10px;
height: 12vh;
width: 102%; /* Matches JS padding */
display: block;
pointer-events: none;
@ -89,7 +90,7 @@ html {
position: relative;
display: block;
width: 100%;
height: 10vh;
height: 12vh;
background-color: rgb(24,24,24);
padding-top: 30px;
padding-bottom: 20px;
@ -183,7 +184,7 @@ html {
background-color: rgb(24,24,24);
/* height: 20vh; */
font-family: Helvetica;
font-size: clamp(18px,1.1vw, 18px);
font-size: clamp(14px,1.1vw, 18px);
}
@ -214,9 +215,9 @@ html {
top: 0;
bottom: 0;
width: 2px;
height: 82%;
height: 92%;
background-color: red;
z-index: 999;
z-index: 0;
animation: moveRight 10s linear infinite;
will-change: transform;
}