253 lines
8.2 KiB
Plaintext
Executable File
253 lines
8.2 KiB
Plaintext
Executable File
<div id="studio" uuid="<%= $last_song->{'uuid'} %>" name="<%= $last_song->{'name'} %>">
|
|
|
|
<div id="pedalboard" style="display:none;">
|
|
<% my $count = 0; %>
|
|
<% foreach my $p ( @{$gb::studio->{'pedals'}} ) { %>
|
|
<span id="pedal_<%= $p->{'name'} %>" class="pedal" style="left:<%= $count * 175 %>px;">
|
|
<% my $ch = $p->{'name'}; %>
|
|
<img class="pedal_background" src="/images/studio/<%= $p->{'image'} %>.png">
|
|
<% foreach my $k ( @{$p->{'knobs'}} ) { %>
|
|
<input type="range" channel="<%= $ch %>" name="<%= $k->{'control'} %>" control="<%= $k->{'control'} %>" class="knob_control <%= $k->{'control'} %>" style="display:none;left:3px;">
|
|
<img class="knob <%= $k->{'control'} %>" style="position:absolute;height:<%= $k->{'width'} || '60px' %>;width:<%= $k->{'width'} || '60px'; %>;left:<%= $k->{'left'} %>;top:<%= $k->{'top'} %>;" flip="<%= $k->{'flip'} %>" direction="<%= $k->{'direction'} %>" channel="<%= $ch %>" control="<%= $k->{'control'} %>" src="/images/studio/knob_<%= $k->{'colour'} %>.png">
|
|
|
|
<% } %>
|
|
<% foreach my $b ( @{$p->{'buttons'}} ) { %>
|
|
<img class="button_control" style="position:absolute;height:<%= $b->{'height'} || $b->{'width'} || '60px' %>;width:<%= $b->{'width'} || '60px'; %>;left:<%= $b->{'left'} %>;top:<%= $b->{'top'} %>;" flip="<%= $b->{'flip'} %>" state="<%= $b->{'status'} || "depressed" %>" channel="<%= $ch %>" control="<%= $b->{'control'} %>" colour="<%= $b->{'colour'} %>" src="/images/studio/button_depressed_<%= $b->{'colour'} %>.png">
|
|
<% } %>
|
|
</span>
|
|
<% $count++; %>
|
|
<% } %>
|
|
</div>
|
|
<% my $channel_count = 4; %>
|
|
<div id="studio_viewer" style="height:120px;">
|
|
<% for (my $ch = 1; $ch <= $channel_count; $ch++) { %>
|
|
<canvas style="width:95%;height:calc(90% / <%= $channel_count + 1 %>);border:solid;" class="track track_<%= $ch %>" id="track_view_<%= $ch %>">track name <%= $ch %></canvas>
|
|
<% } %>
|
|
</div>
|
|
<div id="studio_mixer">
|
|
<% for (my $ch = 1; $ch <= $channel_count; $ch++) { %>
|
|
<span class="channel channel_<%= $ch %>">
|
|
<% foreach my $k ( @{$gb::studio->{'knobs'}}) { %>
|
|
<input type="range" channel="<%= $ch %>" name="<%= $k->{'control'} %>" control="<%= $k->{'control'} %>" class="knob_control <%= $k->{'control'} %>" style="display:none;left:3px;">
|
|
<img class="knob <%= $k->{'control'} %>" flip="<%= $k->{'flip'} %>" direction="<%= $k->{'direction'} %>" channel="<%= $ch %>" control="<%= $k->{'control'} %>" src="/images/studio/knob_<%= $k->{'colour'} %>.png">
|
|
<span class="to_sound" channel="<%= $ch %>" >
|
|
<img class="cord draggable" style="display:none;" control="input" channel="<%= $ch %>" src="/images/studio/cord.png">
|
|
</span>
|
|
<% } %>
|
|
<button class="armed" channel="<%= $ch %>" control="armed" state="off">O</button>
|
|
<span id="studio_channel_container_<%= $ch %>">
|
|
</span>
|
|
<canvas class="channel_volume_metre channel_volume_metre_<%= $ch %>" id="channel_volume_metre_<%= $ch %>"></canvas>
|
|
<input height="50" channel="<%= $ch %>" type="range" min="0" max="100" control="volume" class="channel_volume channel_volume_<%= $ch %>" value="1">
|
|
</span>
|
|
<% } %>
|
|
<span id="studio_controls">
|
|
<span id="song_controls" style="left:2px;top:5px;position:absolute;">
|
|
<img id="studio_new" style="vertical-align:top;" class="little_thumb hover" src="/images/decipherable/file.png">
|
|
<select id="studio_song_select" style="vertical-align:top;">
|
|
<option value="none">None</option>
|
|
<% foreach my $song ( @{$songs} ) { %>
|
|
<option value="<%= $song->{'uuid'} %>"><%= &subs::format_name($song->{'app'}) %> <span class="time" timestamp="<%= $song->{'timestamp'} %>"></span></option>
|
|
<% } %>
|
|
</select>
|
|
<img id="studio_save" style="vertical-align:top;" class="little_thumb hover" src="/images/decipherable/diskette.png">
|
|
|
|
<img id="studio_delete" style="vertical-align:top;" class="little_thumb hover" src="/images/make believe/cancel_button.png">
|
|
</span>
|
|
<span style="left:2px;top:50px;position:absolute;">
|
|
<input type="hidden" id="studio_name">
|
|
</span>
|
|
<span style="left:2px;top:95px;position:absolute;">
|
|
<img class="little_thumb mark hover" id="studio_mark" src="/images/studio/plus.png">
|
|
<img class="little_thumb metronome hover" id="studio_metronome" src="/images/studio/metronome.png">
|
|
<input style="width:50px;vertical-align:top;" id="studio_bpm">
|
|
<img src="/images/studio/repeat.png" class="little_thumb hover" id="studio_loop">
|
|
|
|
</span>
|
|
<span style="left:2px;top:140px;position:absolute;">
|
|
|
|
<img class="little_thumb record hover" id="studio_record" src="/images/make believe/record.png">
|
|
<img class="little_thumb play hover" id="studio_play" src="/images/make believe/play.png">
|
|
<img class="little_thumb stop hover" id="studio_stop" src="/images/make believe/stop.png">
|
|
<img class="little_thumb prev hover" id="studio_prev" src="/images/make believe/left arrow.png">
|
|
<img class="little_thumb next hover" id="studio_next" src="/images/make believe/right arrow.png">
|
|
</span>
|
|
<span style="left:2px;top:190px;position:absolute;">
|
|
<img class="little_thumb hover video_toggle" id="studio_video_toggle" src="/images/make believe/camera.png">
|
|
<img class="little_thumb hover" src="/images/make believe/burger.png" id="pedalboard_hamburger">
|
|
</span>
|
|
<span style="left:2px;top:240px;position:absolute;">
|
|
<span id="studio_time_display">
|
|
0:00
|
|
</span><br>
|
|
<span id="studio_time_duration">
|
|
0:00
|
|
</span>
|
|
</span>
|
|
<video id="studio_video_monitor" style="position:absolute;left:270px;top:60px;width:350px;" muted autoplay style="width:200px;" class=""></video>
|
|
|
|
</span>
|
|
<span class="jog_wheel_frame">
|
|
<img class="jog_wheel" id="studio_jog_wheel" src="/images/studio/jog wheel tye dye.png">
|
|
<span class="jog_wheel_centre" style="width:5px;height:5px;"
|
|
</span>
|
|
</div>
|
|
<div id="studio_track_container"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.pedal {
|
|
width: 160px;
|
|
max-height: 187px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
border: solid;
|
|
border-width: 5px;
|
|
border-radius: 10px;
|
|
background: brown;
|
|
}
|
|
.pedal_background {
|
|
width: 100%;
|
|
}
|
|
#studio_pedalboard_toggle {
|
|
right: 0px;
|
|
bottom:60px;
|
|
position:fixed;
|
|
}
|
|
#studio_controls {
|
|
position:absolute;
|
|
}
|
|
#studio_track_container {
|
|
position:absolute;
|
|
right: -130px;
|
|
width: 130px;
|
|
overflow:scroll;
|
|
top:0px;
|
|
height: 100%;
|
|
}
|
|
.track {
|
|
width: 100%;
|
|
height: calc(100% / <%= $channel_count %>);
|
|
}
|
|
.knob {
|
|
height: 30px;
|
|
width: 30px;
|
|
padding-left:5px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.knob_control {
|
|
appearance:none;
|
|
width: 30px;
|
|
height: 100px;
|
|
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
vertical-align: middle;
|
|
}
|
|
.armed {
|
|
height: 30px;
|
|
width: 20px;
|
|
}
|
|
.armed[state=off] {
|
|
background:grey;
|
|
}
|
|
.armed[state=rec] {
|
|
background:red;
|
|
}
|
|
.armed[state=play] {
|
|
background:green;
|
|
}
|
|
.armed[state=loop] {
|
|
background:blue;
|
|
}
|
|
.cord {
|
|
width:40px;
|
|
}
|
|
.jack {
|
|
width:40px;
|
|
}
|
|
|
|
.channel_volume {
|
|
position:absolute;
|
|
appearance: none;
|
|
height: 118px;
|
|
width: 34px;
|
|
bottom: 1px;
|
|
border: solid;
|
|
border-radius: 5px;
|
|
border-width: .1px;
|
|
background-color:transparent;
|
|
color: black;
|
|
outline: none;
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
vertical-align: middle;
|
|
background-image: url('/images/studio/slider2.png');
|
|
}
|
|
.channel_volume_metre {
|
|
position:absolute;
|
|
height: 118px;
|
|
|
|
width: 30px;
|
|
bottom: 1px;
|
|
color: black;
|
|
outline: none;
|
|
vertical-align: middle;
|
|
|
|
}
|
|
.channel {
|
|
border: solid;
|
|
border-width: 2px;
|
|
border-radius: 5px;
|
|
width: 40px;
|
|
height: 100%;
|
|
display:inline-block;
|
|
|
|
}
|
|
<% for (my $ch = 0; $ch <= $channel_count; $ch++) { %>
|
|
.channel_<%= $ch %> {
|
|
|
|
}
|
|
.knob_control[channel=<%= $ch %>] {
|
|
left: <%= 45 * $ch %>px;
|
|
}
|
|
|
|
.channel_volume_<%= $ch %> {
|
|
left: <%= -49 + 48 * ($ch) %>px;
|
|
z-index: calc(10000);
|
|
}
|
|
.channel_volume_metre_<%= $ch %> {
|
|
left: <%= -46 + 48 * ($ch) %>px;
|
|
}
|
|
<% } %>
|
|
#studio {
|
|
height:100%;
|
|
width:100%;
|
|
border-width: 10px;
|
|
border-radius: 10px;
|
|
border: solid;
|
|
}
|
|
#studio_viewer {
|
|
height: 30%;
|
|
width: 100%;
|
|
background-color: lightblue;
|
|
}
|
|
#studio_mixer {
|
|
height: 70%;
|
|
width: 100%;
|
|
background-color: tan;
|
|
}
|
|
#studio_controls {
|
|
width: 100%;
|
|
}
|
|
#studio_jog_wheel {
|
|
right: 40px;
|
|
position:absolute;
|
|
bottom: 10px;
|
|
height: 110px;
|
|
width: 110px;
|
|
}
|
|
#studio_time_display {
|
|
font-size: 32px;
|
|
}
|
|
</style> |