A Draggable Linear Gauge with Coordinates

This JavaScript program shows how create a draggable linear gauge. The calculated coordinates for each object are displayed when the mouse if over the needle. Click the gauge to set the needle and then drag it.

LinearGaugeWithCoordinates.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="LinearGaugeWithCoordinates.js"></script>
    <style>
			.cTicks1 {
				background: repeating-linear-gradient(to right, #AAAAAA 0 5%, transparent 0 100%);
				background-size: 25px;
			}
			.cTicks2 {
				background: repeating-linear-gradient(to right, lightgray 0 20%, transparent 0 100%);
				background-size: 5px;
			}
			hr {
				margin-left:0px;
				width:800px;
			}
    </style>
	</head>
	<body>
		<div style="position:relative;left:20px;top:30px;width:800px;height:20px;border:3px #444444 outset;background-color:gray;"
			onmousemove="OnMouseMoveParent(event)" onmousedown="OnMouseDown(event)" onmouseup="OnMouseUp(event)"  onmouseout="OnMouseOut(event)">
			<div class="cTicks2" style="position:absolute;left:0px;top:50%;width:100%;height:50%"></div>
			<div class="cTicks1" style="position:absolute;left:0px;top:0px;width:100%;height:100%"></div>
			<div id="idPos" style="position:absolute;left:145px;top:0px;width:3px;height:100%;background-color:yellow;" onmousemove="OnMouseMove(event)"
				></div>
		</div>
		<div style="position:relative;left:20px;top:40px;">
			<span id="idEventPage"></span>
			<span id="idEventClient"></span>
			<span id="idEventLayer"></span><br />
			<span id="idEventMovement"></span>
			<span id="idEventScreen"></span>
			<span id="idEventCoord"></span>
			<hr />
			<span id="idOffset"></span>
			<span id="idScroll"></span>
			<span id="idClient"></span>
			<hr />
			<span id="idOffsetParent"></span>
			<span id="idScrollParent"></span>
			<span id="idClientParent"></span>
			<hr />
			<span id="idRelative"></span>
			<span id="idParent"></span>
		</div>
	</body>
</html>

LinearGaugeWithCoordinates.js

var gbDragging = false;
var gdLeftOffset = 0;

function OnMouseMove(e) {
	e.preventDefault();
	let qEventPage = document.getElementById("idEventPage");
	qEventPage.innerHTML = "Event Page = ( "+e.pageX+", " +e.pageY+" )";
	let qEventClient = document.getElementById("idEventClient");
	qEventClient.innerHTML = "Event Client = ( "+e.clientX+", "+e.clientY+" )";
	let qEventLayer = document.getElementById("idEventLayer");
	qEventLayer.innerHTML = "Event Layer = ( "+e.layerX+", " +e.layerY+" )";
	let qEventMovement = document.getElementById("idEventMovement");
	qEventMovement.innerHTML = "Event Movement = ( "+e.movementX+", "+e.movementY+" )";
	let qEventScreen = document.getElementById("idEventScreen");
	qEventScreen.innerHTML = "Event Screen = ( "+e.screenX+", "+e.screenY+" )";
	let qEventCoord = document.getElementById("idEventCoord");
	qEventCoord.innerHTML = "Event Coord = ( "+e.x+", "+e.y+" )";

	let qCurrElement = document.getElementById("idPos");
	qCurrElement.style.cursor = 'pointer';
	let qOffset = document.getElementById("idOffset");
	qOffset.innerHTML = "Offset = ( "+qCurrElement.offsetLeft+", "+qCurrElement.offsetTop+", "+qCurrElement.offsetWidth+", "+qCurrElement.offsetHeight+" )";
	let qScroll = document.getElementById("idScroll");
	qScroll.innerHTML = "Scroll = ( "+qCurrElement.scrollLeft+", "+qCurrElement.scrollTop+", "+qCurrElement.scrollWidth+", "+qCurrElement.scrollHeight+" )";
	let qClient = document.getElementById("idClient");
	qClient.innerHTML = "Client = ( "+qCurrElement.clientLeft+", "+qCurrElement.clientTop+", "+qCurrElement.clientWidth+", "+qCurrElement.clientHeight+" )";
	
	let qParentElement = qCurrElement.parentElement; // Same as offsetParent
	let qOffsetParent = document.getElementById("idOffsetParent");
	qOffsetParent.innerHTML = "Parent Offset= ( "+qParentElement.offsetLeft+", "+qParentElement.offsetTop+", "+qParentElement.offsetWidth+", "+qParentElement.offsetHeight+" )";
	let qScrollParent = document.getElementById("idScrollParent");
	qScrollParent.innerHTML = "Parent Scroll = ( "+qParentElement.scrollLeft+", "+qParentElement.scrollTop+", "+qParentElement.scrollWidth+", "+qParentElement.scrollHeight+" )";
	let qClientParent = document.getElementById("idClientParent");
	qClientParent.innerHTML = "Parent Client = ( "+qParentElement.clientLeft+", "+qParentElement.clientTop+", "+qParentElement.clientWidth+", "+qParentElement.clientHeight+" )";
	
	let dElementOffsetX = 0;
	let dElementOffsetY = 0;
	let qTempElement = qCurrElement;
	do{
		dElementOffsetX += qTempElement.offsetLeft - qTempElement.scrollLeft;
		dElementOffsetY += qTempElement.offsetTop - qTempElement.scrollTop;
		qTempElement = qTempElement.offsetParent;
	} while(qTempElement != document.body);
	
	let dRelX = e.pageX - dElementOffsetX;
	let dRelY = e.pageY - dElementOffsetY;

	let qRelative = document.getElementById("idRelative");
	qRelative.innerHTML = "Relative = ( "+dRelX+", "+dRelY+" )";
	
	let dParentX = dRelX + qCurrElement.offsetLeft;
	let dParentY = dRelY + qCurrElement.offsetTop;
	let qParent = document.getElementById("idParent");
	qParent.innerHTML = "Parent = ( "+dParentX+", "+dParentY+" )";
}

function OnMouseMoveParent(e) {
	e.preventDefault();
	if (gbDragging) {
		let qPosElement = document.getElementById("idPos");
		let qParentElement = qPosElement.parentElement;
		gdLeftOffset = e.pageX - qParentElement.offsetLeft - qParentElement.clientLeft;
		if (gdLeftOffset < 0) {
			gdLeftOffset = 0;
			gbDragging = false;
		} else if (gdLeftOffset + qPosElement.clientWidth> qParentElement.clientWidth) {
			gdLeftOffset = qParentElement.clientWidth - qPosElement.clientWidth;
			gbDragging = false;
		}
		qPosElement.style.left = gdLeftOffset+"px";
	}
}

function OnMouseDown(e) {
	e.preventDefault();
	gbDragging = true;
	let qElement = document.getElementById("idPos");
	let qParentElement = qElement.parentElement;
	gdLeftOffset = e.pageX - qParentElement.offsetLeft - qParentElement.clientLeft;
	qElement.style.left = gdLeftOffset+"px";
}

function OnMouseUp(e) {
	e.preventDefault();
	gbDragging = false;
}

function OnMouseOut(e) {
	e.preventDefault();
	if (gbDragging) {
		let qElement = e.target;
		if (qElement == document.getElementById("idPos").parentElement) {
			gbDragging = false;
		}
	}
}

// This may contain an interval of the entire time
class CIntervalControl {
	constructor() {
		this.dDuration;
		this.dTime;
	}
}

Core JavaScript

A Draggable Linear Gauge with Coordinates

LinearGaugeWithCoordinates.html

LinearGaugeWithCoordinates.js

Output