<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #scape_container { zoom: 1; } body .ui-selecting { border:2px solid yellow; } body .ui-selected {border:2px solid black;} body {overflow: scroll;} #scape_container{overflow: scroll;width: 100%; height:100vh;} #zoombuttons{ position: fixed; right:20px; bottom: 20px; z-index: +999999999999999999999999999999999999999999999; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } #zoom-in{ width: 30px; height: 30px; background-color: rgb(240,240,240); cursor: pointer; border: 1px solid black; text-align: center; padding-top: 10px; } #zoom-out{ width: 30px; height: 30px; background-color: rgb(240,240,240); cursor: pointer; border: 1px solid black; text-align: center; padding-top: 10px; } #zoom-in:hover{ background-color: rgb(230,230,230); } #zoom-out:hover{ background-color: rgb(230,230,230); } .booktitle a{ text-decoration: none; color: black; } </style> </head> <body> <div id="zoombuttons"> <select name="selector" id="selector"> {% for instance in instances %} <option value="{{instance.name}}">{{instance.name}}</option> {% endfor %} </select> <div id="zoom-in">+</div> <div id="zoom-out">-</div> </div> <div id ="scape_container"> {% for book in books|sort(attribute='title', reverse = False) %} <div class = "drag" id = "{{ book.id }}" style="position: absolute;width:70px;height:auto; top:{{ book.scapeY }}px; left:{{ book.scapeX }}px;"> <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" style="width:100%;height:auto;" onerror="if (this.src != '../static/img/default_cover.gif') this.src = '../static/img/default_cover.gif';"> <p class="booktitle" style="font-size:7px;"><a href="books/{{ book.id }}">{{ book.title }}</a></p> {% set got = {} %} {% set all = 1 %} {% for instance in book.instances %} {% if instance.name in got %} {% set x=got.__setitem__(instance.name, got[instance.name]+1) %} {% else %} {% set x=got.__setitem__(instance.name, 1) %} {% endif %} {% set all = loop.index %} {% endfor %} {% for instance, value in got.items() %} {% set result = value/(book.instances|length) %} <p hidden="True" >{{ instance }}</p> <p hidden="True" class = "{{ instance }}" >{{result}}</p> {% endfor %} </div> {% endfor %} <div id="random" style="padding:2px; margin: 0;position: absolute;width:120px;height:20px;background-color:yellow;z-index:999999999999999999900000000000000;cursor:pointer;"> <p style="padding:0; margin: 0;position: absolute; ">random position</p> </div> </div> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="{{ url_for("static", filename="js/app.js") }}"></script> <script> $( ".no_cover" ).each(function() { var string = $(this).attr('id'); var randomColor = colorHash(string).rgb $(this).css({ 'background-color' : randomColor, }); } ) function colorHash(inputString){ var sum = 0; for(var i in inputString){ sum += inputString.charCodeAt(i); } r = ~~(('0.'+Math.sin(sum+1).toString().substr(6))*256); g = ~~(('0.'+Math.sin(sum+2).toString().substr(6))*256); b = ~~(('0.'+Math.sin(sum+3).toString().substr(6))*256); var rgb = "rgb("+r+", "+g+", "+b+")"; var hex = "#"; hex += ("00" + r.toString(16)).substr(-2,2).toUpperCase(); hex += ("00" + g.toString(18)).substr(-2,2).toUpperCase(); hex += ("00" + b.toString(20)).substr(-2,2).toUpperCase(); return { r: r ,g: g ,b: b ,rgb: rgb ,hex: hex }; } </script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { var currentZoom = $('#scape_container').css('zoom'); var zoom = parseFloat(currentZoom); var pointerX; var pointerY; $( ".drag" ).draggable({ stack: ".drag", start : function(evt, ui) { pointerY = (evt.pageY - $('#scape_container').offset().top) / zoom - parseInt($(evt.target).css('top')); pointerX = (evt.pageX - $('#scape_container').offset().left) / zoom - parseInt($(evt.target).css('left')); }, drag : function(evt, ui) { var canvasTop = $('#scape_container').offset().top; var canvasLeft = $('#scape_container').offset().left; var canvasHeight = $('#scape_container').height(); var canvasWidth = $('#scape_container').width(); // Fix for zoom ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); // Finally, make sure offset aligns with position ui.offset.top = Math.round(ui.position.top + canvasTop); ui.offset.left = Math.round(ui.position.left + canvasLeft); }, stop: function(){ var offset = $(this).offset(); var id = $(this).attr('id'); var xPos = offset.left; var yPos = offset.top; console.log(xPos); console.log(yPos); var postForm = { //Fetch form data 'id' : id, 'x' : xPos, //Store name fields value, 'y' : yPos }; $.ajax({ //Process the form using $.ajax() type : 'POST', //Method type url : '/scape', //Your form processing file URL data : postForm, //Forms name dataType : 'json' }); } }); } ); $( "#random" ).click(function() { console.log("hallo"); $( ".drag" ).each(function() { var id = $(this).attr('id'); var postForm = { //Fetch form data 'id' : id, 'x' : Math.floor(Math.random() * 2000) , //Store name fields value, 'y' : Math.floor(Math.random() * 2000) }; $( this ).css("top", postForm['y']); $( this ).css("left", postForm['x']); $.ajax({ //Process the form using $.ajax() type : 'POST', //Method type url : '/scape', //Your form processing file URL data : postForm, //Forms name dataType : 'json' }); }); }); $("#zoom-in").click(function(){ var currentZoom = $('#scape_container').css('zoom'); var newnumber = parseFloat(currentZoom) + 0.1; console.log(newnumber) //$('#scape_container').css('zoom','90%'); /* Webkit browsers */ $('#scape_container').css('zoom',newnumber.toString()); /* Other non-webkit browsers */ // $('#scape_container').css('-moz-transform',scale(0.9, 0.9)); /* Moz-browsers */ }); $("#zoom-out").click(function(){ var currentZoom = $('#scape_container').css('zoom'); var newnumber = parseFloat(currentZoom) - 0.1; console.log(currentZoom+", "+newnumber.toString()) //$('#scape_container').css('zoom','90%'); /* Webkit browsers */ $('#scape_container').css('zoom',newnumber.toString()); /* Other non-webkit browsers */ // $('#scape_container').css('-moz-transform',scale(0.9, 0.9)); /* Moz-browsers */ }); $("select[name=selector]").on('change', function() { var selectedInstance = $('select[name=selector]').val() $( ".drag" ).each(function() { if($(this).find('.'+selectedInstance).length==0) { $(this).css("opacity", "0.02") } else{ var found = $(this).find('.'+selectedInstance).html() $(this).css("opacity", found) } }); }); </script> </body> </html>