Implementation

1 Overview

1.1 Concept Explanation

• ZegoExpress-Video SDK: ZEGO audio and video interactive SDK, which can provide real-time signaling transmission capabilities required by interactive whiteboards. The interactive whiteboard SDK must be used with this SDK.
• Collaborative whiteboard SDK and ZegoWhiteboardView SDK: both refer to the SDK that provides the ZEGO interactive whiteboard service (ZegoWhiteboard).
• ZegoWhiteboardView: The ZegoWhiteboardView view used directly by the developer during the code implementation process.
• Whiteboard: The whiteboard model stored on the server provided by the ZegoWhiteboardView SDK. Users can access various information of the whiteboard through this model, including creating ZegoWhiteboardView through this model.

1.2 Document Introduction

This article is divided into two parts to introduce the ZegoWhiteboardView SDK:

1. Create a whiteboard and use basic functions: Starting from the realization of a simple whiteboard, demonstrate the introduction of the whiteboard SDK, log in to the room, initialize the whiteboard SDK, create ZegoWhiteboardView, display ZegoWhiteboardView, use graffiti tools, and synchronize with other users The basic process of whiteboard content.
2. Get the created whiteboard and show it:
   • When entering a room with multiple whiteboards, how to get the existing ZegoWhiteboardView list and display it on the interface correctly;
   • When other users add or delete whiteboards, how to correctly handle the views locally.

2. Prerequisites

• Create a project in ZEGO Console and apply for a valid AppID and AppSign. For details, please refer to Console - Project Management.
• Collaborative ZegoWhiteboardView SDK in the project, please refer to Quick Starts - Integration for details.

3 Create a Whiteboard and Use Basic Functions

3.1 Initialize SDK

3.1.1 Initialize ZegoExpress-Video SDK

Initialize ZegoExpress-Video SDK. For details, please refer to ZegoExpress - Quick starts - 3 Implementation steps.

/** Define a ZegoExpressEngine object */
ZegoExpressEngine engine;

ZegoEngineProfile profile = new ZegoEngineProfile();
/** Use the AppID and AppSign assigned by ZEGO when you create your project in the ZEGO Admin Console. */
/** AppID format: 123456789L */
profile.appID = appID;
/** AppSign format: "0123456789012345678901234567890123456789012345678901234567890123"（64 characters）*/
profile.appSign = appSign;
/** General scenario */
profile.scenario = ZegoScenario.GENERAL;
/** Set application object of App */
profile.application = getApplication();
/** Create a ZegoExpressEngine instance */
engine = ZegoExpressEngine.createEngine(profile, null);

3.1.2 Initialize ZegoWhiteboardView SDK

1. Use init of ZegoWhiteboardManager Method to initialize ZegoWhiteboardView SDK.

If the errorCode in the callback onInit is 0, it means the initialization is successful and more operations can be performed. For errorCode, please refer to Common Error Codes.

ZegoWhiteboardManager.getInstance().init(context, new IZegoWhiteboardInitListener() {
    @Override
    public void onInit(int errorCode) {
        if (errorCode == 0) {
            /** Initialization successful */
        } else {
            /** Initialization failure */
        }
    }
});

2. Monitor Whiteboard Events

Call the setup listener of ZegoWhiteboardManager to monitor common whiteboard events: setWhiteboardManagerListener(IZegoWhiteboardManagerListener listener).

Contains the following events:

//Error callback in the process of using whiteboard
//For detailed error codes, see ZegoWhiteboardConstants.java
void onError(int errorCode);

//Whiteboard operation permission change callback
//This permission is used to control the operation of the whiteboard, including zooming and scrolling
void onWhiteboardAuthChanged(HashMap<String,Integer> authInfo) {}

//Graphic element operation permission change callback
//Primitive operation permissions include create, delete, move, update, and clear all primitives
void onWhiteboardGraphicAuthChanged(HashMap<String,Integer> authInfo) {}

//When other users in the room create a new ZegoWhiteboardView, they will receive a callback for adding ZegoWhiteboardView
//Users can add the new whiteboardView to the view
void onWhiteboardAdded(ZegoWhiteboardView zegoWhiteboardView);

