( on, value = 50, colour = "hsl(0, 0%, 100%)", background = "hsl(0, 0%, 10%)", size = 56, barWidth = 5.5 )
| 29 | Script.complete(); |
| 30 | |
| 31 | async function progressCircle( |
| 32 | on, |
| 33 | value = 50, |
| 34 | colour = "hsl(0, 0%, 100%)", |
| 35 | background = "hsl(0, 0%, 10%)", |
| 36 | size = 56, |
| 37 | barWidth = 5.5 |
| 38 | ) { |
| 39 | // Normalize the value |
| 40 | if (value > 1) { |
| 41 | value /= 100; |
| 42 | } |
| 43 | if (value < 0) { |
| 44 | value = 0; |
| 45 | } |
| 46 | if (value > 1) { |
| 47 | value = 1; |
| 48 | } |
| 49 | |
| 50 | async function isUsingDarkAppearance() { |
| 51 | return !Color.dynamic(Color.white(), Color.black()).red; |
| 52 | } |
| 53 | let isDark = await isUsingDarkAppearance(); |
| 54 | |
| 55 | const resolveColour = (colour) => |
| 56 | colour.includes("-") ? colour.split("-")[isDark ? 1 : 0] : colour; |
| 57 | |
| 58 | const foregroundColor = resolveColour(colour); |
| 59 | const backgroundColour = resolveColour(background); |
| 60 | |
| 61 | let w = new WebView(); |
| 62 | await w.loadHTML('<canvas id="c"></canvas>'); |
| 63 | |
| 64 | let base64 = await w.evaluateJavaScript( |
| 65 | ` |
| 66 | const size = ${size * 3} |
| 67 | const lineWidth = ${barWidth * 3} |
| 68 | const percent = ${value * 100} |
| 69 | |
| 70 | const canvas = document.getElementById('c') |
| 71 | const c = canvas.getContext('2d') |
| 72 | canvas.width = canvas.height = size |
| 73 | const center = size / 2 |
| 74 | const radius = (size - lineWidth - 1) / 2 |
| 75 | const start = Math.PI * 1.5 |
| 76 | const end = start + Math.PI * 2 * (percent / 100) |
| 77 | |
| 78 | c.lineCap = 'round' |
| 79 | c.lineWidth = lineWidth |
| 80 | |
| 81 | // Background arc |
| 82 | c.beginPath() |
| 83 | c.arc(center, center, radius, 0, Math.PI * 2) |
| 84 | c.strokeStyle = "${backgroundColour}" |
| 85 | c.stroke() |
| 86 | |
| 87 | // Progress arc |
| 88 | c.beginPath() |
no test coverage detected