ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Swipe Scroll Window</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;
const assets = "bitslist.jpg";
const path = "assets/"
new Frame(scaling, width, height, color, outerColor, ready, assets, path);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
const bits = new Pic("bitslist.jpg");
// ZIM BITS - Swipe Scroll Window (2016 - updated 2022)
// SEE the ZIM List() for a new way to make a menu
// ZIM provides a Window class to make a swipeable scroll window
// this can hold a Label (text) or images or any content - even interactive
// if the content is bigger than the window then users can swipe to view content
// an indicator shows the scroll position and proportion of content visible
// you can set the following parameters:
// PARAMETERS - see docs for details and below for special ones!
// width, height, color, borderColor, borderWidth, padding, corner, swipe,
// indicatorActive, indicatorColor, indicatorAlpha, indicatorFade,
// slide, slideSnap, interactive, shadowColor, shadowBlur
// SWIPE PARAMETER
// swipe is set to auto / true which handles horizontal and vertical if needed
// you can set it to horizontal or vertical to handle only one or the other
// or to none / false
// SLIDE AND SLIDESNAP PARAMETERS
// slide is set to true by default and will throw your content when you let go
// this takes a little processing so if you have a lot of mobile windows - watch it...
// you can turn it off by setting it to false
// slideSnap is set to "vertical" but you can set it to auto / true, horizontal or none / false
// this has the effect of moving past the bounds and snapping back to the bounds
// INTERACTIVE PARAMETER
// by default the swipe / drag will happen on content that you add to the window
// if your content is smaller than the window - say a lot of short text lines
// and you want to drag them vertically, then you can set interactive to false
// the interactive parameter, when true (default), lets you interact with your content
// but if you set interactive to false, it uses the whole window to scroll
// however, you can't interact with the content (aside from scrolling it)
// this would be fine for text but not fine for content with a button for instance
// SCROLLX AND SCROLLY PROPERTIES
// you can use the Window scrollX and scrollY property to get and set content position
// this may not work right away due to the drag rectangle being established
// so use setTimeout(function(){yourWindow.scrollX=-500; S.update();}, 200)
// or better yet, animate(yourWindow, {scrollX:-500}, 600);
// scrollX and scrollY can be used to make the mouse scroll wheel control the window scroll...
// EXTRA
// we made the second window act like a menu
// where you roll over the tiles and it tells you a title
// and when you click on the tile it goes to a URL
// we use hitTestGrid() for this (or can calculate it yourself)
// STEPS
// 1. create a new Window() and pass it the parameters you need
// 2. add the window to the stage and position it
// 3. make content for the window
// 4. add content to the window
// TEXT WINDOW
// 1. create a new Window() and pass it the parameters you need
const w = new Window({
backgroundColor:"#222",
borderWidth:0,
corner:0,
padding:12,
width:400,
height:120
})
// 2. add the window to the stage and position it
.center()
.mov(0, -180);
// 3. make content for the window
let sentence = "Below is a Window that shows swipeable content";
sentence += " - this box with text is also a Window.";
sentence += " There are all sorts of options, so have a look at the docs!";
sentence += " Note that the indicator at right is not itself draggable -";
sentence += " it just shows how much text is in the Window and the scroll position.";
const label = new Label({text:sentence, size:24, color:"#999", lineWidth:380});
// 4. add content to the window
w.add(label);
// MENU WINDOW
// SEE the ZIM List() for a new way to make a menu
// 1. create a new Window() and pass it the parameters you need
const padding = 10;
const track = new Window({
width:800,
height:215,
padding:padding,
swipe:"horizontal",
borderColor:darker,
borderWidth:5,
corner:10,
backgroundColor:darker,
scrollBarColor:pink,
scrollBarDrag:true,
slideSnap:"horizontal"
})
// 2. add the window to the stage and position it
.center()
.mov(0, 50)
// 3. make content for the window (in this case the picture we loaded)
// 4. add content to the window
.add(bits);
// EXTRA
// we made the second window act like a menu
// where you roll over the tiles and it tells you a title
// and when you click on the tile it goes to a URL
// we use hitTestGrid() for this (or can calculate it yourself)
const titles = [
"Shapes", "Shuffle", "Embedded", "Responsive", "Animation",
"Assets", "Tabs", "Sequencing", "Parallax", "DUO", "Snap",
"Damping", "Buttons", "Masks", "Sound", "Drawing", "HitTests",
"Double", "Scrubbing", "Selectors"
];
const links = [
"zimshapes.html", "randomarray.html", "inlinecanvas.html", "responsivedesign.html", "animation.html",
"preload.html", "tabs.html", "sequence.html", "parallax.html", "parameters.html", "snapping.html",
"damping.html", "buttons.html", "masks.html", "sound.html", "draw.html", "hittest.html",
"two.html", "scrub.html", "selector.html"
];
// provided Window events
track.on("hoverover", addTip);
track.on("hoverout", removeTip);
// NOW SEE ZIM Tip()
let lastIndex = -1;
let animateCheck = false;
function addTip() {
// Window (track) knows local mouseX and mouseY on content
// or you could use F.mouseX and F.mouseY
const m = track.contentMouse; // gives m.x and m.y properties
const index = getIndex(m.x, m.y); // which tile is rolled on
if (!zot(index) && index != lastIndex && !animateCheck) {
animateCheck = true;
if (tip.alpha >= .9) {
// already in view so animate to 0 alpha and back up to 1
// use rewind prop of animate
// change the text of the tip on the rewindCall function
// this is when the tip is at 0 alpha
tip.animate({
props:{alpha:1},
time:.3,
rewind:true,
rewindCall:function(){
tip.text = titles[index];
lastIndex = index;
},
call:function(){animateCheck = false;}
});
} else { // animate up from nothing (no tip was showing)
animateCheck = true;
tip.text = titles[index];
tip.alpha = 1;
lastIndex = index;
animate({
target:tip,
props:{alpha:1},
time:.5,
call:function(){animateCheck = false;}
});
}
}
}
function removeTip() {
animate({
target:tip,
props:{alpha:0},
time:.5,
call:function(){lastIndex = -1; animateCheck = false;}
});
}
function getIndex(x,y) {
// we can calculate the selected tile or use hitTestGrid()
// hitTestGrid returns the index of the tile at selected mouse location
// note that hitTestGrid does not support DUO
// this is because most parameters are required
// and it is a function often run in mousemoves or Tickers...
// obj, width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type
return bits.hitTestGrid(
bits.width,
bits.height,
20, 1,
x, y,
padding, padding,
0, 0,
true // local coordinates (or use F.mouseX, etc. instead of m.x)
);
}
const tip = new Label({text:"", size:30, color:"#888", align:"center"})
.center()
.mov(0, 200);
// Window gives a select event for a traditional click on the window
track.on("select", function() {
const m = track.contentMouse;
const index = getIndex(m.x, m.y);
zgo(links[index]);
});
const title = "Window - with Text and with Sliding Menu";
new zim.Label(title, 30, null, "#666")
.pos(40, 40);
const docItems = "Frame,Label,Window,List,hitTestGrid,animate,pos,mov,center,zog,zgo,Ticker";
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>