difficulty rendering the gauge template on a canvas
sidtupper opened this issue · 2 comments
sidtupper commented
I'm having difficulty getting the gauge template to render on a canvas. dist/gauge.js and index.html are in the server root directory. The border appears, but nothing else. I'd be really grateful to have comments on this index.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gauge</title>
<script>
src="dist/gauge.js"
var opts = {
angle: 0.15, /// The span of the gauge arc
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // Relative to gauge radius
strokeWidth: 0.035 // The thickness
},
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0' // to see which ones work best for you
};
var target = document.getElementById('demo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
document.getElementById("preview-textfield").className = "preview-textfield";
gauge.setTextField(document.getElementById("preview-textfield"));
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // set min value
gauge.set(1250); // set actual value
gauge.animationSpeed = 32;
</script>
</head>
<body>
<canvas id="demo"> width="400" height="400" style="border:1px solid #000000"</canvas>
</body>
</html>
kplindegaard commented
Your html is ill-formed. Try this instead, but first I would recommend that you diff the two alternatives to spot the differences.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gauge</title>
<script src="dist/gauge.js"></script>
</head>
<body>
<canvas id="demo" width="400" height="400" style="border:1px solid #000000"></canvas>
<div id="preview-textfield"></div>
<script type="application/javascript">
var opts = {
angle: 0.15, /// The span of the gauge arc
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // Relative to gauge radius
strokeWidth: 0.035 // The thickness
},
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0' // to see which ones work best for you
};
var target = document.getElementById('demo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
document.getElementById("preview-textfield").className = "preview-textfield";
gauge.setTextField(document.getElementById("preview-textfield"));
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // set min value
gauge.set(1250); // set actual value
gauge.animationSpeed = 32;
</script>
</body>
</html>
sidtupper commented
Thanks so much for the help, unexpectedly soon.
Sid
From: Karl-Petter Lindegaard ***@***.***>
Sent: December 17, 2021 1:06 PM
To: bernii/gauge.js ***@***.***>
Cc: sidtupper ***@***.***>; Author ***@***.***>
Subject: Re: [bernii/gauge.js] difficulty rendering the gauge template on a canvas (Issue #252)
Your html is ill-formed. Try this instead, but first I would recommend that you diff the two alternatives to spot the differences.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gauge</title>
<script src="dist/gauge.js"></script>
</head>
<body>
<canvas id="demo" width="400" height="400" style="border:1px solid #000000"></canvas>
<div id="preview-textfield"></div>
<script type="application/javascript">
var opts = {
angle: 0.15, /// The span of the gauge arc
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // Relative to gauge radius
strokeWidth: 0.035 // The thickness
},
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0' // to see which ones work best for you
};
var target = document.getElementById('demo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
document.getElementById("preview-textfield").className = "preview-textfield";
gauge.setTextField(document.getElementById("preview-textfield"));
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // set min value
gauge.set(1250); // set actual value
gauge.animationSpeed = 32;
</script>
</body>
</html>
—
Reply to this email directly, view it on GitHub <#252 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWSYBJG7G2BWQ4PH7QU45UDUROQZXANCNFSM5KJRSRUA> .
Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .
You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AWSYBJCMVS2MC2R7CLVQ2VDUROQZXA5CNFSM5KJRSRUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOHNWXYAY.gif> Message ID: ***@***.*** ***@***.***> >
…--
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus