+
+
+
+ Contrast :
+
+ ({{ contrast }})
+
+
+ Brightness :
+
+ ({{ brightness }})
+
+
+ `,
+ styles: [
+ `
+ :host {
+ display: flex;
+ }
+
+ aol-map {
+ width: 70%;
+ }
+
+ .controls {
+ width: 28%;
+ padding: 1rem;
+ }
+
+ .control {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin: 20px;
+ }
+ `,
+ ],
+})
+export class RasterComponent {
+ threads = 4;
+ operationType = 'image';
+ lib: any = {
+ brightness: brightness,
+ contrast: contrast,
+ };
+ brightness = 0;
+ contrast = 0;
+
+ selectLayer = 'osm';
+ @ViewChild(SourceRasterComponent)
+ currentRasterSource;
+
+ beforeOperations(event) {
+ const data: RasterData = event.data;
+ data.brightness = this.brightness;
+ data.contrast = this.contrast;
+ }
+
+ operation(imageDatas: [ImageData], data: RasterData) {
+ let [imageData] = imageDatas;
+ imageData = brightness(imageData, data.brightness);
+ imageData = contrast(imageData, data.contrast);
+ return imageData;
+ }
+
+ afterOperations() {}
+
+ updateRaster() {
+ this.currentRasterSource.instance.changed();
+ }
+}
+
+/**
+ * @see https://github.com/canastro/image-filter-brightness/blob/master/src/transform.js
+ */
+function brightness(imageData: ImageData, adjustment: number) {
+ const pixels = imageData.data,
+ pixelsLength = pixels.length;
+
+ for (let i = 0; i < pixelsLength; i += 4) {
+ pixels[i] += adjustment;
+ pixels[i + 1] += adjustment;
+ pixels[i + 2] += adjustment;
+ }
+ return imageData;
+}
+
+/**
+ * @see https://github.com/canastro/image-filter-contrast/blob/master/src/transform.js
+ */
+function contrast(imageData: ImageData, adjustment: number) {
+ const pixels = imageData.data,
+ factor = (259 * (adjustment + 255)) / (255 * (259 - adjustment)),
+ pixelsLength = pixels.length;
+
+ for (let i = 0; i < pixelsLength; i += 4) {
+ pixels[i] = factor * (pixels[i] - 128) + 128;
+ pixels[i + 1] = factor * (pixels[i + 1] - 128) + 128;
+ pixels[i + 2] = factor * (pixels[i + 2] - 128) + 128;
+ }
+
+ return imageData;
+}
diff --git a/src/app/side-by-side/side-by-side.component.ts b/src/app/side-by-side/side-by-side.component.ts
new file mode 100644
index 00000000..73ff770f
--- /dev/null
+++ b/src/app/side-by-side/side-by-side.component.ts
@@ -0,0 +1,53 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MapComponent, ViewComponent } from 'ngx-openlayers';
+
+@Component({
+ selector: 'app-side-by-side',
+ template: `
+