Merge remote-tracking branch 'origin/master'

api/api.py

@@ -7,6 +7,7 @@ import configparser
 from GetAverageData import get_interpolation_data_for_point, get_year_columns, get_average_of_multiple_years, get_min_max
 from write_raster import write_raster
 import SQLPandasTools as s2pTool
+import pickle
 
 cfg = configparser.ConfigParser()
 cfg.read('../config.ini')
@@ -83,6 +84,7 @@ def return_min_max():
 
 
 @app.route('/raster', methods=['GET'])
+@cross_origin()
 def get_raster():
     """
     Request like: http://127.0.0.1:42000/raster?years=2010-2018&ramp=[[255,255,255,1],[255,244,191,1],[255,233,128,1],[255,221,64,1],[255,210,0,1],[243,105,0,1],[230,0,0,1],[153,0,0,1],[77,0,0,1],[0,0,0,1]]

api/test_writeRaster.py

+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Created on Tue Sep 28 16:43:25 2021
+
+@author: geopeter
+"""
+import SQLPandasTools as s2pTool
+import write_raster as cut
+import unittest
+import pickle
+
+class TestWriteRaster(unittest.TestCase):
+    def testcalcAverageYear(self):
+        with open("./pickle/averageDataForRaster.pickle", "rb") as pickleFile:
+            average_data = pickle.load(pickleFile)
+            
+            ramp = [[255, 255, 255, 1], [255, 244, 191, 1], [255, 233, 128, 1], [255, 221, 64, 1], [255, 210, 0, 1], [243, 105, 0, 1], [230, 0, 0, 1], [153, 0, 0, 1], [77, 0, 0, 1], [0, 0, 0, 1]]
+            
+            cut.write_raster(average_data, ramp)
+            
+            
+if __name__ == '__main__':
+    unittest.main()
\ No newline at end of file

api/write_raster.py

