diff options
Diffstat (limited to 'admin/survey/script/HeatMap/HeatMapSumarnikPopUp.js')
| -rw-r--r-- | admin/survey/script/HeatMap/HeatMapSumarnikPopUp.js | 354 |
1 files changed, 354 insertions, 0 deletions
diff --git a/admin/survey/script/HeatMap/HeatMapSumarnikPopUp.js b/admin/survey/script/HeatMap/HeatMapSumarnikPopUp.js new file mode 100644 index 0000000..46b69ff --- /dev/null +++ b/admin/survey/script/HeatMap/HeatMapSumarnikPopUp.js @@ -0,0 +1,354 @@ +//heatmap_data_holder postane holder id-jev potrebnih za prikaz markerjev kasneje
+//kasneje se v ta objekt nafilajo podatki za prikaz vsakega markerja
+var heatmap_data_holder = {};
+var heatmap;
+var heatmapData = [];
+var heatmapBackground_data_holder;
+var max = 0; //stevilo isto klikanih tock
+//var r = 50;
+var r = 1;
+var spr_id = 0;
+var anketa_id;
+var slikaNalozena = 0;
+
+function heatmapInit(spremenljivka){
+ //ureditev vrednosti sliderja za radij in njegove output labele
+ $('#heatmapRadij').val(r);
+ $('#heatmapRadijValue').text(r);
+}
+
+function drawHeatmap(){
+ //narisi heatmap
+ var min = 0;
+ for (var row in heatmap_data_holder) {
+ var row_object = heatmap_data_holder[row];
+ //x in y morajo biti int, ker drugace ne dela, zato parseInt()
+ heatmapData.push({x: parseInt(row_object.lat), y: parseInt(row_object.lng), value: parseInt(row_object.text), radius: r});
+ //za pridobitev najvecjega stevila isto klikanih tock
+ if(max < parseInt(row_object.text)){
+ max = parseInt(row_object.text);
+ }
+ }
+ //console.log("Final max: "+max);
+ // set the generated dataset
+ heatmap.setData({
+ min: min,
+ max: max,
+ data: heatmapData
+ });
+ //console.log(heatmapData);
+ exportHeatmapAsImage(spr_id);
+}
+
+//kreiraj colorbox (popup, kjer bo heatmap poročilo) in sliderja za radij
+$(document).ready(function () {
+ $(".fHeatMap").colorbox({
+ scrolling:false,
+ width:"80%",
+ height:"80%",
+ title: "",
+ html:'<div id="heatmap_canvas_all" style="width:100%;height:95%"></div><div style="display:inline-block">'+lang["srv_heatmap_radius"]+': <input id="heatmapRadij" type="range" min="1" max="500" step="1" value="'+r+'" oninput="outputUpdate(value)"/><output for="heatmapRadij" id="heatmapRadijValue">'+r+'</output></div><div style="display:inline-block"> </div><div id="izvozHeatmap" style="display:inline-block"></div>',
+ onComplete:function(){getHeatMapDataAjax(); }
+ });
+});
+
+
+
+function outputUpdate(radij) {
+ document.querySelector('#heatmapRadijValue').value = radij;
+ //console.log(radij);
+ r = radij;
+ heatmapData = []; //sprazni trenutni data set za risanje heatmap
+ drawHeatmap(); //ponovno narisi heatmap z novim radijem
+ max = 0;
+ //shrani vrednost radija
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "text",
+ url: 'ajax.php?t=heatmapRadij',
+ data: { heatmapRadij: radij, anketa: anketa_id, sprid: spr_id},
+ error: function(response) {
+ console.log("Error in Ajax4HeatMap connection! Please try later!");
+ }
+ });
+
+ //odstrani sporocilo o moznosti shranjevanja slike, ce je ta generirana
+ if($('#heatMapSaveAsMsg_'+spr_id).text() != '')
+ {
+ //console.log($('#heatMapSaveAsMsg_'+spr_id).text());
+ $('#heatMapSaveAsMsg_'+spr_id).remove();
+ }
+}
+
+/**
+ * ob kliku na link prenesi podatke o zeljeni spremenljivki
+ * @param {type} sprid - int - id spremenljivke
+ * @param {type} usrid - int - id userja
+ * @param {type} loopid - int - id loopa
+ * @returns {undefined}
+ */
+function passHeatMapData(sprid, usrid, loopid, anketa){
+ //map_data_holder postane holder id-jev potrebnih za prikaz markerjev kasneje
+ heatmap_data_holder = {spr_id: sprid, usr_id: usrid, loop_id: loopid};
+ //console.log("Radij: "+radij);
+ if (spr_id != sprid){
+ //console.log("Rabimo nove podatke za heatmap");
+ heatmapData = []; //sprazni trenutni data set za risanje heatmap
+ max = 0;
+ }
+ //console.log("Anketa v pass: "+anketa);
+ anketa_id = anketa;
+ spremenljivka = spr_id = sprid;
+
+ getHeatMapRadij(sprid, anketa);
+ getHeatMapExportIcons(sprid, anketa);
+}
+
+function getHeatMapRadij(sprid, anketa){
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "text",
+ url: 'ajax.php?t=getheatmapradij',
+ data: { sprid: sprid, anketa: anketa},
+ error: function(response) {
+ console.log("Error in AjaxHeatMapBackGround connection! Please try later!");
+ },
+ success: function(response) {
+ r = response;
+ if(r){
+ //console.log("Radij iz baze je: "+r);
+ }else{
+ //console.log("Default radij");
+ //r = 50;
+ r = 1;
+ //console.log("Radij je po novem: "+r);
+ }
+ //ureditev vrednosti sliderja za radij in njegove output labele
+ $('#heatmapRadij').val(r);
+ $('#heatmapRadijValue').text(r);
+ }
+ });
+}
+
+function getHeatMapExportIcons(sprid, anketa){
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "html",
+ url: 'ajax.php?t=getheatmapexporticons',
+ data: { sprid: sprid, anketa: anketa},
+ error: function(response) {
+ console.log("Error in AjaxHeatMapBackGround connection! Please try later!");
+ },
+ success: function(response) {
+ //vnesi v mesto za gumbe za izvoz zeleno kodo
+ $('#izvozHeatmap').html(response);
+ }
+ });
+}
+
+
+/* function prikaziPodatke(){
+ var i = 1;
+ //var r = 50;
+ var r = 1;
+ for (var row in heatmap_data_holder) {
+ var row_object = heatmap_data_holder[row];
+ //var pos = {lat: row_object.lat, lng: row_object.lng};
+ var pos = {x: row_object.lat, y: row_object.lng, value: row_object.text, radius: r};
+ //kreiraj marker
+ //createMarker(spremenljivka, row_object.address, pos, row_object.text);
+ $('#heatmap_canvas_all'+spremenljivka).append(i+". appended pos: "+pos.x+" "+pos.y+" value: "+pos.value+"<br />");
+ i++;
+ }
+} */
+
+
+//pridobi podatke za ureditev ozadja heatmap
+function getHeatMapBackGround() {
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "text",
+ url: 'ajax.php?t=heatmapBackgroundData',
+ data: { heatmapBackground_data: spremenljivka},
+ error: function(response) {
+ console.log("Error in AjaxHeatMapBackGround connection! Please try later!");
+ },
+ success: function(response) {
+ heatmapBackground_data_holder = response;
+
+ //dodajanje slike, da pobere potrebne podatke za ureditev slike v ozadju
+ $('#heatmap_canvas_all_'+spremenljivka).append(heatmapBackground_data_holder);
+ //dodaj id background sliki, ki je koristno za mozen izvoz slike
+ $('#heatmap_canvas_all_'+spr_id).find('img').attr('id', 'heatmap-background');
+
+ //****** risanje ozadja heatmap porocila
+ //pobiranje potrebnih podatkov
+ var bgSrc = $('#heatmap_canvas_all_'+spr_id).find('img').attr('src');
+ //ali je online slika ali lokalna
+ var slikaNaStrezniku = checkBgSrc(bgSrc);
+ if(slikaNaStrezniku<=0){ //ce slika ni na strezniku, uporabi tmp sliko, ki je na strezniku
+ var url = getSiteUrl();
+ bgSrc = url+"uploadi/editor/"+spr_id+"tmpImage.png";
+ $('#heatmap_canvas_all_'+spr_id).find('img').attr('src', bgSrc);
+ }
+ //ali je online slika ali lokalna - konec
+ var bgWidth = $('#heatmap_canvas_all_'+spr_id).find('img').width();
+ var bgHeight = $('#heatmap_canvas_all_'+spr_id).find('img').height();
+
+ //pravilno dimezioniranje celotnega canvas-a, za kasnejso pravilno velikost slike
+ $('#heatmap_canvas_all_'+spr_id).width(bgWidth);
+ $('#heatmap_canvas_all_'+spr_id).height(bgHeight);
+
+ //risanje slike v ozadju canvasa
+ $('#heatmap-canvas').width(bgWidth);
+ $('#heatmap-canvas').height(bgHeight);
+ $('#heatmap-canvas').css("background", "transparent url('"+bgSrc+"') no-repeat left top");
+ $('#heatmap-canvas').css("background-size", bgWidth+"px "+bgHeight+"px");
+
+ //inicializiraj heatmap
+ heatmap = h337.create({
+ container: document.getElementById('heatmap_canvas_all_'+spr_id),
+ opacity:.5,
+ //radius: 10,
+ // this line makes datapoints unblurred
+ blur: 0.7
+ });
+
+ drawHeatmap(); //izrisi heatmap
+ }
+ });
+}
+
+function checkBgSrc(bgSrc){
+ var findme = 'editor/';
+ var pos = bgSrc.indexOf(findme); //najdi pozicijo teksta 'editor/'
+ return pos;
+}
+
+
+function getSiteUrl(){
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "text",
+ url: 'ajax.php?t=getSiteUrl',
+ error: function(response) {
+ console.log("Error in AjaxHeatMapBackGround connection! Please try later!");
+ },
+ success: function(response) {
+ siteUrl = response;
+ }
+ });
+ return siteUrl;
+}
+
+
+//pridobi podatke o tockah iz baze in za risanje heatmap
+function getHeatMapDataAjax() {
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "json",
+ url: 'ajax.php?t=heatmapData',
+ data: { heatmap_data: heatmap_data_holder, anketa: anketa_id},
+ error: function(response) {
+ console.log("Error in AjaxHeatMapDataAjax connection! Please try later!");
+ },
+ success: function(response) {
+ $('#heatmap_canvas_all').attr('id', 'heatmap_canvas_all_'+spremenljivka);
+ eliminateDuplicates();
+ //map_data_holder zdaj postane holder markerjev
+ heatmap_data_holder = response;
+ //heatmapInit();
+ heatmapInit(spremenljivka);
+ getHeatMapBackGround();
+ }
+ });
+}
+//pridobi podatke o tockah iz baze in za risanje heatmap - konec
+
+
+function eliminateDuplicates(){
+ var i = 1;
+ //odstranitev odvecnih podatkov v object-u, saj se podvojijo
+ for (var row in heatmap_data_holder) {
+ var row_object = heatmap_data_holder[row];
+ if (row == 0){
+/* console.log("row:"+row);
+ console.log("row_object[0]"+row_object[0]);
+ console.log("row_object[1]"+row_object[1]);
+ console.log("row_object[2]"+row_object[2]);
+ console.log("row_object[3]"+row_object[3]); */
+ delete row_object[0];
+ delete row_object[1];
+ delete row_object[2];
+ delete row_object[3];
+ }
+
+ }
+}
+
+function insert(str, index, value) {
+ return str.substring(0, index) + value + str.substring(index);
+}
+
+
+function exportHeatmapAsImage(spr_id){
+ //console.log("radij v exportHeatmapAsImage: "+r);
+ //******* pretvorba canvasa v sliko
+ var canvas = document.getElementById("heatmap-canvas");
+
+ var img = document.getElementById("heatmap-background"); //background slika
+
+ //pobiranje potrebnih podatkov
+ var bgWidth = $('#heatmap_canvas_all_'+spr_id).find('img').width();
+ var bgHeight = $('#heatmap_canvas_all_'+spr_id).find('img').height();
+
+ var ctx = canvas.getContext("2d");
+
+ //risi background sliko na canvas
+ if(slikaNalozena){
+ izrisiSliko(canvas, img, bgWidth, bgHeight, ctx);
+ }else{
+ img.onload = function(){
+ izrisiSliko(canvas, img, bgWidth, bgHeight, ctx);
+ slikaNalozena = 1;
+ }
+ }
+
+}
+
+function izrisiSliko(canvas, img, bgWidth, bgHeight, ctx){
+ //potrebna alfa transparenca, da sta vidni tako background slika kot heatmap
+ ctx.globalAlpha = 0.4;
+
+ ctx.drawImage(img, 0, 0, bgWidth, bgHeight);
+
+ var image = canvas.toDataURL("image/png");
+ //console.log("Raw image data:"+image);
+
+ $.ajax({
+ cache: false,
+ crossDomain: true,
+ type: 'post',
+ dataType: "text",
+ url: 'ajax.php?t=saveHeatmapImage',
+ data: { sprid: spr_id, image: image},
+ error: function(response) {
+ console.log("Error in SurveyHeatMapSaveImage connection! Please try later!");
+ },
+ success: function(response) {
+ //console.log("Image saved!");
+ }
+ });
+}
\ No newline at end of file |