ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Dial and Indicator Components</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT sets canvas and stage to dimensions and scales to fit inside window size
// FILL sets canvas and stage to dimensions and scales to fit outside window size
// FULL sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Dials and Indicators (2016 - updated 2022)
// the Dial component lets you make a round dial
// you can set min, max and how much the value steps (like you can for a slider)
// you can also change the type of pointer
// there are ticks and you can change the location of the ticks
// when the dial changes, it dispatches a change event
// and you can ask for the dial's currentValue
// there are a few other parameters as well - so check out the docs!
// the Indicator shows what number you are on
// like little round dots that show what page, level in a game or what promo is showing
// STEPS
// 1. make a Dial() with its parameters set
// 2. add a change event to capture when the dial moves
// 3. make an Indicator() with its parameters
// 4. when the dial changes update the selectedIndex of the indicator
// of course dials can control more than just indicators
// and indicators can show more things than just dial settings
// with this setting, components will not update the stage - we need to in our event functions!
OPTIMIZE = true;
// FIRST DIAL
// features a basic dial with some coloring
// by default, dials only go up to the last tick and will not keep spinning around
// the indicator uses the fill feature
// 1. make a Dial() with its parameters set
// min, max, step, width, color, indicatorColor, indicatorScale, indicatorType, innerCircle, innerScale, useTicks, innerTicks, tickColor
const dial = new Dial({
min:1, max:8, step:1, width:200,
backgroundColor:green,
indicatorColor:grey,
tickColor:green
})
.loc(250, 450)
// 2. add a change() (or a change event) to capture when the dial moves
.change(function() {
// dials and sliders do not have selectedIndex properties
// because they might not even have an index if there are no steps
// but we can use the dial currentValue to find an equivalent index
// since dial.steps == 1 we could just use dial.currentValue-dial.min
// but below is a more complete formula
// now, if we want, we can set the dial step to .5 for instance
// perhaps then also set the height of the Indicator to 30 (or the width to 500)
indicator.selectedIndex = Math.round((dial.currentValue-dial.min)/dial.step);
S.update();
});
// 3. make an Indicator() with its parameters
// we will show a step for each mark on the dial
// again a more complete formula than needed in this case
let steps = (dial.max-dial.min)/dial.step+1;
const indicator = new Indicator({num:steps, fill:true, backgroundColor:-1, borderColor:"#666"})
.centerReg()
.loc(dial)
.mov(0, -200);
indicator.selectedIndex = 0;
// SECOND DIAL AND INDICATOR
// features inside ticks, the dial can go right around and the scales have been adjusted
// the indicator does not fill - it just does one at a time which is the default
const dial2 = new Dial({
min:1, max:6, step:1, width:300,
indicatorScale:.6, innerScale:.7,
backgroundColor:blue,
innerTicks:true,
indicatorColor:grey,
tickColor:grey,
limit:false
})
.loc(700, 450)
.change(function() {
indicator2.selectedIndex = Math.round((dial2.currentValue-dial2.min)/dial2.step);
S.update();
});
steps = (dial2.max-dial2.min)/dial2.step+1;
const indicator2 = new Indicator({num:steps, height:50, foregroundColor:blue, backgroundColor:grey, indicatorType:"square"})
.centerReg()
.loc(dial2)
.mov(0, -200);
indicator2.selectedIndex = 0;
// THIRD DIAL AT TOP CONTROLS THE SCALE OF THE SECOND DIAL
// features the dot indicator and step = 0 for analog-like values
const dial3 = new Dial({
min:1, max:.5, step:0, width:100,
indicatorScale:1.5, innerCircle:false,
backgroundColor:pink, indicatorType:"dot",
indicatorColor:"rgba(256,256,256,.6)"
})
.loc(dial2)
.mov(0, -300)
.change(function() {
dial2.sca(dial3.currentValue);
S.update();
});
const title = "Dial and Indicator Components";
new Label(title, 30, null, "#666")
.pos(40, 40);
const docItems = "Frame,Label,Indicator,Dial,change,pos,mov,sca,centerReg,zog,OPTIMIZE";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>