Merge pull request #33 from sdsmdg/customPaletteFeature

Custom Palette Feature and Bug Fixes

Author: dakshitagrawal

CONTRIBUTING.md

@@ -44,7 +44,7 @@ If you're looking for something to work on, have a look at the open issues in th
 Trianglify is built keeping [MVP (model-view-presenter)](https://en.wikipedia.org/wiki/Model–view–presenter) architecture in mind, so any changes that are proposed to Trianglfiy should follow MVP architecture. If you are confused regarding where a method should be, join us at  [MDG public chat room](https://mdg.sdslabs.co/chat), we'll be happy to help.
 
 ### Style Check
-Trianglify uses Sputnik for performing style checks on the codebase, which helps us in maintaining the quality of the code. Sputnik checks for violation upon submission of Pull Requests. If Sputnik reports a violation and you believe that it is not applicable, just comment `N/A` on sputnik review with the reason why it is not applicable. **Pull Requests will only be merged once all the violations are resolved**.
+Trianglify uses Sputnik for performing style checks on the codebase, which helps us in maintaining the quality of the code. Sputnik checks for violation upon submission of Pull Requests. If Sputnik reports a violation and you believe that it is not applicable, just comment `N/A` on the sputnik review with the reason of why it is not applicable. **Pull Requests will only be merged once all the violations are resolved**.
 
 ### Git Commit Messages
 * Use the present tense ("Add feature" not "Added feature")

DOCUMENTATION.md

@@ -1,4 +1,4 @@
-Welcome to the Trianglify documentation! Here's the ultimate guide to use Trianglify in your app.
+Welcome to the Trianglify documentation! Here's the ultimate guide to using Trianglify in your app.
 
 # Documentation
 ## Contents
@@ -70,11 +70,12 @@ trianglifyView.setGridWidth(trianglifyView.getWidth())
 | Y-Axis Bleed                | 0 px           | .setBleedY(...)         | bleed_y         | TrianglifyView generates total area having height = gridWidth + 2*bleedY to avoid unfilled triangles at the edges of the view |
 | Variance                    | 10 px          | .setVariance(...)       | variance        | Displacement of points from original grid position to create triangles of different sizes                                     |
 | Cell Size                   | 40 px          | .setCellSize(...)       | cell_size       | Size of cells of rectangular grid used to generated vertices of the triangles                                                 |
-| Grid Type*                  | 0              | .setGridType(...)       | grid_type       | Type of grid 0 for Rectangular                                                                                                |
+| Grid Type*                  | 0              | .setTypeGrid(...)       | grid_type       | Type of grid 0 for Rectangular                                                                                                |
 | Fill Triangles with color   | true           | .setFillTriangle(...)   | fill_triangles  | Fills the triangle generated with color chosen                                                                                |
 | Draw strokes                | false          | .setDrawStrokes(...)    | draw_strokes    | Draws triangle's border with neighboring triangle's color                                                                     |
 | Color Palette               | YlGn           | .setPalette(...)        | palette         | Set of existing colors to color triangles                                                                                     |
 | Random Coloring             | false          | .setRandomColoring(...) | random_coloring | If random coloring is on triangles will be colored randomly instead of linear interpolation                                   |
+| Fill the View Completely    | false          | .setFillViewCompletely(...) | fillViewCompletely| If fillViewCompletely is true, then it will throw illegalArgumentsException whenever both `BleedX` and `BleedY` are not greater than `cellSize`. Refer to [Section 2.2](#2.2)
 
 *Current release contains only one GridType accessible with id `0`  
 
@@ -90,10 +91,10 @@ trianglifyView.setGridWidth(trianglifyView.getWidth())
 <p>
 
 ### 2.2 Details of Bleed and Grid Dimensions
-* **Bleed:** Bleed defines the dimensions of extra size that TrianglifyView view generate so that triangles on the edge doesn't appear to be chopped off. In most of the cases `min{bleedX, bleedY} > cellSize` would ensure that the view is completely filled.  
+* **Bleed:** Bleed defines the dimensions of extra size that TrianglifyView view generates so that triangles on the edge don't appear to be chopped off. In most of the cases `min{bleedX, bleedY} > cellSize` would ensure that the view is completely filled.  
 * **Grid Dimensions:** `GridHeight` and `GridWidth` defines the dimensions of the visible area of the view.  
 
-Total area generated by TrianglifyView is (`gridHeight` + `BleedY`) * (`gridWidth` + `BleedX`) while total area visible is (`gridHeight` + `BleedY`) * (`gridWidth` + `BleedX`)  
+Total area generated by TrianglifyView is (`gridHeight` + 2  * `BleedY`) * (`gridWidth` + 2 * `BleedX`) while total area visible is (`gridHeight`) * (`gridWidth`)  
 
 Following image demonstrates region covered by `gridHeight`, `gridWidth`, `bleedX` and `bleedY`
 <p>

app/build.gradle

@@ -34,5 +34,7 @@ dependencies {
 
     compile 'com.android.support:appcompat-v7:25.0.1'
     compile 'com.android.support.constraint:constraint-layout:1.0.2'
+    compile 'com.github.QuadFlask:colorpicker:0.0.13'
     testCompile 'junit:junit:4.12'
-    testCompile 'org.mockito:mockito-core:1.10.19'}
+    testCompile 'org.mockito:mockito-core:1.10.19'
+}

app/src/main/AndroidManifest.xml

@@ -15,7 +15,8 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
-        <activity android:name=".AboutActivity"></activity>
+        <activity android:name=".AboutActivity" />
+        <activity android:name=".CustomPalettePickerActivity"/>
     </application>
 
-</manifest>
+</manifest>

app/src/main/java/com/sdsmdg/kd/trianglifyexample/CustomPalettePickerActivity.java

@@ -0,0 +1,121 @@
+package com.sdsmdg.kd.trianglifyexample;
+
+import android.content.Context;
+import android.content.DialogInterface;
+import android.content.Intent;
+import android.graphics.Color;
+import android.support.v7.app.ActionBar;
+import android.support.v7.app.AlertDialog;
+import android.support.v7.app.AppCompatActivity;
+import android.os.Bundle;
+import android.view.Menu;
+import android.view.MenuInflater;
+import android.view.MenuItem;
+import android.view.View;
+import android.widget.ImageView;
+
+import com.flask.colorpicker.ColorPickerView;
+import com.flask.colorpicker.OnColorSelectedListener;
+import com.flask.colorpicker.builder.ColorPickerClickListener;
+import com.flask.colorpicker.builder.ColorPickerDialogBuilder;
+import com.sdsmdg.kd.trianglify.models.Palette;
+import com.sdsmdg.kd.trianglify.views.TrianglifyView;
+
+public class CustomPalettePickerActivity extends AppCompatActivity {
+    private Palette palette;
+    private TrianglifyView trianglifyView;
+    private Context context;
+    private ImageView[] imageViews = new ImageView[9];
+    private int[] colors = {Color.BLACK, Color.BLUE, Color.BLACK, Color.CYAN, Color.DKGRAY, Color.GREEN, Color.RED, Color.MAGENTA, Color.LTGRAY};
+    public static final String CUSTOM_PALETTE_COLOR_ARRAY = "Custom Palette Color Array";
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_custom_palette_picker);
+
+        ActionBar actionBar = getSupportActionBar();
+        actionBar.setDisplayHomeAsUpEnabled(true);
+        actionBar.setTitle("Custom Palette Picker");
+
+        colors = getIntent().getIntArrayExtra(MainActivity.PALETTE_COLOR_ARRAY);
+
+        context = this;
+
+        trianglifyView = (TrianglifyView) findViewById(R.id.trianglify_custom_palette_view);
+        trianglifyView.setPalette(new Palette(colors));
+        trianglifyView.smartUpdate();
+
+        for (int i = 0; i < imageViews.length; i++) {
+            String imageViewNumber = "custom_palette_c" + String.valueOf(i);
+            int resID = getResources().getIdentifier(imageViewNumber, "id", getPackageName());
+            imageViews[i] = (ImageView) findViewById(resID);
+            imageViews[i].setBackgroundColor(colors[i] + 0xff000000);
+
+            final int finalI = i;
+
+            imageViews[i].setOnClickListener(new View.OnClickListener() {
+                @Override
+                public void onClick(View v) {
+                    final AlertDialog dialog = ColorPickerDialogBuilder
+                            .with(context)
+                            .initialColor(colors[finalI] + 0xff000000)
+                            .setTitle("Choose Color")
+                            .wheelType(ColorPickerView.WHEEL_TYPE.FLOWER)
+                            .density(9)
+                            .showColorEdit(true)
+                            .lightnessSliderOnly()
+                            .setColorEditTextColor(0xff000000)
+                            .showColorPreview(true)
+                            .setOnColorSelectedListener(new OnColorSelectedListener() {
+                                @Override
+                                public void onColorSelected(int color) {
+                                }
+                            })
+                            .setPositiveButton("ok", new ColorPickerClickListener() {
+                                @Override
+                                public void onClick(DialogInterface dialog, int color, Integer[] allColors) {
+                                    imageViews[finalI].setBackgroundColor(color);
+                                    colors[finalI] = color - 0xff000000;
+                                    palette = new Palette(colors);
+                                    trianglifyView.setPalette(palette);
+                                    trianglifyView.smartUpdate();
+                                }
+                            })
+                            .setNegativeButton("cancel", new DialogInterface.OnClickListener() {
+                                @Override
+                                public void onClick(DialogInterface dialog, int which) {
+                                    dialog.dismiss();
+                                }
+                            })
+                            .build();
+
+                    dialog.show();
+                }
+            });
+        }
+    }
+
+    @Override
+    public boolean onCreateOptionsMenu(Menu menu) {
+        MenuInflater inflater = getMenuInflater();
+        inflater.inflate(R.menu.menu_custom_palette_picker, menu);
+        return true;
+    }
+
+    public boolean onOptionsItemSelected(MenuItem item) {
+        switch (item.getItemId()) {
+            case android.R.id.home:
+                onBackPressed();
+                return true;
+            case R.id.custom_palette_ok:
+                Intent intent = new Intent();
+                intent.putExtra(CUSTOM_PALETTE_COLOR_ARRAY, colors);
+                setResult(RESULT_OK, intent);
+                onBackPressed();
+                return true;
+            default:
+                return super.onOptionsItemSelected(item);
+        }
+    }
+}

