Visual work for new FTUE screen
This commit is contained in:
Jonathon Wilson
parent
86ccc55ee5
commit
1d168257d0
|
|
@ -110,6 +110,125 @@ div.dialog.ftue {
|
|||
margin-top: 12px;
|
||||
}
|
||||
|
||||
p.intro {
|
||||
margin-top:0px;
|
||||
}
|
||||
.ftue-new {
|
||||
clear:both;
|
||||
position:relative;
|
||||
width:100%;
|
||||
height: 54px;
|
||||
margin-top: 12px;
|
||||
select {
|
||||
font-size: 15px;
|
||||
padding: 3px;
|
||||
}
|
||||
.latency {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
font-size: 12px;
|
||||
.report {
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
width: 105px;
|
||||
height: 50px;
|
||||
background-color: #72a43b;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
.ms-label {
|
||||
padding-top: 10px;
|
||||
font-size: 34px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
p {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.instructions {
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 125px;
|
||||
width: 595px;
|
||||
height: 36px;
|
||||
padding: 10px;
|
||||
padding-top: 24px;
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
.column {
|
||||
position:absolute;
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
margin-right:8px;
|
||||
}
|
||||
.settings-2-device {
|
||||
left:0px;
|
||||
}
|
||||
.settings-2-center {
|
||||
left:50%;
|
||||
margin-left: -110px;
|
||||
.buttons {
|
||||
margin-top: 14px;
|
||||
a {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings-2-voice {
|
||||
top: 0px;
|
||||
right:0px;
|
||||
}
|
||||
.controls {
|
||||
margin-top: 16px;
|
||||
background-color: #222;
|
||||
height: 48px;
|
||||
width: 220px;
|
||||
}
|
||||
.ftue-vu-left {
|
||||
position:relative;
|
||||
top: 0px;
|
||||
}
|
||||
.ftue-vu-right {
|
||||
position:relative;
|
||||
top: 22px;
|
||||
}
|
||||
.ftue-fader {
|
||||
position:relative;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
}
|
||||
.gain-label {
|
||||
color: $ColorScreenPrimary;
|
||||
position:absolute;
|
||||
top: 76px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.subcolumn {
|
||||
position:absolute;
|
||||
top: 60px;
|
||||
font-size: 12px !important;
|
||||
width: 68px;
|
||||
height: 48px;
|
||||
}
|
||||
.subcolumn select {
|
||||
width: 68px;
|
||||
}
|
||||
.subcolumn.first {
|
||||
left:0px;
|
||||
}
|
||||
.subcolumn.second {
|
||||
left:50%;
|
||||
margin-left:-34px;
|
||||
}
|
||||
.subcolumn.third {
|
||||
right:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.asio-settings {
|
||||
clear:both;
|
||||
position:relative;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,125 @@
|
|||
<!-- inner wrapper -->
|
||||
<div class="ftue-inner" layout-wizard="ftue">
|
||||
|
||||
<!-- NEW FTUE first screen, which has latency approximation -->
|
||||
<!-- Audio device selection and level-setting -->
|
||||
<div layout-wizard-step="0" dialog-title="audio gear settings" dialog-purpose="GearSettings" style="display:block;">
|
||||
<p os="win32" class="intro">
|
||||
Choose a device to capture and play your session audio. If
|
||||
you’re not using a mic with this device, then also choose a
|
||||
voice chat input to talk with others during sessions. Then play
|
||||
and speak, and adjust the gain faders so that you hear both your
|
||||
instrument and voice in your headphones at comfortable volumes.
|
||||
</p>
|
||||
<p os="mac" class="intro" style="display:none;">
|
||||
Choose a device to capture and play your session audio. If
|
||||
you’re not using a mic with this device, then also choose a
|
||||
voice chat input to talk with others during sessions. Then play
|
||||
and speak, and adjust the gain faders so that you hear both your
|
||||
instrument and voice in your headphones at comfortable volumes.
|
||||
</p>
|
||||
|
||||
<div class="ftue-new">
|
||||
<div class="column settings-2-device">
|
||||
Session Audio Device:<br />
|
||||
<select></select>
|
||||
<!-- VU/Fader for audio device -->
|
||||
<div class="controls">
|
||||
<!-- FIXME IDS -->
|
||||
<div id="ftue-audio-output-vu-left" class="ftue-vu-left"></div>
|
||||
<div id="ftue-audio-output-fader" class="ftue-fader"></div>
|
||||
<div class="gain-label">GAIN</div>
|
||||
<div id="ftue-audio-output-vu-right" class="ftue-vu-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column settings-2-center">
|
||||
<div class="buttons">
|
||||
<!-- FIXME - change ids -->
|
||||
<a class="button-grey" id="btn-asio-resync">
|
||||
<%= image_tag "content/icon_resync.png", {:width => 12, :height => 14} %>
|
||||
RESYNC
|
||||
</a>
|
||||
<a class="button-grey" id="btn-asio-control-panel">ASIO SETTINGS</a>
|
||||
</div>
|
||||
<div class="subcolumn first">
|
||||
Frame<br />
|
||||
<select disabled="disabled" id="asio-framesize">
|
||||
<option value=""></option>
|
||||
<option value="2.5">2.5</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="subcolumn second">
|
||||
Buffer/In<br />
|
||||
<select disabled="disabled" id="asio-input-latency">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="subcolumn third">
|
||||
Buffer/Out<br />
|
||||
<select disabled="disabled" id="asio-output-latency">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Colum 3: Voice -->
|
||||
<div class="column settings-2-voice">
|
||||
Voice Chat Input:<br />
|
||||
<select></select>
|
||||
<div class="controls">
|
||||
<div id="ftue-audio-input-vu-left" class="ftue-vu-left"></div>
|
||||
<div id="ftue-audio-input-fader" class="ftue-fader"></div>
|
||||
<div class="gain-label">GAIN</div>
|
||||
<div id="ftue-audio-input-vu-right" class="ftue-vu-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Latency -->
|
||||
<div class="latency">
|
||||
Latency:<br />
|
||||
<div class="report">
|
||||
<div class="ms-label">9.83</div>
|
||||
<p>milliseconds</p>
|
||||
</div>
|
||||
<div class="instructions">
|
||||
Your audio speed is good. When done with settings, click Save Settings to continue.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right mr30 buttonbar">
|
||||
<a class="button-grey" layout-wizard-link="1">CANCEL</a>
|
||||
<a class="button-grey">HELP</a>
|
||||
<a class="button-orange" layout-wizard-link="3">SAVE SETTINGS</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- First screen of the FTUE wizard -->
|
||||
<div layout-wizard-step="1" dialog-title="welcome!" dialog-purpose="Intro" style="display:block;">
|
||||
<div layout-wizard-step="1" dialog-title="welcome!" dialog-purpose="Intro" style="display:none;">
|
||||
<p class="intro">
|
||||
Please identify which of the three types of audio gear below you
|
||||
are going to use with the JamKazam service, and click one to
|
||||
|
|
|
|||
Loading…
Reference in New Issue