Mercurial > hg > nodescore
changeset 79:e4db7d4d1d08
major UI fixes for martin version interface
author | Rob Canning <rob@foo.net> |
---|---|
date | Tue, 15 Jul 2014 23:49:44 +0100 |
parents | 0bcba76683f2 |
children | df5128a86598 |
files | www/martin/css/chat-tablet.css www/martin/css/chat.css www/martin/css/nodescore.css www/martin/css/svg-stylesheet.css www/martin/index.html www/martin/js/controlseq.js www/martin/js/nodescore-client.js www/martin/js/nodescore-slides.js www/martin/svg/svg-stylesheet.css www/martin/transport.html |
diffstat | 10 files changed, 270 insertions(+), 271 deletions(-) [+] |
line wrap: on
line diff
--- a/www/martin/css/chat-tablet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/chat-tablet.css Tue Jul 15 23:49:44 2014 +0100 @@ -6,7 +6,7 @@ #chat { position: relative; border: 0px solid #ccc; - background: black; + background: white; border-radius: 15px; } #nickname, @@ -16,11 +16,11 @@ z-index: 100; left: 0; top: 0; - background: black; + background: white; text-align: center; width: 250px; font: 15px Georgia; - color: white; + color: black; display: block; } #nickname .wrap, @@ -30,40 +30,40 @@ #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; } .connected #connecting { display: none; } .nickname-set #nickname { display: none; } -#messages { height: 100px; background: black; } -#messages em { color: white; } +#messages { height: 100px; background: white; } +#messages em { color: black; } #messages p { padding: 0; margin: 0; font: 14px Helvetica, Arial; padding: 0px 10px; - color: white; + color: black; } #messages p b { display: inline-block; padding-right: 10px; - color: white; + color: black; } #messages p:nth-child(even) { - background: black; - color: white; + background: white; + color: black; } #messages #nicknames { - background: black; + background: white; padding: 2px 4px 4px; font: 11px Helvetica; - color: white; + color: black; } #messages #nicknames span { color: #000; - color: white; + color: black; } #messages #nicknames b { display: inline-block; - background: black; + background: white; margin-right: 5px; - color: yellow; + color: black; } #messages #lines { height: 80px; @@ -98,7 +98,7 @@ -webkit-border-radius: 3px; } #send-message { - background: black; + background: white; position: relative; border-radius:5px; } @@ -109,8 +109,8 @@ line-height: 20px; vertical-align: middle; width: 200px; - background:black; - color: yellow; + background:white; + color: black; border-radius:5px; border: 1px solid white; }
--- a/www/martin/css/chat.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/chat.css Tue Jul 15 23:49:44 2014 +0100 @@ -6,7 +6,7 @@ #chat { position: relative; border: 0px solid #ccc; - background: black; + background: white; border-radius: 15px; } #nickname, @@ -16,7 +16,7 @@ z-index: 100; left: 0; top: 0; - background: black; + background: white; text-align: center; width: 350px; font: 15px Georgia; @@ -49,7 +49,7 @@ #messages { height: 160px; !background: #eee; - background: black; + background: white; } #messages em { !text-shadow: 0 1px 0 #fff; @@ -70,22 +70,22 @@ } #messages p:nth-child(even) { !background: #fafafa; - background: black; + background: white; color: white; } #messages #nicknames { - background: black; + background: white; padding: 2px 4px 4px; font: 11px Helvetica; color: white; } #messages #nicknames span { - color: #000; + color: white; } #messages #nicknames b { display: inline-block; - background: black; + background: white; margin-right: 5px; color: yellow; }
--- a/www/martin/css/nodescore.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/nodescore.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,6 +1,4 @@ body{ - !background-color: white; - !color: white; font: 12px Helvetica, Arial; margin-left:0px; height:100%; @@ -9,36 +7,30 @@ h3,h4,h5,h6 { width: 400px; - ! background-color: white; display: inline; color: #666; z-index: 2; } -h1{ !background-color: black; - !color:white; +h1{ font: 44px Helvetica, Arial; - } -h2 { font: 28px Helvetica, Arial; - !color:white +h2 { font: 18px Helvetica, Arial; } h3{ font: 12px Helvetica, Arial; - !color:white } -h4{ !background-color: black; +h4{ font: 19px Helvetica, Arial; text-align: center; margin-left:auto; margin-right:auto; - !color:white } a:link { color:#666;} a:visited { color: #666;} a:hover { color: black; background-color:orange; } -a:active { color: black;background-color:white; } +a:active { color: black; background-color:white; } ul, li, h4, h3, h2, h1, p{ padding:0; @@ -48,14 +40,12 @@ .outermaster{ float:right; - !margin-top:50px; height: 580px; width: 1020px; border-radius: 15px; position: absolute; - top:130px; + top:30px; left: 3000px; - !+filter: invert(100%); margin: 0 auto; } @@ -64,20 +54,20 @@ width: 100%; text-align: center; border-radius: 15px; - background-color:black; border: 0px solid blue; - position: absolute; - color: white; - top: 0px; - +filter: invert(100%); - z-index:1111; + !position: absolute; + !top: 10px; + !z-index:1111; + min-height:470px; margin-left: 0px; - padding:0px; + padding-top:20px; } + + .xunit{ display:block; -background:black; + width: 155px; height: 70px; padding: 5px 5px 5px 5px; @@ -86,15 +76,14 @@ .precd{ height:70px; -color:white; + } #info{ position: absolute; -border: 0px solid red; border-radius:15px; -top: 450px; -!padding: 5px 5px 5px 5px; +float:bottom; +!top: 450px; height: 135px; width: 100%; } @@ -129,7 +118,7 @@ margin-left:6%; border: 1px solid gray; padding: 5px 5px 5px 5px ; - background: black; + opacity:1; float:left; } @@ -146,28 +135,15 @@ float:right; font-size:1em; } + #preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;} -#timeinfo{ - border-radius: 15px; - height:80px; - width: 95%; - margin: 0px; - padding: 5px 5px 5px 5px ; - background: transparent; - position:relative; - top:30px; -} #remainingtime{ padding:0; margin:0; - font-size:1.4em; - color:white; - position:relative; - left:40px; - top:90px; - width:120px; + font-size:2.6em; + width:180px; float:left; background-color:transparent; } @@ -180,7 +156,6 @@ border: 0px solid gray; position:absolute; top: 0px; - background: black; opacity:1; } @@ -188,31 +163,27 @@ border-radius: 15px; border: 1px solid blue; padding: 1px 1px 1px 1px ; - background: black; + width: 99%; height: 490px; } .svgmusic { padding:0px; - border: 1px solid gray; + border: 1px dashed gray; display:block; border-radius: 15px; margin: 0px; width: 100%; height: 445px; + min-height: 445px; + } -svg { background-color: black; width:1000px; height:330px; display:block;} -line { stroke: white; } -text { fill: white;} -path { stroke: white; fill: white; } -rect { fill: white; } -polygon { fill: white; } -circle { stroke: white; } - -#thesquare{ position:absolute; width:700px; } +#thesquare{ position:absolute; + width:700px; + } .magicsquare { border: 1px solid white; padding: 2px 2px 2px 2px; @@ -220,7 +191,6 @@ height: 100px; float: left; font-size: 3em; - color:white; text-align:center } @@ -251,18 +221,16 @@ } #datetime{ - display:table-cell; - vertical-align:middle; + float:left; width:90px; - font-size:0.9em; color: white; + font-size:0.9em; text-align:center; background-color: transparent; } #current{ font-size:1.7em; - font-weight: bold; - color: white; + font-weight: bold; background-color: transparent; z-index: 3; opacity: 0.8; @@ -270,76 +238,38 @@ } #client_latency{ + position:absolute; + right:100px; + top:1px; background:transparent; - width:135px; + float:right; font-size:1em; - color: white; - z-index: 1; - padding: 3px 3px 3px 3px; - opacity: 0.8; - position:relative; - top: -30px; + padding:0px; } -.metrocase { - !float:right; - border-radius: 5px; - !position: relative; - !right: 20px; - !top:-25px; - width: 60px; - height: 30px; - color: black; - text-align: center; - font-size: 4em; font-color: black; - background: transparent; - z-index: 2; - border: 1px solid white; -} -#metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; float:left; } -#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; } -#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; } -#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; } #fluid {} .fluid-img{ height:50%; width:50%; } .clear { clear:both; } #midcomms{ -!color:white; -width:160px; -height:40px; -background-color:transparent; -border: 0px solid yellow; -float:left; +!width:160px; +!height:40px; +!background-color:transparent; + +!float:left; } #client_chronometer{ -position:fixed; -right:70px; -bottom: 10px; +float:right; font-size:3em; - - !display:table-cell; - !vertical-align:middle; - !border-radius: 15px; - !float:right; - !background-color: transparent; - !color: white; - !font-size: 3.7em; - !text-align: center; - !opacity:0.8; - !position: relative; - !left: 10px; - !bottom:64px; - !width: 210px; - !z-position: 2; +margin-right:50px; } #transport{ position:relative; - padding: 20px; + padding: 0px; bottom:40px; } @@ -364,6 +294,7 @@ position:relative; top:-5px; left:20px; + } #count { @@ -378,6 +309,7 @@ background:transparent; float:left; display:inline; + min-height:70px; } #totalcountdown { @@ -410,14 +342,15 @@ font-size:3em; text-align:center; !background-color:black; - border:1px solid white; + border:1px solid black; margin-left:auto; margin-right:auto; display:table-cell; vertical-align:middle; border-radius: 15px; } -!#wide { !background-color:white; +!#wide { + width:5600px; height:90%; border: 1px solid black; padding: 16px 10px 16px 0px; display:inline; } @@ -425,7 +358,7 @@ !background-color:black; margin-top:4px; height: 810px; - width: 6700px; + width: 4400px; border-radius: 15px; position: relative; +filter: invert(100%); @@ -434,30 +367,29 @@ #map { width: 1250px; position:absolute; - left: -0px; + top:30px; + left: 0px; height: 760px; padding: 20px 50px 20px 50px; - border: 1px solid gray; + !border: 1px dashed gray; !background-color: black; } #outerpreview { - !display:inline; - !float:left; height:700px; width: 1200px; padding: 0; - border: 1px solid gray; - background-color: black; - margin: 0 auto; + !border: 1px solid red; + background-color: white; padding: 50px 50px 50px 50px; - position: relative; left:-1200px; + position: relative; + left:1500px; } -.pview { border: 1px solid red; height:49%; width:49%; float:left; background:gray; z-index:-100; } +.pview { border: 1px dashed gray; height:45%; width:49%; float:left; background:white; z-index:-100; } .pviewmusic { position:relative; top:60px; } -.middle { float: left; width: 10.8%; height: 11%; padding: 0; border: 0; margin: 0.33%; - border: 1px solid red; background:gray; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */ +.middle { float: left; width: 10.8%; height: 9%; padding: 0; border: 0; margin: 0.33%; + border: 1px solid red; background:white; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */ .middle p { font-size:2.5em; position:relative; left: 0px; opacity:0.3; color:blue; display:block;} .middle img { padding: 20px 0px 0px 0px; position:relative; top:-30px;} @@ -465,7 +397,7 @@ .middle:hover img { z-index:1000; width:500px; - background-color: orange; + background-color: white; !position: absolute; border: 0px solid red; border-radius:20px; @@ -478,10 +410,12 @@ opacity:1; } -.inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%; - padding: 0; border: 1px solid white; margin: 0; - text-align: center; font-weight: bold; - position:relative; top: -110px; } +.inner-0, .inner-1, .inner-2, .inner-3 { + font-size:2.5em; float: left; width: 47%; height: 50%; + padding: 0; border: 1px solid white; margin: 0; + text-align: center; font-weight: bold; + position:relative; top: -110px; +} .inner-0 { background-color: transparent; } .inner-1 { background-color: transparent; } @@ -492,16 +426,81 @@ width:10%; background:transparent; height:40px; padding: 5px 5px 5px 5px; text-align:center; } -.unitseq { display:inline; float:right; - width:10%; background:transparent; height:40px; - padding: 5px 5px 5px 5px; text-align:center; - font-size:2em;} +.unitseq { + !position:absolute; + !top:0px; + !right:10px; + padding: 1px 1px 1px 1px; + text-align:center; + font-size:1em; +} + +.head{ +!border: 1px solid black; +background:gray; +opacity:0.8; +padding:10px; +height:30px; +position:fixed; +top:0px; +left:20px; +width:100%; +} + +.footx{ + background:gray; + opacity:0.8; + padding:10px; + height:30px; + position:fixed; + bottom:0px; + left:20px; + width:100%; +} + + +#indexpagetitle{ + font-size:1.2em; + float:left; + margin-left:30%; + padding:0; + margin-bottom:0px; +} + +#setPart{ + float:right; + margin-right:50px; + font-size:2em; +} + + +.metrocase { + margin-left:20px; + float:left; + border-radius: 5px; + width: 60px; + height:30px; + color: black; + text-align: center; + font-size: 4em; + border: 1px solid white; +} + +#metronome0 { width: 60px; height: 30px; border-radius: 5px; float:left; } + + + + + + #links {position:absolute; bottom:150px; left: 800px; width:900px;} -!#transect {position:absolute; bottom:180px; left: 1300px; width:600px;} -.tportpop { !background-color:black; +#transect {float:left; font-size:2em; padding:0px;} + +.tportpop { width:200px; height: 90px; margin: 1px solid white; position:relative; left:300px; top:60px; border: 1px solid green; - border-radius: 10px; padding: 5px; } \ No newline at end of file + border-radius: 10px; padding: 5px; +} \ No newline at end of file
--- a/www/martin/css/svg-stylesheet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/css/svg-stylesheet.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,4 +1,4 @@ -svg { background-color: black; width:1000px; height:330px; display:block;} +svg { background-color: red; width:1000px; height:330px; display:block;} line { stroke: white; } text { fill: white;} path { stroke: white; fill: white; }
--- a/www/martin/index.html Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/index.html Tue Jul 15 23:49:44 2014 +0100 @@ -65,7 +65,7 @@ <div id="outerpreview" > <div class="pview" id="preview-1" > - <div class="musicianprog" style="background:black; border: 1px solid yellow;" > + <div class="musicianprog" style=" border: 1px solid yellow;" > <div id="counttitle1" style="display:inline;"></div> <div id="count1" style=" font-size:2em;"></div> </div> @@ -74,18 +74,18 @@ </div> <div class="pview" id="preview-2"> - <div class="musicianprog" style="background:black; border: 1px solid green; "> + <div class="musicianprog" style="border: 1px solid green; "> <div id="counttitle2" style="display:inline;"></div> <div id="count2" style=" font-size:2em;"></div> </div> - <div class="unitseq" id="unitseq1"></div> + <div class="pviewmusic" id="previewbox-2"> </div> </div> <div class="pview" id="preview-3" > - <div class="musicianprog" style="background:black; border: 1px solid aqua; "> + <div class="musicianprog" style="border: 1px solid aqua; "> <div id="counttitle3" style="display:inline;"></div> <div id="count3" style=" font-size:2em;"></div> </div> @@ -112,104 +112,116 @@ <div class="outermaster"> - <div id="live"> </div> + <div id="live"> + <div class="svgmusic"></div> + </div> <div id="info"> - <div id="comms"> - <div id="chat" title="type here to chat with others connected to network" > - <div id="nickname" title="type your login name and press enter" > - <form id="set-nickname" class="wrap"> - <p>LOGIN:</p> + <div id="comms"> + <div id="chat" title="type here to chat with others connected to network" > + <div id="nickname" title="type your login name and press enter" > + <form id="set-nickname" class="wrap"> + <p>LOGIN:</p> <input id="nick"> - <p id="nickname-err">Nickname already in use</p> + <p id="nickname-err">Nickname already in use</p> + </form> + </div> + <div id="connecting"> + <div class="wrap">Connecting to socket.io server</div> + </div> + <div id="messages"> + <div id="nicknames"></div> + <div id="lines"></div> + </div> + <form id="send-message"> + <input id="message"> + <button>Send</button> </form> </div> - <div id="connecting"> - <div class="wrap">Connecting to socket.io server</div> + </div> + + <div id="midfoot"> + <div id="midcomms"> + <div id="counttitle">waiting...</div> + <div id="count"></div> + <div class="unitseq" id="unitseq1"></div> </div> - <div id="messages"> - <div id="nicknames"></div> - <div id="lines"></div> + + <div id="remainingtime"> + next in: + <div id="totalcountdown">.</div> </div> - <form id="send-message"> - <input id="message"> - <button>Send</button> - </form> + + + + <div id="current"> + <script type="text/javascript"> + function setPart(sel) { + //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } ); + //testSound.play(); + + var value = sel.options[sel.selectedIndex].value; + document.getElementById('group').value=value; + //$('div#current').text('GROUP ' +value).text='value'; + } + </script> + + + </div> + </div> + + <div id="preview"></div> + </div> + + + + + + </div> - <div id="midfoot"> + - <div id="midcomms"> - <div id="counttitle" style="display:inline;"></div> - <div id="count"></div> - <div class="unitseq" id="unitseq1" style="float:right; width:50px; position:relative; top:-10px; left:40px"></div> - </div> - - <div id="remainingtime"> - next in: - <div id="totalcountdown">.</div> - </div> + + + + <div class="head"> + <div id="datetime"></div> + <div class="metrocase" id="metro"> + <div id="metronome0"></div> + </div> + <div id="client_latency">Latency: 0ms</div> + <div id="client_chronometer" >00:00:00.0</div> +</div> + + <div class="footx"> + <div id="transect">.. </div> - - <div id="timeinfo"> - <div id="datetime"></div> - - <div id="client_latency">Latency: 0ms</div> - </div> - - - <div id="current"> - <script type="text/javascript"> - function setPart(sel) { - //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } ); - //testSound.play(); - - var value = sel.options[sel.selectedIndex].value; - document.getElementById('group').value=value; - //$('div#current').text('GROUP ' +value).text='value'; - } - </script> - - <div> - <select id="setPart" onchange="setPart(this)"> - <option value="1">Stream 01</option> - <option value="2">Stream 02</option> - <option value="3">Stream 03</option> - <option value="4">Stream 04</option> - </select> - </div> - </div> - + <div id="indexpagetitle"> + pathways - for guitar, percussion & electronics </div> - - <div id="preview"></div> - - </div> - - - </div> - - - - - </div> + <div> + <select id="setPart" onchange="setPart(this)"> + <option value="1">Stream 01</option> + <option value="2">Stream 02</option> + <option value="3">Stream 03</option> + <option value="4">Stream 04</option> + </select> + </div> + + + - <div style=" position:fixed; left:30px; bottom: 10px; font-size:3em; " id="indexpagetitle" - <h2>pathways - for guitar, percussion & electronics</h2> - </div> - - <div style="" id="transect">.. </div> - <div id="client_chronometer" >00:00:00.0</div> - - <div class="metrocase" id="metro" style=" position:fixed; left:550px; bottom:80px;" > - <div id="metronome0"></div> - </div> + + + </div> + </body> </html>
--- a/www/martin/js/controlseq.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/controlseq.js Tue Jul 15 23:49:44 2014 +0100 @@ -54,9 +54,9 @@ function countinCtrl(groupID, currentseconds,mm,text,colour,background,unit){ //console.log("#count"+groupID) // all counts to control page - $("#counttitle"+groupID).css('color','white'); + $("#counttitle"+groupID).css('color','black'); $("#counttitle"+groupID).text(text); - $("#count"+groupID).text(currentseconds).css('color','white'); + $("#count"+groupID).text(currentseconds).css('color','black'); document.getElementById("count"+groupID).style.color=colour; }
--- a/www/martin/js/nodescore-client.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/nodescore-client.js Tue Jul 15 23:49:44 2014 +0100 @@ -254,4 +254,4 @@ function clear () { $('#message').val('').focus(); }; -}); \ No newline at end of file +});
--- a/www/martin/js/nodescore-slides.js Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/js/nodescore-slides.js Tue Jul 15 23:49:44 2014 +0100 @@ -46,7 +46,7 @@ function countinClient(groupID, currentseconds,mm,text,colour,background,unit){ var groupPage=document.getElementById('group').value if (groupID == groupPage) { - $("#counttitle").css('color','white'); + $("#counttitle").css('color','black'); $("#counttitle").text(text); $("#count").text(currentseconds); document.getElementById("count").style.color=colour; @@ -224,4 +224,4 @@ function clear () { $('#message').val('').focus(); }; -}); \ No newline at end of file +});
--- a/www/martin/svg/svg-stylesheet.css Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/svg/svg-stylesheet.css Tue Jul 15 23:49:44 2014 +0100 @@ -1,8 +1,8 @@ -svg { background-color: black; width:1000px; height:330px; display:block;} -line { stroke: white; } -text { fill: white;} -path { stroke: white; fill: white; } -rect { fill: white; } -polygon { fill: white; } -circle { stroke: white; } +svg { width:1000px; height:330px; display:block;} +!line { stroke: white; } +!text { fill: white;} +!path { stroke: white; fill: white; } +!rect { fill: white; } +!polygon { fill: white; } +!circle { stroke: white; }
--- a/www/martin/transport.html Tue Jul 15 17:48:35 2014 +0100 +++ b/www/martin/transport.html Tue Jul 15 23:49:44 2014 +0100 @@ -18,18 +18,6 @@ - -<div id="links" style="position:absolute; top:10px; left:10px;"> - <a style="float:right; font-size:2em;" href="score.html" target="_blank"> | S C O R E |</a> - <a style="float:right; font-size:2em;" href="index.html" > | SEQUENCER |</a> - <a style="float:right; font-size:2em;" href="map.html" > | M A P |</a> -</div> - -<div class="tportpop" style="" > - <div style="font-size:3em; color:red; " id="transect">.. </div> - <div style="font-size:3em; color:yellow; " id="unitmon">.. </div> -</div> - <div id="ctrlstop" style="position:absolute; top:10px; left:10px;"> <div id="c_chronometer" style="z-index: 2;">00:00:00.0</div> <div id="transport" >