feat: invert flag

src/packlets/dashboard/App.tsx

@@ -9,6 +9,7 @@ import { FunctionComponent } from 'react'
 import { PrintRender } from '../print/Render'
 import { Descriptor } from './Descriptor'
 import { DiameterInput } from './input/Diameter'
+import { InvertInput } from './input/Invert'
 import { TagIdInput } from './input/TagId'
 import { TypeInput } from './input/Type'
 import { UrlInput } from './input/Url'
@@ -22,6 +23,7 @@ export const App: FunctionComponent = () => {
           <TypeInput />
           <TagIdInput />
           <UrlInput />
+          <InvertInput />
           <DiameterInput />
         </VStack>
         <Descriptor />

src/packlets/dashboard/input/Invert.tsx

@@ -0,0 +1,17 @@
+import { HStack, Switch, Text } from '@chakra-ui/react'
+import { inputAtom, useInputAtom } from '../inputAtom'
+
+export const InvertInput = () => {
+  const { invert } = useInputAtom()
+
+  return (
+    <HStack spacing={3}>
+      <Text>Invert</Text>
+      <Switch
+        size="md"
+        isChecked={invert}
+        onChange={() => inputAtom.setKey('invert', !invert)}
+      />
+    </HStack>
+  )
+}

src/packlets/dashboard/inputAtom.ts

@@ -7,6 +7,7 @@ interface Options {
   tagId: string
   diameter: number
   url: string
+  invert: boolean
 }
 
 export const inputAtom = persistentMap<Options>(
@@ -16,6 +17,7 @@ export const inputAtom = persistentMap<Options>(
     tagId: 'CG00123',
     diameter: 5,
     url: 'grtn.org/i',
+    invert: false,
   },
   {
     encode: JSON.stringify,

src/packlets/print/Render.tsx

@@ -7,7 +7,7 @@ import { drawSticker } from './canvas/drawSticker'
 import './render.css'
 
 export const PrintRender: FunctionComponent = () => {
-  const { type, diameter, tagId, url } = useInputAtom()
+  const { type, diameter, tagId, url, invert } = useInputAtom()
   const canvasRef = useRef(null)
 
   useEffect(() => {
@@ -19,9 +19,10 @@ export const PrintRender: FunctionComponent = () => {
 
     const ctx = canvas.getContext('2d')!
 
-    if (type === 'sticker') drawSticker(canvas, ctx, tagId, url)
-    else if (type === 'flag') drawFlag(canvas, ctx, tagId, url, diameter)
-  }, [type, tagId, canvasRef, diameter, url])
+    if (type === 'sticker') drawSticker(canvas, ctx, tagId, url, invert)
+    else if (type === 'flag')
+      drawFlag(canvas, ctx, tagId, url, invert, diameter)
+  }, [type, tagId, canvasRef, diameter, url, invert])
 
   return <canvas ref={canvasRef} />
 }

src/packlets/print/canvas/drawFlag.ts

@@ -10,6 +10,7 @@ export const drawFlag = async (
   ctx: CanvasRenderingContext2D,
   tagId: string,
   url: string,
+  invert: boolean,
   diameter: number
 ) => {
   const wrapAround = Math.ceil(20 * diameter)
@@ -22,6 +23,9 @@ export const drawFlag = async (
   canvas.width = width
   canvas.height = height
   canvas.dataset.tape = 'black/white'
+
+  if (invert) ctx.filter = 'invert(1)'
+
   ctx.fillStyle = 'white'
   ctx.fillRect(0, 0, width, height)
   ctx.fillStyle = 'black'

src/packlets/print/canvas/drawSticker.ts

@@ -10,14 +10,18 @@ export const drawSticker = async (
   canvas: HTMLCanvasElement,
   ctx: CanvasRenderingContext2D,
   tagId: string,
-  url: string
+  url: string,
+  invert: boolean
 ) => {
   /**
    * Prepare the canvas
    */
   canvas.width = 112
   canvas.height = 174
   canvas.dataset.tape = 'gold/black'
+
+  if (invert) ctx.filter = 'invert(1)'
+
   ctx.fillStyle = 'white'
   ctx.fillRect(0, 0, 112, 174)
   ctx.fillStyle = 'black'