lauchmelder/MIDI_practice
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

initial commit; implemented button recognition

Browse source
This commit is contained in:
krippix 2023-06-04 03:01:38 +02:00
commit 575e7ca11e
7 changed files with 1065 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
docker-compose.yml
nginx.conf
dockerfile
*.pem
*.key

0
README.md Normal file
View file

26
html/assets/css/base.css Normal file
View file

@ -0,0 +1,26 @@
body {
margin: 0;
background-color: #d3d3d3;
}
h1 {
margin: 0;
}
img {
height: auto;
width: 100%;
}
#titlebar {
font-family: 'arial';
color: white;
padding: 20px;
margin: 0px;
background-color: #333;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.container {
max-width: 1920px;
background-color: white;
display: flex;
margin: 10px auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

20
html/assets/css/reset.css Normal file
View file

@ -0,0 +1,20 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

937
html/assets/img/piano-keyboard.svg Normal file
View file

@ -0,0 +1,937 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:ns1="http://sozi.baierouge.fr"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg4254"
sodipodi:docname="piano-keyboard.svg"
viewBox="0 0 4346.4 524.22"
version="1.1"
inkscape:version="0.48.0 r9654"
>
<title
id="title5312"
>Standard 88-key Piano Keyboard</title
>
<sodipodi:namedview
id="base"
fit-margin-left="0"
inkscape:zoom="0.22627417"
borderopacity="1.0"
inkscape:current-layer="layer1"
inkscape:cx="4904.2815"
inkscape:cy="180.26814"
fit-margin-right="0"
inkscape:window-maximized="0"
showgrid="false"
width="0mm"
inkscape:guide-bbox="true"
units="mm"
showguides="true"
bordercolor="#666666"
inkscape:window-x="123"
inkscape:window-y="180"
fit-margin-bottom="0"
inkscape:window-width="2435"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
pagecolor="#ffffff"
inkscape:document-units="px"
inkscape:window-height="757"
fit-margin-top="0"
/>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(-.15625 -526.12)"
>
<path
id="4"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m168.15 527.93h45.723v345.34h34.427v172.13l-6.4717 3.7365h-67.223l-6.8627-3.9623z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="5"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m221.54 531.97v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="6"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m269.66 527.41v345.75h-18.257v171.92l7.5613 4.3655h65.849l6.9048-3.9864v-172.49h-17.745v-345.56z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="7"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m321.25 531.42v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="8"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m369.87 527.41v345.59h-34.427v172.13l7.7444 4.4711h65.412l7.4137-4.2801v-517.91z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="9"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m419.63 527.41v517.32l8.3497 4.8207h65.345l6.8121-3.9331v-172.35h-37.339v-345.86z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="10"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m467.99 531.42v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m563.74 531.42v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m659.49 531.42v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m515.65 527.41v345.46h-11.834v172.4l6.8212 3.9382h66.201l6.6943-3.8651v-172.48h-24.983v-345.46z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m611.53 527.41v345.59h-23.534v172l7.8723 4.5451h65.688l7.0848-4.0904v-172.72h-14.212v-345.32z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m707.15 527.41v345.59h-36.175v172.4l7.4845 4.3211h65.807l7.2323-4.1755v-518.14z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-1"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m72.189 531.24v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-4"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m0.74026 527.29-0.041536 517.52 7.8723 4.5451h65.688l7.0848-4.0903 0.47067-172.66h-14.212v-345.32z"
inkscape:export-ydpi="170.04636"
sodipodi:nodetypes="ccccccccc"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-3"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m119.85 527.23v345.59h-36.175v172.4l7.4845 4.3211h65.807l7.2323-4.1756v-518.14z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-4"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m755.1 527.72h45.723v345.34h34.427v172.13l-6.4717 3.7362h-67.223l-6.8626-3.962z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-9"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m808.49 531.77v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-7"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m856.61 527.21v345.75h-18.257v171.92l7.5614 4.3655h65.849l6.9047-3.9864v-172.49h-17.745v-345.56z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-4"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m908.19 531.22v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-8"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m956.82 527.21v345.59h-34.427v172.13l7.7444 4.4714h65.412l7.4137-4.2803v-517.91z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-8"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1006.6 527.21v517.32l8.3498 4.8208h65.345l6.8118-3.9328v-172.35h-37.339v-345.86z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-2"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1054.9 531.22v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-1"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1150.7 531.22v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-4"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1246.4 531.22v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-8"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1102.6 527.21v345.46h-11.834v172.4l6.8212 3.9381h66.201l6.6943-3.865v-172.48h-24.983v-345.46z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-0"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1198.5 527.21v345.59h-23.534v172l7.8722 4.545h65.688l7.0848-4.0902v-172.72h-14.212v-345.32z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-9"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1294.1 527.21v345.59h-36.175v172.4l7.4847 4.3212h65.806l7.2325-4.1758v-518.14z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-7"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1341.4 528.03h45.723v345.34h34.427v172.13l-6.4717 3.7364h-67.223l-6.8629-3.9622z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-7"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1394.8 532.08v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-0"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1442.9 527.51v345.75h-18.258v171.92l7.5616 4.3655h65.849l6.9049-3.9865v-172.49h-17.745v-345.56z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-0"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1494.5 531.52v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-7"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1543.1 527.51v345.59h-34.426v172.13l7.7442 4.4712h65.412l7.4137-4.2803v-517.91z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-81"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1592.8 527.51v517.32l8.3493 4.8206h65.345l6.8124-3.9331v-172.35h-37.339v-345.86z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-5"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1641.2 531.52v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-3"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1737 531.52v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-7"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1832.7 531.52v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-5"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1688.9 527.51v345.46h-11.834v172.4l6.8211 3.9382h66.201l6.6944-3.8648v-172.48h-24.984v-345.46z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-06"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1784.7 527.51v345.59h-23.534v172l7.8724 4.5451h65.688l7.0848-4.0905v-172.72h-14.212v-345.32z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-2"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1880.4 527.51v345.59h-36.175v172.4l7.4846 4.3208h65.806l7.2325-4.1751v-518.14z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-4-9"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m1928.3 527.82h45.723v345.34h34.427v172.13l-6.4717 3.7364h-67.223l-6.8628-3.9621z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-9-3"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m1981.7 531.87v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-7-6"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m2029.8 527.31v345.75h-18.258v171.92l7.5614 4.3655h65.849l6.9046-3.9865v-172.49h-17.745v-345.56z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-4-6"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m2081.4 531.32v334.34h42.601v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-8-1"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m2130 527.31v345.59h-34.427v172.13l7.7442 4.471h65.412l7.4136-4.2801v-517.91z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-8-1"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m2179.8 527.31v517.32l8.3498 4.8209h65.345l6.8121-3.9332v-172.35h-37.339v-345.86z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-2-7"
style="stroke:#000000;stroke-width:1.065px;fill:#000000"
d="m2228.1 531.32v334.34h42.6v-334.15z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-1-1"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2323.9 531.3v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-4-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2419.2 531.3v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-8-9"
style="stroke:#000000;stroke-width:1.065px;fill:#ffffff"
d="m2275.8 527.31v345.46h-11.834v172.4l6.8211 3.9382h66.201l6.6943-3.8647v-172.48h-24.983v-345.46z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-0-1"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2371.5 527.3v344.14h-23.435v171.28l7.8393 4.5263h65.413l7.055-4.0736v-172h-14.153v-343.87z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-9-1"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2466.7 527.3v344.14h-36.024v171.68l7.453 4.3029h65.531l7.2019-4.158v-515.97z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-0"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2513.5 527.36h45.531v343.9h34.282v171.41l-6.4444 3.7209h-66.941l-6.8338-3.9457z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-95"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2566.6 531.39v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-3"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2614.5 526.85v344.3h-18.181v171.2l7.5299 4.3472h65.573l6.8759-3.9694v-171.77h-17.671v-344.11z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-5"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2665.9 530.85v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-9"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2714.3 526.85v344.14h-34.282v171.41l7.7118 4.4527h65.138l7.3825-4.2625v-515.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-6"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2763.9 526.85v515.15l8.3147 4.8005h65.071l6.7834-3.9166v-171.63h-37.182v-344.41z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2812 530.85v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m2907.4 530.85v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-0"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3002.7 530.85v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-1"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2859.5 526.85v344.01h-11.785v171.68l6.7926 3.9216h65.924l6.6663-3.8489v-171.75h-24.879v-344.01z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-6"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m2955 526.85v344.14h-23.435v171.28l7.8392 4.5263h65.413l7.055-4.0734v-172h-14.153v-343.87z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3050.2 526.85v344.14h-36.023v171.68l7.4531 4.3034h65.531l7.202-4.1584v-515.97z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-4-5"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3097.9 527.16h45.532v343.9h34.282v171.41l-6.4448 3.7209h-66.941l-6.8339-3.9459z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-9-0"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3151.1 531.19v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-7-62"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3199 526.65v344.3h-18.181v171.2l7.5297 4.3471h65.573l6.876-3.9695v-171.77h-17.671v-344.11z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-4-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3250.4 530.64v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-8-9"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3298.8 526.65v344.14h-34.282v171.41l7.712 4.4526h65.138l7.3825-4.2625v-515.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-8-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3348.4 526.65v515.15l8.3145 4.8005h65.071l6.7834-3.9167v-171.63h-37.182v-344.41z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-2-4"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3396.5 530.64v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-1-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3491.9 530.64v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-4-2"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3587.2 530.64v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-8-0"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3444 526.65v344.01h-11.785v171.68l6.7927 3.9214h65.924l6.6662-3.8486v-171.75h-24.879v-344.01z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-0-4"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3539.5 526.65v344.14h-23.435v171.28l7.8392 4.5262h65.413l7.0552-4.0734v-172h-14.153v-343.87z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-9-0"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3634.7 526.65v344.14h-36.023v171.68l7.4532 4.3031h65.531l7.2024-4.1583v-515.97z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-7-7"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3681.7 527.46h45.531v343.9h34.283v171.41l-6.4447 3.7207h-66.941l-6.834-3.9455z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-4-7-5"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3734.9 531.5v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4819-5-0-7"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3782.8 526.95v344.3h-18.181v171.2l7.5298 4.3473h65.573l6.8758-3.9695v-171.77h-17.671v-344.11z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-6-0-2"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3834.2 530.95v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4841-0-7-6"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3882.6 526.95v344.14h-34.282v171.41l7.712 4.4524h65.138l7.3827-4.2623v-515.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4873-1-81-9"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m3932.2 526.95v515.15l8.3146 4.8004h65.072l6.7832-3.9167v-171.63h-37.182v-344.41z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-0-2-5-3"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m3980.3 530.95v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-4-6-3-3"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m4075.7 530.95v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4307-7-08-1-7-2"
style="stroke:#000000;stroke-width:1.0606px;fill:#000000"
d="m4171 530.95v332.94h42.422v-332.75z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4907-8-5-8"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m4027.8 526.95v344.01h-11.785v171.68l6.7923 3.9218h65.924l6.6661-3.8488v-171.75h-24.878v-344.01z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4909-2-06-2"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m4123.3 526.95v344.14h-23.435v171.28l7.8395 4.526h65.413l7.0548-4.0734v-172h-14.153v-343.87z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4911-0-2-1"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m4218.5 526.95v344.14h-36.023v171.68l7.4529 4.3028h65.531l7.2021-4.1579v-515.97z"
inkscape:export-ydpi="170.04636"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
<path
id="path4305-5-4-9-6"
style="stroke:#000000;stroke-width:1.0606px;fill:#ffffff"
d="m4266.2 527.26h79.814v515.31l-6.4447 3.7205h-66.941l-6.8341-3.9456z"
inkscape:export-ydpi="170.04636"
sodipodi:nodetypes="ccccccc"
inkscape:export-filename="/files1/data/projects/EducationalGames/musicmaster/graphics/piano-keyboard.png"
inkscape:connector-curvature="0"
inkscape:export-xdpi="170.04636"
/>
</g
>
<metadata
>
<rdf:RDF
>
<cc:Work
>
<dc:format
>image/svg+xml</dc:format
>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
/>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
/>
<dc:publisher
>
<cc:Agent
rdf:about="http://openclipart.org/"
>
<dc:title
>Openclipart</dc:title
>
</cc:Agent
>
</dc:publisher
>
<dc:title
>Standard 88-key Piano Keyboard</dc:title
>
<dc:date
>2011-02-14T04:42:21</dc:date
>
<dc:description
>Standard 88-key piano keyboard. Distance between octaves is approximately 165 mm, per http://en.wikipedia.org/wiki/Musical_keyboard. Relative key dimensions similar to some commercial electric pianos.</dc:description
>
<dc:source
>https://openclipart.org/detail/118225/standard-88-key-piano-keyboard-by-markroth8</dc:source
>
<dc:creator
>
<cc:Agent
>
<dc:title
>markroth8</dc:title
>
</cc:Agent
>
</dc:creator
>
<dc:subject
>
<rdf:Bag
>
<rdf:li
>keyboard</rdf:li
>
<rdf:li
>piano</rdf:li
>
</rdf:Bag
>
</dc:subject
>
</cc:Work
>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:License
>
</rdf:RDF
>
</metadata
>
</svg
>
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

67
html/assets/scripts/midi.js Normal file
View file

@ -0,0 +1,67 @@
// prepare svg object for later use
var keyboard = document.getElementById("piano");
var svgDoc; // loaded keyboard svg
var keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
window.addEventListener("load", function() {
svgDoc = keyboard.contentDocument;
console.log("image loaded");
}, false)
// press or unpress keyboard button
function setKeyState(note, state) {
let key = svgDoc.getElementById(String(note));
console.log(key);
if (state) {
key.style.fill = "red";
} else if (keysB.includes(note)) {
key.style.fill = "black";
} else {
key.style.fill = "white";
}
}
// Check if browser supports MIDI
if (navigator.requestMIDIAccess) {
console.log('This browser supports WebMIDI!');
} else {
console.log('WebMIDI is not supported in this browser.');
}
// Attempt to establish a connection to the MIDI device
navigator.requestMIDIAccess()
.then(onMIDISuccess, onMIDIFailure);
function onMIDISuccess(midiAccess) {
console.log(midiAccess);
for (var input of midiAccess.inputs.values()) {
input.onmidimessage = getMIDIMessage;
}
}
function onMIDIFailure() {
console.log('Could not access your MIDI devices.');
}
function getMIDIMessage(midiMessage) {
var command = midiMessage.data[0];
var note = midiMessage.data[1] - 20; // sorry midi standard
var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;
if (command == 144){
console.log(note);
if (velocity == 0) {
setKeyState(note, false);
} else {
setKeyState(note, true);
}
}
if (command == 144 && velocity != 0) {
} else if (command == 144 && velocity == 0)
console.log(command,note,velocity);
}

10
html/index.html Normal file
View file

@ -0,0 +1,10 @@
<head>
<title>MidiTrainer</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/base.css">
</head>
<body>
<div class="container">
<object id="piano" data="assets/img/piano-keyboard.svg" type="image/svg+xml" width="100%" height="300"type="image/svg+xml"></object>
<script src="assets/scripts/midi.js"></script>
</body>