afzafri/coordinate.html

## coordinate.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Image Coordinates Generator</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"

  ></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style id="compiled-css" type="text/css">
      body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
  </style>


  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">//<![CDATA[

    window.onload=function(){

// script for the tool
	// Original script: http://stackoverflow.com/a/32080151/5784900

	var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

	var canvas = document.getElementById('Canvas');
	var context = canvas.getContext("2d");

	// Map sprite
	var mapSprite = new Image();
	//mapSprite.src = "./clock_bg.png";

	function handleImage(e)
	{
	    var reader = new FileReader();
	    reader.onload = function(event)
	    {
	        mapSprite.src = event.target.result;
	    }
	    reader.readAsDataURL(e.target.files[0]);

	    // show tools area when image loaded
	    $('#showTool').fadeIn('slow');

	}

	var Marker = function () {
	    this.Sprite = new Image();
	    this.Sprite.src = "https://i.ibb.co/2yW3bhb/marker.png";
	    this.Width = 32;
	    this.Height = 32;
	    this.XPos = 0;
	    this.YPos = 0;
	}

	var Markers = new Array();
	var MarkersText = new Array();

	var mouseClicked = function (mouse) {
	    // Get corrent mouse coords
	    var rect = canvas.getBoundingClientRect();
	    var mouseXPos = (mouse.x - rect.left);
	    var mouseYPos = (mouse.y - rect.top);

	    // Move the marker when placed to a better location
	    var marker = new Marker();
	    marker.XPos = mouseXPos - (marker.Width / 2);
	    marker.YPos = mouseYPos - marker.Height;

	    Markers.push(marker);
	    MarkersText.push("(X:" + Math.round(mouseXPos) + "px , Y:" + Math.round(mouseYPos) + "px )");

	    var table = document.getElementById("coordinates");
	    var row = table.insertRow();
	    var cell1 = row.insertCell(0);
	    var cell2 = row.insertCell(1);
	    var cell3 = row.insertCell(2);

	    cell1.innerHTML = table.rows.length - 1;
	    xcoor = Math.round(mouseXPos).toString(16);
	    ycoor = Math.round(mouseYPos).toString(16);
	    cell2.innerHTML = (xcoor.length < 2) ? ('0' +  xcoor) : xcoor;
	    cell3.innerHTML = (ycoor.length < 2) ? ('0' +  ycoor) : ycoor;
	}

	// Add mouse click event listener to canvas
	canvas.addEventListener("mousedown", mouseClicked, false);

	var firstLoad = function () {
	    context.font = "15px Georgia";
	    context.textAlign = "center";
	}

	firstLoad();

	var main = function () {
	    draw();
	};

	var draw = function () {
	    // Clear Canvas
	    context.fillStyle = "#000";
	    context.fillRect(0, 0, canvas.width, canvas.height);

	    // Draw map
	    // Sprite, X location, Y location, Image width, Image height
	    // You can leave the image height and width off, if you do it will draw the image at default size
	    context.drawImage(mapSprite, 0, 0, 240, 240);

	    // Draw markers
	    for (var i = 0; i < Markers.length; i++) {
	        var tempMarker = Markers[i];
	        // Draw marker
	        context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);

	        // Calculate postion text
	        var markerText = "Marker #" + (i+1) + " " + MarkersText[i];

	        // Draw a simple box so you can see the position
	        var textMeasurements = context.measureText(markerText);
	        context.fillStyle = "#666";
	        context.globalAlpha = 0.7;
	        context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
	        context.globalAlpha = 1;

	        // Draw position above
	        context.fillStyle = "#000";
	        context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
	    }
	};

	setInterval(main, (1000 / 60)); // Refresh 60 times a second

    }

  //]]></script>

</head>
<body>
    <div class="container">

	<div class="alert alert-info alert-dismissable">
		<h4><i class="icon fa fa-info"></i> This simple tool will allow you to generate the coordinates of the watch face background for placing the time elements in your watch face. The output result will automatically converted into Hex values, so all you need to do is just copy and paste the value into your configtbl.bin file!</h4>
    <span class='text-muted'>Created by zafrix8 for Watch Face UP</span>
	</div>

<div class="card">
  <div class="card-header">
    <h3>Image Coordinates Generator</h3>
  </div>
  <div class="card-body">
    	<div class="form-group" id="title">
	          <label>Choose your <span class="badge badge-info">clock_bg.png</span> image</label>
	          <input type="file" class="form-control" id="imageLoader" name="imageLoader"/>
	        </div>

			<div id="showTool" style="display: none">

				<br>
				<h3>Watch Face Background Image</h3><hr>
				<p>Click on the image to place a marker<br> The markers on the image will show the coordinates value in decimal, while the table below will show the coordinates in Hex value.</p>
				<canvas id="Canvas" width="240" height="240"></canvas>

				<br>
				<br>
				<h3>Coordinates Table (Values are in Hex)</h3><hr>
				<table id="coordinates" class="table table-bordered table-responsive">
					<tr>
						<th width="150">Markers #</th>
						<th width="150">X points</th>
						<th width="150">Y points</th>
					</tr>
				</table>

			</div>

  </div>
</div>


