Tidbyt SVG to GIF with NodeJS

svg-to-gif-for-tydbit.mjs

import express from 'express'
import sharp from 'sharp'
import fetch from 'node-fetch'

sharp.cache(false)

const app = express()
const port = 3000

const device = 'some-device-name-whatever-123'
const apikey = 'some.jwt.string'

const render = async res => {
  const composites = []

  const svg = `
    <svg width="64" fill="orange" height="32" viewBox="0 0 64 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="crispify">
          <feComponentTransfer>
            <feFuncA type="discrete" tableValues="0 1"/>
          </feComponentTransfer>
        </filter>
      </defs>
      <rect stroke-width="0" fill="navy" x="0" y="0" width="64" height="32" rx="5"></rect>
      <rect stroke-width="3" stroke="white" fill="purple" x="4" y="5" width="10" height="10" rx="5"></rect>
      <text filter="url(#crispify)" text-anchor="middle" x="40" y="11" fill="white" style="font-family: JetBrains Mono; font-weight: 600; font-size: 10px">
        123.998
      </text>
      <text filter="url(x#crispify)" text-anchor="middle" x="32" y="30" fill="white" style="font-family: Arial; font-weight: 400; font-size: 15px">
        Hi you!
      </text>
    </svg>
  `

  composites.push({ input: Buffer.from(svg), top: 0, left: 0 })

  const output =
    await sharp({ create: { width: 64, height: 32, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 1 }, } })
      .ensureAlpha().composite(composites).gif().toBuffer()
  
  const buf = Buffer.from(output, 'binary')

  res?.setHeader('Content-Type', 'image/gif')

  // Update the brightness (for later, TODO, programmatically based on time of day)
  await fetch('https://api.tidbyt.com/v0/devices/' + device, {
    method: 'PATCH', headers: { 'Content-type': 'application/json', 'Authorization': 'Bearer ' + apikey },
    body: JSON.stringify({ brightness: 20, autoDim: false, })
  })

  // Set the image
  const f = await fetch('https://api.tidbyt.com/v0/devices/' + device + '/push', {
    method: 'POST',
    headers: { 'Content-type': 'application/json', 'Authorization': 'Bearer ' + apikey },
    body: JSON.stringify({ image: buf.toString('base64'), background: false, installationID: 'nodejs', })
  })

  console.log('Rendered & live', await f.json())

  return buf
}

app.get('/', async (req, res) => {
  // Render on HTTP refresh
  res.send(Buffer.from(await render(res), 'binary'))
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

// Render when app starts
render()