//When other users in the room delete ZegoWhiteboardView, they will receive a callback for the removal of ZegoWhiteboardView
//Users can remove the corresponding ZegoWhiteboardView according to the whiteboardID
void onWhiteboardRemoved(long whiteboardID);

3.2 Login Room

For details of the error code, please refer to Login Room Error Code.

/** Create user */
ZegoUser user = new ZegoUser("user1");

/** Start to log in to the room */
engine.loginRoom("room1", user);

3.3 Create ZegoWhiteboardView

1. Initialize ZegoWhiteboardViewModel and set the attributes.

• The four attributes of aspectWidth, aspectHeight, roomID, and name are required. The following example code creates ZegoWhiteboardView with an aspect ratio of 16:9 and 5 pages in the horizontal direction.
• The roomID needs to be the same as the roomID when logging in to the room.

//Create a whiteboard model
ZegoWhiteboardViewModel zegoWhiteboardViewModel = new ZegoWhiteboardViewModel();
zegoWhiteboardViewModel.setAspectHeight(9); // The equal height of the whiteboard you want to create
zegoWhiteboardViewModel.setAspectWidth(16 * 5); // The equal width of the whiteboard you want to create, if you need to create a multi-page whiteboard, you need to multiply it by the corresponding multiple
zegoWhiteboardViewModel.setName("Whiteboard 1");
zegoWhiteboardViewModel.setPageCount(5); // The number of whiteboard pages
zegoWhiteboardViewModel.setRoomId("123");

2. Call createWhiteboardView interface to create ZegoWhiteboardView. After the creation is successful, users in the same room will receive the agent callback of onWhiteboardAdded.

ZegoWhiteboardManager.getInstance().createWhiteboardView(zegoWhiteboardViewModel, new IZegoWhiteboardCreateListener() {
    @Override
    public void onCreate(int errorCode, @Nullable ZegoWhiteboardView whiteboardView) {

    }
});

3. Show ZegoWhiteboardView Add the whiteboardView obtained in the createWhiteboardView callback to the view to display ZegoWhiteboardView.

if (errorCode == 0 && zegoWhiteboardView != null) {
addView(zegoWhiteboardView,LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
            )
        )
}

3.4 Experience the Basic Functions of ZegoWhiteboardView SDK

3.4.1 Set Drawing Tools

1. Turn on the drawing function of ZegoWhiteboardView.

• Set setWhiteboardOperationMode set to ZegoWhiteboardConstants.ZegoWhiteboardOperationModeDraw, you can turn on the drawing function of ZegoWhiteboardView and turn off scrolling at the same time Features.
• Set setWhiteboardOperationMode to ZegoWhiteboardConstants.ZegoWhiteboardOperationModeScroll, the drawing function will be turned off and the scrolling function will be turned on at the same time.

currentWhiteboardView.setWhiteboardOperationMode(ZegoWhiteboardConstants.ZegoWhiteboardOperationModeDraw)

2. Set the Drawing Tool Type. Set ZegoWhiteboardManager class setToolType. The method can modify the tool type of ZegoWhiteboardView. Currently, 9 tools are supported.

ZegoWhiteboardViewToolNone, // not selected
ZegoWhiteboardViewToolPen, // graffiti brush
ZegoWhiteboardViewToolText, // text
ZegoWhiteboardViewToolLine, // straight line
ZegoWhiteboardViewToolRect, // rectangle
ZegoWhiteboardViewToolEllipse, // circle
ZegoWhiteboardViewToolSelector, // select primitive
ZegoWhiteboardViewToolEraser, // eraser
ZegoWhiteboardViewToolLaser, // Laser pointer
ZegoWhiteboardViewToolClick, // click
ZegoWhiteboardViewToolCustomImage, // custom graphics

3. Set the tool to ZegoWhiteboardViewToolPen graffiti pen.

int toolType = ZegoWhiteboardConstants.ZegoWhiteboardViewToolPen;
int color = Color.RED;
int size = 4;
/** Set the type of brush*/
ZegoWhiteboardManager.getInstance().setToolType(toolType);
/** Set the color of the pen*/
ZegoWhiteboardManager.getInstance().setBrushColor(color);
/** Set the size of the brush*/
ZegoWhiteboardManager.getInstance().setBrushSize(size);

