map X Y coordinate generator for making new locations

6 years ago · 04d10120da
parent 4ce95acbac
commit 04d10120da
2 changed files with 40 additions and 0 deletions
--- a/parts/static/script.js
+++ b/parts/static/script.js
@ -270,3 +270,23 @@ $(document).ready(function() {
 		perform_query();
    });
 });
 $(document).ready(function() {
    $("#clickablemap").on("click", function(event) {
   		var $img = $(this);
    	var currentClickPosX = event.pageX - $img.offset().left;
    	var currentClickPosY = event.pageY - $img.offset().top;
    	var currentWidth = $img.width();
 	    var currentHeight = $img.height();
 	    var naturalWidth = this.naturalWidth;
 	    var naturalHeight = this.naturalHeight;
 	    var correctX = ((naturalWidth / currentWidth) * currentClickPosX).toFixed(0);
 	    var correctY = ((naturalHeight / currentHeight) * currentClickPosY).toFixed(0);
        $("#mapURL").html("elab.png?x=" + correctX + "&y=" + correctY);
        $("#clickablemap").attr("src", "http://127.0.0.1:5000/parts/map/elab.png?x=" + correctX + "&y=" + correctY);
    });
 });
--- a/parts/test.html
+++ b/parts/test.html
@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>ELAB Part Search Engine</title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <script src="https://use.fontawesome.com/2fef7be393.js"></script>
    <script type="text/javascript" src="static/script.js"></script>
  </head>
  <body>
    <div id="mapURL">unknown.png</div>
    <br />
    <img src="maps/elab.png" id="clickablemap" style="margin-top: 50px; margin-left: 3em; max-height: 830px;"/>
  </body>
 </html>