67 lines
1.9 KiB
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>
|