app/src/main/java/com/sdsmdg/kd/trianglifyexample/MainActivity.java

@@ -25,12 +25,18 @@ public class MainActivity extends AppCompatActivity {
     private CheckBox strokeCheckBox;
     private CheckBox fillCheckBox;
     private CheckBox randomColoringCheckbox;
+    private CheckBox customPaletteCheckbox;
+    private Palette customPalette;
+    public static final String PALETTE_COLOR_ARRAY = "Palette Color Array";
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
+
         trianglifyView = (TrianglifyView) findViewById(R.id.trianglify_main_view);
+        customPalette = trianglifyView.getPalette();
+
         varianceSeekBar = (SeekBar) findViewById(R.id.variance_seekbar);
         varianceSeekBar.setMax(100);
         varianceSeekBar.setProgress(trianglifyView.getVariance());
@@ -51,11 +57,12 @@ public void onStopTrackingTouch(SeekBar seekBar) {
 
             }
         });
+
         cellSizeSeekBar = (SeekBar) findViewById(R.id.cell_size_seekbar);
         int maxCellSize = 150;
 
         cellSizeSeekBar.setMax(maxCellSize);
-        cellSizeSeekBar.setProgress(trianglifyView.getCellSize());
+        cellSizeSeekBar.setProgress(trianglifyView.getCellSize() - 100);
         cellSizeSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
             @Override
             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
