Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

made multichannel-to-equave settings and color mapping dependent on mode #657

Merged
merged 3 commits into from
Apr 18, 2024
Merged

made multichannel-to-equave settings and color mapping dependent on mode #657

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7f86dd
made multichannel-to-equave settings and color mapping dependent on mode
000masa000 Apr 17, 2024
a2cf5c4
multichannel forces chromatic color mode in App.vue and display label…
000masa000 Apr 18, 2024
a50670b
fixed multichannel / color mode correlation in line 161
000masa000 Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 57 additions & 53 deletions src/views/MidiView.vue
View file
Open in desktop
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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be a v-else but then the template becomes more rigid. Maybe two separate v-ifs is better. Just wanted to point out the syntax.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, I noticed that possibility this morning while looking around other places where v-if pops up

<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
Loading