#5 Methods to set HSL externally

Madrapps · Jun 4, 2017 · a0a3874 · a0a3874
1 parent 24c9836
commit a0a3874
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 13 deletions.
diff --git a/pikolo/src/main/java/com/madrapps/pikolo/HSLColorPicker.kt b/pikolo/src/main/java/com/madrapps/pikolo/HSLColorPicker.kt
@@ -2,6 +2,7 @@ package com.madrapps.pikolo
 
 import android.content.Context
 import android.graphics.Canvas
+import android.support.v4.graphics.ColorUtils
 import android.util.AttributeSet
 import android.util.TypedValue
 import android.view.MotionEvent
@@ -82,4 +83,14 @@ class HSLColorPicker @JvmOverloads constructor(context: Context, attrs: Attribut
         saturationComponent.setColorSelectionListener(listener)
         lightnessComponent.setColorSelectionListener(listener)
     }
+
+    fun setColor(color: Int) {
+        with(metrics) {
+            ColorUtils.colorToHSL(color, hsl)
+            hueComponent.updateAngle(hsl[0])
+            saturationComponent.updateAngle(hsl[1])
+            lightnessComponent.updateAngle(hsl[2])
+        }
+        invalidate()
+    }
 }
diff --git a/pikolo/src/main/java/com/madrapps/pikolo/components/ArcComponent.kt b/pikolo/src/main/java/com/madrapps/pikolo/components/ArcComponent.kt
@@ -60,7 +60,7 @@ internal abstract class ArcComponent(metrics: Metrics, paints: Paints) : ColorCo
             getColorPositionArray()
             shader = SweepGradient(centerX, centerY, colors, colorPosition)
             // We need a margin of rotation due to the Paint.Cap.Round
-            matrix.setRotate(arcStartAngle - strokeWidth/2f, centerX, centerY)
+            matrix.setRotate(arcStartAngle - strokeWidth / 2f, centerX, centerY)
             shader.setLocalMatrix(matrix)
         }
 
@@ -118,8 +118,15 @@ internal abstract class ArcComponent(metrics: Metrics, paints: Paints) : ColorCo
         }
 
         val baseAngle = relativeAngle - arcStartAngle
-        val saturation = (baseAngle / arcLength).toFloat()
+        val component = (baseAngle / arcLength).toFloat()
 
-        metrics.hsl[hslIndex] = saturation
+        metrics.hsl[hslIndex] = component
+    }
+
+    override fun updateAngle(component: Float) {
+        val baseAngle = component * arcLength
+        val relativeAngle = baseAngle + arcStartAngle
+
+        angle = relativeAngle.toDouble()
     }
 }
diff --git a/pikolo/src/main/java/com/madrapps/pikolo/components/ColorComponent.kt b/pikolo/src/main/java/com/madrapps/pikolo/components/ColorComponent.kt
@@ -74,7 +74,9 @@ internal abstract class ColorComponent(val metrics: Metrics, val paints: Paints)
         }
     }
 
