Embedded 1-bit PNGs in WeeWiki

In what will almost certainly be an idea I will eventually regret, I am now able to do this in weewiki:

(total size: 472 bytes.)

As an added bonus, the circle is clickable! Go on. Click it.

This is a dynamically generated PNG file, embedded in this page using base64 encoding.

The drawing is done using the 1-bit graphics library btprnt, and scripted using the version janet that is bundled with weewiki. The image is made clickable using a good old fashioned image map.

The PNG is intentionally limited to 1-bit color. This is mostly for aesthetics, but it also helps shrink the size. The PNG encoder is custom-built to create the smallest possible PNG with 1-bit color. For compression, I am using miniz, a public domain drop-in replacement for libz.

Why do this? Well, it is convenient to embed figures in a given page. The fact that it can be procedurally generated can make way for interesting visualizations and plots in zet, the zettelkasten component in WeeWiki.

Here is the Janet code used to produce the image above:

(do
(def bp (btprnt/new 128 128))

(def main @[0 0 128 128])

(btprnt/circ bp main 64 64 30 1)
(btprnt/rect bp main 10 10 108 108 1)

(def msg "Hello WeeWiki!!")

(btprnt/textbox
  bp (btprnt/font-cherry)
  main
  (math/floor (- 64 -10 (* (/ (length msg) 2) 8)))
  12
  "Hello WeeWiki!" 1 1)

(def b64 (btprnt/write-png bp))

(print (string/format ``
<map name="hello">
<area shape="circle" href="%s" coords="64, 64, 30"
alt="click me!">
</map>
`` (pglink "btprnt")))

(print "<img src=\"data:image/png;base64,")
(print b64)
(print "\" usemap=\"#hello\" alt=\"circle test\" /><br>")

(org (string "(total size: *" (length b64) "* bytes.)\n"))

(btprnt/del bp))

---

home | index