Speed meter UI
This commit is contained in:
Abdussamed ULUTAŞ
parent
c630e20b46
commit
32a8b868ea
|
|
@ -20,10 +20,6 @@ server.addListener("error",(err)=> {
|
|||
})
|
||||
exports.http = server;
|
||||
|
||||
app.get("/",(req,res)=>{
|
||||
res.send("pid : " + process.pid)
|
||||
})
|
||||
|
||||
app.get("/script",(request, response)=>{
|
||||
response.sendFile(resolve("./script/index.js"))
|
||||
});
|
||||
|
|
@ -36,6 +32,9 @@ app.get("/webrtc.js",(request, response)=>{
|
|||
app.get("/webrtc.adapter.js",(request, response)=>{
|
||||
response.sendFile(resolve("./script/webrtc.adapter.js"))
|
||||
});
|
||||
app.get("/",(request, response)=>{
|
||||
response.sendFile(resolve("./script/index.html"))
|
||||
});
|
||||
app.get("*",(request, response)=>{
|
||||
response.sendFile(resolve("./script/status.xml"))
|
||||
});
|
||||
|
|
@ -0,0 +1,643 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Network meter</title>
|
||||
</head>
|
||||
<body style="background-color: #333333;">
|
||||
<div id="container">
|
||||
<div class="speed-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
html,body,#container{
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#container{
|
||||
display: flex;
|
||||
}
|
||||
.speed-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 1200px;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
}
|
||||
.speed-container > div{
|
||||
flex: 1 1 25%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.speed-container > div canvas{
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.speed-container > div .text{
|
||||
display: flex;
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.speed-container > div .text > .text1{
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.speed-container > div .text > .text2{
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.speed-container > div .text1::after{
|
||||
content:' FLOW';
|
||||
font-size: 0.4em;
|
||||
margin: auto 0 auto 5px;
|
||||
}
|
||||
.speed-container > div .text2::after{
|
||||
content:' PRESSURE';
|
||||
font-size: 0.4em;
|
||||
margin: auto 0 auto 5px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function CreateMeter()
|
||||
{
|
||||
var iCurrentSpeed = 0,
|
||||
iTargetSpeed = 0,
|
||||
bDecrement = null,
|
||||
job = null;
|
||||
|
||||
function degToRad(angle) {
|
||||
// Degrees to radians
|
||||
return ((angle * Math.PI) / 180);
|
||||
}
|
||||
|
||||
function radToDeg(angle) {
|
||||
// Radians to degree
|
||||
return ((angle * 180) / Math.PI);
|
||||
}
|
||||
|
||||
function drawLine(options, line) {
|
||||
// Draw a line using the line object passed in
|
||||
options.ctx.beginPath();
|
||||
|
||||
// Set attributes of open
|
||||
options.ctx.globalAlpha = line.alpha;
|
||||
options.ctx.lineWidth = line.lineWidth;
|
||||
options.ctx.fillStyle = line.fillStyle;
|
||||
options.ctx.strokeStyle = line.fillStyle;
|
||||
options.ctx.moveTo(line.from.X,
|
||||
line.from.Y);
|
||||
|
||||
// Plot the line
|
||||
options.ctx.lineTo(
|
||||
line.to.X,
|
||||
line.to.Y
|
||||
);
|
||||
|
||||
options.ctx.stroke();
|
||||
}
|
||||
|
||||
function createLine(fromX, fromY, toX, toY, fillStyle, lineWidth, alpha) {
|
||||
// Create a line object using Javascript object notation
|
||||
return {
|
||||
from: {
|
||||
X: fromX,
|
||||
Y: fromY
|
||||
},
|
||||
to: {
|
||||
X: toX,
|
||||
Y: toY
|
||||
},
|
||||
fillStyle: fillStyle,
|
||||
lineWidth: lineWidth,
|
||||
alpha: alpha
|
||||
};
|
||||
}
|
||||
|
||||
function drawOuterMetallicArc(options) {
|
||||
/* Draw the metallic border of the speedometer
|
||||
* Outer grey area
|
||||
*/
|
||||
options.ctx.beginPath();
|
||||
|
||||
// Nice shade of grey
|
||||
options.ctx.fillStyle = "rgb(127,127,127)";
|
||||
|
||||
// Draw the outer circle
|
||||
options.ctx.arc(options.center.X,
|
||||
options.center.Y,
|
||||
options.radius,
|
||||
0,
|
||||
Math.PI,
|
||||
true);
|
||||
|
||||
// Fill the last object
|
||||
options.ctx.fill();
|
||||
/* */
|
||||
}
|
||||
|
||||
function drawInnerMetallicArc(options) {
|
||||
/* Draw the metallic border of the speedometer
|
||||
* Inner white area
|
||||
*/
|
||||
|
||||
options.ctx.beginPath();
|
||||
|
||||
// White
|
||||
options.ctx.fillStyle = "rgb(255,255,255)";
|
||||
|
||||
// Outer circle (subtle edge in the grey)
|
||||
options.ctx.arc(options.center.X,
|
||||
options.center.Y,
|
||||
(options.radius / 100) * 90,
|
||||
0,
|
||||
Math.PI,
|
||||
true);
|
||||
|
||||
options.ctx.fill();
|
||||
|
||||
/* */
|
||||
}
|
||||
|
||||
function drawMetallicArc(options) {
|
||||
/* Draw the metallic border of the speedometer
|
||||
* by drawing two semi-circles, one over lapping
|
||||
* the other with a bot of alpha transparency
|
||||
*/
|
||||
|
||||
drawOuterMetallicArc(options);
|
||||
drawInnerMetallicArc(options);
|
||||
}
|
||||
|
||||
function drawBackground(options) {
|
||||
/* Black background with alphs transparency to
|
||||
* blend the edges of the metallic edge and
|
||||
* black background
|
||||
*/
|
||||
var i = 0;
|
||||
|
||||
options.ctx.globalAlpha = 0.2;
|
||||
options.ctx.fillStyle = "rgb(0,0,0)";
|
||||
|
||||
// Draw semi-transparent circles
|
||||
for (i = 170; i < 180; i++) {
|
||||
options.ctx.beginPath();
|
||||
|
||||
options.ctx.arc(options.center.X,
|
||||
options.center.Y,
|
||||
i,
|
||||
0,
|
||||
Math.PI,
|
||||
true);
|
||||
|
||||
options.ctx.fill();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function applyDefaultContextSettings(options) {
|
||||
/* Helper function to revert to gauges
|
||||
* default settings
|
||||
*/
|
||||
|
||||
options.ctx.lineWidth = 2;
|
||||
options.ctx.globalAlpha = 0.5;
|
||||
options.ctx.strokeStyle = "rgb(255, 255, 255)";
|
||||
options.ctx.fillStyle = 'rgb(255,255,255)';
|
||||
}
|
||||
|
||||
function drawSmallTickMarks(options) {
|
||||
/* The small tick marks against the coloured
|
||||
* arc drawn every 5 mph from 10 degrees to
|
||||
* 170 degrees.
|
||||
*/
|
||||
|
||||
var tickvalue = options.levelRadius - 8,
|
||||
iTick = 0,
|
||||
gaugeOptions = options.gaugeOptions,
|
||||
iTickRad = 0,
|
||||
onArchX,
|
||||
onArchY,
|
||||
innerTickX,
|
||||
innerTickY,
|
||||
fromX,
|
||||
fromY,
|
||||
line,
|
||||
toX,
|
||||
toY;
|
||||
|
||||
applyDefaultContextSettings(options);
|
||||
|
||||
// Tick every 20 degrees (small ticks)
|
||||
for (iTick = 10; iTick < 180; iTick += 10) {
|
||||
|
||||
iTickRad = degToRad(iTick);
|
||||
|
||||
/* Calculate the X and Y of both ends of the
|
||||
* line I need to draw at angle represented at Tick.
|
||||
* The aim is to draw the a line starting on the
|
||||
* coloured arc and continueing towards the outer edge
|
||||
* in the direction from the center of the gauge.
|
||||
*/
|
||||
|
||||
onArchX = gaugeOptions.radius - (Math.cos(iTickRad) * tickvalue);
|
||||
onArchY = gaugeOptions.radius - (Math.sin(iTickRad) * tickvalue);
|
||||
innerTickX = gaugeOptions.radius - (Math.cos(iTickRad) * gaugeOptions.radius);
|
||||
innerTickY = gaugeOptions.radius - (Math.sin(iTickRad) * gaugeOptions.radius);
|
||||
|
||||
fromX = (options.center.X - gaugeOptions.radius) + onArchX;
|
||||
fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + onArchY;
|
||||
toX = (options.center.X - gaugeOptions.radius) + innerTickX;
|
||||
toY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY;
|
||||
|
||||
// Create a line expressed in JSON
|
||||
line = createLine(fromX, fromY, toX, toY, "rgb(127,127,127)", 3, 0.6);
|
||||
|
||||
// Draw the line
|
||||
drawLine(options, line);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function drawLargeTickMarks(options) {
|
||||
/* The large tick marks against the coloured
|
||||
* arc drawn every 10 mph from 10 degrees to
|
||||
* 170 degrees.
|
||||
*/
|
||||
|
||||
var tickvalue = options.levelRadius - 8,
|
||||
iTick = 0,
|
||||
gaugeOptions = options.gaugeOptions,
|
||||
iTickRad = 0,
|
||||
innerTickY,
|
||||
innerTickX,
|
||||
onArchX,
|
||||
onArchY,
|
||||
fromX,
|
||||
fromY,
|
||||
toX,
|
||||
toY,
|
||||
line;
|
||||
|
||||
applyDefaultContextSettings(options);
|
||||
|
||||
tickvalue = options.levelRadius - 2;
|
||||
|
||||
// 10 units (major ticks)
|
||||
for (iTick = 20; iTick < 180; iTick += 20) {
|
||||
|
||||
iTickRad = degToRad(iTick);
|
||||
|
||||
/* Calculate the X and Y of both ends of the
|
||||
* line I need to draw at angle represented at Tick.
|
||||
* The aim is to draw the a line starting on the
|
||||
* coloured arc and continueing towards the outer edge
|
||||
* in the direction from the center of the gauge.
|
||||
*/
|
||||
|
||||
onArchX = gaugeOptions.radius - (Math.cos(iTickRad) * tickvalue);
|
||||
onArchY = gaugeOptions.radius - (Math.sin(iTickRad) * tickvalue);
|
||||
innerTickX = gaugeOptions.radius - (Math.cos(iTickRad) * gaugeOptions.radius);
|
||||
innerTickY = gaugeOptions.radius - (Math.sin(iTickRad) * gaugeOptions.radius);
|
||||
|
||||
fromX = (options.center.X - gaugeOptions.radius) + onArchX;
|
||||
fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + onArchY;
|
||||
toX = (options.center.X - gaugeOptions.radius) + innerTickX;
|
||||
toY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY;
|
||||
|
||||
// Create a line expressed in JSON
|
||||
line = createLine(fromX, fromY, toX, toY, "rgb(127,127,127)", 3, 0.6);
|
||||
|
||||
// Draw the line
|
||||
drawLine(options, line);
|
||||
}
|
||||
}
|
||||
|
||||
function drawTicks(options) {
|
||||
/* Two tick in the coloured arc!
|
||||
* Small ticks every 5
|
||||
* Large ticks every 10
|
||||
*/
|
||||
drawSmallTickMarks(options);
|
||||
drawLargeTickMarks(options);
|
||||
}
|
||||
|
||||
function drawTextMarkers(options) {
|
||||
/* The text labels marks above the coloured
|
||||
* arc drawn every 10 mph from 10 degrees to
|
||||
* 170 degrees.
|
||||
*/
|
||||
var innerTickX = 0,
|
||||
innerTickY = 0,
|
||||
iTick = 0,
|
||||
gaugeOptions = options.gaugeOptions,
|
||||
iTickToPrint = 00;
|
||||
|
||||
applyDefaultContextSettings(options);
|
||||
|
||||
// Font styling
|
||||
options.ctx.font = 'italic 10px sans-serif';
|
||||
options.ctx.textBaseline = 'top';
|
||||
|
||||
options.ctx.beginPath();
|
||||
|
||||
// Tick every 20 (small ticks)
|
||||
for (iTick = 10; iTick < 160; iTick += 20) {
|
||||
|
||||
innerTickX = gaugeOptions.radius - (Math.cos(degToRad(iTick)) * gaugeOptions.radius);
|
||||
innerTickY = gaugeOptions.radius - (Math.sin(degToRad(iTick)) * gaugeOptions.radius);
|
||||
|
||||
// Some cludging to center the values (TODO: Improve)
|
||||
if (iTick <= 10) {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
|
||||
} else if (iTick < 50) {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX - 5,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
|
||||
} else if (iTick < 90) {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
|
||||
} else if (iTick === 90) {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 4,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
|
||||
} else if (iTick < 145) {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 10,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
|
||||
} else {
|
||||
options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 15,
|
||||
(gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
|
||||
}
|
||||
|
||||
// MPH increase by 10 every 20 degrees
|
||||
//iTickToPrint += Math.round(2160 / 9);
|
||||
iTickToPrint += 30;
|
||||
}
|
||||
|
||||
options.ctx.stroke();
|
||||
}
|
||||
|
||||
function drawSpeedometerPart(options, alphaValue, strokeStyle, startPos) {
|
||||
/* Draw part of the arc that represents
|
||||
* the colour speedometer arc
|
||||
*/
|
||||
|
||||
options.ctx.beginPath();
|
||||
|
||||
options.ctx.globalAlpha = alphaValue;
|
||||
options.ctx.lineWidth = 5;
|
||||
options.ctx.strokeStyle = strokeStyle;
|
||||
|
||||
options.ctx.arc(options.center.X,
|
||||
options.center.Y,
|
||||
options.levelRadius,
|
||||
Math.PI + (Math.PI / 360 * startPos),
|
||||
0 - (Math.PI / 360 * 10),
|
||||
false);
|
||||
|
||||
options.ctx.stroke();
|
||||
}
|
||||
|
||||
function drawSpeedometerColourArc(options) {
|
||||
/* Draws the colour arc. Three different colours
|
||||
* used here; thus, same arc drawn 3 times with
|
||||
* different colours.
|
||||
* TODO: Gradient possible?
|
||||
*/
|
||||
|
||||
|
||||
drawSpeedometerPart(options, 1.0, "rgb(255,255,255)", 10);
|
||||
drawSpeedometerPart(options, 0.9, "rgb(0,255,0)", 80);
|
||||
drawSpeedometerPart(options, 0.9, "rgb(255,128,0)", 250);
|
||||
drawSpeedometerPart(options, 0.9, "rgb(255,0,0)", 300);
|
||||
|
||||
}
|
||||
|
||||
function drawNeedleDial(options, alphaValue, strokeStyle, fillStyle) {
|
||||
/* Draws the metallic dial that covers the base of the
|
||||
* needle.
|
||||
*/
|
||||
var i = 0;
|
||||
|
||||
options.ctx.globalAlpha = alphaValue;
|
||||
options.ctx.lineWidth = 3;
|
||||
options.ctx.strokeStyle = strokeStyle;
|
||||
options.ctx.fillStyle = fillStyle;
|
||||
|
||||
// Draw several transparent circles with alpha
|
||||
for (i = 0; i < 30; i++) {
|
||||
|
||||
options.ctx.beginPath();
|
||||
options.ctx.arc(options.center.X,
|
||||
options.center.Y,
|
||||
i,
|
||||
0,
|
||||
Math.PI,
|
||||
true);
|
||||
|
||||
options.ctx.fill();
|
||||
options.ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function drawNeedle(options) {
|
||||
/* Draw the needle in a nice read colour at the
|
||||
* angle that represents the options.speed value.
|
||||
*/
|
||||
|
||||
var iSpeedAsAngle = convertSpeedToAngle(options),
|
||||
iSpeedAsAngleRad = degToRad(iSpeedAsAngle),
|
||||
gaugeOptions = options.gaugeOptions,
|
||||
innerTickX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * 20),
|
||||
innerTickY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * 20),
|
||||
fromX = (options.center.X - gaugeOptions.radius) + innerTickX,
|
||||
fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY,
|
||||
endNeedleX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * gaugeOptions.radius),
|
||||
endNeedleY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * gaugeOptions.radius),
|
||||
toX = (options.center.X - gaugeOptions.radius) + endNeedleX,
|
||||
toY = (gaugeOptions.center.Y - gaugeOptions.radius) + endNeedleY,
|
||||
line = createLine(fromX, fromY, toX, toY, "rgb(255, 0, 0)", 5, 0.6);
|
||||
|
||||
drawLine(options, line);
|
||||
|
||||
// Two circle to draw the dial at the base (give its a nice effect?)
|
||||
drawNeedleDial(options, 0.6, "rgb(127, 127, 127)", "rgb(255,255,255)");
|
||||
drawNeedleDial(options, 0.2, "rgb(127, 127, 127)", "rgb(127,127,127)");
|
||||
|
||||
}
|
||||
|
||||
function buildOptionsAsJSON(canvas, iSpeed) {
|
||||
/* Setting for the speedometer
|
||||
* Alter these to modify its look and feel
|
||||
*/
|
||||
|
||||
var centerX = 210,
|
||||
centerY = 210,
|
||||
radius = 150,
|
||||
outerRadius = 200;
|
||||
|
||||
// Create a speedometer object using Javascript object notation
|
||||
return {
|
||||
ctx: canvas.getContext('2d'),
|
||||
speed: iSpeed,
|
||||
center: {
|
||||
X: centerX,
|
||||
Y: centerY
|
||||
},
|
||||
levelRadius: radius - 10,
|
||||
gaugeOptions: {
|
||||
center: {
|
||||
X: centerX,
|
||||
Y: centerY
|
||||
},
|
||||
radius: radius
|
||||
},
|
||||
radius: outerRadius
|
||||
};
|
||||
}
|
||||
|
||||
function clearCanvas(options) {
|
||||
options.ctx.clearRect(0, 0, 800, 600);
|
||||
applyDefaultContextSettings(options);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
/* Main entry point for drawing the speedometer
|
||||
* If canvas is not support alert the user.
|
||||
*/
|
||||
var canvas = createCanvas.value,
|
||||
options = null;
|
||||
|
||||
// Canvas good?
|
||||
if (canvas !== null && canvas.getContext) {
|
||||
options = buildOptionsAsJSON(canvas, iCurrentSpeed);
|
||||
|
||||
// Clear canvas
|
||||
clearCanvas(options);
|
||||
|
||||
// Draw the metallic styled edge
|
||||
drawMetallicArc(options);
|
||||
|
||||
// Draw thw background
|
||||
drawBackground(options);
|
||||
|
||||
// Draw tick marks
|
||||
drawTicks(options);
|
||||
|
||||
// Draw labels on markers
|
||||
drawTextMarkers(options);
|
||||
|
||||
// Draw speeometer colour arc
|
||||
drawSpeedometerColourArc(options);
|
||||
|
||||
// Draw the needle and base
|
||||
drawNeedle(options);
|
||||
|
||||
} else {
|
||||
alert("Canvas not supported by your browser!");
|
||||
};
|
||||
|
||||
if(iTargetSpeed == iCurrentSpeed) {
|
||||
cancelAnimationFrame(job);
|
||||
return;
|
||||
} else if(iTargetSpeed < iCurrentSpeed) {
|
||||
bDecrement = true;
|
||||
} else if(iTargetSpeed > iCurrentSpeed) {
|
||||
bDecrement = false;
|
||||
}
|
||||
|
||||
console.log(iTargetSpeed,bDecrement)
|
||||
|
||||
if(bDecrement) {
|
||||
iCurrentSpeed = iCurrentSpeed - 1;
|
||||
} else {
|
||||
iCurrentSpeed = iCurrentSpeed + 1;
|
||||
}
|
||||
|
||||
job = requestAnimationFrame(draw);
|
||||
};
|
||||
function createCanvas()
|
||||
{
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("boxmodel")
|
||||
let canvas = document.createElement("canvas");
|
||||
|
||||
let text = document.createElement("div");
|
||||
let text1 = document.createElement("div");
|
||||
let text2 = document.createElement("div");
|
||||
text.classList.add("text")
|
||||
text1.classList.add("text1")
|
||||
text2.classList.add("text2")
|
||||
text.append(text1);
|
||||
text.append(text2);
|
||||
|
||||
canvas.setAttribute("width", "440px");
|
||||
canvas.setAttribute("height", "220px");
|
||||
container.append(canvas);
|
||||
container.append(text);
|
||||
createCanvas.value = canvas;
|
||||
createCanvas.container = container;
|
||||
createCanvas.ps = text1;
|
||||
createCanvas.pw = text2;
|
||||
return container;
|
||||
};
|
||||
function update(value, pressure)
|
||||
{
|
||||
iTargetSpeed = value;
|
||||
createCanvas.ps.innerText = value;
|
||||
createCanvas.pw.innerText = pressure;
|
||||
draw()
|
||||
}
|
||||
function convertSpeedToAngle(options) {
|
||||
/* Helper function to convert a speed to the
|
||||
* equivelant angle.
|
||||
*/
|
||||
let m = 150;
|
||||
let value = (m/10) + Math.min(
|
||||
Math.max(
|
||||
options.speed,
|
||||
0
|
||||
),
|
||||
240
|
||||
);
|
||||
iSpeedAsAngle = (
|
||||
(100 / m) * value
|
||||
);
|
||||
|
||||
// Ensure the angle is within range
|
||||
if (iSpeedAsAngle > 180) {
|
||||
iSpeedAsAngle = iSpeedAsAngle - 180;
|
||||
} else if (iSpeedAsAngle < 0) {
|
||||
iSpeedAsAngle = iSpeedAsAngle + 180;
|
||||
}
|
||||
|
||||
return iSpeedAsAngle;
|
||||
}
|
||||
return {
|
||||
createCanvas,
|
||||
update
|
||||
}
|
||||
}
|
||||
let elem = document.querySelector(".speed-container");
|
||||
for(let e = 0; e < 8; e++)
|
||||
{
|
||||
let meter = CreateMeter();
|
||||
let container = meter.createCanvas();
|
||||
elem.appendChild(container);
|
||||
meter.update(54,25)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue