diff options
Diffstat (limited to 'main/survey/js/HeatMap/HeatMapCanvas.js')
| -rw-r--r-- | main/survey/js/HeatMap/HeatMapCanvas.js | 285 |
1 files changed, 285 insertions, 0 deletions
diff --git a/main/survey/js/HeatMap/HeatMapCanvas.js b/main/survey/js/HeatMap/HeatMapCanvas.js new file mode 100644 index 0000000..393a40d --- /dev/null +++ b/main/survey/js/HeatMap/HeatMapCanvas.js @@ -0,0 +1,285 @@ +var heatmap_num_clicksGlobal = []; //belezi stevilo klikov na canvas
+var mousePos = []; //belezi koordinate izbranih tock
+var indeksMousePos = [];
+
+//inicializacija canvas-a
+function InitHeatMapCanvas(spremenljivka, quick_view){
+ //console.log("InitHeatMapCanvas: "+spremenljivka);
+ var imageJQ = $('#hotspot_'+spremenljivka+'_image');
+ var visina = imageJQ.height();
+ var sirina = imageJQ.width();
+ //var canvasJQ = $('#heatmapCanvas_'+spremenljivka);
+ var canvas = document.getElementById('heatmapCanvas_'+spremenljivka);
+
+
+ imageJQ.css( "display", "none" ); //skrij sliko
+
+ image = new Image();
+ image.src = $('#hotspot_'+spremenljivka+'_image').attr("src");
+ image.height = visina;
+ image.width = sirina;
+
+ //canvasJQ.height(visina);
+ //canvasJQ.width(sirina);
+ canvas.setAttribute('height',visina);
+ canvas.setAttribute('width',sirina);
+
+
+ if (canvas.getContext){
+ var context = canvas.getContext('2d');
+ context.drawImage(image, 0, 0, sirina, visina); //drawImage(image, dx, dy, dWidth, dHeight); //narisi sliko ustrezne dimenzije (sirina, visina) na canvas
+ } else {
+ console.log("Canvas not supported");
+ }
+
+}
+
+
+function HeatMapCanvasDelovanje(evt, spremenljivka, heatmap_show_clicks, heatmap_num_clicks, heatmap_click_color, heatmap_click_size, heatmap_click_shape, quick_view){
+ var canvas = document.getElementById('heatmapCanvas_'+spremenljivka);
+ //var canvas = document.getElementsByClassName('mapster_el_'+spremenljivka);
+ var context = canvas.getContext('2d');
+
+ //console.log("heatmap_num_clicksGlobal: "+heatmap_num_clicksGlobal[spremenljivka]);
+ if(heatmap_num_clicksGlobal[spremenljivka] != 0){ //dokler je stevilo moznih klikov razlicno od nula zbiraj koordinate klikanih tock
+
+ mousePos[spremenljivka][indeksMousePos[spremenljivka]] = getMousePos(canvas, evt);
+ //console.log("x: "+mousePos[spremenljivka][indeksMousePos[spremenljivka]].x+" y: "+mousePos[spremenljivka][indeksMousePos[spremenljivka]].y+" za spremenljivko "+spremenljivka);
+
+
+ //oznacevanje checkbox vezani na obmocja
+ //preveri, ce je izbrana tocka znotraj obmocja
+ checkIfPointInsidePoly(spremenljivka);
+ //oznacevanje checkbox vezani na obmocja - konec
+
+
+ heatmap_num_clicksGlobal[spremenljivka]--;
+ if(heatmap_show_clicks){ //ce je to potrebno, pokazi klike na canvas v obliki okvirja
+ //drawRectangleOnCanvas(mousePos[spremenljivka][indeksMousePos[spremenljivka]], canvas, context);
+ drawShapeOnCanvas(mousePos[spremenljivka][indeksMousePos[spremenljivka]], canvas, context, heatmap_click_color, heatmap_click_size, heatmap_click_shape);
+ }
+
+ HeatMapAddInput(spremenljivka, 0, 0); //dodaj obstojece inpute za tocke iz baze ob morebitnem refreshu ali prehodu na prejsnjo stran
+
+ indeksMousePos[spremenljivka] = indeksMousePos[spremenljivka] + 1;
+
+ $('#heatmapClickNumber_'+spremenljivka).text(indeksMousePos[spremenljivka]); //posodobi stevilo klikov na stevcu klikov
+
+ if(heatmap_num_clicksGlobal[spremenljivka] == 0){ //ce ni vec moznih klikov
+ $('#heatmapCanvas_'+spremenljivka).css( 'cursor', 'default' ); //spremeni misko v navadno puscico
+ }
+
+
+ }else{ //ce ni vec moznih klikov
+/* context.clearRect(0, 0, canvas.width, canvas.height);
+ //context.clearRect(0, 0, context.canvas.width, context.canvas.height); //Izbriši vse na canvasu
+ InitHeatMapCanvas(spremenljivka);
+ heatmap_num_clicksGlobal[spremenljivka] = heatmap_num_clicks; */
+ //pokazi zbrane tocke
+/* for(var i = 0; i<indeksMousePos;i++){
+ console.log((i+1)+". točka ("+mousePos[i].x+", "+mousePos[i].y+")");
+ } */
+ $('#heatmapCanvas_'+spremenljivka).css( 'cursor', 'default' ); //spremeni misko v navadno puscico
+ }
+ //console.log("indeksMousePos["+spremenljivka+"]"+indeksMousePos[spremenljivka]);
+}
+
+//funkcija, ki vrne x pa y koordinate klika oz. tocke na canvas
+function getMousePos(canvas, evt) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: parseInt(evt.clientX - rect.left),
+ y: parseInt(evt.clientY - rect.top)
+ };
+}
+
+//funkcija, ki doda html inpute za izbrane tocke na canvas
+function HeatMapAddInput(spremenljivka, refresh, mousePosRefresh){
+ var $variable_holder = $("#heatmapInputs_" + spremenljivka);
+ var pointId = "pointId_"+spremenljivka+"_"+indeksMousePos[spremenljivka];
+ //console.log(pointId);
+ if (refresh){
+ var $pointInput = $("<input>", {id: pointId, name: "vrednost_" + spremenljivka + "[]",
+ value: pointId + "|" + mousePosRefresh.lat + "|" + mousePosRefresh.lng});
+ }else{
+ var $pointInput = $("<input>", {id: pointId, name: "vrednost_" + spremenljivka + "[]",
+ value: pointId + "|" + mousePos[spremenljivka][indeksMousePos[spremenljivka]].x + "|" + mousePos[spremenljivka][indeksMousePos[spremenljivka]].y});
+ }
+ $variable_holder.append($pointInput);
+}
+
+
+//funkcija, ki narise izbrano obliko, kjer je izbrana tocka
+function drawShapeOnCanvas(mousePos, canvas, context, heatmap_click_color, heatmap_click_size, heatmap_click_shape, refresh){
+ //context.fillRect(mousePos.x, mousePos.y, 25, 25);
+ stranicaRect = heatmap_click_size;
+ if(heatmap_click_shape == 1)
+ {
+ if(refresh == 1){
+ context.arc(mousePos.lat, mousePos.lng, stranicaRect, 0, 2 * Math.PI, false);
+ }
+ else{
+ context.arc(mousePos.x, mousePos.y, stranicaRect, 0, 2 * Math.PI, false);
+ }
+
+ }else if(heatmap_click_shape == 2)
+ {
+ if(refresh == 1){
+ context.rect(mousePos.lat-stranicaRect/2, mousePos.lng-stranicaRect/2, stranicaRect, stranicaRect);
+ }else{
+ context.rect(mousePos.x-stranicaRect/2, mousePos.y-stranicaRect/2, stranicaRect, stranicaRect);
+ }
+ }
+
+ context.fillStyle = heatmap_click_color;
+ context.fill();
+ context.closePath(); //risanje je potrebno zakljuciti da, konkretno pri krogih, se ti ne povezujemo med sabo in naredijo vecji lik
+}
+
+//funkcija, ki resetira canvas in ostale spremenljivke na default
+function resetHeatMapCanvas(spremenljivka, heatmap_num_clicks, quick_view){
+ //pokazi zbrane tocke
+/* for(var i = 0; i<indeksMousePos[spremenljivka];i++){
+ console.log((i+1)+". točka ("+mousePos[spremenljivka][i].x+", "+mousePos[spremenljivka][i].y+") spremenljivka "+spremenljivka);
+ } */
+
+ var canvas = document.getElementById('heatmapCanvas_'+spremenljivka);
+ //var canvas = document.getElementsByClassName('mapster_el_'+spremenljivka);
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height); //zbrise celoten canvas
+ //context.clearRect(0, 0, context.canvas.width, context.canvas.height); //Izbriši vse na canvasu
+ InitHeatMapCanvas(spremenljivka); //initializing canvas, da se ponovno pokaze slika
+ heatmap_num_clicksGlobal[spremenljivka] = heatmap_num_clicks; //stevilo klikov je zacetno
+ indeksMousePos[spremenljivka] = 0;
+ var $variable_holder = $("#heatmapInputs_" + spremenljivka);
+ $variable_holder.children().remove();
+ $('#heatmapCanvas_'+spremenljivka).css( 'cursor', 'pointer' ); //spremeni misko v rokico
+
+ //resetiranje oznacenih checkbox-ov
+ $("#heatmapCheckbox_"+spremenljivka).children().each(function (index, name) {
+ //console.log($(this).find('input').attr('value'));
+ $(this).find('input').prop("checked", false);
+ });
+
+ $('#heatmapClickNumber_'+spremenljivka).text(0); //stevec klikov resetiraj na 0
+
+}
+
+//funkcija, ki zbrise zadnje izbrano tocko iz canvasa in ustrezno uredi ostale zadeve
+function resetHeatMapLastPoint(spremenljivka, heatmap_num_clicks, heatmap_show_clicks, heatmap_click_color, heatmap_click_size, heatmap_click_shape, heatmap_data, quick_view){
+/* //pokazi zbrane tocke
+ for(var i = 0; i<indeksMousePos[spremenljivka];i++){
+ console.log((i+1)+". točka ("+mousePos[spremenljivka][i].x+", "+mousePos[spremenljivka][i].y+") spremenljivka "+spremenljivka);
+ } */
+
+ var canvas = document.getElementById('heatmapCanvas_'+spremenljivka);
+ //var canvas = document.getElementsByClassName('mapster_el_'+spremenljivka);
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height); //zbrise celoten canvas
+ //context.clearRect(0, 0, context.canvas.width, context.canvas.height); //Izbriši vse na canvasu
+
+ InitHeatMapCanvas(spremenljivka); //initializing canvas, da se ponovno pokaze slika
+ var $variable_holder = $("#heatmapInputs_" + spremenljivka);
+ $variable_holder.children().remove();
+ //$('#heatmapCanvas_'+spremenljivka).css( 'cursor', 'pointer' ); //spremeni misko v rokico
+
+ //resetiranje oznacenih checkbox-ov
+ $("#heatmapCheckbox_"+spremenljivka).children().each(function (index, name) {
+ //console.log($(this).find('input').attr('value'));
+ $(this).find('input').prop("checked", false);
+ });
+
+ if((heatmap_num_clicks - heatmap_num_clicksGlobal[spremenljivka]) > 0)
+ {
+ indeksMousePos[spremenljivka] = indeksMousePos[spremenljivka] - 1;
+ heatmap_num_clicksGlobal[spremenljivka] = heatmap_num_clicksGlobal[spremenljivka] + 1; //stevilo moznih klikov se poveca za ena
+ $('#heatmapClickNumber_'+spremenljivka).text(heatmap_num_clicks - heatmap_num_clicksGlobal[spremenljivka]); //stevec klikov
+ }
+
+ //dodaj ostale nezbrisane tocke ******************
+ //ce je bil refresh ali se je uporabnik vrnil na prejsnjo stran
+ if(refreshed[spremenljivka] == 1){
+ for (var row in heatmap_data) {
+ var row_object = heatmap_data[row];
+ mousePos[spremenljivka][row] = {x: row_object.lat, y: row_object.lng};
+ //console.log("mousePos["+spremenljivka+"]["+row+"].x:"+mousePos[spremenljivka][row].x);
+ }
+ refreshed[spremenljivka] = 0;
+ }
+ for(var i = 0; i<indeksMousePos[spremenljivka];i++){
+ //console.log((i+1)+". točka ("+mousePos[spremenljivka][i].x+", "+mousePos[spremenljivka][i].y+") spremenljivka "+spremenljivka);
+ //console.log("Dodaj neizbrisano točko "+i);
+ var pointId = "pointId_"+spremenljivka+"_"+i;
+ var $pointInput = $("<input>", {id: pointId, name: "vrednost_" + spremenljivka + "[]",
+ value: pointId + "|" + mousePos[spremenljivka][i].x + "|" + mousePos[spremenljivka][i].y});
+ $variable_holder.append($pointInput);
+ if(heatmap_show_clicks){ //ce je to potrebno, pokazi klike na canvas v obliki okvirja
+ drawShapeOnCanvas(mousePos[spremenljivka][i], canvas, context, heatmap_click_color, heatmap_click_size, heatmap_click_shape);
+ }
+ }
+
+ //dodaj ostale nezbrisane tocke - konec ******************
+}
+
+//funkcija, ki se sprozi ob vrnitvi na prejsnjo stran
+function heatmap_data_add(spremenljivka, heatmap_data, heatmap_click_color, heatmap_click_size, heatmap_click_shape, heatmap_show_clicks, heatmap_num_clicks) {
+ heatmap_num_clicksGlobal[spremenljivka] = heatmap_num_clicks;
+ var i = 0;
+ for (var row in heatmap_data) {
+ var row_object = heatmap_data[row];
+ var mousePos = {lat: row_object.lat, lng: row_object.lng};
+ var canvas = document.getElementById('heatmapCanvas_'+spremenljivka);
+ var context = canvas.getContext('2d');
+
+ if(heatmap_show_clicks){
+ drawShapeOnCanvas(mousePos, canvas, context, heatmap_click_color, heatmap_click_size, heatmap_click_shape, 1);
+ }
+ indeksMousePos[spremenljivka]++;
+ i++
+ HeatMapAddInput(spremenljivka, 1, mousePos);
+ }
+ //uredi limit klikov glede na ze prisotne tocke na canvas
+ heatmap_num_clicksGlobal[spremenljivka] = heatmap_num_clicksGlobal[spremenljivka] - i;
+ $('#heatmapClickNumber_'+spremenljivka).text(i); //prikazi pravilno stevilo klikov na stevcu klikov
+}
+
+//funkcija, ki skrbi za pretvorbo koordinat v pravilno obliko za nadaljnje delovanje
+function convertPolyString(polypoints, vre_id){
+ var poly = [];
+ var polyObjectArray = [];
+ var tmpX;
+ var tmpY;
+ var j = 0;
+ poly = polypoints.split(",");
+
+ for(var i = 0; i<poly.length; i++){
+ if(i == 0 || i%2 == 0){
+ tmpX = parseInt(poly[i]);
+ }else{
+ tmpY = parseInt(poly[i]);
+ polyObjectArray.push({x: tmpX, y: tmpY});
+ }
+ }
+ //console.log("dolzina polja polyObjectArray je: "+polyObjectArray.length);
+ return polyObjectArray;
+}
+
+//funkcija, ki ureja preverjanje prisotnosti trenutne tocke znotraj predefiniranega obmocja
+function checkIfPointInsidePoly(spremenljivka){
+ $("#hotspot_"+spremenljivka+"_map").children().each(function (index, name) {
+ //console.log('coords: ' + $(this).attr('coords') + ' vre_id: ' + $(this).attr('name'));
+ var vre_id = $(this).attr('name');
+ var polypoints = $(this).attr('coords');
+
+ poly = convertPolyString(polypoints, vre_id); //pretvori polje s tockami obmocja v ustrezno obliko
+
+ //preveri, ce je izbrana tocka znotraj obmocja
+ var inside = insidePoly(poly, mousePos[spremenljivka][indeksMousePos[spremenljivka]].x, mousePos[spremenljivka][indeksMousePos[spremenljivka]].y, vre_id);
+ //preveri, ce je izbrana tocka znotraj obmocja - konec
+
+ if (inside == true){
+ //console.log("Točka je znotraj območja "+vre_id);
+ $('#spremenljivka_'+spremenljivka+'_vrednost_'+vre_id).prop("checked", true); //oznacitev ustreznega radio button-a / checkbox v skritem menuju
+ }
+ });
+}
\ No newline at end of file |