bryanbraun / checkboxland Goto Github PK
View Code? Open in Web Editor NEWRender anything as HTML checkboxes
Home Page: https://bryanbraun.com/checkboxland
License: MIT License
Render anything as HTML checkboxes
Home Page: https://bryanbraun.com/checkboxland
License: MIT License
Is there any way to detect user clicks? Do you plan to add this in the future?
Hi, I did something like this a few years ago, see:
http://johnhorner.info/dot-matrix/
not nearly as modern as yours. However I also came up with 'ghost mode' which uses disabled checkboxes instead of checked ones for a muted effect. You could also have inverted ghost mode, where the background boxes were disabled and the foreground enabled? Possibly even very crude anti-aliasing.
Anyway, love your work, just a suggestion.
what a fun library! thanks @bryanbraun 👏
i noticed you're using pika for automatically building types. this is rad for the main checkboxland instance, but, when it comes to plugins those types are not inferred. since a plugin's js file does not export its internal functions, pika doesnt either.
for example, in print.js
, if the print
function is exported too
export default {
name: 'print',
exec: print,
print // added this line
}
THEN, i believe the output .d.ts file would look something like:
declare namespace _default {
export const name: string;
export { print as exec };
export { print as print }; // added this line
}
export default _default;
declare function print(text: any, options?: {}): any;
and THEN people using your lib in typescript could augment the main checkboxland class w plugins as needed, something like:
import { Checkboxland } from 'checkboxland';
import CblPluginPrintTypes from '../../node_modules/checkboxland/dist-types/plugins/print/print';
// augmented
type CblPluggedIn = Checkboxland & typeof CblPluginPrintTypes;
const cbl = new Checkboxland({ dimensions }) as CblPluggedIn;
cbl.print('words'); // works correctly without ts errors
of course, there are other ways to correctly add plugin typings to the cbl class in typescript and maybe you have an idea for the builtin plugins, just offering one solution.
cheers
Unable to get it to run on first try importing the example code as it's own component
Receiving the error
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
and
TypeError: Cannot set property 'innerHTML' of null
thank you!
Rendering Images and Videos would likely look better if we were to pass the pixel data through a dithering algorithm (see https://en.wikipedia.org/wiki/Dither).
We could probably pull in a library or basic algorithm off the shelf, add it to renderMediaAsCheckboxes.js, and expose it as an option in the renderImage()
and renderVideo()
plugins (either as a boolean, or—if there are multiple options—as a string/enum).
@pika/pack is no longer being developed. See the archived repo here: https://github.com/FredKSchott/pika-pack
We should transition this to a better supported publishing method. The key features I'd want to support is:
Option 1: Parcel
Option: 2: Publish to JSR
Currently different browsers display different default checkbox colors:
We can use the new accent-color CSS property to make them all the same color across browsers (at least for the browsers that support it). I'd suggest that we make them all the same as the safari color (since it's blue-ish and that browser doesn't yet support accent-color yet).
For now, we can start by just adding these style changes to this normalize stylesheet (and possibly renaming the stylesheet from normalize-size.css
to normalize.css
): https://github.com/bryanbraun/checkboxland/blob/main/docs/css/cbl-normalize-size.css .
not sure if this could be doable with a plug-in, but it was harder than I expected to find an answer that tells me how to change color of the checkbox.
Apparently the key property is accent-color
: https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/58570835#58570835
Steps to reproduce:
var cbl = new Checkboxland();
npx webpack
Uncaught Error: Your plugin must be a function with a "name" property.
Note this is being thrown on Checkboxland's internal plugins, like print
and marquee
.
Here's the link to the demo: https://www.bryanbraun.com/checkboxland/docs/demos/game-of-life/
Currently, if you pause the game, check some boxes, and then unpause, the newly checked boxes don't affect the game. They are simply overridden by the internal state of the game.
A nice improvement would be to make it interactive. We could do this by pulling the state of the grid from Checkboxland with each iteration (using .getData()
), and feeding that into our Conways code.
In Safari, anchor-js fails to load because the newly-added CSP is blocking dynamic style addition.
This appears to be a browser bug, specific to Safari. This issue describes what's happening, as such:
Based on a Twitter convo with @mikewest https://twitter.com/tabatkins/status/1189288783738523648, it looks like the restriction on script-created style elements is probably an accident of implementation, not an intentional restriction. Thus script-created CSSStyleSheets should be fine to stay un-restricted by CSP.
Thus, we could wait until Safari fixes it, or remove / loosen the CSP significantly (perhaps with style-src: 'unsafe-inline'
);
Like the matterjs docs do.
Ideally:
Extra credit:
In the lasers demo, if you click on the edge of the grid, there's a chance that the beam fails to deploy, like this checkbox in the bottom-right:
There are no javascript errors. It's likely because the randomly chosen direction points in such a way that the code doesn't know which way it needs to be reflected.
I try to run this locally and I get sh: pika: command not found
I guess pika
is missing in dependencies? I have no idea what that is. I see pika-pack but no pika
I thought that maybe a plugin to draw things like the standard 2d canvas context api would improve the thing a lot.
@bryanbraun What do you think about that?
The renderImage
and renderVideo
plugins would be a bit more flexible if they accepted other dataSources
like:
These dataSources would add support for additional use cases, including:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.