Install ToobAmp files; uninstall cleanup.
This commit is contained in:
Robin Davies
@@ -0,0 +1,115 @@
|
||||
<div class="mod-pedal mod-rack-reaktor{{{cns}}} mod-rack-cab-sim{{{cns}}}">
|
||||
<script id="ToobFrequencyScript" src="/resources/js/ToobFrequencyPlot.js{{{ns}}}" type="application/javascript" />
|
||||
<script id="ToobVuScript" src="/resources/js/ToobVu.js{{{ns}}}" type="application/javascript" />
|
||||
<div mod-role="drag-handle" class="mod-drag-handle" style="height:100%; width: 100%"></div>
|
||||
<div class="mod-control-group">
|
||||
|
||||
<div class="toob_column_grid" style="height: 100%">
|
||||
<div class="toob_column">
|
||||
<div class="mod-switch clearfix" mod-role="bypass">
|
||||
<div class="mod-switch-image" mod-role="bypass-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 240px" >
|
||||
<div id="toob_cabsim_fresp" class="toob_frequency_response toob_cabsim_fresp toob_row"
|
||||
/>
|
||||
{{#controls.0}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.0}}
|
||||
{{#controls.1}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.1}}
|
||||
{{#controls.3}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.3}}
|
||||
{{#controls.4}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.4}}
|
||||
|
||||
<div class="toob_row" style="width: 120px; padding-left: 60px">
|
||||
{{#controls.2}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.2}}
|
||||
</div>
|
||||
<div class="toob_row" style="width: 120px; padding-left: 60px">
|
||||
{{#controls.5}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.5}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column clearfix">
|
||||
<div class="toob_row_grid">
|
||||
<div class="toob_row">
|
||||
<div class="toob_vu cabsim_vu" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column_grid toob_row">
|
||||
{{#controls.6}}
|
||||
<div class="mod-bakelite toob_column" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.6}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-pedal-input">
|
||||
{{#effect.ports.audio.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.input}}
|
||||
{{#effect.ports.midi.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.input}}
|
||||
{{#effect.ports.cv.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.input}}
|
||||
</div>
|
||||
|
||||
<div class="mod-pedal-output">
|
||||
{{#effect.ports.audio.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.output}}
|
||||
{{#effect.ports.midi.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.output}}
|
||||
{{#effect.ports.cv.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.output}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,166 @@
|
||||
<div class="mod-pedal mod-rack-reaktor{{{cns}}}">
|
||||
<script id="ToobFrequencyScript" src="/resources/js/ToobFrequencyPlot.js{{{ns}}}" type="application/javascript" />
|
||||
<script id="ToobVuScript" src="/resources/js/ToobVu.js{{{ns}}}" type="application/javascript" />
|
||||
<script id="ToobGainScript" src="/resources/js/ToobGain.js{{{ns}}}" type="application/javascript" />
|
||||
<div mod-role="drag-handle" class="mod-drag-handle" style="height:100%; width: 100%"></div>
|
||||
<div class="mod-control-group">
|
||||
|
||||
<div class="toob_column_grid" style="height: 100%">
|
||||
<div class="toob_column">
|
||||
<div class="mod-switch clearfix" mod-role="bypass">
|
||||
<div class="mod-switch-image" mod-role="bypass-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid">
|
||||
<div id="toob_vu" class="toob_vu toob_row" />
|
||||
{{#controls.0}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.0}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column clearfix">
|
||||
<div class="toob_row_grid">
|
||||
<div class="toob_row">
|
||||
<div class="toob_frequency_response" mode-role="frequency-display">
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column_grid toob_row">
|
||||
{{#controls.1}}
|
||||
<div class="mod-bakelite toob_column" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.1}}
|
||||
{{#controls.2}}
|
||||
<div class="mod-bakelite toob_column" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.2}}
|
||||
{{#controls.4}}
|
||||
<div class="mod-bakelite toob_column" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.4}}
|
||||
|
||||
</div>
|
||||
<div class="toob_row">
|
||||
{{#controls.3}}
|
||||
<div class="mod-bakelite" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.3}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column clearfix">
|
||||
<div class="toob_row_grid">
|
||||
{{#controls.5}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.5}}
|
||||
<div class="toob_row">
|
||||
<div class="toob_gain" />
|
||||
</div>
|
||||
|
||||
{{#controls.6}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.6}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column">
|
||||
{{#controls.7}}
|
||||
<div class="mod-bakelite" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.7}}
|
||||
<div class="toob_row_grid">
|
||||
{{#controls.8}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.8}}
|
||||
{{#controls.9}}
|
||||
<div class="mod-enumerated mod-enumerated-1" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
|
||||
<div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
|
||||
<div class="mod-enumerated-list">
|
||||
{{#scalePoints}}
|
||||
<div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
|
||||
{{/scalePoints}}
|
||||
</div>
|
||||
</div>
|
||||
{{/controls.9}}
|
||||
</div>
|
||||
{{#controls.10}}
|
||||
<div class="mod-enumerated mod-enumerated-2" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
|
||||
<div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
|
||||
<div class="mod-enumerated-list">
|
||||
{{#scalePoints}}
|
||||
<div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
|
||||
{{/scalePoints}}
|
||||
</div>
|
||||
</div>
|
||||
{{/controls.10}}
|
||||
{{#controls.11}}
|
||||
<div class="mod-enumerated mod-enumerated-3" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
|
||||
<div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
|
||||
<div class="mod-enumerated-list">
|
||||
{{#scalePoints}}
|
||||
<div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
|
||||
{{/scalePoints}}
|
||||
</div>
|
||||
</div>
|
||||
{{/controls.11}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-pedal-input">
|
||||
{{#effect.ports.audio.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.input}}
|
||||
{{#effect.ports.midi.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.input}}
|
||||
{{#effect.ports.cv.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.input}}
|
||||
</div>
|
||||
|
||||
<div class="mod-pedal-output">
|
||||
{{#effect.ports.audio.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.output}}
|
||||
{{#effect.ports.midi.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.output}}
|
||||
{{#effect.ports.cv.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.output}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,182 @@
|
||||
<div class="mod-pedal mod-rack-reaktor{{{cns}}} mod-pedal mod-rack-power-stage{{{cns}}}">
|
||||
<script id="ToobFrequencyScript" src="/resources/js/ToobFrequencyPlot.js{{{ns}}}" type="application/javascript" />
|
||||
<script id="ToobVuScript" src="/resources/js/ToobVu.js{{{ns}}}" type="application/javascript" />
|
||||
<script id="ToobGainScript" src="/resources/js/ToobGain.js{{{ns}}}" type="application/javascript" />
|
||||
<div mod-role="drag-handle" class="mod-drag-handle" style="height:100%; width: 100%"></div>
|
||||
<div class="mod-control-group">
|
||||
|
||||
<div class="toob_column_grid" style="height: 100%">
|
||||
<!-- SWITCH -->
|
||||
<div class="toob_column">
|
||||
<div class="mod-switch clearfix" mod-role="bypass">
|
||||
<div class="mod-switch-image" mod-role="bypass-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- GAIN STAGE 1-->
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 120px">
|
||||
<div id="toob_gain1_vu1" class="toob_micro_vu toob_row" />
|
||||
<div id="toob_gain1_gain" class="toob_gain toob_gain_power_stage toob_row" />
|
||||
|
||||
{{#controls.0}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.0}}
|
||||
{{#controls.1}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.1}}
|
||||
{{#controls.2}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.2}}
|
||||
{{#controls.3}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.3}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- GAIN STAGE 2-->
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 120px">
|
||||
<div id="toob_gain2_vu" class="toob_micro_vu toob_row" />
|
||||
<div id="toob_gain2_gain" class="toob_gain toob_gain_power_stage toob_row" />
|
||||
|
||||
{{#controls.5}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.5}}
|
||||
{{#controls.6}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.6}}
|
||||
{{#controls.7}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.7}}
|
||||
{{#controls.8}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.8}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- GAIN STAGE 2-->
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 120px">
|
||||
<div id="toob_gain3_vu" class="toob_micro_vu toob_row" />
|
||||
<div id="toob_gain3_gain" class="toob_gain toob_gain_power_stage toob_row" />
|
||||
|
||||
|
||||
{{#controls.10}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.10}}
|
||||
{{#controls.11}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.11}}
|
||||
{{#controls.12}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.12}}
|
||||
{{#controls.13}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.13}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- OUTPUT-->
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 128px">
|
||||
|
||||
<div style="margin-left: 34px; margin-right: 34px; margin-bottom: 15px;">
|
||||
{{#controls.16}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.16}}
|
||||
</div>
|
||||
<div class="toob-sag-meter" />
|
||||
{{#controls.14}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.14}}
|
||||
<div class="toob-sag-meter" />
|
||||
{{#controls.15}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.15}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toob_column" >
|
||||
<div class="toob_large_vu" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-pedal-input">
|
||||
{{#effect.ports.audio.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.input}}
|
||||
{{#effect.ports.midi.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.input}}
|
||||
{{#effect.ports.cv.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.input}}
|
||||
</div>
|
||||
|
||||
<div class="mod-pedal-output">
|
||||
{{#effect.ports.audio.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.output}}
|
||||
{{#effect.ports.midi.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.output}}
|
||||
{{#effect.ports.cv.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.output}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,81 @@
|
||||
<div class="mod-pedal mod-rack-reaktor{{{cns}}} mod-rack-tone-stack{{{cns}}}">
|
||||
<script id="ToobFrequencyScript" src="/resources/js/ToobFrequencyPlot.js{{{ns}}}" type="application/javascript" />
|
||||
<div mod-role="drag-handle" class="mod-drag-handle" style="height:100%; width: 100%"></div>
|
||||
<div class="mod-control-group">
|
||||
<div class="toob_column_grid" style="height: 100%">
|
||||
<div class="toob_column">
|
||||
<div class="mod-switch clearfix" mod-role="bypass">
|
||||
<div class="mod-switch-image" mod-role="bypass-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toob_column" >
|
||||
<div class="toob_row_grid" style="flex-flow: row wrap; width: 180px" >
|
||||
<div style="width: 180px" class="toob_row">
|
||||
{{#controls.3}}
|
||||
<div class="toob-amp-model" title="{{comment}}">
|
||||
<div class="toob-amp-model-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="switch"></div>
|
||||
</div>
|
||||
{{/controls.3}}
|
||||
</div>
|
||||
<div id="toob_tonestack_fresp" class="toob_frequency_response toob_tonestack_fresp toob_row"
|
||||
/>
|
||||
{{#controls.0}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.0}}
|
||||
{{#controls.1}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.1}}
|
||||
{{#controls.2}}
|
||||
<div class="mod-bakelite toob_row" title="{{comment}}">
|
||||
<div class="mod-bakelite-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
|
||||
<span class="mod-bakelite-title">{{name}}</span>
|
||||
</div>
|
||||
{{/controls.2}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-pedal-input">
|
||||
{{#effect.ports.audio.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.input}}
|
||||
{{#effect.ports.midi.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.input}}
|
||||
{{#effect.ports.cv.input}}
|
||||
<div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-input-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.input}}
|
||||
</div>
|
||||
|
||||
<div class="mod-pedal-output">
|
||||
{{#effect.ports.audio.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.audio.output}}
|
||||
{{#effect.ports.midi.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-midi-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.midi.output}}
|
||||
{{#effect.ports.cv.output}}
|
||||
<div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-cv-port" mod-port-symbol="{{symbol}}">
|
||||
<div class="mod-pedal-output-image"></div>
|
||||
</div>
|
||||
{{/effect.ports.cv.output}}
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,147 @@
|
||||
var ToobFrequencyPlot = {
|
||||
CreateWrapper: function (selector,width,height, dbMinOpt,dbMaxOpt,dbTickSpacingOpt)
|
||||
{
|
||||
if (dbMinOpt == undefined) dbMinOpt = -45;
|
||||
if (dbMaxOpt == undefined) dbMaxOpt = 5;
|
||||
if (dbTickSpacingOpt == undefined) dbTickSpacingOpt = 10;
|
||||
var result = { };
|
||||
|
||||
result.MIN_DB_AF = Math.pow(10,-192/20);
|
||||
result.fMin = 30;
|
||||
result.fMax = 22050;
|
||||
result.logMin = Math.log(result.fMin);
|
||||
result.logMax = Math.log(result.fMax);
|
||||
|
||||
// Size of the SVG element.
|
||||
result.xMin = 0;
|
||||
result.xMax = PLOT_WIDTH;
|
||||
result.yMin = 0;
|
||||
result.yMax = PLOT_HEIGHT;
|
||||
result.dbMin = dbMaxOpt; // deliberately reversed to flip up and down.
|
||||
result.dbMax = dbMinOpt;
|
||||
result.dbTickSpacing = dbTickSpacingOpt;
|
||||
|
||||
result.DrawGrid = function(svg)
|
||||
{
|
||||
var style = { fill: 'none', stroke: "#066",strokeWidth: 0.25};
|
||||
|
||||
for (var db = Math.ceil(this.dbMax/this.dbTickSpacing)*this.dbTickSpacing; db < this.dbMin; db += this.dbTickSpacing )
|
||||
{
|
||||
var y = (db-this.dbMin)/(this.dbMax-this.dbMin)*(this.yMax-this.yMin);
|
||||
svg.line(this.xMin,y,this.xMax,y,style);
|
||||
}
|
||||
var decade0 = Math.pow(10,Math.floor(Math.log10(this.fMin)));
|
||||
for (var decade = decade0; decade < this.fMax; decade *= 10)
|
||||
{
|
||||
for (var i = 0; i < 10; ++i)
|
||||
{
|
||||
var f = decade*i;
|
||||
if (f > this.fMin && f < this.fMax)
|
||||
{
|
||||
var x = this.xScale(f);
|
||||
svg.line(x,this.yMin,x,this.yMax,style);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
result.Draw = function(svg,values)
|
||||
{
|
||||
svg.clear();
|
||||
|
||||
var points = new Array(values.length/2);
|
||||
for (var i = 0; i < values.length; i += 2)
|
||||
{
|
||||
var f = values[i];
|
||||
var v = values[i+1];
|
||||
var x = this.xScale(f);
|
||||
var y = this.afToY(v);
|
||||
points[i/2] = [x,y];
|
||||
}
|
||||
svg.polyline(points,{fill: 'none', stroke: "#990", strokeWidth: 0.5});
|
||||
};
|
||||
|
||||
result.MaybeDraw = function()
|
||||
{
|
||||
if (this.values && this.svgPlot)
|
||||
{
|
||||
this.Draw(this.svgPlot,this.values);
|
||||
}
|
||||
};
|
||||
result.SetValues = function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDraw();
|
||||
};
|
||||
|
||||
result.DrawPlot = function(svg)
|
||||
{
|
||||
result.svgPlot = svg;
|
||||
result.MaybeDraw();
|
||||
};
|
||||
|
||||
result.Attach = function(selector, width,height)
|
||||
{
|
||||
this.xMax = width;
|
||||
this.yMax = height;
|
||||
this.selector = selector;
|
||||
this.background = $("<div>");
|
||||
selector.append(this.background);
|
||||
this.plot = $("<div>");
|
||||
selector.append(this.plot);
|
||||
|
||||
this.background.svg({onLoad: function (svg) { result.DrawGrid.apply(result,[svg]) } });
|
||||
this.plot.svg({onLoad: function (svg) { result.DrawPlot.apply(result,[svg]) } });
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
result.afToY = function(value)
|
||||
{
|
||||
value = Math.abs(value);
|
||||
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
db = -192.0;
|
||||
} else {
|
||||
db = 20*Math.log10(value);
|
||||
}
|
||||
var y = (db-this.dbMin)/(this.dbMax-this.dbMin)*(this.yMax-this.yMin) + this.yMin;
|
||||
return y;
|
||||
|
||||
};
|
||||
|
||||
result.xScale = function(frequency)
|
||||
{
|
||||
var logV = Math.log(frequency);
|
||||
return (this.xMax-this.xMin) * (logV-this.logMin)/(this.logMax-this.logMin) + this.xMin;
|
||||
};
|
||||
result.UpdateFrequencyResponse = function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDrawResponse();
|
||||
};
|
||||
result.DrawResponse = function(svg,values)
|
||||
{
|
||||
svg.clear();
|
||||
|
||||
var points = new Array(values.length/2);
|
||||
for (var i = 0; i < values.length; i += 2)
|
||||
{
|
||||
var f = values[i];
|
||||
var v = values[i+1];
|
||||
var x = this.xScale(f);
|
||||
var y = this.afToY(v);
|
||||
points[i/2] = [x,y];
|
||||
}
|
||||
svg.polyline(points,{fill: 'none', stroke: "#990", strokeWidth: 0.5});
|
||||
};
|
||||
|
||||
result.Attach(selector,width,height);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
var ToobGain = {
|
||||
CreateWrapper: function (selector,width,height)
|
||||
{
|
||||
var result = {
|
||||
MIN_DB_AF: Math.pow(10,-192/20),
|
||||
width: width,
|
||||
height:height,
|
||||
|
||||
debugBreak: true,
|
||||
|
||||
DebugBreak: function()
|
||||
{
|
||||
if (this.debugBreak)
|
||||
{
|
||||
this.debugBreak = false;
|
||||
debugger;
|
||||
}
|
||||
},
|
||||
gain: 1e-7,
|
||||
gainScale: 1,
|
||||
|
||||
SetValue: function(value)
|
||||
{
|
||||
value = value*value;
|
||||
value = value*value*1000;
|
||||
if (value < 1E-7) value = 1E-7;
|
||||
|
||||
this.gain = value;
|
||||
this.gainScale = 1/Math.atan(this.gain);
|
||||
this.MaybeDraw();
|
||||
},
|
||||
GainFn: function(x)
|
||||
{
|
||||
return Math.atan(x*this.gain)*this.gainScale;
|
||||
},
|
||||
|
||||
Draw: function(svg)
|
||||
{
|
||||
svg.clear();
|
||||
|
||||
var points = [];
|
||||
var ix = 0;
|
||||
var xs = this.width/2;
|
||||
var ys = (this.height-2)/2;
|
||||
var y0 = this.height/2;
|
||||
|
||||
for (var x = -1.0; x <= 1.0; x += 2.0/this.width)
|
||||
{
|
||||
var y = this.GainFn(x);
|
||||
points[ix++] = [ (x+1)*xs, y0-y*ys];
|
||||
}
|
||||
svg.polyline(points,{ fill: 'none', stroke: '#880', strokeThickness: 0.5, opacity: 0.5});
|
||||
},
|
||||
|
||||
MaybeDraw: function()
|
||||
{
|
||||
if (this.svgPlot)
|
||||
{
|
||||
this.Draw(this.svgPlot);
|
||||
}
|
||||
},
|
||||
DrawPlot: function(svg)
|
||||
{
|
||||
this.svgPlot = svg;
|
||||
this.MaybeDraw();
|
||||
},
|
||||
Attach: function(selector)
|
||||
{
|
||||
//this.DebugBreak();
|
||||
this.plot = $("<div>");
|
||||
selector.append(this.plot);
|
||||
var self = this;
|
||||
this.plot.svg({onLoad: function (svg) { self.DrawPlot.apply(self,[svg]); } });
|
||||
}
|
||||
};
|
||||
|
||||
result.Attach(selector);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,419 @@
|
||||
var ToobVu = {
|
||||
CreateWrapper: function (selector, _channels, width, height, minDb, maxDb, tickSpacingOpt, isTinyOpt)
|
||||
{
|
||||
if (tickSpacingOpt == undefined)
|
||||
{
|
||||
tickSpacingOpt = 6;
|
||||
}
|
||||
isTinyOpt = isTinyOpt == undefined? false: isTinyOpt;
|
||||
|
||||
var result = {
|
||||
MIN_DB_AF: Math.pow(10,-192/20),
|
||||
channels: _channels,
|
||||
dbMin: minDb,
|
||||
dbMax: maxDb,
|
||||
width: width,
|
||||
height:height,
|
||||
yMin: 0,
|
||||
yMax: height-4,
|
||||
xMin: 0,
|
||||
xMax: width,
|
||||
tickSpacing: tickSpacingOpt,
|
||||
isTiny: isTinyOpt,
|
||||
|
||||
values: [-96],
|
||||
peaks: [-96],
|
||||
|
||||
|
||||
|
||||
prepareLayout: function() {
|
||||
var ticksWidth;
|
||||
if (this.isTiny)
|
||||
{
|
||||
this.tick0L = 0;
|
||||
this.tick1R = width;
|
||||
ticksWidth = this.tick1R-this.tick0L;
|
||||
this.trackL = this.tick0L + ticksWidth/3;
|
||||
this.trackR = this.tick0L + ticksWidth*2/3;
|
||||
this.tick0R = this.trackL-2;
|
||||
this.tick1L = this.trackR + 2;
|
||||
this.ledL = this.trackL+1;
|
||||
this.ledR = this.trackR-1;
|
||||
} else {
|
||||
this.tick0L = 20;
|
||||
this.tick1R = width;
|
||||
ticksWidth = this.tick1R-this.tick0L;
|
||||
if (this.channels > 1)
|
||||
{
|
||||
this.trackL = this.tick0L + ticksWidth/4;
|
||||
this.trackR = this.tick0L + ticksWidth*3/4;
|
||||
|
||||
} else
|
||||
{
|
||||
this.trackL = this.tick0L + ticksWidth/3;
|
||||
this.trackR = this.tick0L + ticksWidth*2/3;
|
||||
}
|
||||
this.tick0R = this.trackL-2;
|
||||
this.tick1L = this.trackR + 2;
|
||||
this.ledL = this.trackL+1;
|
||||
this.ledR = this.trackR-1;
|
||||
}
|
||||
},
|
||||
|
||||
DrawTicks: function (svg) {
|
||||
var majorTick = { fill: 'none', stroke: "#EEE",strokeWidth: 2, opacity: 0.5 };
|
||||
if (this.tickSpacing == 0)
|
||||
{
|
||||
var y = this.dbToY(0);
|
||||
|
||||
svg.line(this.tick0L,y,this.tick0R,y,
|
||||
majorTick);
|
||||
if (!this.isTiny)
|
||||
{
|
||||
svg.line(this.tick1L,y,this.tick1R,y,
|
||||
majorTick);
|
||||
}
|
||||
} else {
|
||||
var minorTick = { fill: 'none', stroke: "#EEE",strokeWidth: 1, opacity: 0.3 };
|
||||
var textSettings = { fill: '#eee', stroke: 'none', fontFamily: '"cooper hewitt",Sans-Serif',fontSize: "6px", textAnchor: "end", opacity: 0.5};
|
||||
|
||||
for (var db = Math.ceil(this.dbMin/this.tickSpacing)*this.tickSpacing; db < this.dbMax; db += this.tickSpacing )
|
||||
{
|
||||
var y = this.dbToY(db);
|
||||
|
||||
svg.line(this.tick0L,y,this.tick0R,y,
|
||||
db === 0? majorTick: minorTick);
|
||||
if (!this.isTiny)
|
||||
{
|
||||
svg.line(this.tick1L,y,this.tick1R,y,
|
||||
db === 0? majorTick: minorTick);
|
||||
|
||||
var text;
|
||||
if (db > 0)
|
||||
{
|
||||
text = "+" + db;
|
||||
} else {
|
||||
text = "" + db;
|
||||
}
|
||||
svg.text(this.tick0L-2,y+2,text,textSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
var y0 = this.dbToY(0);
|
||||
var y1 = this.dbToY(-this.tickSpacing);
|
||||
var targetFill = {fill: '#FFF', stroke: 'none',opacity: 0.07};
|
||||
svg.rect(this.tick0L,y0,this.tick0R-this.tick0L,y1-y0,0,0,targetFill);
|
||||
svg.rect(this.tick1L,y0,this.tick1R-this.tick1L,y1-y0,0,0,targetFill);
|
||||
|
||||
y0 = this.dbToY(this.dbMax);
|
||||
y1 = this.dbToY(this.dbMin);
|
||||
svg.rect(this.trackL,y0,this.trackR-this.trackL,y1-y0,0,0,{fill: '#000', stroke: 'none'});
|
||||
},
|
||||
|
||||
greenVu: { fill: "#080", stroke: 'none',opacity: 0.5},
|
||||
redVu: { fill: "#800", stroke: 'none',opacity: 0.5},
|
||||
yellowVu: { fill: "#880", stroke: 'none',opacity: 0.5},
|
||||
greenPeak: { fill: "#0F0", stroke: 'none',opacity: 1},
|
||||
redPeak: { fill: "#F00", stroke: 'none',opacity: 1},
|
||||
yellowPeak: { fill: "#FF0", stroke: 'none',opacity: 1},
|
||||
greenPeakColor: "#0F0",
|
||||
nonePeakColor: "transparent",
|
||||
redPeakColor: "#F00",
|
||||
yellowPeakColor: "#FF0",
|
||||
|
||||
debugBreak: true,
|
||||
|
||||
DebugBreak: function()
|
||||
{
|
||||
if (this.debugBreak)
|
||||
{
|
||||
this.debugBreak = false;
|
||||
debugger;
|
||||
}
|
||||
},
|
||||
Update: function()
|
||||
{
|
||||
var yMin = this.dbToY(this.dbMin);
|
||||
var yMax = this.dbToY(this.dbMax);
|
||||
var yZero = this.dbToY(0);
|
||||
var yYellow = this.dbToY(-6);
|
||||
|
||||
for (var channel = 0; channel < this.channels; ++channel)
|
||||
{
|
||||
var yValue = this.dbToY(this.values[channel]);
|
||||
var yPeak = this.dbToY(this.peaks[channel]);
|
||||
|
||||
var channelControls = this.channelControls[channel];
|
||||
if (yValue < yMin)
|
||||
{
|
||||
var yGreen = Math.max(yYellow,yValue);
|
||||
channelControls.greenRect.setAttribute("y",yGreen,"");
|
||||
channelControls.greenRect.setAttribute("height",yMin-yGreen,"");
|
||||
} else {
|
||||
channelControls.greenRect.setAttribute("y",0,"");
|
||||
channelControls.greenRect.setAttribute("height",0,"");
|
||||
}
|
||||
if (yValue < yYellow)
|
||||
{
|
||||
var y = Math.max(yZero,yValue);
|
||||
channelControls.yellowRect.setAttribute("y",y,"");
|
||||
channelControls.yellowRect.setAttribute("height",yYellow-y,"");
|
||||
} else {
|
||||
channelControls.yellowRect.setAttribute("y",0,"");
|
||||
channelControls.yellowRect.setAttribute("height",0,"");
|
||||
|
||||
}
|
||||
if (yValue < yZero)
|
||||
{
|
||||
var y = Math.max(yMax,yValue);
|
||||
|
||||
channelControls.redRect.setAttribute("y",y,"");
|
||||
channelControls.redRect.setAttribute("height",yZero-y,"");
|
||||
} else {
|
||||
channelControls.redRect.setAttribute("y",0,"");
|
||||
channelControls.redRect.setAttribute("height",0,"");
|
||||
}
|
||||
var peakFill = null;
|
||||
var peakHeight = 2;
|
||||
if (yPeak < yZero)
|
||||
{
|
||||
peakFill = this.redPeakColor;
|
||||
} else if (yPeak < yYellow)
|
||||
{
|
||||
peakFill = this.yellowPeakColor;
|
||||
} else if (yPeak < yMin)
|
||||
{
|
||||
peakFill = this.greenPeakColor;
|
||||
} else {
|
||||
peakFill = this.nonePeakColor;
|
||||
peakHeight = 0;
|
||||
}
|
||||
{
|
||||
var y = Math.max(yMax+1,yPeak);
|
||||
channelControls.peakRect.setAttribute("y",y-1,"");
|
||||
channelControls.peakRect.setAttribute("height",peakHeight);
|
||||
channelControls.peakRect.setAttribute("fill",peakFill);
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isTiny && this.hasGate)
|
||||
{
|
||||
// 0: disabled, 1: released, 2: releasing, 3: attacking, 4: holding.
|
||||
var yGateThreshold = this.dbToY(this.gateThreshold);
|
||||
var showGate = (this.gateEnabled && yGateThreshold < yMin);
|
||||
|
||||
if (showGate)
|
||||
{
|
||||
var state = { fill: this.gateState >= 3 ? "#080" : "#C00", stroke: '#000', strokeWidth: 1};
|
||||
var fill = this.gateState >= 3 ? "#080" : "#C00";
|
||||
|
||||
this.gateIndicatorL.setAttribute("fill",fill,"");
|
||||
this.gateIndicatorR.setAttribute("fill",fill,"");
|
||||
var pointsL = (this.trackL-1) +","+ (yGateThreshold) +
|
||||
" " + (this.trackL-9) + "," + (yGateThreshold+4) +
|
||||
" " + (this.trackL-9) + "," + (yGateThreshold-4) +
|
||||
" " + (this.trackL-1) +","+ (yGateThreshold);
|
||||
this.gateIndicatorL.setAttribute("points",pointsL,"");
|
||||
|
||||
var pointsR = (this.trackR+1) +","+ (yGateThreshold) +
|
||||
" " + (this.trackR+9) + "," + (yGateThreshold-4) +
|
||||
" " + (this.trackR+9) + "," + (yGateThreshold+4) +
|
||||
" " + (this.trackR+1) +","+ (yGateThreshold);
|
||||
this.gateIndicatorR.setAttribute("points",pointsR,"");
|
||||
|
||||
this.gateIndicatorL.setAttribute("opacity","1","");
|
||||
this.gateIndicatorR.setAttribute("opacity","1","");
|
||||
} else {
|
||||
this.gateIndicatorL.setAttribute("opacity","0","");
|
||||
this.gateIndicatorR.setAttribute("opacity","0","");
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
Draw: function(svg)
|
||||
{
|
||||
svg.clear();
|
||||
|
||||
for (var channel = 0; channel < this.channels; ++channel)
|
||||
{
|
||||
this.channelControls[channel] = this.drawChannel(svg,channel);
|
||||
}
|
||||
if (!this.isTiny)
|
||||
{
|
||||
var yGateThreshold = this.dbToY(0);
|
||||
var state = { fill: "transparent", stroke: '#000', strokeWidth: 1};
|
||||
var points = [[0,0]]; // just create the structure. Updates will give the shape.
|
||||
this.gateIndicatorL = svg.polyline(points,state);
|
||||
this.gateIndicatorR = svg.polyline(points,state);
|
||||
}
|
||||
},
|
||||
drawChannel: function(svg,channel)
|
||||
{
|
||||
var result = {};
|
||||
var width = ((this.ledR-this.ledL)-(this.channels-1))/this.channels;
|
||||
var x0 = this.ledL + channel*(width+1);
|
||||
|
||||
|
||||
// render all the controls, without y info which will be filled in during Update.
|
||||
|
||||
result.greenRect = svg.rect(x0,0,width,0,0,0,this.greenVu);
|
||||
result.yellowRect = svg.rect(x0,0,width,0,0,0,this.yellowVu);
|
||||
result.redRect = svg.rect(x0,0,width,0,0,0,this.redVu);
|
||||
result.peakRect = svg.rect(x0,0,width,0,0,0,this.greenPeak);
|
||||
return result;
|
||||
},
|
||||
|
||||
channelControls: [],
|
||||
MaybeUpdate: function()
|
||||
{
|
||||
if (this.svgPlot)
|
||||
{
|
||||
for (var i = 0; i < this.channels; ++i)
|
||||
{
|
||||
this.Update(this.channelControls[i],this.values[i],this.peaks[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
getTimeMs: function()
|
||||
{
|
||||
return new Date().getTime();
|
||||
},
|
||||
lastPeaks: [-96],
|
||||
holdTimes: [0],
|
||||
|
||||
holdLengthMs: 2000,
|
||||
holdTime: 0,
|
||||
peakDecayRate: -96/4000,
|
||||
valueDecayRate: -96/1000,
|
||||
lastValueTime: 0,
|
||||
gateState: 0,
|
||||
|
||||
UpdateValue: function(value, gateStateOpt)
|
||||
{
|
||||
this.UpdateValues([value],gateStateOpt);
|
||||
},
|
||||
UpdateValues: function(values,gateStateOpt)
|
||||
{
|
||||
if (gateStateOpt == undefined)
|
||||
{
|
||||
gateStateOpt = 0;
|
||||
}
|
||||
//this.DebugBreak();
|
||||
var time = this.getTimeMs();
|
||||
|
||||
for (var i = 0; i < this.values.length; ++i)
|
||||
{
|
||||
var value = i < values.length? values[i]: 0;
|
||||
value = this.afToDb(value);
|
||||
var decayedValue = this.values[i] +(time-this.lastValueTime)*this.valueDecayRate;
|
||||
if (decayedValue > value)
|
||||
{
|
||||
value = decayedValue;
|
||||
}
|
||||
this.values[i] = value;
|
||||
|
||||
|
||||
if (time > this.holdTimes[i])
|
||||
{
|
||||
this.peaks[i] = this.lastPeaks[i] +(time-this.holdTimes[i])*this.peakDecayRate;
|
||||
}
|
||||
if (value > this.peaks[i])
|
||||
{
|
||||
this.lastPeaks[i] = this.peaks[i] = value;
|
||||
this.holdTimes[i] = time+this.holdLengthMs;
|
||||
}
|
||||
}
|
||||
this.lastValueTime = time;
|
||||
this.gateState = gateStateOpt;
|
||||
this.MaybeUpdate();
|
||||
},
|
||||
|
||||
gateEnabled: false,
|
||||
gateThreshold: -180,
|
||||
hasGate: false,
|
||||
SetGateEnabled: function(enabled)
|
||||
{
|
||||
this.hasGate = true;
|
||||
if (this.gateEnabled != enabled)
|
||||
{
|
||||
this.gateEnabled = enabled;
|
||||
this.MaybeUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
SetGateThreshold: function(value)
|
||||
{
|
||||
this.hasGate = true;
|
||||
if (this.gateThreshold != value)
|
||||
{
|
||||
this.gateThreshold = value;
|
||||
this.MaybeUpdate();
|
||||
}
|
||||
},
|
||||
DrawPlot: function(svg)
|
||||
{
|
||||
this.svgPlot = svg;
|
||||
this.Draw(this.svgPlot,this.value,this.peak);
|
||||
},
|
||||
dbToY: function(db)
|
||||
{
|
||||
if (db < this.minDb) db = this.minDb;
|
||||
if (db > this.maxDb) db = this.maxDb;
|
||||
return (db-this.dbMin)/(this.dbMax-this.dbMin)*(this.yMin-this.yMax)+this.yMax;
|
||||
},
|
||||
afToDb: function(af)
|
||||
{
|
||||
var value = Math.abs(af);
|
||||
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
db = -192.0;
|
||||
} else {
|
||||
db = 20*Math.log10(value);
|
||||
}
|
||||
return db;
|
||||
},
|
||||
|
||||
afToY: function(value)
|
||||
{
|
||||
var db = afToDb(value);
|
||||
return this.dbToY(db);
|
||||
},
|
||||
|
||||
|
||||
Attach: function(selector)
|
||||
{
|
||||
|
||||
var time = this.getTimeMs();
|
||||
this.lastValueTime = time;
|
||||
if (this.holdTime === 0) this.holdTime = time;
|
||||
for (var i = 1; i < this.channels; ++i)
|
||||
{
|
||||
this.values[i] = this.values[0];
|
||||
this.peaks[i] = this.peaks[0];
|
||||
this.lastPeaks[i] = this.peaks[0];
|
||||
}
|
||||
for (var i = 0; i < this.channels; ++i)
|
||||
{
|
||||
this.holdTimes[i] = time;
|
||||
}
|
||||
this.prepareLayout();
|
||||
this.background = $("<div>");
|
||||
selector.append(this.background);
|
||||
this.plot = $("<div>");
|
||||
selector.append(this.plot);
|
||||
var self = this;
|
||||
this.background.svg({onLoad: function (svg) { self.DrawTicks.apply(self,[svg]); } });
|
||||
this.plot.svg({onLoad: function (svg) { self.DrawPlot.apply(self,[svg]); } });
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
result.Attach(selector);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -0,0 +1,167 @@
|
||||
method = function (event,jsFuncs) {
|
||||
|
||||
|
||||
function LoadScripts(ds)
|
||||
{
|
||||
var script = event.icon.find("#ToobFrequencyScript");
|
||||
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnFrequencyScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
|
||||
script = event.icon.find("#ToobVuScript");
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnVuScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handle_event (symbol, value) {
|
||||
switch (symbol) {
|
||||
case "gate_t":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetGateThreshold(value);
|
||||
ds.SetGateEnabled(value != -80);
|
||||
}
|
||||
break;
|
||||
case "boost":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetBoost(value);
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function MakeDs()
|
||||
{
|
||||
var ds = {
|
||||
|
||||
FREQUENCY_RESPONSE_URI: "http://two-play.com/plugins/toob#frequencyResponseVector",
|
||||
UI_STATE_URI: "http://two-play.com/plugins/toob-cab-sim#uiState",
|
||||
|
||||
SpectrumDiv: event.icon.find('.toob_cabsim_fresp'),
|
||||
|
||||
|
||||
attached: false,
|
||||
vuAttached: false,
|
||||
|
||||
|
||||
OnVuScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobVu && !this.vuAttached)
|
||||
{
|
||||
this.vuAttached = true;
|
||||
this.ToobVu = ToobVu;
|
||||
this.vu = this.ToobVu.CreateWrapper(this.VuDiv,2,48,130,-80,20,12);
|
||||
}
|
||||
},
|
||||
gateThreshold: -192,
|
||||
gateEnabled: false,
|
||||
SetGateThreshold: function(value)
|
||||
{
|
||||
this.gateThreshold = value;
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.SetGateThreshold(value);
|
||||
}
|
||||
},
|
||||
SetGateEnabled: function(enabled)
|
||||
{
|
||||
this.gateEnabled = enabled;
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.SetGateEnabled(enabled);
|
||||
}
|
||||
},
|
||||
boost: 0,
|
||||
SetBoost: function(value)
|
||||
{
|
||||
this.boost = value;
|
||||
if (this.gain)
|
||||
{
|
||||
this.gain.SetValue(value);
|
||||
}
|
||||
},
|
||||
OnFrequencyScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobFrequencyPlot && !ds.attached)
|
||||
{
|
||||
ds.ToobFrequencyPlot = ToobFrequencyPlot;
|
||||
ds.attached = true;
|
||||
ds.frequencyPlot = ToobFrequencyPlot.CreateWrapper(this.SpectrumDiv,236,66);
|
||||
}
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
MaybeDrawResponse: function() {
|
||||
if (this.frequencyPlot && this.values)
|
||||
{
|
||||
this.frequencyPlot.SetValues(this.values);
|
||||
}
|
||||
},
|
||||
VuDiv: event.icon.find('.cabsim_vu'),
|
||||
|
||||
UpdateFrequencyResults: function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
UpdateUiState: function(values)
|
||||
{
|
||||
var vuLevel = values[0];
|
||||
var gateState = values[1];
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.UpdateValues([ values[0], values[1] ],gateState);
|
||||
}
|
||||
}
|
||||
};
|
||||
return ds;
|
||||
|
||||
}
|
||||
function handle_property(uri, value)
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
if (uri == ds.FREQUENCY_RESPONSE_URI)
|
||||
{
|
||||
ds.UpdateFrequencyResults(value);
|
||||
} else if (uri == ds.UI_STATE_URI)
|
||||
{
|
||||
ds.UpdateUiState(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.type == 'start') {
|
||||
//debugger;
|
||||
|
||||
|
||||
// var dpy = event.icon.find('[mod-role=frequency-display]');
|
||||
|
||||
var ds = MakeDs();
|
||||
event.icon.data('xModFrequency', ds);
|
||||
LoadScripts(ds);
|
||||
var ports = event.ports;
|
||||
for (var p in ports) {
|
||||
handle_event(ports[p].symbol, ports[p].value);
|
||||
}
|
||||
// refresh the frequency display if not first load.
|
||||
jsFuncs.patch_get(ds.FREQUENCY_RESPONSE_URI);
|
||||
|
||||
}
|
||||
else if (event.type == 'change') {
|
||||
if (event.symbol)
|
||||
{
|
||||
handle_event (event.symbol, event.value);
|
||||
} else {
|
||||
handle_property(event.uri,event.value);
|
||||
}
|
||||
} else {
|
||||
//debugger;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,188 @@
|
||||
method = function (event,jsFuncs) {
|
||||
|
||||
|
||||
function LoadScripts(ds)
|
||||
{
|
||||
var script = event.icon.find("#ToobFrequencyScript");
|
||||
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnFrequencyScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
|
||||
script = event.icon.find("#ToobVuScript");
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnVuScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
script = event.icon.find("#ToobGainScript");
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnGainScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handle_event (symbol, value) {
|
||||
switch (symbol) {
|
||||
case "gate_t":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetGateThreshold(value);
|
||||
ds.SetGateEnabled(value != -80);
|
||||
}
|
||||
break;
|
||||
case "boost":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetBoost(value);
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function MakeDs()
|
||||
{
|
||||
var ds = {
|
||||
|
||||
FREQUENCY_RESPONSE_URI: "http://two-play.com/plugins/toob#frequencyResponseVector",
|
||||
UI_STATE_URI: "http://two-play.com/plugins/toob-input_stage#uiState",
|
||||
|
||||
SpectrumDiv: event.icon.find('.toob_frequency_response'),
|
||||
|
||||
|
||||
attached: false,
|
||||
vuAttached: false,
|
||||
gainAttached: false,
|
||||
|
||||
OnGainScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobGain && !this.gainAttached)
|
||||
{
|
||||
this.gainAttached = true;
|
||||
this.ToobGain = ToobGain;
|
||||
this.gain = this.ToobGain.CreateWrapper(this.GainDiv,48,48);
|
||||
this.gain.SetValue(this.boost);
|
||||
}
|
||||
},
|
||||
|
||||
OnVuScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobVu && !this.vuAttached)
|
||||
{
|
||||
this.vuAttached = true;
|
||||
this.ToobVu = ToobVu;
|
||||
this.vu = this.ToobVu.CreateWrapper(this.VuDiv,1,48,130,-80,10,12);
|
||||
}
|
||||
},
|
||||
gateThreshold: -192,
|
||||
gateEnabled: false,
|
||||
SetGateThreshold: function(value)
|
||||
{
|
||||
this.gateThreshold = value;
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.SetGateThreshold(value);
|
||||
}
|
||||
},
|
||||
SetGateEnabled: function(enabled)
|
||||
{
|
||||
this.gateEnabled = enabled;
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.SetGateEnabled(enabled);
|
||||
}
|
||||
},
|
||||
boost: 0,
|
||||
SetBoost: function(value)
|
||||
{
|
||||
this.boost = value;
|
||||
if (this.gain)
|
||||
{
|
||||
this.gain.SetValue(value);
|
||||
}
|
||||
},
|
||||
OnFrequencyScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobFrequencyPlot && !ds.attached)
|
||||
{
|
||||
ds.ToobFrequencyPlot = ToobFrequencyPlot;
|
||||
ds.attached = true;
|
||||
ds.frequencyPlot = ToobFrequencyPlot.CreateWrapper(this.SpectrumDiv,178,78);
|
||||
}
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
MaybeDrawResponse: function() {
|
||||
if (this.frequencyPlot && this.values)
|
||||
{
|
||||
this.frequencyPlot.SetValues(this.values);
|
||||
}
|
||||
},
|
||||
VuDiv: event.icon.find('.toob_vu'),
|
||||
GainDiv: event.icon.find('.toob_gain'),
|
||||
|
||||
UpdateFrequencyResults: function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
UpdateUiState: function(values)
|
||||
{
|
||||
var vuLevel = values[0];
|
||||
var gateState = values[1];
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.UpdateValue(vuLevel,gateState);
|
||||
}
|
||||
}
|
||||
};
|
||||
return ds;
|
||||
|
||||
}
|
||||
function handle_property(uri, value)
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
if (uri == ds.FREQUENCY_RESPONSE_URI)
|
||||
{
|
||||
ds.UpdateFrequencyResults(value);
|
||||
} else if (uri == ds.UI_STATE_URI)
|
||||
{
|
||||
ds.UpdateUiState(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.type == 'start') {
|
||||
//debugger;
|
||||
if (event.api_version < 2)
|
||||
{
|
||||
alert("Requires mod-ui Javascript API 2.0 or later.");
|
||||
}
|
||||
|
||||
|
||||
// var dpy = event.icon.find('[mod-role=frequency-display]');
|
||||
|
||||
var ds = MakeDs();
|
||||
event.icon.data('xModFrequency', ds);
|
||||
LoadScripts(ds);
|
||||
var ports = event.ports;
|
||||
for (var p in ports) {
|
||||
handle_event(ports[p].symbol, ports[p].value);
|
||||
}
|
||||
// refresh the frequency display if not first load.
|
||||
jsFuncs.patch_get(ds.FREQUENCY_RESPONSE_URI);
|
||||
|
||||
}
|
||||
else if (event.type == 'change') {
|
||||
if (event.symbol)
|
||||
{
|
||||
handle_event (event.symbol, event.value);
|
||||
} else {
|
||||
handle_property(event.uri,event.value);
|
||||
}
|
||||
} else {
|
||||
//debugger;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,257 @@
|
||||
method = function (event,jsFuncs) {
|
||||
|
||||
|
||||
function LoadScripts(ds)
|
||||
{
|
||||
var script = event.icon.find("#ToobFrequencyScript");
|
||||
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnFrequencyScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
|
||||
script = event.icon.find("#ToobVuScript");
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnVuScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
script = event.icon.find("#ToobGainScript");
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnGainScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handle_event (symbol, value) {
|
||||
var ds;
|
||||
switch (symbol) {
|
||||
case "gain1":
|
||||
{
|
||||
ds = event.icon.data('xModFrequency');
|
||||
ds.SetGain(0,value);
|
||||
}
|
||||
break;
|
||||
case "gain2":
|
||||
{
|
||||
ds = event.icon.data('xModFrequency');
|
||||
ds.SetGain(1,value);
|
||||
}
|
||||
break;
|
||||
case "gain3":
|
||||
{
|
||||
ds = event.icon.data('xModFrequency');
|
||||
ds.SetGain(2,value);
|
||||
}
|
||||
break;
|
||||
|
||||
case "boost":
|
||||
{
|
||||
ds = event.icon.data('xModFrequency');
|
||||
ds.SetBoost(value);
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function MakeDs()
|
||||
{
|
||||
var ds = {
|
||||
|
||||
UI_STATE_URI: "http://two-play.com/plugins/toob-power-stage#uiState",
|
||||
|
||||
SpectrumDiv: event.icon.find('.toob_frequency_response'),
|
||||
|
||||
icon: event.icon,
|
||||
|
||||
|
||||
attached: false,
|
||||
vuAttached: false,
|
||||
gainAttached: false,
|
||||
|
||||
OnGainScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobGain && !this.gainAttached)
|
||||
{
|
||||
|
||||
|
||||
this.gainAttached = true;
|
||||
this.ToobGain = ToobGain;
|
||||
this.gainControls = [];
|
||||
|
||||
var divs = event.icon.find('.toob_gain');
|
||||
var self = this;
|
||||
divs.each(function (i)
|
||||
{
|
||||
self.gainControls[i] = self.ToobGain.CreateWrapper($(this),48,48);
|
||||
self.gainControls[i].SetValue(self.gains[i]);
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
gains: [1E-7,1E-7,1E-7],
|
||||
SetGain: function(gainStage,value)
|
||||
{
|
||||
this.gains[gainStage] = value;
|
||||
if (this.gainControls)
|
||||
{
|
||||
this.gainControls[gainStage].SetValue(value);
|
||||
}
|
||||
},
|
||||
|
||||
SAG_METER_SIZE: { width: 2, height: 44},
|
||||
sagRects: [],
|
||||
|
||||
DrawSagMeters: function(selector)
|
||||
{
|
||||
var self = this;
|
||||
var targetFill = { fill: "#044", stroke: 'none'};
|
||||
selector.each(function (i) {
|
||||
var meter = $(this);
|
||||
meter.svg({onLoad: function (svg) {
|
||||
self.sagRects[i] = svg.rect(0,0,
|
||||
self.SAG_METER_SIZE.width,self.SAG_METER_SIZE.height,
|
||||
0,0,
|
||||
targetFill);
|
||||
}});
|
||||
});
|
||||
$(this)
|
||||
},
|
||||
|
||||
OnVuScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobVu && !this.vuAttached)
|
||||
{
|
||||
this.vuAttached = true;
|
||||
this.ToobVu = ToobVu;
|
||||
this.vuControls = [];
|
||||
var microVus = this.icon.find('.toob_micro_vu');
|
||||
var self = this;
|
||||
microVus.each(function (i)
|
||||
{
|
||||
self.vuControls[i] = self.ToobVu.CreateWrapper($(this),1,20,66,-30,10,0,true);
|
||||
self.vuControls[i].UpdateValue(self.vus[i]);
|
||||
});
|
||||
|
||||
var masterVu = this.icon.find('.toob_large_vu');
|
||||
this.vuControls[3] = this.ToobVu.CreateWrapper(masterVu,1,48,206,-80,10,12);
|
||||
this.vuControls[3].UpdateValue(this.vus[3]);
|
||||
}
|
||||
},
|
||||
vuControls: null,
|
||||
vus: [0,0,0,0],
|
||||
|
||||
SetVu: function(i,value)
|
||||
{
|
||||
this.vus[i] = value;
|
||||
if (this.vuControls)
|
||||
{
|
||||
this.vuControls[i].UpdateValue(value);
|
||||
}
|
||||
},
|
||||
|
||||
sag: 0,
|
||||
sagD: 0,
|
||||
|
||||
SetSag: function(value)
|
||||
{
|
||||
this.sag = value;
|
||||
var rect = this.sagRects[0];
|
||||
if (rect != undefined)
|
||||
{
|
||||
var y = this.SAG_METER_SIZE.height*this.sag;
|
||||
rect.setAttribute("top",y,"");
|
||||
rect.setAttribute("height",this.SAG_METER_SIZE.height-y,"");
|
||||
}
|
||||
},
|
||||
SetSagD: function(value)
|
||||
{
|
||||
|
||||
this.sagD = value;
|
||||
var rect = this.sagRects[1];
|
||||
if (rect != undefined)
|
||||
{
|
||||
var y = this.SAG_METER_SIZE.height*(this.sagD);
|
||||
rect.setAttribute("top",y,"");
|
||||
rect.setAttribute("height",this.SAG_METER_SIZE.height-y,"");
|
||||
}
|
||||
|
||||
},
|
||||
OnFrequencyScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobFrequencyPlot && !ds.attached)
|
||||
{
|
||||
ds.ToobFrequencyPlot = ToobFrequencyPlot;
|
||||
ds.attached = true;
|
||||
ds.frequencyPlot = ToobFrequencyPlot.CreateWrapper(this.SpectrumDiv,178,78);
|
||||
}
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
MaybeDrawResponse: function() {
|
||||
if (this.frequencyPlot && this.values)
|
||||
{
|
||||
this.frequencyPlot.SetValues(this.values);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
UpdateFrequencyResults: function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
UpdateUiState: function(values)
|
||||
{
|
||||
for (var i = 0; i < 4; ++i)
|
||||
{
|
||||
this.SetVu(i,values[i]);
|
||||
}
|
||||
this.SetSag(values[4]);
|
||||
this.SetSagD(values[5]);
|
||||
}
|
||||
};
|
||||
ds.DrawSagMeters(event.icon.find(".toob-sag-meter"));
|
||||
return ds;
|
||||
|
||||
}
|
||||
function handle_property(uri, value)
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
if (uri == ds.FREQUENCY_RESPONSE_URI)
|
||||
{
|
||||
ds.UpdateFrequencyResults(value);
|
||||
} else if (uri == ds.UI_STATE_URI)
|
||||
{
|
||||
ds.UpdateUiState(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.type == 'start') {
|
||||
debugger;
|
||||
|
||||
|
||||
// var dpy = event.icon.find('[mod-role=frequency-display]');
|
||||
|
||||
var ds = MakeDs();
|
||||
event.icon.data('xModFrequency', ds);
|
||||
LoadScripts(ds);
|
||||
var ports = event.ports;
|
||||
for (var p in ports) {
|
||||
handle_event(ports[p].symbol, ports[p].value);
|
||||
}
|
||||
|
||||
}
|
||||
else if (event.type == 'change') {
|
||||
if (event.symbol)
|
||||
{
|
||||
handle_event (event.symbol, event.value);
|
||||
} else {
|
||||
handle_property(event.uri,event.value);
|
||||
}
|
||||
} else {
|
||||
//debugger;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
method = function (event,jsFuncs) {
|
||||
|
||||
|
||||
function LoadScripts(ds)
|
||||
{
|
||||
var script = event.icon.find("#ToobFrequencyScript");
|
||||
|
||||
$.get(script[0].src, function(data,status) {
|
||||
ds.OnFrequencyScriptLoaded.apply(ds,[data,status]);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handle_event (symbol, value) {
|
||||
switch (symbol) {
|
||||
case "gate_t":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetGateThreshold(value);
|
||||
ds.SetGateEnabled(value != -80);
|
||||
}
|
||||
break;
|
||||
case "boost":
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
ds.SetBoost(value);
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function MakeDs()
|
||||
{
|
||||
var ds = {
|
||||
|
||||
FREQUENCY_RESPONSE_URI: "http://two-play.com/plugins/toob#frequencyResponseVector",
|
||||
UI_STATE_URI: "http://two-play.com/plugins/toob-tone-stack#uiState",
|
||||
|
||||
SpectrumDiv: event.icon.find('.toob_tonestack_fresp'),
|
||||
|
||||
|
||||
attached: false,
|
||||
|
||||
OnFrequencyScriptLoaded: function(data,status)
|
||||
{
|
||||
eval(data);
|
||||
if (ToobFrequencyPlot && !ds.attached)
|
||||
{
|
||||
//debugger;
|
||||
ds.ToobFrequencyPlot = ToobFrequencyPlot;
|
||||
ds.attached = true;
|
||||
ds.frequencyPlot = ToobFrequencyPlot.CreateWrapper(this.SpectrumDiv,176,86,-25,3);
|
||||
}
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
MaybeDrawResponse: function() {
|
||||
if (this.frequencyPlot && this.values)
|
||||
{
|
||||
this.frequencyPlot.SetValues(this.values);
|
||||
}
|
||||
},
|
||||
VuDiv: event.icon.find('.cabsim_vu'),
|
||||
|
||||
UpdateFrequencyResults: function(values)
|
||||
{
|
||||
this.values = values;
|
||||
this.MaybeDrawResponse();
|
||||
},
|
||||
UpdateUiState: function(values)
|
||||
{
|
||||
var vuLevel = values[0];
|
||||
var gateState = values[1];
|
||||
if (this.vu)
|
||||
{
|
||||
this.vu.UpdateValues([ values[0], values[1] ],gateState);
|
||||
}
|
||||
}
|
||||
};
|
||||
return ds;
|
||||
|
||||
}
|
||||
function handle_property(uri, value)
|
||||
{
|
||||
var ds = event.icon.data('xModFrequency');
|
||||
if (uri == ds.FREQUENCY_RESPONSE_URI)
|
||||
{
|
||||
ds.UpdateFrequencyResults(value);
|
||||
} else if (uri == ds.UI_STATE_URI)
|
||||
{
|
||||
ds.UpdateUiState(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.type == 'start') {
|
||||
//debugger;
|
||||
|
||||
if (event.api_version < 2)
|
||||
{
|
||||
alert("Requires mod-ui Javascript API 2.0 or later.");
|
||||
}
|
||||
|
||||
|
||||
// var dpy = event.icon.find('[mod-role=frequency-display]');
|
||||
|
||||
var ds = MakeDs();
|
||||
event.icon.data('xModFrequency', ds);
|
||||
LoadScripts(ds);
|
||||
var ports = event.ports;
|
||||
for (var p in ports) {
|
||||
handle_event(ports[p].symbol, ports[p].value);
|
||||
}
|
||||
// refresh the frequency display if not first load.
|
||||
jsFuncs.patch_get(ds.FREQUENCY_RESPONSE_URI);
|
||||
|
||||
}
|
||||
else if (event.type == 'change') {
|
||||
if (event.symbol)
|
||||
{
|
||||
handle_event (event.symbol, event.value);
|
||||
} else {
|
||||
handle_property(event.uri,event.value);
|
||||
}
|
||||
} else {
|
||||
//debugger;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,542 @@
|
||||
/* SKINS */
|
||||
.mod-rack-reaktor{{{cns}}} {
|
||||
background-image:url(/resources/racks/reaktor/reaktor.png{{{ns}}});
|
||||
background-position:center center;
|
||||
background-repeat:no-repeat;
|
||||
font-family:Helvetica,Arial,Sans-serif;
|
||||
height:255px;
|
||||
position:relative;
|
||||
width:458px;
|
||||
}
|
||||
.mod-rack-power-stage{{{cns}}} {
|
||||
background-image:url(/resources/racks/reaktor/PowerStage.png{{{ns}}});
|
||||
width:701px;
|
||||
}
|
||||
.mod-rack-cab-sim{{{cns}}} {
|
||||
background-image:url(/resources/racks/reaktor/CabSimulator.png{{{ns}}});
|
||||
width:458px;
|
||||
}
|
||||
.mod-rack-tone-stack{{{cns}}} {
|
||||
background-image:url(/resources/racks/reaktor/ToneStack.png{{{ns}}});
|
||||
width:341px;
|
||||
}
|
||||
|
||||
/* THE AUTHOR */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-plugin-brand h1 {
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
left:70px;
|
||||
line-height:1;
|
||||
margin:0;
|
||||
position:absolute;
|
||||
top:20px;
|
||||
}
|
||||
|
||||
/* PLUGIN'S NAME */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-plugin-name h1 {
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
left:75px;
|
||||
top:26px;
|
||||
opacity: 0.6;
|
||||
|
||||
line-height:1;
|
||||
margin:0;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
/* INPUT/OUTPUT */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-pedal-input {
|
||||
top:25px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-pedal-output {
|
||||
top:25px;
|
||||
}
|
||||
|
||||
/* CONTROLS */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-control-group {
|
||||
bottom:15px;
|
||||
color:#fff;
|
||||
font-size:10px;
|
||||
height:210px;
|
||||
bottom: 15px;
|
||||
left:32px;
|
||||
position:absolute;
|
||||
right:32px;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-control-group > div {
|
||||
margin-right:4px;
|
||||
}
|
||||
|
||||
/* SWITCH ON/OFF GENERAL */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-switch {
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
height:73px;
|
||||
position:relative;
|
||||
width:73px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-switch-image {
|
||||
background-image:url(/resources/switches/switch-001.png{{{ns}}});
|
||||
background-position:-9px 0px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto 73px;
|
||||
height:73px;
|
||||
width:73px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-switch-image.on {
|
||||
background-position:-82px 0px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-switch-image.off {
|
||||
background-position:-9px 0px;
|
||||
}
|
||||
|
||||
/* SMALL CONTROL */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite-small {
|
||||
float:left;
|
||||
height:52px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
width:46px;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite-small .mod-bakelite-image {
|
||||
background-image:url(/resources/knobs/bakelite/_strip.png{{{ns}}});
|
||||
background-position:left 0px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto 36px;
|
||||
height:36px;
|
||||
margin-top:0px;
|
||||
position:relative;
|
||||
width:36px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite-small .mod-bakelite-title {
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
opacity: 0.5;
|
||||
font-size:9px;
|
||||
font-weight:bold;
|
||||
height:16px;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
right:0;
|
||||
text-transform:uppercase;
|
||||
top:37px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
/* MEDIUM CONTROL */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite {
|
||||
float:left;
|
||||
height:70px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
width:60px;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite .mod-bakelite-image {
|
||||
background-image:url(/resources/knobs/bakelite/_strip.png{{{ns}}});
|
||||
background-position:left 0px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto 50px;
|
||||
height:50px;
|
||||
margin-top:0px;
|
||||
position:relative;
|
||||
width:50px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-bakelite .mod-bakelite-title {
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
opacity: 0.5;
|
||||
font-size:10px;
|
||||
font-weight:bold;
|
||||
height:16px;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
right:0;
|
||||
text-transform:uppercase;
|
||||
top:49px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
/* ENUMERATED LIST */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated {
|
||||
display:inline-block;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
top:-42px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-1 {
|
||||
left:135px;
|
||||
width:326px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-2 {
|
||||
left:476px;
|
||||
width:326px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-3 {
|
||||
left:820px;
|
||||
width:98px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated .mod-enumerated-selected {
|
||||
background-color:rgba(255,255,255,.2);
|
||||
background-image:url(/resources/utils/dropdown-arrow-white.png{{{ns}}});
|
||||
background-position:right center;
|
||||
background-repeat:no-repeat;
|
||||
border-radius:4px;
|
||||
box-shadow:inset 1px 1px 5px #000;
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
height:34px;
|
||||
line-height:2.5;
|
||||
margin-right:8px;
|
||||
overflow:hidden;
|
||||
padding:0 9px;
|
||||
}
|
||||
|
||||
/* WHEN IS HOVER */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated:hover .mod-enumerated-selected {
|
||||
border-radius:4px 4px 0 0;
|
||||
}
|
||||
|
||||
/* THE LIST OF OPTIONS */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated .mod-enumerated-list {
|
||||
display:none;
|
||||
background:rgba(0,0,0,.9);
|
||||
height:85px;
|
||||
overflow:auto;
|
||||
position:relative;
|
||||
z-index:3;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated .mod-enumerated-list > div {
|
||||
padding:3px 9px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated .mod-enumerated-list > div:hover {
|
||||
background:rgba(255,255,255,.2);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-1:hover .mod-enumerated-list,
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-2:hover .mod-enumerated-list {
|
||||
width:318px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .mod-enumerated.mod-enumerated-3:hover .mod-enumerated-list {
|
||||
width:90px;
|
||||
}
|
||||
|
||||
/* SEPARATOR */
|
||||
.mod-rack-reaktor{{{cns}}} .mod-separator {
|
||||
background:#bbb;
|
||||
border-color:#000;
|
||||
border-style:solid;
|
||||
border-width:0 1px 0 0;
|
||||
display:inline-block;
|
||||
float:left;
|
||||
height:69px;
|
||||
margin-top:2px;
|
||||
width:1px;
|
||||
}
|
||||
|
||||
.toob_logo_head {
|
||||
background-image:url(/resources/img/toob_logo.png{{{ns}}});
|
||||
background-position:left 0px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto 32px;
|
||||
height:32px;
|
||||
width: 20px;
|
||||
margin-bottom: 0px;
|
||||
z-index:2;
|
||||
|
||||
left:50px;
|
||||
top: 20px;
|
||||
|
||||
margin:0;
|
||||
position:absolute;
|
||||
|
||||
}
|
||||
|
||||
.toob_column {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
align-self: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.toob_column_grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.toob_column_row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
.toob_row_grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob_frequency_response {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
background: #001414;
|
||||
margin-bottom: 2px;
|
||||
border-top: 1px solid Black;
|
||||
border-bottom: 1px solid #666;
|
||||
border-left: 1px solid #222;
|
||||
border-right: 1px solid #333;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_frequency_response .hasSVG {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 178px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_frequency_response svg {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 178px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_cabsim_fresp {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 60px;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_frequency_response.toob_tonestack_fresp {
|
||||
margin-bottom: 10px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_cabsim_fresp .hasSVG {
|
||||
width: 238px; height: 56px;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob_cabsim_fresp svg {
|
||||
width: 238px; height: 56px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_tonestack_fresp .hasSVG {
|
||||
width: 176px; height: 86px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_tonestack_fresp svg {
|
||||
width: 176px; height: 86px;
|
||||
}
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_scope_background {
|
||||
stroke: #011;
|
||||
stroke-width: 0.5;
|
||||
fill: none;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob_scope_line {
|
||||
stroke: #AA0;
|
||||
stroke-width: 0.5;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_yaxis_major {
|
||||
stroke: #066;
|
||||
stroke-width: 0.5;
|
||||
fill: none;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob_yaxis_major {
|
||||
stroke: #066;
|
||||
stroke-width: 0.25;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_vu {
|
||||
width: 48px;
|
||||
height: 130px;
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_vu .hasSVG {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_vu svg {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_micro_vu {
|
||||
width: 20px; height:66px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_micro_vu .hasSVG {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 20px; height:66px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_micro_vu svg {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 20px; height:66px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_large_vu {
|
||||
width: 48px; height:206px;
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_large_vu .hasSVG {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px; height:206px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_large_vu svg {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px; height:206px;
|
||||
}
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_gain {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-top: 1px solid Black;
|
||||
border-bottom: 1px solid #666;
|
||||
border-left: 1px solid #222;
|
||||
border-right: 1px solid #333;
|
||||
background: #001414;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_gain_power-stage {
|
||||
margin-top: 16px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob_gain .hasSVG {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob_gain svg {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob-amp-model{
|
||||
width: 97px; height: 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob-amp-model-image {
|
||||
background-image:url(/resources/switches/AmpModel.png{{{ns}}}) !important;
|
||||
width: 97px; height: 32px;
|
||||
background-repeat:no-repeat;
|
||||
background-size: 97px 64px;
|
||||
|
||||
}
|
||||
.mod-rack-reaktor{{{cns}}} .toob-amp-model-image.on {
|
||||
background-position-y: -32px;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob-sag-meter {
|
||||
width: 4px; height: 46px; margin-top: 4px; margin-bottom: 22px; padding: 1px; background: #000;
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob-sag-meter.hasSVG {
|
||||
}
|
||||
|
||||
.mod-rack-reaktor{{{cns}}} .toob-sag-meter svg {
|
||||
width: 2px; height: 44px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user