jam-cloud/web/app/views/clients/gear/_gear_wizard.html.haml

215 lines
9.1 KiB
Plaintext

.dialog.gear-wizard{ layout: 'dialog', 'layout-id' => 'gear-wizard', id: 'gear-wizard-dialog'}
.content-head
%h1 audio gear setup
.ftue-inner{ 'layout-wizard' => 'gear-wizard' }
.wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' => "Understand Your Gear", 'dialog-purpose' => "Intro"}
.ftuesteps
.clearall
.help-text
Please click the Watch Video button below to see a video explaining the different kinds of gear setups you can use with JamKazam.
We strongly advise that you watch the instructional videos that are made available at each step of this first-time setup process.
It will take a few minutes, but it will save you a
%strong lot
of time and trouble.
.center.video-button-holder
%a.button-orange.watch-video{href:"#", rel:'external'} WATCH VIDEO
.wizard-step{ 'layout-wizard-step' => "1", 'dialog-title' => "Select & Test Audio Gear", 'dialog-purpose' => "SelectAudioGear" }
.ftuesteps
.clearall
.help-text In this step, you will select, configure, and test your audio gear. Please watch the video for best instructions.
.wizard-step-content
.wizard-step-column
%h2 Instructions
.ftue-box.instructions
%ul
%li Select audio interface for inputs and outputs.
%li Check input ports to which you will connect instruments or mics.
%li Check output ports you will use to monitor.
%li Configure interface settings.
%li View test results.
.center
%a.button-orange.watch-video.audio-input{href:'#', rel:'external'} WATCH VIDEO
%a.button-orange.watch-video.audio-output{href:'#', rel:'external'} WATCH VIDEO
.wizard-step-column
%h2 Audio Input Device
%select.w100.select-audio-input-device
%option None
%h2 Audio Input Ports
.ftue-box.list.ports.input-ports
%a.button-orange.asio-settings-btn ASIO SETTINGS...
%a.button-orange.resync-btn RESYNC
.wizard-step-column
%h2 Audio Output Device
%select.w100.select-audio-output-device
%option Same as input
%h2 Audio Output Ports
.ftue-box.list.ports.output-ports
.frame-and-buffers
.framesize
%h2 Frame
%select.select-frame-size
%option{val:'2.5'} 2.5
%option{val:'5'} 5
%option{val:'10'} 10
.buffers
%h2 Buffers In/Out
%select.select-buffer-in
%option{val:'0'} 0
%option{val:'1'} 1
%option{val:'2'} 2
%option{val:'3'} 3
%option{val:'4'} 4
%option{val:'5'} 5
%option{val:'6'} 6
%option{val:'7'} 7
%option{val:'8'} 8
%option{val:'9'} 9
%option{val:'10'} 10
%select.select-buffer-out
%option{val:'0'} 0
%option{val:'1'} 1
%option{val:'2'} 2
%option{val:'3'} 3
%option{val:'4'} 4
%option{val:'5'} 5
%option{val:'6'} 6
%option{val:'7'} 7
%option{val:'8'} 8
%option{val:'9'} 9
%option{val:'10'} 10
.wizard-step-column
%h2 Test Results
.ftue-box.results
.left.w50.gold-fill.center.white.scoring-section
.p5
.latency LATENCY
%span.latency-score
.left.w50.green-fill.center.white.scoring-section
.p5
.io I/O
%span.io-rate-score
%span.io-var-score
.clearall
.wizard-step{ 'layout-wizard-step' => "2", 'dialog-title' => "Configure Tracks", 'dialog-purpose' => "ConfigureTracks" }
.ftuesteps
.clearall
.help-text In this step, you will select, configure, and test your audio gear. Please watch the video for best instructions.
.wizard-step-content
.wizard-step-column
%h2 Instructions
.ftue-box.instructions
Set up one track for each instrument or vocal part you plan to play. For each track:
%ul
%li Drag and drop the input port(s) from your audio interface to each track.
%li Select the instrument for each track.
.center
%a.button-orange.watch-video{href:'#'} WATCH VIDEO
.wizard-step-column
%h2 Unassigned Ports
.wizard-step-column
%h2 Track Input Port(s)
.wizard-step-column
%h2 Track Instrument
.wizard-step{ 'layout-wizard-step' => "3", 'dialog-title' => "Configure Voice Chat", 'dialog-purpose' => "ConfigureVoiceChat" }
.ftuesteps
.clearall
.help-text In this step, you will select, configure, and test your audio gear. Please watch the video for best instructions.
.wizard-step-content
.wizard-step-column
%h2 Instructions
.ftue-box.instructions
%p Determine if you need to set up a voice chat input.
%p If you do, then assign the audio input to use to capture voice chat.
.center
%a.button-orange.watch-video{href:'#'} WATCH VIDEO
.wizard-step-column
%h2 Select Voice Chat Option
.voicechat-option.reuse-audio-input
%input{type:"radio", name: "voicechat", checked:"checked"}
%p I am already using a microphone to capture my vocal or instrumental music, so I can talk with other musicians using that microphone
.voicechat-option.use-chat-input
%input{type:"radio", name: "voicechat", checked:"unchecked"}
%p I am not using a microphone for acoustic instruments or vocals, so use the input selected to the right for voice chat during my sessions
.wizard-step-column
%h2 Track Input Port(s)
.ftue-box.chat-inputs
.wizard-step{ 'layout-wizard-step' => "4", 'dialog-title' => "Turn Off Direct Monitoring", 'dialog-purpose' => "DirectMonitoring" }
.ftuesteps
.clearall
.help-text In this step, you will ensure that any direct monitoring control on your audio interface is turned off. Please watch the video for best instructions.
.wizard-step-content
.wizard-step-column
%h2 Instructions
.ftue-box.instructions
%p Find the Direct Monitoring control on your audio interface.
%ul
%li If a button, push it into its off position.
%li If a knob, turn it so that 100% of audio is from your computer, and 0% is from the direct monitor.
.center
%a.button-orange.watch-video{href:'#'} WATCH VIDEO
.wizard-step-column
.help-content
When you have fully turned off the direct monitoring control (if any) on your audio interface,
please click the Play busson below. If you hear the audio clearly, then your settings are correct,
and you can move ahead to the next step.
If you use your audio interface for recording, and use the direct monitoring feature for recording,
please note that you will need to remember to turn this feature off every time that you use the JamKazam service.
.center
%a.ftue-box.test-direct-monitoring
%img{src:'assets/content/icon_playbutton.png', width:20, height:20, align:'top'}
%span Play
.wizard-step{ 'layout-wizard-step' => "5", 'dialog-title' => "Test Router & Network", 'dialog-purpose' => "TestRouterNetwork" }
.ftuesteps
.wizard-step{ 'layout-wizard-step' => "6", 'dialog-title' => "Success!", 'dialog-purpose' => "Success" }
.ftuesteps
.ftue-buttons
%script{type: 'text/template', id: 'template-ftuesteps'}
.ftuesteps-inner
%a.ftue-stepnumber{'data-step-number' => 0} 1
.ftue-step-title Understand Your Gear
%a.ftue-stepnumber{'data-step-number' => 1} 2
.ftue-step-title Select & Test Audio Gear
%a.ftue-stepnumber{'data-step-number' => 2} 3
.ftue-step-title Configure Tracks
%a.ftue-stepnumber{'data-step-number' => 3} 4
.ftue-step-title Configure Voice Chat
%a.ftue-stepnumber{'data-step-number' => 4} 5
.ftue-step-title Turn Off Direct Monitoring
%a.ftue-stepnumber{'data-step-number' => 5} 6
.ftue-step-title Test Router & Network
%a.ftue-stepnumber{'data-step-number' => 6} 7
.ftue-step-title Success!
%script{type: 'text/template', id: 'template-ftue-buttons'}
.ftue-buttons-holder
%a.button-grey.btn-cancel{href:'#', 'layout-action' => 'close'} CANCEL
%a.button-grey{href: '#'} HELP
%a.button-orange.btn-back{href:'#'} BACK
%a.button-orange.btn-next{href:'#'} NEXT
%a.button-orange.btn-close{href:'#', 'layout-action' => 'close'} CLOSE
%script{type: 'text/template', id: 'template-audio-port'}
.audio-port
%input{ type: 'checkbox', 'data-id' => '{{data.id}}' }
%span
= '{{data.name}}'