<commit_before># Angular Pintura

*angular-pintura* is a image viewer based on [AngularJS 1.4](https://angularjs.org/) and [Konva 0.9.5](http://konvajs.github.io/). Check out the demo: [TODO: upload demo]()
## Installation

Open your terminal, change to project directory and run 

	bower install angular-pintura --save

Or add `"angular-pintura":"latest"` to your list of dependencies in `bower.json` and run `bower install` aufterwards.

	
## How to Use

Following examples are written in [Jade](http://jade-lang.com/), [SASS](http://sass-lang.com/) and [CoffeScript](http://coffeescript.org/). Keep in mind that those examples won't work in a pure HTML/JS/CSS-Project without preceding compilation. 

### Include Dependencies

Since *angular-pintura* is based on [AngularJS](https://angularjs.org/) and [Konva](http://konvajs.github.io/) you have to include those libraries before you include *angular-pintura*.

	script(src='bower_components/angular/angular.js')
	script(src='bower_components/konva/konva.js')
	script(src='bower_components/angular-pintura/angular-pintura.js')
	script(src='src/app.js') # your app

Assuming your angular-app is in `src/app.js`, you have to add `'ngPintura'` module to your app dependencies between the squared brackets:

	app = angular.module('app', ['ngPintura'])

Within your controller you might want to pass some initial params.
	
	$scope.image =
		src: 'images/img1.jpg'
		position: 
			x: -137.5
			y: -68
		scaling: 2

Now just use the `ng-pintura` directive in your Jade-File:

	ng-pintura(src='image.src', 
				scaling='image.scaling',
				position='image.position')

Or in your HTML-File:
	
	<ng-pintura src='image.src', 
				scaling='image.scaling',
				position='image.position'></ng-pintura>

### Custom Control Elements

You might wonder how to add the control elements (buttons, slider) you saw on the [TODO: demo page](). Since the `ng-pintura` directive uses transclusion you can easily add your own template to define and style your own control elements. 

The following Jade template mainly uses predefined classes from [Bootstrap 3](http://getbootstrap.com/):

	ng-pintura(src='image.src', scaling='image.scaling', position='image.position')
	.zoomslider
		input(ng-model='slider.value', ng-change='sliderChange()', orient='vertical', type='range', min='0', max='100', step='1', ng-disabled='scalingDisabled')
		button.btn.btn-default.zoomin(ng-click='zoomIn()', ng-disabled='scalingDisabled'): span.glyphicon.glyphicon-plus
		button.btn.btn-default.zoomout(ng-click='zoomOut()', ng-disabled='scalingDisabled'): span.glyphicon.glyphicon-minus
		button.btn.btn-default.moveup(ng-click='moveUp()'): span.glyphicon.glyphicon-chevron-up
		button.btn.btn-default.movedown(ng-click='moveDown()'): span.glyphicon.glyphicon-chevron-down
		button.btn.btn-default.moveleft(ng-click='moveLeft()'): span.glyphicon.glyphicon-chevron-left
		button.btn.btn-default.moveright(ng-click='moveRight()'): span.glyphicon.glyphicon-chevron-right
		button.btn.btn-default.movecenter(ng-click='fitInView()'): span.glyphicon.glyphicon-screenshot

You can include the style definitions from the file `sass/_panoramacontrols.sass` to your sass file if you like to have the same controls in your project:

	@import bower_components/angular-pintura/sass/_panoramacontrols

### Directive Attributes

As you can see in the example above and on the [demo page](TODO), angular-pintura directive provides some attributes. With these attributes you are able to manipulate the view from your controller.

#### src (string/Image-Object)
Image-Source. URL-String or `Image`-Object. See [demo page](TODO).

#### position ({x:number, y:number})
Sets the current position of image. See example above.

#### move-step (number)
**default:100 (pixel)**
The value added to/subtract from position on moveUp/moveDown/moveRight/moveLeft.

#### scaling (number)
Current scaling of image.

#### max-scaling (number)
**default: 1 (100%)**

Maximum value for scaling.  

#### scale-step (number)
**default: 0.2**
The value added to/subtract from scaling on zoomIn/zoomOut.

#### mw-scale-step (number)
**default: 0.1**
The value added to/subtract from scaling on zoomIn/zoomOut caused by mouse wheel.<commit_msg>Added demo-page link to readme<commit_after># Angular Pintura

*angular-pintura* is a image viewer based on [AngularJS 1.4](https://angularjs.org/) and [Konva 0.9.5](http://konvajs.github.io/). Check out the [demo-page](http://kruschid.github.io/angular-pintura/).
## Installation

Open your terminal, change to project directory and run 

	bower install angular-pintura --save

Or add `"angular-pintura":"latest"` to your list of dependencies in `bower.json` and run `bower install` aufterwards.

	
## How to Use

Following examples are written in [Jade](http://jade-lang.com/), [SASS](http://sass-lang.com/) and [CoffeScript](http://coffeescript.org/). Keep in mind that those examples won't work in a pure HTML/JS/CSS-Project without preceding compilation. 

### Include Dependencies

Since *angular-pintura* is based on [AngularJS](https://angularjs.org/) and [Konva](http://konvajs.github.io/) you have to include those libraries before you include *angular-pintura*.

	script(src='bower_components/angular/angular.js')
	script(src='bower_components/konva/konva.js')
	script(src='bower_components/angular-pintura/angular-pintura.js')
	script(src='src/app.js') # your app

Assuming your angular-app is in `src/app.js`, you have to add `'ngPintura'` module to your app dependencies between the squared brackets:

	app = angular.module('app', ['ngPintura'])

Within your controller you might want to pass some initial params.
	
	$scope.image =
		src: 'images/img1.jpg'
		position: 
			x: -137.5
			y: -68
		scaling: 2

Now just use the `ng-pintura` directive in your Jade-File:

	ng-pintura(src='image.src', 
				scaling='image.scaling',
				position='image.position')

Or in your HTML-File:
	
	<ng-pintura src='image.src', 
				scaling='image.scaling',
				position='image.position'></ng-pintura>

### Custom Control Elements

You might wonder how to add the control elements (buttons, slider) you saw on the [TODO: demo page](). Since the `ng-pintura` directive uses transclusion you can easily add your own template to define and style your own control elements. 

The following Jade template mainly uses predefined classes from [Bootstrap 3](http://getbootstrap.com/):

	ng-pintura(src='image.src', scaling='image.scaling', position='image.position')
	.zoomslider
		input(ng-model='slider.value', ng-change='sliderChange()', orient='vertical', type='range', min='0', max='100', step='1', ng-disabled='scalingDisabled')
		button.btn.btn-default.zoomin(ng-click='zoomIn()', ng-disabled='scalingDisabled'): span.glyphicon.glyphicon-plus
		button.btn.btn-default.zoomout(ng-click='zoomOut()', ng-disabled='scalingDisabled'): span.glyphicon.glyphicon-minus
		button.btn.btn-default.moveup(ng-click='moveUp()'): span.glyphicon.glyphicon-chevron-up
		button.btn.btn-default.movedown(ng-click='moveDown()'): span.glyphicon.glyphicon-chevron-down
		button.btn.btn-default.moveleft(ng-click='moveLeft()'): span.glyphicon.glyphicon-chevron-left
		button.btn.btn-default.moveright(ng-click='moveRight()'): span.glyphicon.glyphicon-chevron-right
		button.btn.btn-default.movecenter(ng-click='fitInView()'): span.glyphicon.glyphicon-screenshot

You can include the style definitions from the file `sass/_panoramacontrols.sass` to your sass file if you like to have the same controls in your project:

	@import bower_components/angular-pintura/sass/_panoramacontrols

### Directive Attributes

As you can see in the example above and on the [demo page](http://kruschid.github.io/angular-pintura/), angular-pintura directive provides some attributes. With these attributes you are able to manipulate the view from your controller.

#### src (string/Image-Object)
Image-Source. URL-String or `Image`-Object. See [demo page](http://kruschid.github.io/angular-pintura/).

#### position ({x:number, y:number})
Sets the current position of image. See example above.

#### move-step (number)
**default:100 (pixel)**
The value added to/subtract from position on moveUp/moveDown/moveRight/moveLeft.

#### scaling (number)
Current scaling of image.

#### max-scaling (number)
**default: 1 (100%)**

Maximum value for scaling.  

#### scale-step (number)
**default: 0.2**
The value added to/subtract from scaling on zoomIn/zoomOut.

#### mw-scale-step (number)
**default: 0.1**
The value added to/subtract from scaling on zoomIn/zoomOut caused by mouse wheel.
{'fraction_non_alphanumeric': 0.13803179055633474, 'fraction_numerical': 0.0070126227208976155, 'mean_word_length': 4.95891364902507, 'pattern_counts': {'":': 2, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6041209', 'n_tokens_mistral': 2885, 'n_tokens_neox': 2666, 'n_words': 770}