![image-editor.png](https://cdn.steemitimages.com/DQmexrE35uk8rQeynXZ1T4aGcG4EbBnjiarHGwe3u9DMRQ8/image-editor.png)

# Repository

### Electron GitHub Address
https://github.com/electron/electron

### My GitHub Address
https://github.com/pckurdu

### This Project GitHub Address
https://github.com/pckurdu/Image-Editor-Application-With-Electron-Part-4

# What Will I Learn?

- You will learn `ng-click` events in angularjs.
- You will learn `ng-change` events in angularjs.
- You will learn `ng-repeat` events in angularjs.
- You will learn `ng-show` events in angularjs.

# Requirements

-    basic electronjs knowledge
-    basic css knowledge
-    basic angularjs knowledge
-    <a href="https://atom.io/">Atom Editor</a>

# Difficulty

- Basic

# Tutorial Contents

In this tutorial we will continue to develop image editor application.

We have completed the installation of images into the application and we will place effect buttons to apply this tutorial to images with the help of these buttons we can edit images.

We will keep the effects in a series and set the properties on each element of the array.

We will use the `ng-repeat` feature when accessing the elements in the array. `ng-repeat` is a feature that allows rotation in more than one object. Here, we will use the ng-repeat feature according to the structure of our object.

I'll show `ng-click` for the button click event and show how to use the `ng-repeat` object in `ng-click`.

After clicking on the buttons, I will use the `html range input` to show how the `ng-show` is used.

Let's start.

### Create Buttons
We were showing the image uploaded in the `edit.html` page. I will put the picture effect buttons next to the loaded picture.
For this, let's create a div called `id=imageControl` and let's create the effects we will use in this div.
```
<div id="imageControl">
        <div class="effectType">Contrast</div>
        <div class="effectType">Invert</div>
        <div class="effectType">Brightness</div>
        <div class="effectType">Grayscale</div>
        <div class="effectType">Sepia</div>
        <div class="effectType">Blur</div>
        
</div>
```
<br>
![electron1.JPG](https://cdn.steemitimages.com/DQmZeqBgkW9UACFNHWToKEcsFcSkBTVdFnpTGq8wRAWrQJH/electron1.JPG)
<br>
We have created buttons.

I want the picture and buttons to be next to each other. I'm going to need to design the `imageControl` , `preview` and `imageEditor` divs in this `style.css` file.
```
div#imageControl,div#preview
{
    display:flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
}

div#imageEditor
{
    display: flex;
    flex-direction: row;
}
```
<br>
Now our application appears as follows.
![electron2.JPG](https://cdn.steemitimages.com/DQmbx7xtMAjWHkWkkhokRs9dK7Jqzv3LipLkSfrggoVuThR/electron2.JPG)
<br>
We centered image and buttons but the buttons do not look nice, but also make the user's work harder.

To solve this problem, we need to edit the `effectType` class.

In style.css
```
div.effectType
{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: 1.5rem;
    cursor: pointer;
}
```
<br>
Now our effects look like buttons.
![electron3.JPG](https://cdn.steemitimages.com/DQmd9jUYVMhTjzRBb2puJZeYbVf7GkfxDLwpVwRWBhJ3TPa/electron3.JPG)
<br>
### Effects With an Array
It will not be wise to use effects like this because you will need values like max and min values in the future.
Instead, we define these effects in the array with a number of properties. Thus, we increase the usage characteristics.
Let's define an array of the effects in `editCtrl`.
```
$scope.effects={
        'Contrast':{val:100,min:0,max:200,scale:'%'},
        'Invert':{val:0,min:0,max:100,scale:'%'},
        'Brightness':{val:100,min:0,max:200,scale:'%'},
        'Grayscale':{val:0,min:0,max:100,scale:'%'},
        'Sepia':{val:0,min:0,max:100,scale:'%'},
        'Blur':{val:0,min:0,max:5,scale:'px'},
    };
```
<br>
Here I have defined the `value` properties with the name of the effects. I'll check each effect with this value property in the future.

Now I can display these effect names in `imageControl` using `ng-repeat`.
```
<div class="effectType" ng-repeat="(effect,props) in effects" ng-click="imageEffect(effect)">
      {{effect}}
</div>
```
<br>
I named two variables called effect and props with `ng-repeat`. I'm holding effect names in the variable called effect, and I'm keeping properties in the called props variable.

When I gave the `ng-click` feature, these structures won the button feature exactly.

In the `ng-click` event, one function is running and taking `effect` as a parameter.

We need to define this function in `editCtrl`, and let's print the consola to see what the incoming value is.
```
  $scope.imageEffect=function(effectName){
        console.log(effectName);
    }
```
<br>
### Adding  Slider Input

When the buttons are pressed, a slider should appear and the picture should be adjusted with the slider.

When the button is clicked I want to show the slider where the buttons are.

For this, firstly, we should write the slider with the information of which button was clicked.
```
<div id="liveEffect">
     <div class="effect" ng-repeat="(effect,props) in effects">
     <div class="effectName">{{effect}}</div>
     <div class="quantity">{{props.val+props.scale}}</div>
     <div class="range-slider">
          <input type="range" class="slider-input" min="{{props.min}}" max="{{props.max}}" ng-value="props.val" ng-model="props.val" ng-change="setEffect(props.val)"/>
            </div>
     </div>
</div>
```
<br>
Here, we clicked the button to show what to write, but the problem was clicked which button was clicked.

We need to use the ng-show feature and we should just show the slider of the clicked button.
```
<div class="effect" ng-repeat="(effect,props) in effects" ng-show="effect==activeEffect">
```
<br>
If the `effect` object is equal to the `activeEffect` object, no other states to be displayed will be displayed.

In order for this query to work, we must ensure equality in `editCtrl`.
```
$scope.imageEffect=function(effectName){
        console.log(effectName);
        $scope.activeEffect=effectName;

    }
```
<br>
We defined the `ng-change` property in the slider.

With `ng-change`, we can capture the value of the slider. Each time the slider runs, the value will change with `ng-change`.

When we click on the button, we reveal the slider, but when the image is added to the application, two div also appear.
The slider should be displayed when the buttons are clicked and the buttons should not be displayed while the slider is displayed.

We define a variable called controlActive and set true when the button is clicked.
```
$scope.imageEffect=function(effectName){
        console.log(effectName);
        $scope.activeEffect=effectName;
        $scope.controlActive=true;

    }
```
<br>
Let set false when `editCtrl` is running.

In editCtrl
```
$scope.controlActive=false;
```
<br>
We can show the slider or buttons according to this variable.
```
<div id="imageControl" ng-show="!controlActive">
…
</div>
<div id="liveEffect" ng-show="controlActive">
…
</div>
```
<br>
We have added the slider but it doesn't look nice.
![electron4.JPG](https://cdn.steemitimages.com/DQmcG4hAPDY2WVmXsQ3ocwYFG9BCQoJM9zrmkuu4WemvkYh/electron4.JPG)
<br>
In `style.css` file, we need to give `liveEffect` div style.
```
div#liveEffect
{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
```
<br>
Also we will give style in the range-slider and slider-input classes.
```
.range-slider
{
    text-align: center;
    width: 100px;
}

.slider-input
{
    -webkit-appearance: none;
    width:100px;
    height: 10px;
    border-radius: 5px;
    background: #d7dfdf;
    outline: none;
    padding: 0;
    margin: 0;

}
```
<br>
Thus the final version of the application is as follows.
![gif1.gif](https://cdn.steemitimages.com/DQmb2EVsFmvTrt5tLfLJjd7hEKcCXWH3zNyNdDcP1RxoV6W/gif1.gif)
<br>

# Curriculum

https://steemit.com/utopian-io/@pckurdu/image-editor-application-with-electron-part-1

https://steemit.com/utopian-io/@pckurdu/image-editor-application-with-electron-part-2

https://steemit.com/utopian-io/@pckurdu/image-editor-application-with-electron-part-3

# Proof of Work Done

https://github.com/pckurdu/Image-Editor-Application-With-Electron-Part-4