</div>


  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "xmkz2eto"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Image Coordinates Generator</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1">


	<script
	type="text/javascript"
	src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"

	></script>

	<link rel="stylesheet" type="text/css" href="/css/result-light.css">

	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

	<style id="compiled-css" type="text/css">
	body {
	background: #20262E;
	padding: 20px;
	font-family: Helvetica;
	}

	#banner-message {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	font-size: 25px;
	text-align: center;
	transition: all 0.2s;
	margin: 0 auto;
	width: 300px;
	}

	button {
	background: #0084ff;
	border: none;
	border-radius: 5px;
	padding: 8px 14px;
	font-size: 15px;
	color: #fff;
	}

	#banner-message.alt {
	background: #0084ff;
	color: #fff;
	margin-top: 40px;
	width: 200px;
	}

	#banner-message.alt button {
	background: #fff;
	color: #000;
	}
	</style>


	<!-- TODO: Missing CoffeeScript 2 -->

	<script type="text/javascript">//<![CDATA[

	window.onload=function(){

	// script for the tool
	// Original script: http://stackoverflow.com/a/32080151/5784900

	var imageLoader = document.getElementById('imageLoader');
	imageLoader.addEventListener('change', handleImage, false);

	var canvas = document.getElementById('Canvas');
	var context = canvas.getContext("2d");

	// Map sprite
	var mapSprite = new Image();
	//mapSprite.src = "./clock_bg.png";

	function handleImage(e)
	{
	var reader = new FileReader();
	reader.onload = function(event)
	{
	mapSprite.src = event.target.result;
	}
	reader.readAsDataURL(e.target.files[0]);

	// show tools area when image loaded
	$('#showTool').fadeIn('slow');

	}

	var Marker = function () {
	this.Sprite = new Image();
	this.Sprite.src = "https://i.ibb.co/2yW3bhb/marker.png";
	this.Width = 32;
	this.Height = 32;
	this.XPos = 0;
	this.YPos = 0;
	}

	var Markers = new Array();
	var MarkersText = new Array();

	var mouseClicked = function (mouse) {
	// Get corrent mouse coords
	var rect = canvas.getBoundingClientRect();
	var mouseXPos = (mouse.x - rect.left);
	var mouseYPos = (mouse.y - rect.top);

	// Move the marker when placed to a better location
	var marker = new Marker();
	marker.XPos = mouseXPos - (marker.Width / 2);
	marker.YPos = mouseYPos - marker.Height;

	Markers.push(marker);
	MarkersText.push("(X:" + Math.round(mouseXPos) + "px , Y:" + Math.round(mouseYPos) + "px )");

	var table = document.getElementById("coordinates");
	var row = table.insertRow();
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	var cell3 = row.insertCell(2);

	cell1.innerHTML = table.rows.length - 1;
	xcoor = Math.round(mouseXPos).toString(16);
	ycoor = Math.round(mouseYPos).toString(16);
	cell2.innerHTML = (xcoor.length < 2) ? ('0' + xcoor) : xcoor;
	cell3.innerHTML = (ycoor.length < 2) ? ('0' + ycoor) : ycoor;
	}

	// Add mouse click event listener to canvas
	canvas.addEventListener("mousedown", mouseClicked, false);

	var firstLoad = function () {
	context.font = "15px Georgia";
	context.textAlign = "center";
	}

	firstLoad();

	var main = function () {
	draw();
	};

	var draw = function () {
	// Clear Canvas
	context.fillStyle = "#000";
	context.fillRect(0, 0, canvas.width, canvas.height);

	// Draw map
	// Sprite, X location, Y location, Image width, Image height
	// You can leave the image height and width off, if you do it will draw the image at default size
	context.drawImage(mapSprite, 0, 0, 240, 240);

	// Draw markers
	for (var i = 0; i < Markers.length; i++) {
	var tempMarker = Markers[i];
	// Draw marker
	context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);

	// Calculate postion text
	var markerText = "Marker #" + (i+1) + " " + MarkersText[i];

	// Draw a simple box so you can see the position
	var textMeasurements = context.measureText(markerText);
	context.fillStyle = "#666";
	context.globalAlpha = 0.7;
	context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
	context.globalAlpha = 1;

	// Draw position above
	context.fillStyle = "#000";
	context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
	}
	};

	setInterval(main, (1000 / 60)); // Refresh 60 times a second

	}

	//]]></script>

	</head>
	<body>
	<div class="container">

	<div class="alert alert-info alert-dismissable">
	<h4><i class="icon fa fa-info"></i> This simple tool will allow you to generate the coordinates of the watch face background for placing the time elements in your watch face. The output result will automatically converted into Hex values, so all you need to do is just copy and paste the value into your configtbl.bin file!</h4>
	<span class='text-muted'>Created by zafrix8 for Watch Face UP</span>
	</div>

	<div class="card">
	<div class="card-header">
	<h3>Image Coordinates Generator</h3>
	</div>
	<div class="card-body">
	<div class="form-group" id="title">
	<label>Choose your <span class="badge badge-info">clock_bg.png</span> image</label>
	<input type="file" class="form-control" id="imageLoader" name="imageLoader"/>
	</div>

	<div id="showTool" style="display: none">

	<br>
	<h3>Watch Face Background Image</h3><hr>
	<p>Click on the image to place a marker<br> The markers on the image will show the coordinates value in decimal, while the table below will show the coordinates in Hex value.</p>
	<canvas id="Canvas" width="240" height="240"></canvas>

	<br>
	<br>
	<h3>Coordinates Table (Values are in Hex)</h3><hr>
	<table id="coordinates" class="table table-bordered table-responsive">
	<tr>
	<th width="150">Markers #</th>
	<th width="150">X points</th>
	<th width="150">Y points</th>
	</tr>
	</table>

	</div>

	</div>
	</div>


	</div>


	<script>
	// tell the embed parent frame the height of the content
	if (window.parent && window.parent.parent){
	window.parent.parent.postMessage(["resultsFrame", {
	height: document.body.getBoundingClientRect().height,
	slug: "xmkz2eto"
	}], "*")
	}

	// always overwrite window.name, in case users try to set it manually
	window.name = "result"
	</script>
	</body>
	</html>