benptc/index-detail-threshold.html

## index-detail-threshold.html
<!-- Using distance as a threshold -->

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="objectDefaultFiles/object.js"></script>
    <script src="objectDefaultFiles/pep.min.js"></script>
    <meta charset="UTF-8">
    <title>randomColor</title>
    <style>
        #container {
            width: 290px;
            height: 290px;
            border: 5px solid black;
            border-radius: 50%;
        }
        #details {
            color: white;
            font-size: 30px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body style="width: 300px; height: 300px">
<div id="container">
    <div id="details">
        Here are the details
    </div>
</div>

<script>
    let realityInterface = new RealityInterface();
    let container = document.getElementById('container');

    function setColor(hue) {
        container.style.backgroundColor = 'hsl(' + hue + ', 90%, 70%)';
    }

    realityInterface.subscribeToMatrix();
    realityInterface.addMatrixListener(function(modelView, _projection) {
        let scaleFactor = Math.abs(modelView[0]);
        let zDistance = Math.abs(modelView[14]);

        let closeDistance = 500 * scaleFactor;

        if (zDistance < closeDistance) {
            document.getElementById('details').style.visibility = '';
        } else {
            document.getElementById('details').style.visibility = 'hidden';
        }
    });
</script>
</body>
</html>
	<!-- Using distance as a threshold -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="objectDefaultFiles/object.js"></script>
	<script src="objectDefaultFiles/pep.min.js"></script>
	<meta charset="UTF-8">
	<title>randomColor</title>
	<style>
	#container {
	width: 290px;
	height: 290px;
	border: 5px solid black;
	border-radius: 50%;
	}
	#details {
	color: white;
	font-size: 30px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 300px;
	height: 300px;
	text-align: center;
	line-height: 300px;
	}
	</style>
	</head>

	<body style="width: 300px; height: 300px">
	<div id="container">
	<div id="details">
	Here are the details
	</div>
	</div>

	<script>
	let realityInterface = new RealityInterface();
	let container = document.getElementById('container');

	function setColor(hue) {
	container.style.backgroundColor = 'hsl(' + hue + ', 90%, 70%)';
	}

	realityInterface.subscribeToMatrix();
	realityInterface.addMatrixListener(function(modelView, _projection) {
	let scaleFactor = Math.abs(modelView[0]);
	let zDistance = Math.abs(modelView[14]);

	let closeDistance = 500 * scaleFactor;

	if (zDistance < closeDistance) {
	document.getElementById('details').style.visibility = '';
	} else {
	document.getElementById('details').style.visibility = 'hidden';
	}
	});
	</script>
	</body>
	</html>