Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

Gagues not displaying on iOS (Safari & Chrome) #185

Closed dadock closed 4 years ago

dadock commented 5 years ago

First of all: thanks for the great work. I‘ve got the gauges running on a Wemos D1 mini with ESPEasy. Everything perfect on Chrome & Firefox/Windows, same on Chrome/Android (Fire Tablet), but blank screen on Safari & Chrome/iOS (latest version). I‘ve used the sample code you provide:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
</head>
<body style="background:#222">
<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>
<hr>
<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="true"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-color-numbers="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
        data-color-major-ticks="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
        data-color-bar-stroke="#444"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
        data-tick-side="left"
        data-number-side="left"
        data-needle-side="left"
        data-animate-on-init="true"
        data-color-plate="transparent"
        data-font-value-size="45"
></canvas>
...

Any chance to get this sorted? Thanks & best regards Martin

Brianhedgecock commented 5 years ago

https://www.google.com/maps/placelists/list/VByP2WRGMF6QnpZ-fFPQ9g