Skip to content

Commit

Permalink
made multichannel-to-equave settings and color mapping dependent on mode
Browse files Browse the repository at this point in the history
  • Loading branch information
000masa000 committed Apr 17, 2024
1 parent 6ec1976 commit d7f86dd
Showing 1 changed file with 57 additions and 53 deletions.
110 changes: 57 additions & 53 deletions src/views/MidiView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -186,61 +186,65 @@ onUnmounted(() => {
<label for="multichannel">Multichannel-to-equave</label>
</div>
</div>
<label>Settings for multichannel-to-equave mode</label>
<div class="control multichannel-input-container">
<div>
Center channel
<input
id="multichannel-center"
class="control"
type="number"
min="1"
max="16"
v-model="midi.multichannelCenter"
/>
</div>
<div>
Total equaves
<input
id="multichannel-num-equaves"
class="control"
type="number"
min="1"
max="16"
v-model="midi.multichannelNumEquaves"
/>
<template v-if="midi.multichannelToEquave">
<label>Settings for multichannel-to-equave mode</label>
<div class="control multichannel-input-container">
<div>
Center channel
<input
id="multichannel-center"
class="control"
type="number"
min="1"
max="16"
v-model="midi.multichannelCenter"
/>
</div>
<div>
Total equaves
<input
id="multichannel-num-equaves"
class="control"
type="number"
min="1"
max="16"
v-model="midi.multichannelNumEquaves"
/>
</div>
<div>
Equaves down
<input
id="multichannel-equaves-down"
class="control"
type="number"
min="0"
max="15"
v-model="midi.multichannelEquavesDown"
/>
</div>
</div>
<div>
Equaves down
<input
id="multichannel-equaves-down"
class="control"
type="number"
min="0"
max="15"
v-model="midi.multichannelEquavesDown"
/>
</template>
<template v-if="!midi.multichannelToEquave">
<div class="control radio-group">
<label>Color mapping</label>
<span>
<input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
<label for="white-off">Chromatic</label>
</span>
<span>
<input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
<label for="white-simple">White only</label>
</span>
<span>
<input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
<label for="white-black">White w/ interpolation</label>
</span>
<span>
<input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
<label for="white-color">White key to white color</label>
</span>
</div>
</div>
<div class="control radio-group">
<label>Color mapping</label>
<span>
<input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
<label for="white-off">Chromatic</label>
</span>
<span>
<input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
<label for="white-simple">White only</label>
</span>
<span>
<input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
<label for="white-black">White w/ interpolation</label>
</span>
<span>
<input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
<label for="white-color">White key to white color</label>
</span>
</div>
</template>
</div>
<div class="piano-container">
<MidiPiano
Expand Down

0 comments on commit d7f86dd

Please sign in to comment.