Skip to content

Commit

Permalink
make stuff denser
Browse files Browse the repository at this point in the history
  • Loading branch information
@Igigog
Igigog committed Oct 23, 2023
1 parent ac15f37 commit 6024078
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 32 deletions.
51 changes: 31 additions & 20 deletions src/components/Filter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,19 @@
<q-list dense bordered class="col-grow q-py-sm" v-if="filter_type !== FilterTypes.CUSTOMIIR">
<q-item>
<q-item-section>
<div class="row justify-start items-center q-gutter-sm">
<q-chip icon="graphic_eq" class="control-label" color=secondary text-color=white>Frequency</q-chip>
<!--q-item-label caption lines="2">The centre frequency. this is where the signal starts getting attenuated.</q-item-label-->
<div class = "row items-center">
<div class="col-3 justify-start items-center q-gutter-sm">
<q-chip icon="graphic_eq" class="control-label" color=secondary text-color=white>Frequency</q-chip>
<!--q-item-label caption lines="2">The centre frequency. this is where the signal starts getting attenuated.</q-item-label-->
</div>
<div class="col">
<!-- Use a logarithmic scale here as this is how the graph is plotted. It makes picking low frequencies easier. -->
<q-slider :model-value="Math.log(f0) / Math.log(20000)"
@update:model-value="(value) => $emit('update:f0', Math.pow(20000, value))" label
:label-value="Math.round(f0 * 100) / 100 + 'hz'" :min=0 :max=1 :step=0.001>
</q-slider>
</div>
<!-- Use a logarithmic scale here as this is how the graph is plotted. It makes picking low frequencies easier. -->
<q-slider :model-value="Math.log(f0) / Math.log(20000)"
@update:model-value="(value) => $emit('update:f0', Math.pow(20000, value))" label
:label-value="Math.round(f0 * 100) / 100 + 'hz'" :min=0 :max=1 :step=0.001>
</q-slider>
</div>
</q-item-section>
<q-item-section side>
<q-input type="number" dense hide-bottom-space shadow-text="hz" style="width:5em"
Expand All @@ -49,14 +53,17 @@
<q-item v-if="[FilterTypes.LOWSHELF, FilterTypes.HIGHSHELF, FilterTypes.PEAKING].includes(filter_type)">

<q-item-section>
<div class="row justify-start items-center q-gutter-sm">
<q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Gain</q-chip>
<!--q-item-label caption lines="2">The gain at the centre frequency, in dB. Positive for boost, negative for
<div class = "row">
<div class="col-3 justify-start items-center q-gutter-sm">
<q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Gain</q-chip>
<!--q-item-label caption lines="2">The gain at the centre frequency, in dB. Positive for boost, negative for
cut.</q-item-label-->
</div>

<q-slider :model-value="db_gain" @update:model-value="(value) => $emit('update:db_gain', value)" :min=-25
:max=25 :step=0.01 label :label-value="db_gain + 'db'" />
</div>
<div class="col">
<q-slider :model-value="db_gain" @update:model-value="(value) => $emit('update:db_gain', value)" :min=-25
:max=25 :step=0.01 label :label-value="db_gain + 'db'" />
</div>
</div>
</q-item-section>

<q-item-section side>
Expand All @@ -68,12 +75,16 @@
<q-item>

<q-item-section>
<div class="row justify-start items-center q-gutter-sm">
<q-chip icon="auto_graph" class="control-label" color=secondary text-color=white>Quality</q-chip>
<!--q-item-label caption lines="2">The quality factor. It defines how aggressive the band pass attenuates from the centre frequency. When Q=sqrt(2) it is 1 octave wide</q-item-label-->
<div class = "row">
<div class="col-3 justify-start items-center q-gutter-sm">
<q-chip icon="auto_graph" class="control-label" color=secondary text-color=white>Quality</q-chip>
<!--q-item-label caption lines="2">The quality factor. It defines how aggressive the band pass attenuates from the centre frequency. When Q=sqrt(2) it is 1 octave wide</q-item-label-->
</div>
<div class="col">
<q-slider :model-value="q" @update:model-value="(value) => $emit('update:q', value)" :min=0 :max=33 :step=0.01
:inner-min=0.1 label />
</div>
</div>
<q-slider :model-value="q" @update:model-value="(value) => $emit('update:q', value)" :min=0 :max=33 :step=0.01
:inner-min=0.1 label />
</q-item-section>
<q-item-section side>
<q-input type="number" dense hide-bottom-space style="width:5em" :model-value="q"
Expand Down
32 changes: 20 additions & 12 deletions src/components/PreProcessingCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,31 @@ export default {
<q-card-section>
<q-item>
<q-item-section>
<div class="row justify-start items-center q-gutter-sm">
<q-chip icon="volume_down" class="control-label" color=secondary text-color=white>Pre-EQ Gain</q-chip>
</div>
<q-slider :model-value="preamp" @update:model-value="(value) => $emit('update:preamp', value)"
:min="-12" :max="6" :step="0.1" :markers="3" :marker-labels="preampMarkerLabel"
:label-value="preamp + 'dB'" label />
</q-item-section>
<div class = "row">
<div class="col-3 justify-start items-center q-gutter-sm">
<q-chip icon="volume_down" class="control-label" color=secondary text-color=white>Pre-EQ Gain</q-chip>
</div>
<div class="col">
<q-slider :model-value="preamp" @update:model-value="(value) => $emit('update:preamp', value)"
:min="-12" :max="6" :step="0.1" :markers="3" :marker-labels="preampMarkerLabel"
:label-value="preamp + 'dB'" label />
</div>
</div>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<div class="row justify-start items-center q-gutter-sm">
<div class = "row">
<div class="col-3 justify-start items-center q-gutter-sm">
<q-chip icon="volume_up" class="control-label" color=secondary text-color=white>Post-EQ Gain</q-chip>
</div>
<q-slider :model-value="post_eq_gain" @update:model-value="(value) => $emit('update:post_eq_gain', value)"
:min="0" :max="9" :step="0.1" :markers="3" :marker-labels="postEQGainMarkerLabel"
:label-value="post_eq_gain + 'dB'" label />
</q-item-section>
<div class="col">
<q-slider :model-value="post_eq_gain" @update:model-value="(value) => $emit('update:post_eq_gain', value)"
:min="0" :max="9" :step="0.1" :markers="3" :marker-labels="postEQGainMarkerLabel"
:label-value="post_eq_gain + 'dB'" label />
</div>
</div>
</q-item-section>
</q-item>
<q-checkbox label="Reverse Stereo" :model-value="reverse_stereo"
@update:model-value="(value) => $emit('update:reverse_stereo', value)" />
Expand Down

0 comments on commit 6024078

Please sign in to comment.