After setting the graffiti brush successfully, press and move your finger within the range of whiteboardView to see the graffiti effect displayed on the whiteboardView.

3.4.2 Synchronize the Content on ZegoWhiteboardView

Different users only need to join the same room and get ZegoWhiteboardView, and add ZegoWhiteboardView to the interface, you can observe ZegoWhiteboardView Location synchronization.

3.4.3 Scroll ZegoWhiteboardView

Call scrollTo method to make ZegoWhiteboardView scroll to the corresponding position.

• horizontalPercent represents the percentage of the horizontal position, the value range: 0 ~ 1.0;
• verticalPercent represents the vertical displacement percentage, the value range: 0 ~ 1.0.

/** Whiteboard scroll */
float horizontalPercent = 1.0f;
float verticalPercent = 1.0f;
zegoWhiteboardView.scrollTo(horizontalPercent, verticalPercent);

3.4.4 Remove Whiteboard

Call destroyWhiteboardView method of ZegoWhiteboardManager class to remove the whiteboard. After the removal is successful, users in the same room will receive a callback notification of onWhiteboardRemoved.

long whiteboardID = 1;
ZegoWhiteboardManager.getInstance().destroyWhiteboardView(whiteboardID, new IZegoWhiteboardDestroyListener() {
    @Override
    public void onDestroy(int errorCode, long whiteboardID) {
        if (errorCode == 0) {
            /** The whiteboard was destroyed successfully*/
        } else {
            /** Failed to destroy the whiteboard*/
        }
    }
});

4 Get and Display the Created Whiteboard

4.1 Initialization

Please refer to 3.1 Initialize SDK and 3.2 Login Room to initialize ZegoWhiteboardView SDK and log in to the room.

4.2 Get the List of ZegoWhiteboardView Created in the Room

Call getWhiteboardViewList of ZegoWhiteboardManager interface to get the ZegoWhiteboardView list created in the room. The user can directly add the obtained ZegoWhiteboardView to the interface for display, and the user can use getWhiteboardViewModel property to get whiteboard information.

//Get the list of ZegoWhiteboardView created in the room
ZegoWhiteboardManager.getInstance().getWhiteboardViewList(new IZegoWhiteboardGetListListener() {
        @Override
        public void onGetList(int errorCode, ZegoWhiteboardView[] whiteboardViewList) {
            if (errorCode == 0) {
                /** Successfully obtained */
            } else {
                /** Get failed */
            }
        }
    });

4.3 Pay Attention to the Callback of the Whiteboard

Developers can follow the callbacks when adding and deleting whiteboards as needed. Before paying attention to the callback, you must ensure that the method of ZegoWhiteboardManager is set: setWhiteboardManagerListener.

1. When the whiteboard is added, display the latest ZegoWhiteboardView.

ZegoWhiteboardManager.getInstance().setWhiteboardManagerListener(new IZegoWhiteboardManagerListener() {
    @Override
    public void onError(int errorCode) {
    }

    @Override
    public void onWhiteboardAdded(ZegoWhiteboardView zegoWhiteboardView) {
        addView(zegoWhiteboardView,LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT))
    }

    @Override
        public void onWhiteboardRemoved(long whiteboardID) {
        }
});

2. When the whiteboard is removed, remove the corresponding ZegoWhiteboardView.

ZegoWhiteboardManager.getInstance().setWhiteboardManagerListener(new IZegoWhiteboardManagerListener() {
    @Override
    public void onError(int errorCode) {
    }

    @Override
    public void onWhiteboardAdded(ZegoWhiteboardView zegoWhiteboardView) {
    }

    @Override
    public void onWhiteboardRemoved(long whiteboardID) {
        removeView(getWhiteboardViewHolder(whiteboardID))
    }
});

5 Sample Code

Developers can experience the interactive whiteboard business in the interactive whiteboard sample project, and view the complete source code and code logic. For details, please refer to Collaborative Whiteboard - Sample Codes.