Create and switch between multiple whiteboards
Overview
This document describes how to create multiple whiteboards using the Super Board SDK and switch between them freely. The example scenario in this document is as follows:
- Create a common whiteboard.
- Switch to the common whiteboard, enter a line of words on the whiteboard, and then zoom in on the whiteboard.
Implementation steps
Assume that A creates a whiteboard and operates on it and that B watches the whiteboard in this flow. In the preceding figure, the dotted line indicates that B can obtain related information from the corresponding callback when A performs the operation.
Initialize the SDK and log in to the room
Refer to Getting started to integrate and initialize the SDK and log in to the room. The complete sample code is as follows:
<!-- Parent container to be mounted -->
<div id="parentDomID"></div>// Integrate the SDK before executing the following code.
// Initialize ZegoExpressEngine.
const zg = new ZegoExpressEngine(appID, server);
// Obtain the ZegoSuperBoard instance.
zegoSuperBoard = ZegoSuperBoardManager.getInstance();
// Initialize ZegoSuperbBoard. If the initialization succeeds, true is returned for result.
const result = await zegoSuperBoard.init(zg, {
parentDomID: ‘'parentDomID', // ID of the parent container to be mounted.
appID: 0, // Obtained AppID.
userID: '', // User ID customized by the user.
token: '' // Token for identity verification upon room login.
});
/* 1. ZEGOCLOUD provides the link https://wsliveroom-alpha.zego.im:8282/token for obtaining the token during the development stage, and the obtained token can be used only in the test environment. In the formal environment, the token must be implemented by developers’ service servers.
2. The user ID is customized by the user, which is the same as that for logging in to the room.
*/
$.get('https://wsliveroom-alpha.zego.im:8282/token', {
'app_id': appID,
'id_name': userID
}, token => {
// Token obtained.
console.log(token);
});
// Log in to the room. If the login succeeds, true is returned.
// If userUpdate is set to true, listening for the roomUserUpdate callback is enabled. By default, the listening is disabled.
const result = await zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});Create a whiteboard
A creates a common whiteboard.
// A performs an operation.
// A whiteboard can be created only after true is returned for room login in the preceding step.
// Create a common whiteboard.
const model1 = await zegoSuperBoard.createWhiteboardView({
name: 'purewhiteboard', // Whiteboard name.
perPageWidth: 1600, // Width of each page on the whiteboard.
perPageHeight: 900, // Height of each page on the whiteboard.
pageCount: 5 // Number of pages on the whiteboard.
});After the whiteboard is created, SuperBoardView automatically synchronizes the whiteboard creation to multiple parties. The last created whiteboard is displayed by default. B receives the emoteSuperBoardSubViewAdded and superBoardSubViewScrollChanged notifications each time when A creates a whiteboard. B can refresh the local UI logic in the corresponding callback.
After joining in the room and confirming that the parent container to which the whiteboard is mounted exists (the physical width or height, in pixels, is not 0), B must determine whether a whiteboard exists in the room. If a whiteboad exists in the room, manually mount the whiteboard by referring to Mount the current whiteboard.
// User B listens for the callback and refreshes the local UI logic in the callback.
// Listen to remote whiteboard adding.
zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(uniqueID) {
// The currently displayed whiteboard name on the UI can be updated according to the data in ZegoSuperBoardManager.getInstance().getSuperBoardView().getCurrentSuperBoardSubView().getModel().
});
// Listen for page turning and scrolling on the whiteboard.
zegoSuperBoard.on('superBoardSubViewScrollChanged', function(uniqueID, page, step) {
// The currently displayed page number or the number of steps in the current animation effect on the UI can be updated according to the parameter information returned in the callback.
});You can use setOperationMode to grant permissions for clients to operate on the whiteboard.
On the clients with the corresponding permission, users can draw on the whiteboard. For details, refer to Draw on a whiteboard.
Switch to the common whiteboard, draw on the whiteboard, and zoom in
To synchronize the zooming effect among multiple parties, you must enable the zooming effect synchronization and responding functions on each party.
// The zooming effect needs to be synchronized between the local and peer parties.
zegoSuperBoard.enableSyncScale(true);// Synchronize the zooming effect to the other party.
zegoSuperBoard.enableResponseScale(true);// Respond to the zooming effect synchronized from the other party.User A switches to the common whiteboard, uses the text tool to write on the whiteboard, and zoom in on the whiteboard to 200%.
// Operations by user A
// Switch to the target whiteboard.
var zegoSuperBoardSubView = zegoSuperBoard.getSuperBoardView()
await zegoSuperBoardSubView.switchSuperBoardSubView(model.uniqueID);
// The default whiteboard tool is brush. To set other tool types, call setToolType.
// For example, set the tool type to text, click on the whiteboard where you want to display the text, and enter the text.
zegoSuperBoard.setToolType(2)
// Obtain the currently displayed whiteboard.
var curSubView = zegoSuperBoardSubView.getCurrentSuperBoardSubView();
// Zoom in to 200%.
curSubView && curSubView.setScaleFactor(2);After user A switches the whiteboard, the switching is automatically synchronized to user B. User B receives the remoteSuperBoardSubViewSwitched notification, which has been implemented in the preceding step. If the synchronous zooming function has been configured for both users A and B, after user A zooms in or out on the whiteboard, the zooming effect is automatically synchronized to user B and user B receives the superBoardSubViewScaleChanged notification.
// User B listens to the callback and refreshes the local UI logic in the callback.
// Listen for remote whiteboard zooming.
zegoSuperBoard.on('superBoardSubViewScaleChanged', function(uniqueID, scale) {
// The current zooming coefficient on the UI can be updated according to the parameter information returned in the callback.
});