Need some help in creating a visual representation of device orientation using JS
Question
Basically, I am wanting to create a visual representation of the device orientation values alpha, beta, and gamma. So far I have managed to display the values in plain text using innerHTML, but I want to create a series of "bars" for each value. I drew a very crude drawing of what I had in mind:
Basically, I want the bars to move in relation to changes in the alpha, beta and gamma values. This is how my code looks now.
<!DOCTYPE HTML>
<html>
<body>
<p>Alpha: <span id="alpha"></span></p>
<p>Beta: <span id="beta"></span></p>
<p>Gamma: <span id="gamma"></span></p>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
// Listen for device orientation event
window.ondeviceorientation = function(eventData)
{
// Show alpha, beta and gamma values
document.getElementById('alpha').innerHTML = Math.round(eventData.alpha);
document.getElementById('beta').innerHTML = Math.round(eventData.beta);
document.getElementById('gamma').innerHTML = Math.round(eventData.gamma);
}
</script>
</body>
</html>
I highly doubt I can do this using inner HTML because I think I would need to use CSS styling. This makes me think that the canvas might work, but I have trouble initializing it using the ondeviceorientation. I would appreciate any help in accomplishing this.
2 answers
solution1
2 ACCPTED 2018-01-17 05:17:11
You don't need a canvas. You can do this just by altering the width of your spans along with using CSS to set the colors.
Firstly make sure your spans have a CSS property of display : inline-block or display : block or else changing the width will do nothing. Alternatively you can make them divs instead of spans. Also make sure it has a height property set such as 30px .
Next you can use css or inline-styles to set the background-color property for alpha, beta, and gamma. Then simply change the Element.style.width property (in px) based on the device orientation using javascript.
Something you might want to consider deeply is what you want the size of the bars to represent and their precise behavior. That design decision is up to you, so I won't explain in excruciating detail how the following code works, but basically I size them relative to the range of the values. I turn the value of alpha, beta, and gamma respectively into a percentage of their total range and then multiply that by the max width I would like for the bars.
I grabbed the ranges from here: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
The general formula is for values in range [a, b] and a maximum bar width of max_w , and alpha, beta, or gamma value of value , the calculated width of the bar is:
width = max_w * ( ( -a + value ) / (b - a) )
And don't forget to add "px" to the end.
// Listen for device orientation event window.ondeviceorientation = function(eventData) { let maxWidth = 200; // Show alpha, beta and gamma values document.getElementById('alpha').style.width = Math.round(maxWidth * eventData.alpha / 360) + "px"; document.getElementById('beta').style.width = Math.round(maxWidth * (180 + eventData.beta) / 360) + "px"; document.getElementById('gamma').style.width = Math.round(maxWidth * (90 + eventData.gamma) / 180) + "px"; }
p span{ height : 30px; display : inline-block; } #alpha{ background-color : green; } #beta { background-color : yellow; } #gamma { background-color : purple }
<p> Alpha: <span id="alpha"> </span> </p> <p> Beta: <span id="beta"> </span> </p> <p> Gamma: <span id="gamma"> </span></p>
solution2
1 2018-01-17 06:49:11
The previous poster, Khauri McClain, posted a good suggestion for a static representation of your orientation values. If by "move" you mean, however, an animation (and hence refer to canvas), then you can still do it without canvas, but instead using CSS keyframes . Here is quick example.
html, body { height: 100%; } body { background-color: #f5f7f9; color: #6c6c6c; margin: 0; position: relative; } .container { width: 30em; margin: 2em; } .label { float: left; width: 5em; height: 2em; } .orientation { float: right; background-color: #e5e9eb; height: 2em; position: relative; width: 24em; } .alpha { animation-duration: 3s; animation-name: alpha-anim; animation-fill-mode: forwards; background-color: #ff2d55; height: 100%; position: relative; } .beta { animation-duration: 3s; animation-name: beta-anim; animation-fill-mode: forwards; background-color: #4cd964; height: 100%; position: relative; } .gamma { animation-duration: 3s; animation-name: gamma-anim; animation-fill-mode: forwards; background-color: #007aff; height: 100%; position: relative; } @keyframes alpha-anim { 0% { width: 0; } 100% { width: 14em; } } @keyframes beta-anim { 0% { width: 0; } 100% { width: 3em; } } @keyframes gamma-anim { 0% { width: 0; } 100% { width: 20em; } }
<div class="container"> <div class="label">Alpha:</div> <div class="orientation"> <div class="alpha"></div> </div> </div> <div class="container"> <div class="label">Beta:</div> <div class="orientation"> <div class="beta"></div> </div> </div> <div class="container"> <div class="label">Gamma:</div> <div class="orientation"> <div class="gamma"></div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.