Options for Visual Metronome in Performance View

Feature Requests
1

I would love the ability to have three additional options for the visual metronome in performance view:

  1. Be able to turn off the fade in/out on the metronome bars. I would love to have it just be a solid on/off visual instead of the fade in/out for each bar.
  2. Provide an option to flash the entire screen instead of bars across the screen.
  3. Allow customization on frequency of visual metronome (e.g., once per bar, twice per bar, per beat, per eighth note, etc.).
2

Hey @LibTab_Sound,

Thank you for your suggestions!

Your first two points should be possible using custom styles. To make beats show as a solid on/off, you can use the following styles:

@keyframes beat-solid {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.performance > [color] > div.active {
  animation: beat-solid linear calc(var(--time) / 1.5);
}

I should be able to improve the underlying code in the next version so it can be styled more easily.

To make the entire screen flash, you can use this style:

.performance > [color] > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

The last point might be difficult to implement as Live only reports beats to AbleSet, so in order to display a more fine-grained visual metronome, AbleSet would have to interpolate between beats.

If you’d like your visual metronome to be slower, that should be possible with custom styles, for example once per bar:

.performance > [color] > div {
  display: none; /* hides all beats first */
}

.performance > [color] > div:nth-child(1) {
  display: flex; /* only shows the first beat of a bar */
}

Let me know if this would work for your use case. I’m looking forward to your reply! :slight_smile:

1 Like
3

You’re a magician! The first thing works perfectly.

The second one is nearly perfect, except I would prefer the inverse behavior of what it’s doing. The song/section color is the default background, and then it flashes black on the beat. I would prefer having black as the default background and then it flashes the section/song color on the beat. Does that make sense?

The last workaround you mentioned works well, thanks!

4

@leolabs this is genius!! I’ve recently been working on Visual Metronome for our group.

5

With AbleSet 2.6.2, you can now use simpler styles for these adjustments – that should also fix the issue you described:

To make beat blocks solid, you can use these styles:

.performance .visual-metronome .beat {
  animation: none;
}

.performance .visual-metronome .active-beat {
  opacity: 1;
}

To make the entire screen flash for each beat, you can now use these styles:

.performance .visual-metronome .beat {
  position: absolute;
  inset: 0;
}

And to make the visual metronome slower, you can now use these styles:

.performance .visual-metronome .beat {
  display: none; /* hides all beats first */
}

.performance .visual-metronome .beat:nth-child(1) {
  display: flex; /* only shows the first beat of a bar */
}

I hope this helps!

1 Like