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", "midi-channel-name": "conductorToms",
"image": { "image": {
"filename": "toms.svg", "filename": "toms.svg",
"yPos": "81%", "yPos": "62%",
"width": "100", "width": "100",
"height": "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) { export async function sendMidiMessage(midiChannelName, sampleNumber) {
try { try {
const midiAccess = await navigator.requestMIDIAccess();
const availableMidiOutputs = midiAccess.outputs.values(); const availableMidiOutputs = midiAccess.outputs.values();
let midiOut; let midiOut;

5
src/script.js
View File

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

9
styles.css
View File

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