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

update loader

Browse Source
This commit is contained in:
harmse 2018-08-08 13:16:29 -04:00
parent 0033ff4a5c
commit 896d778dee
3 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/images/keyboard_icon_CMedit.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 292.7 119.8" style="enable-background:new 0 0 292.7 119.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FBBC05;}
</style>
<g>
<polyline class="st0" points="131,92 131,65.9 124.7,65.9 124.7,30.4 110.2,30.4 110.2,92 "/>
<polyline class="st0" points="155.9,92 155.9,65.9 149.7,65.9 149.7,30.4 141.4,30.4 141.4,65.9 135.1,65.9 135.1,92 "/>
<polyline class="st0" points="255.8,92 255.8,65.9 249.6,65.9 249.6,30.4 241.3,30.4 241.3,65.9 235,65.9 235,92 "/>
<polyline class="st0" points="180.9,92 180.9,65.9 180.9,30.4 174.6,30.4 166.3,30.4 166.3,65.9 160.1,65.9 160.1,92 "/>
<polyline class="st0" points="205.9,92 205.9,65.9 199.6,65.9 199.6,30.4 185.1,30.4 185.1,92 "/>
<polyline class="st0" points="230.8,92 230.8,65.9 224.6,65.9 224.6,30.4 216.3,30.4 216.3,65.9 210,65.9 210,92 "/>
<polyline class="st0" points="280.8,92 280.8,65.9 280.8,30.4 274.5,30.4 266.2,30.4 266.2,65.9 260,65.9 260,92 "/>
<polyline class="st0" points="81.1,92 81.1,65.9 74.9,65.9 74.9,30.4 66.6,30.4 66.6,65.9 60.3,65.9 60.3,92 "/>
<polyline class="st0" points="31.2,92 31.2,65.9 24.9,65.9 24.9,30.4 10.4,30.4 10.4,92 "/>
<polyline class="st0" points="56.1,92 56.1,65.9 49.9,65.9 49.9,30.4 41.6,30.4 41.6,65.9 35.3,65.9 35.3,92 "/>
<polyline class="st0" points="106.1,92 106.1,65.9 106.1,30.4 99.8,30.4 91.5,30.4 91.5,65.9 85.3,65.9 85.3,92 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -48,7 +48,8 @@ export default class Loader extends EventEmitter{
Buffer.on('load', () => { Buffer.on('load', () => {
this.loaded = true this.loaded = true
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>' loader.classList.add("loaded")
fillText.innerHTML = '<div id="piano">'
}) })
Buffer.on('progress', (prog) => { Buffer.on('progress', (prog) => {

29
static/style/splash.css
View File

@ -91,8 +91,8 @@ $topMargin: 35px;
font-weight: 300; font-weight: 300;
} }
$loaderWidth: 500px; $loaderWidth: 398px;
$loaderHeight: 120px; $loaderHeight: 118px;
#loader { #loader {
position: relative; position: relative;
@ -125,7 +125,6 @@ $topMargin: 35px;
width: $loaderWidth; width: $loaderWidth;
height: 100%; height: 100%;
color: $orange; color: $orange;
line-height: 88px;
$imgWidth: 40px; $imgWidth: 40px;
$margin : 52px; $margin : 52px;
@ -148,13 +147,13 @@ $topMargin: 35px;
/*display: inline-block;*/ /*display: inline-block;*/
} }
#piano { #piano {
left: $margin; width: 100%;
width: $imgWidth;
height: 100%; height: 100%;
background-image : url(../images/keyboard_icon.svg); background-image : url(../images/keyboard_icon_CMedit.svg);
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
} }
@ -164,6 +163,24 @@ $topMargin: 35px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
} }
&.loaded {
margin-top: $topMargin;
border: none;
width: 400px;
height: 120px;
background-color: transparent;
#loaderText {
background-color: transparent;
}
#fillText {
background-color: transparent;
}
#fill {
background-color: transparent;
}
}
} }
} }