ZIM js JavaScript Framework

Canvas Components, Controls and more!

Naked Objects! Style on the Canvas with ZIM and CreateJS

style on the canvas like css

Cascading Styles for the Canvas

ZIM OCT (8) has launched at http://zimjs.com with style for the canvas with JavaScript, CreateJS and ZIMjs.  See the style on the canvas example.  This code styles the Dial components above:

STYLE = {
  backgroundColor:pink, // all backgrounds
  type:{ // styles for types of objects
    Dial:{
      center:true, // center on stage
      mov:series([-80, 80]),
      indicatorColor:white, // the second Dial overrides this
    }
  }
}

Every DisplayObject parameter is available to style. These are applied at the time the objects are made. They are cascading with each level overriding the previous level:

  1. GENERAL: any style can be specified in general
    corner:30 will make all corners default to 30
  2. TYPE: styles for object type can be set to override the general styles
    Button:{corner:0} will make all button corners default to 0
  3. GROUP: styles for a group can be set to override the type styles
    homePage:{corner:20} will make all objects of that group default to 20
  4. OBJECT: styles applied to the object override all other styles
    new Button({corner:40}) will make this button have a corner of 40

TRANSFORM STYLES

Transformations can also be applied: x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible. bounds style has a value of {x:Number, y:Number, width:Number, height:Number} where x and y are optional:

STYLE = {
  x:20,
  group:{
    bigger:{scale:2}
  }
}

RANDOM, RANGES, AND SERIES STYLES

Any property value can be a ZIM VEE value to make use of ZIM zik (pick).  This is extremely powerful for dynamic creation:

STYLE = {
  // pick a random color each time the style is used
  color:[red, green, blue],
  // pick from a range for the width each time
  width:{min:100, max:500}, 
  // pick in series each time - will repeat
  x:series([100,200,300])
}

FUNCTION STYLES

The following functions have been added: addTo, center, centerReg, transform, drag, gesture, outline, mov, animate, wiggle. Values of true will give default functionality for all but mov, animate and wiggle. ZIM DUO configuration objects can be set as a value for any of these:

STYLE = {
  drag:true, // generally drag all objects
  type:{
    Rectangle:{
      centerReg:true,
      drag:{onTop:false} // override for rectangle
      animate:{
        props:{rotation:360}, 
        time:500, loop:true, ease:"linear"
      }
    },
    Circle:{
      drag:ignore, // do not drag
      add:true, x:100, y:100,
      animate:[
        {props:{alpha:0}, time:700, from:true},
        {props:{x:500}, time:2000, rewind:true}
      ],
      borderColor:pink, dashed:true
    }
  }
}
new Rectangle();
new Circle(); // these get the styles applied!

For animate and wiggle, [] can be put around multiple
configuration objects to wiggle in the x and y for instance 
or run multiple animate calls on the object

CONVENIENCE STYLES

A few extra styles have been added for convenience

STYLE = {
  add:true, // adds to stage 
  // addTo:{container:holder}, // for other containers
  move:{x:value, y:value}, // or mov:{} -- just adding e
  // move:50, // to move 50 in x 
  style:false, // will turn off all styles for the selector
}

EXCLUSION

A value of ignore can be used to exclude any earlier styles and return to the original default. ignore is a ZIM global variable – if zns is true then use zim.ignore or just “ignore”.
Setting style:false will exclude the object from all styles. All DisplayObjects have a style parameter (default true). Set to false to ignore styles.

STYLE = {
  color:red; // all font color is red by default
  type:{
    Button:{color:blue} // Button font is blue 
  },
  group:{
    happy:{color:green} // will get green font
    plain:{color:ignore} // will get original default
  }
}
new Button(); // blue text 
new Button({group:"happy"}); // green text
new Button({group:"ignore"}); // original white text
new Button({style:false}); // original white text

GROUPS

All DisplayObjects have a group parameter. This parameter accepts a string or a comma delimited string of multiple groups. The group of components can then be targeted in the Group section of STYLE. A group can contain just one component and act like an ID in CSS.

STYLE = {
  center:true,
  mov:series([-200,200]),
  group:{
    happy:{backgroundColor:green}, 
    frontPage:{scale:2} 
  }
}
new Button(); // default button on left
new Button({group:"happy, frontPage"}); green and big on right

groups act like classes in CSS
we already have classes in code - Button is a class 
so group was used

CONCLUSION

In adding STYLE, ZIM offers creators several ways to add objects to their app.  You still code with them and change properties like normal ;-).  It is really no big deal – but it was fun to make CSS in a week 😉 and really suggests that ZIM was well organized in the first place.  If you have read this far – get going on ZIM!  Come on out to https://zimjs.com/slack and join the conversation!  Let others know.

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 )

Connecting to %s

Information

This entry was posted on August 28, 2018 by in components, design, interactive media, javascript, launch and tagged , , , , , , , , , , , .
Advertisements

Categories

%d bloggers like this: