ale/aiexperiments-ai-duet
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updates for heinz-nixdorf installation

Browse Source
This commit is contained in:
harmse 2018-08-06 17:43:00 -04:00
parent c17aa14601
commit 0033ff4a5c
6 changed files with 77 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/package.json
View File

@ -23,6 +23,7 @@
"events": "^1.1.0",
"exports-loader": "^0.6.3",
"file-loader": "^0.9.0",
"idle-timeout": "^1.0.0",
"jsmidgen": "^0.1.5",
"midi-file-parser": "^1.0.0",
"midiconvert": "0.4.1",

17
static/src/Main.js
View File

@ -22,9 +22,9 @@ import {Splash} from 'interface/Splash'
import {About} from 'interface/About'
import {Tutorial} from 'ai/Tutorial'
import 'babel-polyfill'
import IdleTimeout from 'idle-timeout'
/////////////// SPLASH ///////////////////
const about = new About(document.body)
const splash = new Splash(document.body)
splash.on('click', () => {
@ -39,6 +39,7 @@ about.on('close', () => {
if (!splash.loaded || splash.isOpen()){
splash.show()
} else {
keyboard.activate()
}
})
@ -49,6 +50,19 @@ about.on('open', () => {
}
})
//////////////// IDLE TIMER ///////////////
const idleTimeout = new IdleTimeout(
() => {
keyboard.deactivate();
splash.show();
keyboard._active = true;
},
{
element: document,
timeout: 60000,
loop: false
}
);
/////////////// PIANO ///////////////////
@ -63,6 +77,7 @@ const sound = new Sound()
sound.load()
keyboard.on('keyDown', (note) => {
idleTimeout.reset()
sound.keyDown(note)
ai.keyDown(note)
glow.user()

10
static/src/interface/Loader.js
View File

@ -47,16 +47,8 @@ export default class Loader extends EventEmitter{
this.loaded = false
Buffer.on('load', () => {
this.loaded = true
fillText.innerHTML = '<div id="piano"></div> <div id="play">PLAY</div>'
loader.classList.add('clickable')
loader.addEventListener('click', () => {
this.emit('click')
})
fillText.innerHTML = '<div id="piano"></div> <div id="play">Press any key to play</div></br><div id="germanPlay"> Drücken Sie eine beliebige Taste, um zu spielen.</div>'
})
Buffer.on('progress', (prog) => {

13
static/src/interface/Splash.js
View File

@ -38,9 +38,13 @@ class Splash extends events.EventEmitter{
titleContainer.appendChild(title)
const subTitle = document.createElement('div')
const germanSubTitle = document.createElement('div')
subTitle.id = 'subTitle'
germanSubTitle.id = 'germanSubTitle'
titleContainer.appendChild(subTitle)
titleContainer.appendChild(germanSubTitle)
subTitle.textContent = 'A piano that responds to you.'
germanSubTitle.textContent = ' Ein Klavier, das auf Ihre Eingaben antwortet.'
this._clicked = false
const loader = this._loader = new Loader(titleContainer)
@ -51,12 +55,13 @@ class Splash extends events.EventEmitter{
})
const howItWorks = document.createElement('div')
const germanHowItWorks = document.createElement('div')
howItWorks.id = 'howItWorks'
germanHowItWorks.id = 'germanHowItWorks'
titleContainer.appendChild(howItWorks)
howItWorks.textContent = 'How it works'
howItWorks.addEventListener('click', () => {
this.emit('about')
})
titleContainer.appendChild(germanHowItWorks)
howItWorks.textContent = 'This experiment lets you play a duet with the computer. Just play some notes, and the computer will respond to your melody.'
germanHowItWorks.textContent = 'Mit diesem Experiment können Sie ein Duett mit dem Computer spielen. Spielen Sie einfach ein paar Noten und der Computer reagiert auf Ihre Melodie.'
const badges = document.createElement('div')
badges.id = 'badges'

11
static/src/keyboard/Keyboard.js
View File

@ -28,7 +28,7 @@ class Keyboard extends events.EventEmitter{
this._container = container
this._active = false
this._active = true;
/**
* The audio key keyboard
@ -76,9 +76,12 @@ class Keyboard extends events.EventEmitter{
//the midi input
this._midi = new Midi()
this._midi.on('keyDown', (note) => {
this.keyDown(note)
this._emitKeyDown(note)
})
const splash = document.getElementById("splash");
splash.classList.add('disappear');
container.classList.add('focus');
this.keyDown(note);
this._emitKeyDown(note);
});
this._midi.on('keyUp', (note) => {
this.keyUp(note)
this._emitKeyUp(note)

77
static/style/splash.css
View File

@ -53,6 +53,17 @@ $topMargin: 35px;
text-align: center;
font-weight: 300;
}
#germanSubTitle {
margin-top: 0px;
letter-spacing: 0.8px;
line-height: 30px;
font-size: 15px;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-weight: 300;
}
#howItWorks {
$size : 20px;
@ -62,28 +73,26 @@ $topMargin: 35px;
width: auto;
display: inline-block;
margin-left: $margin;
&:before {
position: absolute;
width: $size;
height: $size;
margin-left: -$margin;
margin-top: $size / 4;
content : '';
background-image: url(../images/yellow_play_triangle.svg);
}
cursor: pointer;
#germanHowItWorks {
$size : 20px;
$margin: 0px;
transition: transform 0.1s;
&:hover {
transform: scale(1.1);
}
color: $orange;
width: auto;
display: inline-block;
margin-left: $margin;
letter-spacing: 0.8px;
line-height: 30px;
font-size: 15px;
margin-right: auto;
text-align: cenasdter;
font-weight: 300;
}
$loaderWidth: 200px;
$loaderHeight: 60px;
$loaderWidth: 500px;
$loaderHeight: 120px;
#loader {
position: relative;
@ -96,25 +105,6 @@ $topMargin: 35px;
margin-right: auto;
text-transform: uppercase;
&.clickable {
cursor: pointer;
transition: transform 0.1s;
&:hover {
transform: scale(1.1);
}
#fillText:active {
color: black!important;
background-color: $orange;
#piano {
filter: brightness(0);
}
}
}
#loaderText {
position: absolute;
width: 100%;
@ -126,7 +116,7 @@ $topMargin: 35px;
#fill {
position: absolute;
height: 100%;
width: 0%;
width: 100%;
overflow: hidden;
background-color: black;
@ -135,7 +125,7 @@ $topMargin: 35px;
width: $loaderWidth;
height: 100%;
color: $orange;
line-height: 88px;
$imgWidth: 40px;
$margin : 52px;
@ -145,9 +135,18 @@ $topMargin: 35px;
}
#play {
margin-left: 150px;
right: $margin;
position: relative;
/*display: inline-block;*/
}
#germanPlay {
margin-left: 120px;
right: $margin;
position: absolute;
padding-top: 30px;
/*display: inline-block;*/
}
#piano {
left: $margin;
width: $imgWidth;