Render Anything Using HTML Checkboxes – Checkboxland

Category: Javascript , Recommended | June 6, 2020
Author: bryanbraun
Views Total: 34 views
Official Page: Go to website
Last Update: June 6, 2020
License: MIT

Preview:

Render Anything Using HTML Checkboxes – Checkboxland

Description:

Checkboxland is a fancy JavaScript library to render any shapes, grids, elements, animations on a grid using HTML checkboxes.

Advanced Examples:

Install & Download:

# NPM
$ npm install checkboxland --save

How to use it:

1. Import the Checkboxland as an ES module.

import { Checkboxland } from 'checkboxland';

// or from a CDN
import { Checkboxland } from 'https://unpkg.com/checkboxland?module';

2. Import plugins if needed. All possible plugins:

  • print: prints text to the checkbox grid
  • marquee: animates a block of data
  • transitionWipe: transitions between the current checkbox grid state and a future state by wiping across the screen
  • dataUtils: performs a variety of transformations (or actions) on a matrix of data, and return the result.
import print from './plugins/print/print.js';
import marquee from './plugins/marquee.js';
import transitionWipe from './plugins/transitionWipe.js';
import dataUtils from './plugins/dataUtils.js';

// Add built-in plugins
Checkboxland.extend(print);
Checkboxland.extend(marquee);
Checkboxland.extend(transitionWipe);
Checkboxland.extend(dataUtils);

3. Create a container in which you want to render the checkbox grid.

<div id="example"></div>

4. Create a new Checkboxland instance and determine the dimension of the checkbox grid.

const example = new Checkboxland({ 
      dimensions: '8x8', 
      selector: '#example' 
});

5. Prepare your data in a JS array that consists of 0 (unchecked) and 1 (checked).

const myData = [
      [0,1,1,0,0,1,1,0],
      [1,0,0,1,1,0,0,1],
      [1,0,0,0,0,0,0,1],
      [1,0,0,0,0,0,0,1],
      [0,1,0,0,0,0,1,0],
      [0,0,1,0,0,1,0,0],
      [0,0,0,1,1,0,0,0]
];

6. Render a checkbox grid with the data you provide.

example.setData(myData,{
  // the x-coordinate where the text should start on the checkbox grid. Default: 
  x: 0,

  // The y-coordinate where the text should start on the checkbox grid. Default: 0.
  y: 0,

  // if the text data won't fill the whole checkbox grid, you can (0, 1, or 2) which will then be used to fill the leftover areas. 
  fillValue: undefined
});

7. Get the value of a checkbox in the grid. Returns 0 or 1.

example.getCheckboxValue(x, y);

8. Set the checkbox value.

example.setCheckboxValue(x, y, 0 or 1);

9. Get the data.

example.getData();

10. Clear all data.

example.clearData();

11. Use the print plugin.

example.print(text,{

  // character data for a custom font
  font: {},

  //  returns a data matrix for the text instead of updating the checkbox grid
  dataOnly: false,

  // the x-coordinate where the text should start on the checkbox grid. Default: 
  x: 0,

  // The y-coordinate where the text should start on the checkbox grid. Default: 0.
  y: 0,

  // if the text data won't fill the whole checkbox grid, you can (0, 1, or 2) which will then be used to fill the leftover areas. 
  fillValue: undefined
  
})

12. Use the marquee plugin.

example.marquee(data, {

  // repeat the animation
  repeat: false,

  // interval in ms
  interval: 200

  // fill the leftover areas if the scrolling data doesn't fill the whole checkbox grid
  fillValue: 0,

  // callback
  callback: function(){}

})

13. Use the transitionWipe plugin.

example.transitionWipe(newData, {

  // ltr (left-to-right) and rtl (right-to-left)
  direction: 'ltr',

  // interval in ms
  interval: 200

  // fill the leftover areas if the scrolling data doesn't fill the whole checkbox grid
  fillValue: 0,

  // callback
  callback: function(){}
  
})

14. Use the dataUtils plugin.

// actionName:
// invert: inverts the provided matrix
// pad: adds padding around the provided matrix
example.dataUtils(actionName, matrix, {
  top: 0
  bottom: 0
  left: 0
  right: 0
  all: 0
})

15. Get an empty matrix with the dimensions of the existing checkbox grid.

example.getEmptyMatrix({
  // the width & height of the returned matrix
  width: 0,
  height: 0,

  // the value you want to pre-populate the returned matrix with. 
  fillValue: 0
});

Changelog:

v1.1.0 (06/06/2020)

  • feat: update the print plugin with options for x, y, and fillValue
  • feat: expose the getEmptyMatrix method and add a new fillValue option
  • refactor: simplify the API of the new getEmptyMatrix method
  • feat: add more options to setData to simplify some use-cases

You Might Be Interested In:


Leave a Reply