@@ -81,6 +88,7 @@ public void onStopTrackingTouch(SeekBar seekBar) {
             @Override
             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                 trianglifyView.setPalette(Palette.getPalette(progress));
+                customPaletteCheckbox.setChecked(false);
                 trianglifyView.smartUpdate();
             }
 
@@ -136,6 +144,21 @@ public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                 trianglifyView.smartUpdate();
             }
         });
+
+        customPaletteCheckbox = (CheckBox) findViewById(R.id.custom_palette_checkbox);
+        customPaletteCheckbox.setChecked(false);
+        customPaletteCheckbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
+            @Override
+            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
+                if (isChecked) {
+                    trianglifyView.setPalette(customPalette);
+                    trianglifyView.smartUpdate();
+                } else {
+                    trianglifyView.setPalette(Palette.getPalette(paletteSeekBar.getProgress()));
+                    trianglifyView.smartUpdate();
+                }
+            }
+        });
     }
 
     @Override
@@ -163,6 +186,12 @@ public void randomizeTrianglifyParameters(TrianglifyView trianglifyView) {
                 .setFillTriangle(rnd.nextInt(2) == 0)
                 .setDrawStrokeEnabled(rnd.nextInt(2) == 0)
                 .setVariance(rnd.nextInt(60));
+
+        if ( !trianglifyView.isFillTriangle() && !trianglifyView.isDrawStrokeEnabled()) {
+            trianglifyView.setDrawStrokeEnabled(true);
+            trianglifyView.setFillTriangle(true);
+        }
+
         updateUIElements(trianglifyView);
     }
 