@@ -64,6 +64,7 @@ def write_raster(data, ramp):
     Writing GeoTIFF
     """
     min, steps, classes = get_class_steps(ramp)
+    
     pixel_array_r = []
     pixel_array_g = []
     pixel_array_b = []

config.ini

 [POSTGRES]
 host = localhost
 port = 5432
-user = postgres
-password = postgres
+user = geopeter
+password = pgadmin667
 dbName = temperatures_berteld_morstein
 
 [INTERPOLATION]

dataacquisition/test_ExportToDatabase.py

@@ -10,7 +10,7 @@ execute test from root
 
 import unittest
 import pickle
-import dataacquisition.ExportToDatabase as cut
+import ExportToDatabase as cut
 import configparser
 import psycopg2
 from psycopg2.extensions import ISOLATION_LEVEL_AUTOCOMMIT
@@ -157,14 +157,14 @@ class TestExportToDatabase(unittest.TestCase):
             stationList = stationList[:2]
             stationList["station_id"] = stationList.index
             stationList.columns = stationList.columns.astype(str)
-            connection = psycopg2.connect(dbname=param_postgres["dbName"], user=param_postgres["user"], password=param_postgres["password"], host=param_postgres["host"], port=param_postgres["port"])
+            connection = psycopg2.connect(dbname="postgres", user=param_postgres["user"], password=param_postgres["password"], host=param_postgres["host"], port=param_postgres["port"])
             with connection.cursor() as cursor:
                 insert_stmt = cut.createInsertStatement(cursor, stationList)
                 
                 self.assertTrue(insert_stmt.startswith("INSERT INTO"))
                 self.assertTrue(insert_stmt.endswith("');"))
     
-    def _testIntegrationTest(self):
+    def testIntegrationTest(self):
         print("__Test Integrationtest")
         with open("./pickle/stationList_with_temperature.pickle", "rb") as pickleFile:
             stationList = pickle.load(pickleFile)

frontend/App.vue

@@ -9,7 +9,7 @@
 
 <style scoped>
     .main {
-      margin:0;
+      margin: 0;
       width:  100%;
       height: 100%;
     }

frontend/src/AvgLayer.ts

+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import ImageLayer from 'ol/layer/Image';
+import GeoJSON from 'ol/format/GeoJSON';
+import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style';
+import MapProperties from './MapProperties';
+import GeoTIFFSource from 'ol/source/GeoTIFF';
+import ImageStatic from 'ol/source/ImageStatic';
+import TileLayer from 'ol/layer/WebGLTile';
+import colormap from 'colormap';
+import axios from 'axios';
+import Projection from 'ol/proj/Projection';
+
 export default class AvgLayer{
 
-    
+    private layer: any = new ImageLayer();
+    private mapProperties: MapProperties;
+    constructor(mapProperties: MapProperties){
+        this.mapProperties = mapProperties;
+        var tilesInfoUrl: string = "http://127.0.0.1:42000/raster?years=2010-2018&ramp=[[255,255,255,1],[255,244,191,1],[255,233,128,1],[255,221,64,1],[255,210,0,1],[243,105,0,1],[230,0,0,1],[153,0,0,1],[77,0,0,1],[0,0,0,1]]";
+/* 
+        axios(tilesInfoUrl)
+            .then(res=>{
+                var meta: JSON = res.data; */
+
+        /* const extent = [0, 0, 1024, 968];
+        const projection = new Projection({
+            code: 'xkcd-image',
+            units: 'pixels',
+            extent: extent,
+        });           
+
+
+        let source = new ImageStatic({
+            attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
+            url: 'https://imgs.xkcd.com/comics/online_communities.png',
+            projection: projection,
+            imageExtent: extent,
+          }) */
+
+          axios.get(tilesInfoUrl, {
+            headers: {'Access-Control-Allow-Origin': '*'}
+        }).then(resp => {
+            console.log("TILES INFO LOADED");
+
+            /* let source = new GeoTIFFSource({
+                sources: [{
+                    url: tilesInfoUrl,
+                    bands: [0],
+                    min: 0,
+                    nodata: 0,
+                    max: 65535
+                }]            
+            })
+        
+        
+            this.layer.setSource(source); */
+        });
+
+        
+    }
+
+
+    public getLayer(): any{
+        return this.layer;
+    }
 
 }
\ No newline at end of file

frontend/src/Legend.vue

@@ -8,7 +8,7 @@
 
             <v-card-text>
                 <v-checkbox
-                    v-model="stationLayer"
+                    v-model="stationLayerActive"
                     hide-details
                     @change="$emit('layerVisibility',$event,'stationLayer')"
                     dense
@@ -33,11 +33,11 @@
 
                 </div>
                 <v-slider
+                    v-model="mapProperties.stationDate"
                     width="50px"
-                    v-model="stationYear"
                     step="1"
-                    :min="mapProperties.dateRange[0]"
-                    :max="mapProperties.dateRange[1]"
+                    :min="mapProperties.completeDaterange[0]"
+                    :max="mapProperties.completeDaterange[1]"
                     thumb-label="always"
                     thumb-size="29px"
                     style="margin-top:5em;margin-bottom:-25px;"
@@ -51,7 +51,7 @@
         <v-card  class="ma-1">
             <v-card-text>
                 <v-checkbox
-                    v-model="layer1"
+                    v-model="layer1Active"
                     hide-details
                     dense
                     @change="$emit('layerVisibility',$event,'avgLayer1')"
@@ -79,10 +79,10 @@
                 </div>
                 <div ref="legendTemperature1" id="legendTemperature1"></div>
                 <v-range-slider
-                    v-model="range1"
+                    v-model="mapProperties.anomalieRange1"
                     step="1"
-                    :min="mapProperties.dateRange[0]"
-                    :max="mapProperties.dateRange[1]"
+                    :min="mapProperties.completeDaterange[0]"
+                    :max="mapProperties.completeDaterange[1]"
                     thumb-label="always"
                     thumb-size="29px"
                     style="margin-top:1em;width:330px;margin-left:12px;margin-bottom:-25px;"
@@ -96,7 +96,7 @@
             <v-card-text>
                 
                 <v-checkbox
-                    v-model="layer2"
+                    v-model="layer2Active"
                     hide-details
                     @change="$emit('layerVisibility',$event,'avgLayer2')"
                     dense
@@ -124,10 +124,10 @@
                 </div>
                 <div ref="legendTemperature2" id="legendTemperature2"></div>
                 <v-range-slider
-                    v-model="range2"
+                    v-model="mapProperties.anomalieRange2"
                     step="1"
-                    :min="mapProperties.dateRange[0]"
-                    :max="mapProperties.dateRange[1]"
+                    :min="mapProperties.completeDaterange[0]"
+                    :max="mapProperties.completeDaterange[1]"
                     thumb-label="always"
                     thumb-size="29px"
                     style="margin-top:1em;width:330px;margin-left:12px;margin-bottom:-25px;"
@@ -145,7 +145,7 @@
         <v-card class="ma-1">
             <v-card-text>
                 <v-checkbox
-                    v-model="anomalieLayer"
+                    v-model="anomalieLayerActive"
                     hide-details
                     @change="$emit('layerVisibility',$event,'anomalieLayer')"
                     dense
@@ -181,7 +181,7 @@
         :loading="loading"
         :disabled="loading"
         color="blue"
-        @click="calculate()"
+        @click="$emit('calculateAnomalie')"
         >
             Berechne Anomalie
         </v-btn>
@@ -210,14 +210,10 @@ import axios from 'axios'
 @Component({})
 export default class Legend extends Vue{
     @Prop({type: MapProperties, required: true}) mapProperties: MapProperties;
-    private layer1: boolean = true;
-    private layer2: boolean = true;
-    private stationLayer: boolean = true;
-    private loadLayer2: boolean = false;
-    private anomalieLayer: boolean = true;
-    private range1: number[] = [1960, 1990];
-    private range2: number[] = [1991, 2020];
-    private stationYear: number = 1990;
+    private stationLayerActive: boolean = true;
+    private layer1Active: boolean = true;
+    private layer2Active: boolean = true;
+    private anomalieLayerActive: boolean = true;
     private loading: boolean = false;
     
     mounted(){
@@ -226,10 +222,8 @@ export default class Legend extends Vue{
         axios.get("http://127.0.0.1:42000/annualMean", {
             headers: {'Access-Control-Allow-Origin': '*'}
         }).then(resp => {
-            //console.log(resp.data[resp.data.length-1].date);
             
-            this.mapProperties.setDateRange([1950, 1970]);
-            //console.log(resp.data[0].date);
+            this.mapProperties.completeDaterange = [resp.data[0].date, resp.data[resp.data.length-1].date];
 
             let tChart1 = new TemperatureLegendChart();
             tChart1.render("legendTemperature1", resp.data);

frontend/src/MapProperties.ts

@@ -5,9 +5,12 @@ export default class MapProperties{
 
     private map: Map;
     private projection: string;
-    private _daterange: number[] = [1990, 2000];
+    public _completeDaterange: number[] = [1990, 2010];
     private temperatureBounds: {min: number, max: number} = {min: 0, max: 0}; //min/max of all station temperature, expect for colormap
-    public _loadLayer2: boolean = true;
+    public _loadLayer2: boolean = false;
+    public _anomalieRange1: number[] = [1960,1990];
+    public _anomalieRange2: number[] = [1991,2018];
+    public _stationDate: number = 2016;
 
     constructor(map:Map, projection: string){
         this.map = map;
@@ -54,11 +57,36 @@ export default class MapProperties{
         this._loadLayer2 = value;
     }
 
-    public setDateRange(range:number[]):void{
-        this._daterange = range;
+    public set completeDaterange(range:number[]){
+        this._completeDaterange = range;
     }
-    public get dateRange(): number[]{
-        return this._daterange;
+    public get completeDaterange(): number[]{
+        return this._completeDaterange;
     }
 
+    public set anomalieRange1(range:number[]){
+        this._anomalieRange1 = range;
+    }
+
+    public get anomalieRange1():number[]{
+        return this._anomalieRange1;
+    }
+
+    public set anomalieRange2(range:number[]){
+        this._anomalieRange2 = range;
+    }
+
+    public get anomalieRange2():number[]{
+        return this._anomalieRange2;
+    }
+
+    public set stationDate(value: number){
+        this._stationDate = value;
+    }
+
+    public get stationDate():number{
+        return this._stationDate;
+    }
+
+
 }
\ No newline at end of file

frontend/src/StationLayer.ts

@@ -23,12 +23,13 @@ export default class StationLayer{
     constructor(mapProperties: MapProperties){
         this.mapProperties = mapProperties;
 
-        this.colorMap = colormap({colormap:'RdBu', nshades: 20, format: 'hex', alpha: 1});
+        //this.colorMap = colormap({colormap:'RdBu', nshades: 20, format: 'hex', alpha: 1});
+        this.colorMap = this.mapProperties.getTemperatureColorMap();
 
         this.layer = new VectorLayer({
             className: StationLayer.layerName,
             source: new VectorSource({
-                url: "http://localhost:42000/",
+                url: "http://127.0.0.1:42000/?no-interpol",
                 format: new GeoJSON(),
             }),
             style: (feature)=>{return this.stationStyle(feature)}

frontend/src/WeatherMap.vue

@@ -2,7 +2,7 @@
 <template>
     <div id="weatherContainer">
         
-        <Legend id="legend" @stationUpdate="stationupdate" @layerVisibility="layerVisibility" :mapProperties="mapProperties"></Legend>
+        <Legend id="legend" @stationUpdate="stationupdate" @layerVisibility="layerVisibility" @calculateAnomalie="calculateAnomalie" :mapProperties="mapProperties"></Legend>
         
         <div ref="weathermap" id="weathermap" />
 
@@ -83,7 +83,6 @@
 import {Vue, Ref, Component, Watch } from 'vue-property-decorator';
 import View from 'ol/View';
 import Map from 'ol/Map';
-import OSM from 'ol/source/OSM';
 import Overlay from 'ol/Overlay';
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat} from 'ol/proj';
@@ -92,6 +91,8 @@ import StationLayer from './StationLayer';
 import MapProperties from './MapProperties';
 import StationChartPopup from './StationChartPopup.vue';
 import Legend from './Legend.vue';
+import XYZ from 'ol/source/XYZ';
+import AvgLayer from './AvgLayer';
 
 @Component({components:{Legend, StationChartPopup}})
 export default class WeatherMap extends Vue{
@@ -101,6 +102,9 @@ export default class WeatherMap extends Vue{
     private projection: string = 'EPSG:3857'; //4236
     private mapProperties: MapProperties = new MapProperties(null, "");
     private stationLayer: StationLayer;
+    private avgLayer1: AvgLayer;
+    private avgLayer2: AvgLayer;
+
     @Ref('StationChartPopup') stationChartPopup: StationChartPopup;
     
     @Ref('popup') container: HTMLElement;
@@ -117,13 +121,28 @@ export default class WeatherMap extends Vue{
                 duration: 250,
             },
         });
-
+        /* var baseLayer: TileLayer = new TileLayer({
+            source: new XYZ({
+                attributions:
+                  'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+                  'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+                url:
+                  'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+                  'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
+              })
+        }); */
         this.map = new Map({
             target: this.targetElement,
             layers: [
                 new TileLayer({
-                    source: new OSM()
-                })
+            source: new XYZ({
+                attributions:
+                  'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+                  'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+                url:
+                  'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+                  'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
+              })
             ],
             view: new View({
                 zoom: 6.49,
@@ -137,6 +156,7 @@ export default class WeatherMap extends Vue{
         this.mapProperties = new MapProperties(this.map, this.projection);
         
         this.appendStationLayer();
+        this.appendAVGLayer();
 
         this.map.on('click', (evt) => {
             const coordinate = evt.coordinate;
@@ -173,8 +193,13 @@ export default class WeatherMap extends Vue{
     }
 
     private appendStationLayer(){
-        this.stationLayer = new StationLayer(this.mapProperties);
-        this.map.addLayer(this.stationLayer.getLayer());
+        /* this.stationLayer = new StationLayer(this.mapProperties);
+        this.map.addLayer(this.stationLayer.getLayer()); */
+    }
+
+    private appendAVGLayer():void{
+        this.avgLayer1 = new AvgLayer(this.mapProperties);
+        this.map.addLayer(this.avgLayer1.getLayer());
     }
 
     public stationupdate(event){
@@ -192,8 +217,13 @@ export default class WeatherMap extends Vue{
         }
     }   
 
-    protected calculateAnomalie(event):void{
-        console.log("CALCULATE: "+this.mapProperties.dateRange);
+    protected calculateAnomalie():void{
+        console.log("CALCULATE: "+this.mapProperties.completeDaterange);
+        console.log("AnomalieRange1: "+this.mapProperties.anomalieRange1);
+        console.log("AnomalieRange2: "+this.mapProperties.anomalieRange2);
+
+        
+
     }