ZIM js JavaScript Framework

Canvas Components, Controls and more!

HTML 5 Canvas Components with JavaScript and ZIMjs

components

HTML 5 Canvas Components – CLICK HERE

ZIM has a powerful set of components for the HTML 5 Canvas including Label, Button, CheckBox, RadioButtons,  Indicator, Slider, Dial, Window, Pane, Tabs, Pad, Stepper, ColorPicker, Waiter, Loader, TextArea and Keyboard.   COMPONENT DEMO

keyboard

CUSTOMIZABLE CANVAS COMPONENTS

The HTML 5 canvas components are customizable with JavaScript – here is an example for a Button – see the ZIM DOCS for information and examples:

parameters

This would add a Button to the stage:

new Button().center();

Here we change the first few parameters:

new Button(200, 100, "GO").center();

Here we set the corner of a default button to 0 using a configuration object:

new Button({corner:0});

ACCESSIBLE CANVAS COMPONENTS

The ZIM Canvas Components have Screen Reader Accessibility – here is a DEMO SITE.

accessibility

INTERACTIVE MEDIA INTERFACE COMPONENTS

Here are a couple examples of HTML 5 Canvas components from the ZIM Examples page with all the code being done in the ZIM JavaScript Canvas Framework:

screen2

Vault 6 and Vault 7 play with interfaces for fun little puzzles.

ornamateAd

The Ornamator lets you create patterns with Stepper and Slider components. There are many more examples found in the ZIM Examples page.

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Information

This entry was posted on June 19, 2018 by in accessibility, components, interactive media, javascript and tagged , , , , , , , , , , , .
Advertisements

Categories

%d bloggers like this: