1*c8dee2aaSAndroid Build Coastguard Worker<!DOCTYPE html> 2*c8dee2aaSAndroid Build Coastguard Worker<title>Spreadsheet Demo</title> 3*c8dee2aaSAndroid Build Coastguard Worker<meta charset="utf-8" /> 4*c8dee2aaSAndroid Build Coastguard Worker<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5*c8dee2aaSAndroid Build Coastguard Worker<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" src="https://unpkg.com/[email protected]/bin/full/canvaskit.js"></script> 7*c8dee2aaSAndroid Build Coastguard Worker 8*c8dee2aaSAndroid Build Coastguard Worker<style> 9*c8dee2aaSAndroid Build Coastguard Worker body { 10*c8dee2aaSAndroid Build Coastguard Worker background-color: black; 11*c8dee2aaSAndroid Build Coastguard Worker } 12*c8dee2aaSAndroid Build Coastguard Worker h1 { 13*c8dee2aaSAndroid Build Coastguard Worker color: white; 14*c8dee2aaSAndroid Build Coastguard Worker } 15*c8dee2aaSAndroid Build Coastguard Worker .hidden { 16*c8dee2aaSAndroid Build Coastguard Worker display: none; 17*c8dee2aaSAndroid Build Coastguard Worker } 18*c8dee2aaSAndroid Build Coastguard Worker</style> 19*c8dee2aaSAndroid Build Coastguard Worker 20*c8dee2aaSAndroid Build Coastguard Worker<body> 21*c8dee2aaSAndroid Build Coastguard Worker <h1>Large canvas with many numbers, like a spreadsheet</h1> 22*c8dee2aaSAndroid Build Coastguard Worker <select id="numbers_impl"> 23*c8dee2aaSAndroid Build Coastguard Worker <option value="fillText"><canvas> fillText</option> 24*c8dee2aaSAndroid Build Coastguard Worker <option value="drawGlyphs">CK drawGlyphs (tuned)</option> 25*c8dee2aaSAndroid Build Coastguard Worker <option value="drawText">CK drawText (naive)</option> 26*c8dee2aaSAndroid Build Coastguard Worker </select> 27*c8dee2aaSAndroid Build Coastguard Worker 28*c8dee2aaSAndroid Build Coastguard Worker <canvas id=ck_canvas width=3840 height=2160 class="hidden"></canvas> 29*c8dee2aaSAndroid Build Coastguard Worker <canvas id=canvas_2d width=3840 height=2160></canvas> 30*c8dee2aaSAndroid Build Coastguard Worker</body> 31*c8dee2aaSAndroid Build Coastguard Worker 32*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" charset="utf-8"> 33*c8dee2aaSAndroid Build Coastguard Worker const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/[email protected]/bin/full/' + file }); 34*c8dee2aaSAndroid Build Coastguard Worker 35*c8dee2aaSAndroid Build Coastguard Worker // This is the dimensions of a 4k screen. 36*c8dee2aaSAndroid Build Coastguard Worker const WIDTH = 3840, HEIGHT = 2160; 37*c8dee2aaSAndroid Build Coastguard Worker const ROWS = 144; 38*c8dee2aaSAndroid Build Coastguard Worker const ROW_HEIGHT = 15; 39*c8dee2aaSAndroid Build Coastguard Worker const COLS = 77; 40*c8dee2aaSAndroid Build Coastguard Worker const COL_WIDTH = 50; 41*c8dee2aaSAndroid Build Coastguard Worker const canvas2DEle = document.getElementById('canvas_2d'); 42*c8dee2aaSAndroid Build Coastguard Worker const ckEle = document.getElementById('ck_canvas'); 43*c8dee2aaSAndroid Build Coastguard Worker 44*c8dee2aaSAndroid Build Coastguard Worker ckLoaded.then((CanvasKit) => { 45*c8dee2aaSAndroid Build Coastguard Worker const canvas2dCtx = canvas2DEle.getContext('2d'); 46*c8dee2aaSAndroid Build Coastguard Worker const surface = CanvasKit.MakeCanvasSurface('ck_canvas'); 47*c8dee2aaSAndroid Build Coastguard Worker if (!surface) { 48*c8dee2aaSAndroid Build Coastguard Worker throw 'Could not make surface'; 49*c8dee2aaSAndroid Build Coastguard Worker } 50*c8dee2aaSAndroid Build Coastguard Worker 51*c8dee2aaSAndroid Build Coastguard Worker const colorPaints = { 52*c8dee2aaSAndroid Build Coastguard Worker "grey": CanvasKit.Color(76, 76, 76), 53*c8dee2aaSAndroid Build Coastguard Worker "black": CanvasKit.BLACK, 54*c8dee2aaSAndroid Build Coastguard Worker "white": CanvasKit.WHITE, 55*c8dee2aaSAndroid Build Coastguard Worker "springGreen": CanvasKit.Color(0, 255, 127), 56*c8dee2aaSAndroid Build Coastguard Worker "tomato": CanvasKit.Color(255, 99, 71), 57*c8dee2aaSAndroid Build Coastguard Worker }; 58*c8dee2aaSAndroid Build Coastguard Worker for (const name in colorPaints) { 59*c8dee2aaSAndroid Build Coastguard Worker const color = colorPaints[name]; 60*c8dee2aaSAndroid Build Coastguard Worker const paint = new CanvasKit.Paint(); 61*c8dee2aaSAndroid Build Coastguard Worker paint.setColor(color); 62*c8dee2aaSAndroid Build Coastguard Worker colorPaints[name] = paint; 63*c8dee2aaSAndroid Build Coastguard Worker } 64*c8dee2aaSAndroid Build Coastguard Worker 65*c8dee2aaSAndroid Build Coastguard Worker const data = []; 66*c8dee2aaSAndroid Build Coastguard Worker for (let row = 0; row < ROWS; row++) { 67*c8dee2aaSAndroid Build Coastguard Worker data[row] = []; 68*c8dee2aaSAndroid Build Coastguard Worker for (let col = 0; col < COLS; col++) { 69*c8dee2aaSAndroid Build Coastguard Worker data[row][col] = Math.random() * Math.PI; 70*c8dee2aaSAndroid Build Coastguard Worker } 71*c8dee2aaSAndroid Build Coastguard Worker } 72*c8dee2aaSAndroid Build Coastguard Worker 73*c8dee2aaSAndroid Build Coastguard Worker // Maybe use https://storage.googleapis.com/skia-cdn/google-web-fonts/NotoSans-Regular.ttf 74*c8dee2aaSAndroid Build Coastguard Worker const textFont = new CanvasKit.Font(null, 12); 75*c8dee2aaSAndroid Build Coastguard Worker 76*c8dee2aaSAndroid Build Coastguard Worker const choice = document.getElementById("numbers_impl"); 77*c8dee2aaSAndroid Build Coastguard Worker 78*c8dee2aaSAndroid Build Coastguard Worker let frames = []; 79*c8dee2aaSAndroid Build Coastguard Worker const framesToMeasure = 10; 80*c8dee2aaSAndroid Build Coastguard Worker choice.addEventListener("change", () => { 81*c8dee2aaSAndroid Build Coastguard Worker frames = []; 82*c8dee2aaSAndroid Build Coastguard Worker if (choice.selectedIndex === 0) { 83*c8dee2aaSAndroid Build Coastguard Worker canvas2DEle.classList.remove('hidden'); 84*c8dee2aaSAndroid Build Coastguard Worker ckEle.classList.add('hidden'); 85*c8dee2aaSAndroid Build Coastguard Worker } else { 86*c8dee2aaSAndroid Build Coastguard Worker canvas2DEle.classList.add('hidden'); 87*c8dee2aaSAndroid Build Coastguard Worker ckEle.classList.remove('hidden'); 88*c8dee2aaSAndroid Build Coastguard Worker } 89*c8dee2aaSAndroid Build Coastguard Worker }) 90*c8dee2aaSAndroid Build Coastguard Worker function drawFrame(canvas) { 91*c8dee2aaSAndroid Build Coastguard Worker if (frames && frames.length === framesToMeasure) { 92*c8dee2aaSAndroid Build Coastguard Worker // It is important to measure frame to frame time to account for the time spent by the 93*c8dee2aaSAndroid Build Coastguard Worker // GPU after our flush calls. 94*c8dee2aaSAndroid Build Coastguard Worker const deltas = []; 95*c8dee2aaSAndroid Build Coastguard Worker for (let i = 0; i< frames.length-1;i++) { 96*c8dee2aaSAndroid Build Coastguard Worker deltas.push(frames[i+1] - frames[i]); 97*c8dee2aaSAndroid Build Coastguard Worker } 98*c8dee2aaSAndroid Build Coastguard Worker console.log(`First ${framesToMeasure} frames`, deltas); 99*c8dee2aaSAndroid Build Coastguard Worker console.log((frames[framesToMeasure-1] - frames[0]) / framesToMeasure); 100*c8dee2aaSAndroid Build Coastguard Worker frames = null; 101*c8dee2aaSAndroid Build Coastguard Worker } else if (frames) { 102*c8dee2aaSAndroid Build Coastguard Worker frames.push(performance.now()); 103*c8dee2aaSAndroid Build Coastguard Worker } 104*c8dee2aaSAndroid Build Coastguard Worker 105*c8dee2aaSAndroid Build Coastguard Worker if (choice.selectedIndex === 2) { 106*c8dee2aaSAndroid Build Coastguard Worker canvas.clear(CanvasKit.BLACK); 107*c8dee2aaSAndroid Build Coastguard Worker drawTextImpl(canvas); 108*c8dee2aaSAndroid Build Coastguard Worker } else if (choice.selectedIndex === 1) { 109*c8dee2aaSAndroid Build Coastguard Worker canvas.clear(CanvasKit.BLACK); 110*c8dee2aaSAndroid Build Coastguard Worker drawGlyphsImpl(canvas); 111*c8dee2aaSAndroid Build Coastguard Worker } else { 112*c8dee2aaSAndroid Build Coastguard Worker fillTextImpl(canvas2dCtx); 113*c8dee2aaSAndroid Build Coastguard Worker } 114*c8dee2aaSAndroid Build Coastguard Worker 115*c8dee2aaSAndroid Build Coastguard Worker surface.requestAnimationFrame(drawFrame) 116*c8dee2aaSAndroid Build Coastguard Worker } 117*c8dee2aaSAndroid Build Coastguard Worker 118*c8dee2aaSAndroid Build Coastguard Worker function drawTextImpl(canvas) { 119*c8dee2aaSAndroid Build Coastguard Worker const timer = performance.now() / 10000; 120*c8dee2aaSAndroid Build Coastguard Worker for (let row = 0; row < ROWS; row++) { 121*c8dee2aaSAndroid Build Coastguard Worker if (row % 2) { 122*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(0, row * ROW_HEIGHT + 2, WIDTH, ROW_HEIGHT), colorPaints["grey"]); 123*c8dee2aaSAndroid Build Coastguard Worker } 124*c8dee2aaSAndroid Build Coastguard Worker for (let col = 0; col < COLS; col++) { 125*c8dee2aaSAndroid Build Coastguard Worker let n = Math.abs(Math.sin(timer + data[row][col])); 126*c8dee2aaSAndroid Build Coastguard Worker let useWhiteFont = true; 127*c8dee2aaSAndroid Build Coastguard Worker if (n < 0.05) { 128*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT), colorPaints["tomato"]); 129*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 130*c8dee2aaSAndroid Build Coastguard Worker } else if (n > 0.95) { 131*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT), colorPaints["springGreen"]); 132*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 133*c8dee2aaSAndroid Build Coastguard Worker } 134*c8dee2aaSAndroid Build Coastguard Worker const str = n.toFixed(4); 135*c8dee2aaSAndroid Build Coastguard Worker canvas.drawText(str, col * COL_WIDTH, row * ROW_HEIGHT, 136*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont ? colorPaints["white"] : colorPaints["black"], textFont); 137*c8dee2aaSAndroid Build Coastguard Worker } 138*c8dee2aaSAndroid Build Coastguard Worker } 139*c8dee2aaSAndroid Build Coastguard Worker } 140*c8dee2aaSAndroid Build Coastguard Worker 141*c8dee2aaSAndroid Build Coastguard Worker //==================================================================================== 142*c8dee2aaSAndroid Build Coastguard Worker const alphabet = "0.123456789 "; 143*c8dee2aaSAndroid Build Coastguard Worker const glyphIDs = textFont.getGlyphIDs(alphabet); 144*c8dee2aaSAndroid Build Coastguard Worker // These are all 7 with current font and size 145*c8dee2aaSAndroid Build Coastguard Worker const advances = textFont.getGlyphWidths(glyphIDs); 146*c8dee2aaSAndroid Build Coastguard Worker 147*c8dee2aaSAndroid Build Coastguard Worker 148*c8dee2aaSAndroid Build Coastguard Worker const charsPerDataPoint = 6; // leading 0, period, 4 decimal places 149*c8dee2aaSAndroid Build Coastguard Worker const glyphIDsMObj = CanvasKit.MallocGlyphIDs(ROWS * COLS * charsPerDataPoint); 150*c8dee2aaSAndroid Build Coastguard Worker let wasmGlyphIDArr = glyphIDsMObj.toTypedArray(); 151*c8dee2aaSAndroid Build Coastguard Worker const glyphLocationsMObj = CanvasKit.Malloc(Float32Array, glyphIDsMObj.length * 2); 152*c8dee2aaSAndroid Build Coastguard Worker let wasmGlyphLocations = glyphLocationsMObj.toTypedArray(); 153*c8dee2aaSAndroid Build Coastguard Worker 154*c8dee2aaSAndroid Build Coastguard Worker function dataToGlyphs(n, outputBuffer, offset) { 155*c8dee2aaSAndroid Build Coastguard Worker const s = n.toFixed(4); 156*c8dee2aaSAndroid Build Coastguard Worker outputBuffer[offset] = glyphIDs[0]; // Always a leading 0 157*c8dee2aaSAndroid Build Coastguard Worker outputBuffer[offset+1] = glyphIDs[1]; // Always a decimal place 158*c8dee2aaSAndroid Build Coastguard Worker for (let i = 2; i< charsPerDataPoint; i++) { 159*c8dee2aaSAndroid Build Coastguard Worker outputBuffer[offset+i] = glyphIDs[alphabet.indexOf(s[i])]; 160*c8dee2aaSAndroid Build Coastguard Worker } 161*c8dee2aaSAndroid Build Coastguard Worker } 162*c8dee2aaSAndroid Build Coastguard Worker const spaceIndex = alphabet.length - 1; 163*c8dee2aaSAndroid Build Coastguard Worker function blankOut(outputBuffer, offset) { 164*c8dee2aaSAndroid Build Coastguard Worker for (let i = 0; i< charsPerDataPoint; i++) { 165*c8dee2aaSAndroid Build Coastguard Worker outputBuffer[offset+i] = glyphIDs[spaceIndex]; 166*c8dee2aaSAndroid Build Coastguard Worker } 167*c8dee2aaSAndroid Build Coastguard Worker } 168*c8dee2aaSAndroid Build Coastguard Worker 169*c8dee2aaSAndroid Build Coastguard Worker for (let row = 0; row < ROWS; row++) { 170*c8dee2aaSAndroid Build Coastguard Worker for (let col = 0; col < COLS; col++) { 171*c8dee2aaSAndroid Build Coastguard Worker for (let i = 0; i < charsPerDataPoint; i++) { 172*c8dee2aaSAndroid Build Coastguard Worker const offset = (col + row * COLS) * charsPerDataPoint * 2; 173*c8dee2aaSAndroid Build Coastguard Worker wasmGlyphLocations[offset + i * 2] = col * COL_WIDTH + i * advances[0]; 174*c8dee2aaSAndroid Build Coastguard Worker wasmGlyphLocations[offset + i * 2 + 1] = row * ROW_HEIGHT; 175*c8dee2aaSAndroid Build Coastguard Worker } 176*c8dee2aaSAndroid Build Coastguard Worker } 177*c8dee2aaSAndroid Build Coastguard Worker } 178*c8dee2aaSAndroid Build Coastguard Worker 179*c8dee2aaSAndroid Build Coastguard Worker const greyGlyphIDsMObj = CanvasKit.MallocGlyphIDs(charsPerDataPoint); 180*c8dee2aaSAndroid Build Coastguard Worker 181*c8dee2aaSAndroid Build Coastguard Worker function drawGlyphsImpl(canvas) { 182*c8dee2aaSAndroid Build Coastguard Worker wasmGlyphIDArr = glyphIDsMObj.toTypedArray(); 183*c8dee2aaSAndroid Build Coastguard Worker let wasmGreyGlyphIDsArr = greyGlyphIDsMObj.toTypedArray(); 184*c8dee2aaSAndroid Build Coastguard Worker 185*c8dee2aaSAndroid Build Coastguard Worker const timer = performance.now() / 10000; 186*c8dee2aaSAndroid Build Coastguard Worker for (let row = 0; row < ROWS; row++) { 187*c8dee2aaSAndroid Build Coastguard Worker if (row % 2) { 188*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(0, row * ROW_HEIGHT + 2, WIDTH, ROW_HEIGHT), colorPaints["grey"]); 189*c8dee2aaSAndroid Build Coastguard Worker } 190*c8dee2aaSAndroid Build Coastguard Worker for (let col = 0; col < COLS; col++) { 191*c8dee2aaSAndroid Build Coastguard Worker const n = Math.abs(Math.sin(timer + data[row][col])); 192*c8dee2aaSAndroid Build Coastguard Worker let useWhiteFont = true; 193*c8dee2aaSAndroid Build Coastguard Worker if (n < 0.05) { 194*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT), colorPaints["tomato"]); 195*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 196*c8dee2aaSAndroid Build Coastguard Worker } else if (n > 0.95) { 197*c8dee2aaSAndroid Build Coastguard Worker canvas.drawRect(CanvasKit.XYWHRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT), colorPaints["springGreen"]); 198*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 199*c8dee2aaSAndroid Build Coastguard Worker } 200*c8dee2aaSAndroid Build Coastguard Worker 201*c8dee2aaSAndroid Build Coastguard Worker const offset = (col + row * COLS) * charsPerDataPoint; 202*c8dee2aaSAndroid Build Coastguard Worker if (useWhiteFont) { 203*c8dee2aaSAndroid Build Coastguard Worker dataToGlyphs(n, wasmGlyphIDArr, offset); 204*c8dee2aaSAndroid Build Coastguard Worker } else { 205*c8dee2aaSAndroid Build Coastguard Worker blankOut(wasmGlyphIDArr, offset); 206*c8dee2aaSAndroid Build Coastguard Worker dataToGlyphs(n, wasmGreyGlyphIDsArr, 0); 207*c8dee2aaSAndroid Build Coastguard Worker canvas.drawGlyphs(wasmGreyGlyphIDsArr, 208*c8dee2aaSAndroid Build Coastguard Worker glyphLocationsMObj.subarray(offset*2, (offset + charsPerDataPoint) * 2), 209*c8dee2aaSAndroid Build Coastguard Worker 0, 0, textFont, colorPaints["grey"] 210*c8dee2aaSAndroid Build Coastguard Worker ); 211*c8dee2aaSAndroid Build Coastguard Worker } 212*c8dee2aaSAndroid Build Coastguard Worker } 213*c8dee2aaSAndroid Build Coastguard Worker } 214*c8dee2aaSAndroid Build Coastguard Worker canvas.drawGlyphs(wasmGlyphIDArr, glyphLocationsMObj, 0, 0, textFont, colorPaints["white"]); 215*c8dee2aaSAndroid Build Coastguard Worker } 216*c8dee2aaSAndroid Build Coastguard Worker 217*c8dee2aaSAndroid Build Coastguard Worker function fillTextImpl(ctx) { 218*c8dee2aaSAndroid Build Coastguard Worker ctx.font = '12px monospace'; 219*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'black'; 220*c8dee2aaSAndroid Build Coastguard Worker ctx.fillRect(0, 0, WIDTH, HEIGHT); 221*c8dee2aaSAndroid Build Coastguard Worker const timer = performance.now() / 10000; 222*c8dee2aaSAndroid Build Coastguard Worker for (let row = 0; row < ROWS; row++) { 223*c8dee2aaSAndroid Build Coastguard Worker if (row % 2) { 224*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'rgb(76,76,76)'; 225*c8dee2aaSAndroid Build Coastguard Worker ctx.fillRect(0, row * ROW_HEIGHT + 2, WIDTH, ROW_HEIGHT); 226*c8dee2aaSAndroid Build Coastguard Worker } 227*c8dee2aaSAndroid Build Coastguard Worker for (let col = 0; col < COLS; col++) { 228*c8dee2aaSAndroid Build Coastguard Worker let n = Math.abs(Math.sin(timer + data[row][col])); 229*c8dee2aaSAndroid Build Coastguard Worker let useWhiteFont = true; 230*c8dee2aaSAndroid Build Coastguard Worker if (n < 0.05) { 231*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'rgb(255, 99, 71)'; 232*c8dee2aaSAndroid Build Coastguard Worker ctx.fillRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT); 233*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 234*c8dee2aaSAndroid Build Coastguard Worker } else if (n > 0.95) { 235*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'rgb(0, 255, 127)'; 236*c8dee2aaSAndroid Build Coastguard Worker ctx.fillRect(col * COL_WIDTH - 2, (row - 1) * ROW_HEIGHT + 2, COL_WIDTH, ROW_HEIGHT); 237*c8dee2aaSAndroid Build Coastguard Worker useWhiteFont = false; 238*c8dee2aaSAndroid Build Coastguard Worker } 239*c8dee2aaSAndroid Build Coastguard Worker const str = n.toFixed(4); 240*c8dee2aaSAndroid Build Coastguard Worker if (useWhiteFont) { 241*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'white'; 242*c8dee2aaSAndroid Build Coastguard Worker } else { 243*c8dee2aaSAndroid Build Coastguard Worker ctx.fillStyle = 'black'; 244*c8dee2aaSAndroid Build Coastguard Worker } 245*c8dee2aaSAndroid Build Coastguard Worker ctx.fillText(str, col * COL_WIDTH, row * ROW_HEIGHT); 246*c8dee2aaSAndroid Build Coastguard Worker } 247*c8dee2aaSAndroid Build Coastguard Worker } 248*c8dee2aaSAndroid Build Coastguard Worker } 249*c8dee2aaSAndroid Build Coastguard Worker 250*c8dee2aaSAndroid Build Coastguard Worker surface.requestAnimationFrame(drawFrame); 251*c8dee2aaSAndroid Build Coastguard Worker }); 252*c8dee2aaSAndroid Build Coastguard Worker</script>