@@ -189,6 +218,12 @@ public boolean onOptionsItemSelected(MenuItem item) {
                 randomizeTrianglifyParameters(trianglifyView);
                 trianglifyView.generateAndInvalidate();
                 break;
+            // action with ID custom_palette_picker was selected
+            case R.id.custom_palette_picker:
+                Intent customPalettePickerIntent = new Intent(this, CustomPalettePickerActivity.class);
+                customPalettePickerIntent.putExtra(PALETTE_COLOR_ARRAY, trianglifyView.getPalette().getColors());
+                startActivityForResult(customPalettePickerIntent, 1);
+                break;
             default:
                 break;
         }
@@ -197,6 +232,17 @@ public boolean onOptionsItemSelected(MenuItem item) {
     }
 
     public void showColoringError() {
-            Toast.makeText(this, "view should at least be set to draw strokes or fill triangles or both.", Toast.LENGTH_LONG).show();
+        Toast.makeText(this, "view should at least be set to draw strokes or fill triangles or both.", Toast.LENGTH_LONG).show();
+    }
+
+    public void onActivityResult(int requestCode, int resultCode, Intent data) {
+        super.onActivityResult(requestCode, resultCode, data);
+        if (requestCode == 1 && resultCode == RESULT_OK) {
+            customPalette = new Palette(data.getIntArrayExtra(CustomPalettePickerActivity.CUSTOM_PALETTE_COLOR_ARRAY));
+            if (customPaletteCheckbox.isChecked()) {
+                trianglifyView.setPalette(customPalette);
+                trianglifyView.smartUpdate();
+            }
+        }
     }
 }

app/src/main/res/drawable/color_picked_imageview_border.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <stroke android:width="2dp" android:color="#bdbdbd"/>
+    <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp"/>
+</shape>

app/src/main/res/drawable/ok_icon.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="48dp"
+    android:width="48dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#fff" android:pathData="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+</vector>

app/src/main/res/drawable/palette_icon.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="48dp"
+    android:width="48dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#efeaeaea" android:pathData="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" />
+</vector>