CSS Grid Layout meets bitmap

I remember lots of pain when I first started with Java GUI programming using grid layouts. In particular I think Totally Gridbag sums up my early experiences. I still like and use Java for many other things, and was happy to see progress relating to CSS Grid Layout.

Awesome!!  I can now relive those days (minus the anguish). Actually with some nice CSS Grid Layout information found here, I thought I would create a simple demo.  If you have ever done any C/C++ embedded development (Atmega/Arduino for example ) displaying bitmaps via SPI/I2C on displays sometimes means creating them and storing the image definitions in header files just like XBM . Now there are some tools that do this already, but hey, I wanted an excuse to try CSS grid layouts. So I have put together a simple tool that allows you to create bitmaps. It is generalised to support many combinations (Left, Right, Top, Bottom) of bit and byte ordering. The page layout uses some of the grid functionality.

Check out the demo here. The CSS file has the interesting bits. Here is a screenshot of the tool in action.

 

So, I got to play with CSS grids, and made another bitmap tool (as if the world doesn’t have enough already) Its still a work in progress, so some things may change over the coming days (bugs fixes etc).

Update: Finally I got around to adding save/restore (uses localStorage) and also rotate/flip functions.

Update: Added a screenshot showing the grid view available in Firefox.

BTW, make sure you try the demo using a fairly recent version of web browser, otherwise it may not be supported. Check out Caniuse for browser support.