UI tweaks for keyboard

Maximum scroll and zoom range for the keyboard and strip, some style
changes to the knob views (to make them work better for light theme and
also scale for density). This version is basically at least as good as
the old view (although is still lacking octave buttons).

android/res/layout/piano2.xml

@@ -88,8 +88,8 @@
       >
       <com.levien.synthesizer.android.widgets.keyboard.ScrollStripView
           android:id="@+id/scrollstrip"
-          android:layout_width="fill_parent"
+          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
+          android:layout_height="30dp"
           android:layout_weight="1"
           android:layout_span="6"
           />

android/src/com/levien/synthesizer/android/ui/PianoActivity2.java

@@ -66,7 +66,7 @@ public class PianoActivity2 extends Activity {
 
     //piano_ = (PianoView)findViewById(R.id.piano);
     keyboard_ = (KeyboardView)findViewById(R.id.piano);
-    keyboard_.setKeyboardSpec(KeyboardSpec.make3Layer());
+    keyboard_.setKeyboardSpec(KeyboardSpec.make2Layer());
     ScrollStripView scrollStrip_ = (ScrollStripView)findViewById(R.id.scrollstrip);
     scrollStrip_.bindKeyboard(keyboard_);
     cutoffKnob_ = (KnobView)findViewById(R.id.cutoffKnob);

android/src/com/levien/synthesizer/android/widgets/keyboard/KeyboardView.java

@@ -32,8 +32,8 @@ import com.levien.synthesizer.core.midi.MidiListener;
 public class KeyboardView extends View {
   public KeyboardView(Context context, AttributeSet attrs) {
     super(context, attrs);
-    nKeys_ = 108;   // TODO: make configurable
+    nKeys_ = 96;
-    firstKey_ = 0;
+    firstKey_ = 12;
     noteStatus_ = new byte[128];
     noteForFinger_ = new int[FINGERS];
     for (int i = 0; i < FINGERS; i++) {
@@ -77,6 +77,11 @@ public class KeyboardView extends View {
     invalidate();
   }
 
+  public float getMaxScroll() {
+    float width = drawingRect_.width();
+    return (zoom_ - 1) * width;
+  }
+
   @Override
   protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);

android/src/com/levien/synthesizer/android/widgets/keyboard/ScrollStripView.java

@@ -18,6 +18,7 @@ package com.levien.synthesizer.android.widgets.keyboard;
 
 import android.content.Context;
 import android.graphics.Canvas;
+import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Rect;
 import android.util.AttributeSet;
@@ -29,10 +30,13 @@ public class ScrollStripView extends View {
     super(context, attrs);
     drawingRect_ = new Rect();
     paint_ = new Paint();
+    paint_.setAntiAlias(true);
+    paint_.setStyle(Paint.Style.FILL);
+    paint_.setColor(Color.GRAY);
     touchDown_ = new boolean[2];
     touchx_ = new float[2];
     offset_ = -2000.0f;  // TODO: make more systematic
-    zoom_ = 3.0f;
+    zoom_ = 2.5f;
   }
 
   public void bindKeyboard(KeyboardView kv) {
@@ -43,12 +47,16 @@ public class ScrollStripView extends View {
   @Override
   protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
+    float density = getResources().getDisplayMetrics().density;
     getDrawingRect(drawingRect_);
-    float x0 = 100f + offset_;
+    float y = drawingRect_.centerY();
-    float x1 = x0 + 100f * zoom_;
+    float spacing = 10f * density * zoom_;
-    paint_.setStyle(Paint.Style.STROKE);
+    int min = -(int)(offset_ / spacing);
-    canvas.drawLine(x0, drawingRect_.top, x0, drawingRect_.bottom, paint_);
+    int max = -(int)((offset_ - drawingRect_.width()) / spacing) + 1;
-    canvas.drawLine(x1, drawingRect_.top, x1, drawingRect_.bottom, paint_);
+    for (int i = min; i <= max; i++) {
+      float x = offset_ + i * 10f * density * zoom_;
+      canvas.drawCircle(x, y, 3.0f * density, paint_);
+    }
   }
 
   private boolean onTouchDown(int id, float x) {
@@ -117,11 +125,14 @@ public class ScrollStripView extends View {
         redraw = true;
       } else if (touchDown_[0] && touchDown_[1]) {
         zoom_ = scaleAtTouch_ * (touchx_[1] - touchx_[0]);
+        // TODO: min and max zoom values maybe should depend on screen size
+        zoom_ = Math.max(1.0f, zoom_);
+        zoom_ = Math.min(4.0f, zoom_);
         offset_ = touchx_[0] + zoom_ / zoomAtTouch_ * deltaAtTouch_;
         redraw = true;
       }
+      offset_ = Math.max(-keyboardView_.getMaxScroll(), offset_);
       offset_ = Math.min(0, offset_);
-      // TODO: max offset
     }
     if (redraw) {
       if (keyboardView_ != null) {
@@ -132,50 +143,6 @@ public class ScrollStripView extends View {
     return true;
   }
 
-  /**
-   * Layout measurement for this widget.
-   * This method just sets a basic minimum size and makes the widget maximized otherwise.
-   */
-  @Override
-  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
-    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
-    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
-    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
-
-    int width = 0;
-    int height = 0;
-
-    float density = getResources().getDisplayMetrics().density;
-    int maxHeight = (int) (50.0f * density + 0.5f);
-
-    switch (widthMode) {
-      case MeasureSpec.EXACTLY:
-        width = widthSize;
-        break;
-      case MeasureSpec.AT_MOST:
-        width = widthSize;
-        break;
-      case MeasureSpec.UNSPECIFIED:
-        width = 10;
-        break;
-    }
-
-    switch (heightMode) {
-      case MeasureSpec.EXACTLY:
-        height = heightSize;
-        break;
-      case MeasureSpec.AT_MOST:
-        height = Math.min(maxHeight, heightSize);
-        break;
-      case MeasureSpec.UNSPECIFIED:
-        height = 10;
-        break;
-    }
-
-    setMeasuredDimension(width, height);
-  }
-
   Rect drawingRect_;
   Paint paint_;
   float offset_;

android/src/com/levien/synthesizer/android/widgets/knob/KnobView.java

@@ -60,6 +60,7 @@ public class KnobView extends View {
     knobPaint_.setColor(Color.WHITE);
     float density = getResources().getDisplayMetrics().density;
     knobPaint_.setStrokeWidth(2.0f * density);
+    arcWidth_ = 8.0f * density;
     rect_ = new Rect();
     rectF_ = new RectF();
     textRect_ = new Rect();
@@ -264,18 +265,18 @@ public class KnobView extends View {
 
     // Draw indicator.
     knobPaint_.setShader(null);
-    knobPaint_.setColor(Color.WHITE);
+    knobPaint_.setColor(Color.BLACK);
     knobPaint_.setStyle(Style.STROKE);
-    final float arcWidth = 15.0f;
     canvas.drawArc(rectF_,
-                   (float)(knobValue_ * 360 * 0.8 + 90 - arcWidth / 2 + 36),
+                   (float)(knobValue_ * 360 * 0.8 + 90 - arcWidth_ / 2 + 36),
-                   (float)arcWidth,
+                   (float)arcWidth_,
                    false,
                    knobPaint_);
 
     // Draw text.
     String knobValueString = String.format("%.2f", getValue());
     Typeface typeface = Typeface.DEFAULT_BOLD;
+    knobPaint_.setColor(Color.WHITE);
     knobPaint_.setTypeface(typeface);
     knobPaint_.setTextAlign(Align.CENTER);
     knobPaint_.setTextSize(rectF_.width() / 8);
@@ -379,6 +380,8 @@ public class KnobView extends View {
   private RadialGradient radialGradient_;
   private RadialGradient innerRadialGradient_;
 
+  private float arcWidth_;
+
   // Position of the finger relative to the knob.
   private double previousX_ = 0;
   private double previousY_ = 0;