# trianglify

**Repository Path**: HarmonyOS-tpc/trianglify

## Basic Information

- **Project Name**: trianglify
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-17
- **Last Updated**: 2023-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Trianglify
Trianglify can use to generate patterns as the background-image for a container.
We can modify color, shape and size of the trianglify as per requirements.

<img src="./images/trianglify.png" width=150 height=150 ></img>

## Usage Instructions

1. A sample project which provides runnable code examples that demonstrate uses of the classes in this project is available in the sample/ folder.
2. Developers can customize the following attributes (both via XML and programatically)

1) Cell Size - trianglify:cellSize
2) Variance - trianglify:variance
3) Color - trianglify:colorGenerator
4) Point Distribution - trianglify:pointGenerator
5) Full Page Preview using FloatingActionButton

Examples
=======

## Layout XML

This is a trianglify with both a default and attribute value

<com.manolovn.trianglify.TrianglifyView
            android:id="@+id/trianglify_view_sample"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
```

Cell size, variance, bleeds, color generator and point generator can be initialized from layout:

```xml
<com.manolovn.trianglify.TrianglifyView
            xmlns:app="http://www.w3.org/1999/XSL/Transform"
            ohos:id="$+id:trianglify"
            ohos:width="match_parent"
            ohos:height="match_parent"
            app:cellSize="175"
            app:variance="75"
            app:bleedX="50"
            app:bleedY="50"
            app:colorGenerator="com.sample.color.MyCoolColorGenerator"
            app:pointGenerator="com.sample.color.MyCoolPointGenerator"/>
```

or using setters (see sample for more info):

```java
trianglifyView.getDrawable().setCellSize(175);
trianglifyView.getDrawable().setVariance(75);
trianglifyView.getDrawable().setColorGenerator(new AnyColorGenerator());
trianglifyView.getDrawable().setPointGenerator(new AnyPointGenerator());
```

## Adding a slider and picker listener for color, shape and size change in trianglify
#SLIDER LISTENER CHANGES FOR CELL SIZE AND VARIANCE
cellSizeControl.setValueChangedListener(new Slider.ValueChangedListener() {
            int progress;

            @Override
            public void onProgressUpdated(Slider slider, int progress, boolean fromUser) {
                this.progress = progress;
            }

            @Override
            public void onTouchStart(Slider slider) {
            }

            @Override
            public void onTouchEnd(Slider slider) {
                if (progress > 0) {
                    trianglifyView.getDrawable().setCellSize(progress * 10);
                    trianglifyView.invalidate();
                }
            }
        });

varianceControl.setValueChangedListener(new Slider.ValueChangedListener() {
            int progress;

            @Override
            public void onProgressUpdated(Slider slider, int progress, boolean fromUser) {
                this.progress = progress;
            }

            @Override
            public void onTouchStart(Slider slider) {
            }

            @Override
            public void onTouchEnd(Slider slider) {
                trianglifyView.getDrawable().setVariance(progress + 2);
                trianglifyView.invalidate();
            }
        });

# PICKER LISTENER CHANGES FOR COLOR AND SHAPR
colorControl.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int position, int id) {
                if(colorControl.getValue() == colors.length) {
                    return;
                }

                trianglifyView.getDrawable().setColorGenerator
                        (new BrewerColorGenerator(colors[colorControl.getValue()]));

                trianglifyView.invalidate();
            }
        });

pointsControl.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int position, int id) {
                if(pointsControl.getValue() == pointItems.length) {
                    return;
                }

                trianglifyView.getDrawable().setPointGenerator(
                        PointGeneratorFactory.from(pointItems[pointsControl.getValue()]));

                trianglifyView.invalidate();
            }
        });

In the sample, we can find an example of ColorGenerator and an example of how to use different types of PointGenerator.
In the component are included two: RegularPointGenerator (for a grid distribution)
and CircularPointGenerator (for a concentric circles distribution).

## Installation Instructions:
1. For using Trianglify in our sample application, add below dependencies:
    ```
    dependencies {
        implementation project(path: ':Trianglify')
        implementation project(':colorbrewer')
        implementation 'io.openharmony.tpc.thirdlib:floatingactionbutton:1.0.1'
    }
    ```

2. For using Trianglify in separate application, add the below dependencies
   and include Trianglify.har in libs folder of "entry" module:
    ```
    dependencies {
        implementation files('libs/Trianglify.har')
        implementation files('libs/colorbrewer.har')
    }
    ```
License
=======

    Copyright 2015 Manuel Vera Nieto

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.