The default FPS is set to 60.
// Global FPS setting
zeu.Settings.fps = 60;
Each component has its own default view width and view height.
Let's use Message Queue as an example. Its default view demension is 100 x 200 so by default it requires a 100 x 200 canvas to display.
To scale the component, we can call scaleTo(x, y) or call scaleByHeight(height) to rescale the component and at the same time, we need to increase the width and height of the canvas correspondingly.
// Increase the width and height of the canvas so the scaled view can be seen.
// Create a message queue component.
var messageQueue = new zeu.MessageQueue('message-queue');
// Scale the width and height by factor 2 so the new width is 100 * 2 = 200. Height = 200 * 2 = 400.
messageQueue.scaleTo(2, 2);
// Scale the component by height. New width = 400 / 200 * 100 = 200. It does the same thing as scaleTo(2, 2) for this component.
messageQueue.scaleByHeight(400);This component also supports flexible view width or height.
// Create a 300 x 300 canvas.
// Adjust the view width and height to 300 through constructor
var messageQueue = new zeu.MessageQueue('message-queue', {
viewWidth: 300,
viewHeight: 300
});
For options regarding color code, hex color or rgba color code is recommended. For instance,
Tips: rgba(255, 255, 255, 0) can be used as transparent color.
Turn on/off the alert by using API alertOn() or alertOff().
// Create a speed circle.
var speedCircle = new zeu.SpeedCircle('speed-circle');
// Turn on the warning
speedCircle.alertOn({
text: 'WARNING',
interval: 1000,
bgColor: '#000000',
fontColor: '#dc3547',
lineColor: '#dc3547'
});