gravitacija-perspektive/webmidi/midipanel.html

67 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Gravitacija Perspektive Midi</title>
<script src="touchmidi_2.2.0.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<style type="text/css">
:root {
/* these variables are used everywhere */
--bg: black; /* background colour */
--b-radius: min(1.9vmin, 15px); /* border radius */
--b-width: 0.3rem; /* border thickness */
--spacing: 0.3rem; /* widget spacing */
--font: 'PT Sans', sans-serif; /* Consolas, 'Courier New', monospace; */
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
color: white;
background-color: var(--bg);
font-family: var(--font);
touch-action: none;
}
body {
display: flex;
flex-direction: column;
}
midi-button {
max-height: 7rem;
}
.kontrole {
display: flex;
flex-direction: column;
height: 100%;
}
</style>
</head>
<body>
<section class="kontrole">
<group-row>
<midi-encoder cc="75" label="s1\n%v" value="64"></midi-encoder>
<midi-encoder cc="76" label="s2\n%v" value="64"></midi-encoder>
<midi-encoder cc="77" label="s3\n%v" value="64"></midi-encoder>
</group-row>
<group-row>
<midi-button toggle cc="78" label="Mute s1" colour="red" value="0" value-off="127"></midi-button>
<midi-button toggle cc="79" label="Mute s2" colour="red" value="0" value-off="127"></midi-button>
<midi-button toggle cc="80" label="Mute s3" colour="red" value="0" value-off="127"></midi-button>
</group-row>
<group-row>
<midi-button cc="81" label="cal\ns1"></midi-button>
<midi-button cc="82" label="cal\ns2"></midi-button>
<midi-button cc="83" label="cal\ns3"></midi-button>
</group-row>
</section>
</body></html>