-    open fun updateComponent(angle: Double) {}
+    abstract fun updateComponent(angle: Double)
+
+    abstract fun updateAngle(component: Float)
 
     internal fun setColorSelectionListener(listener: OnColorSelectionListener) {
         colorSelectionListener = listener

diff --git a/pikolo/src/main/java/com/madrapps/pikolo/components/HueComponent.kt b/pikolo/src/main/java/com/madrapps/pikolo/components/HueComponent.kt
@@ -57,4 +57,8 @@ internal class HueComponent(metrics: Metrics, paints: Paints) : ColorComponent(m
     override fun updateComponent(angle: Double) {
         metrics.hsl[0] = angle.toFloat()
     }
+
+    override fun updateAngle(component: Float) {
+        angle = metrics.hsl[0].toDouble()
+    }
 }
diff --git a/sample/src/main/java/com/madrapps/pickcolor/MainActivity.java b/sample/src/main/java/com/madrapps/pickcolor/MainActivity.java
@@ -1,28 +1,71 @@
 package com.madrapps.pickcolor;
 
 import android.graphics.PorterDuff;
+import android.graphics.drawable.ColorDrawable;
 import android.os.Bundle;
+import android.support.v4.graphics.ColorUtils;
 import android.support.v7.app.AppCompatActivity;
+import android.view.View;
+import android.widget.Button;
+import android.widget.ImageButton;
 import android.widget.ImageView;
 
 import com.madrapps.pikolo.HSLColorPicker;
 import com.madrapps.pikolo.listeners.SimpleColorSelectionListener;
 
-public class MainActivity extends AppCompatActivity {
+import java.util.Random;
+
+public class MainActivity extends AppCompatActivity implements View.OnClickListener {
+
+    private HSLColorPicker colorPicker;
+    private ImageView imageView;
+    private Button randomColorButton;
+
+    private Random random = new Random();
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
-        final HSLColorPicker colorPicker = (HSLColorPicker) findViewById(R.id.colorPicker);
-        final ImageView imageView = (ImageView) findViewById(R.id.imageView);
+        colorPicker = (HSLColorPicker) findViewById(R.id.colorPicker);
+        imageView = (ImageView) findViewById(R.id.imageView);
 
         colorPicker.setColorSelectionListener(new SimpleColorSelectionListener() {
             @Override
             public void onColorSelected(int color) {
                 imageView.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
             }
         });
+
+        initializeColorButtons();
+
+        randomColorButton = (Button) findViewById(R.id.randomColorButton);
+        randomColorButton.setOnClickListener(this);
+    }
+
+    private void initializeColorButtons() {
+        findViewById(R.id.imageButton1).setOnClickListener(this);
+        findViewById(R.id.imageButton2).setOnClickListener(this);
+        findViewById(R.id.imageButton3).setOnClickListener(this);
+        findViewById(R.id.imageButton4).setOnClickListener(this);
+        findViewById(R.id.imageButton5).setOnClickListener(this);
+    }
+
+    @Override
+    public void onClick(View v) {
+        if(v.getId() == R.id.randomColorButton){
+            final int color = ColorUtils.HSLToColor(new float[]{random.nextInt(360), random.nextFloat(), random.nextFloat()});
+            final String hexColor = String.format("#%06X", (0xFFFFFF & color));
+            randomColorButton.setText(hexColor);
+            randomColorButton.setBackgroundColor(color);
+            imageView.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
+            colorPicker.setColor(color);
+        }
+        if(v instanceof ImageButton){
+            final int color = ((ColorDrawable) ((ImageButton) v).getDrawable()).getColor();
+            imageView.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
+            colorPicker.setColor(color);
+        }
     }
 }
diff --git a/sample/src/main/res/layout/activity_main.xml b/sample/src/main/res/layout/activity_main.xml
@@ -13,10 +13,10 @@
         android:id="@+id/colorPicker"
         android:layout_width="300dp"
         android:layout_height="300dp"
+        android:layout_marginBottom="8dp"
+        android:layout_marginTop="8dp"
         android:padding="0dp"
-        android:paddingLeft="400dp"
-        android:paddingRight="400dp"
-        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/randomColorButton"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent"
@@ -25,16 +25,90 @@
         tools:layout_constraintRight_creator="1"
         tools:layout_constraintTop_creator="1" />
 
-
     <ImageView
         android:id="@+id/imageView"
         android:layout_width="100dp"
         android:layout_height="100dp"
+        android:layout_marginBottom="8dp"
+        android:layout_marginEnd="8dp"
+        android:layout_marginStart="8dp"
+        android:layout_marginTop="8dp"
         android:background="@drawable/bg_circle"
+        app:layout_constraintBottom_toBottomOf="@+id/colorPicker"
+        app:layout_constraintEnd_toEndOf="@+id/colorPicker"
+        app:layout_constraintStart_toStartOf="@+id/colorPicker"
+        app:layout_constraintTop_toTopOf="@+id/colorPicker"
+        tools:ignore="ContentDescription" />
+
+    <ImageButton
+        android:id="@+id/imageButton1"
+        android:layout_width="50dp"
+        android:layout_height="50dp"
+        android:layout_marginBottom="8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toEndOf="@+id/imageButton5"
+        app:srcCompat="@android:color/holo_red_dark"
+        tools:ignore="ContentDescription,RtlHardcoded" />
+
+    <ImageButton
+        android:id="@+id/imageButton2"
+        android:layout_width="50dp"
+        android:layout_height="50dp"
+        android:layout_marginBottom="8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/imageButton3"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toStartOf="parent"
+        app:srcCompat="@android:color/holo_orange_dark"
+        tools:ignore="ContentDescription,RtlHardcoded" />
+
+    <ImageButton
+        android:id="@+id/imageButton3"
+        android:layout_width="50dp"
+        android:layout_height="50dp"
+        android:layout_marginBottom="8dp"
         app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/imageButton4"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toEndOf="@+id/imageButton2"
+        app:srcCompat="@color/colorPrimary"
+        tools:ignore="ContentDescription,RtlHardcoded" />
+
+    <ImageButton
+        android:id="@+id/imageButton4"
+        android:layout_width="50dp"
+        android:layout_height="50dp"
+        android:layout_marginBottom="8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/imageButton5"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toEndOf="@+id/imageButton3"
+        app:srcCompat="@color/colorAccent"
+        tools:ignore="ContentDescription,RtlHardcoded" />
+
+    <ImageButton
+        android:id="@+id/imageButton5"
+        android:layout_width="50dp"
+        android:layout_height="50dp"
+        android:layout_marginBottom="8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/imageButton1"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toEndOf="@+id/imageButton4"
+        app:srcCompat="@android:color/darker_gray"
+        tools:ignore="ContentDescription,RtlHardcoded" />
+
+    <Button
+        android:id="@+id/randomColorButton"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="8dp"
+        android:text="#FFFFFF"
+        app:layout_constraintBottom_toTopOf="@+id/imageButton4"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:ignore="ContentDescription" />
+        tools:ignore="HardcodedText" />
 
 </android.support.constraint.ConstraintLayout>