Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

Removing Shape Factories / Functions From LCCS Whiteboard

Avatar

Level 2

Hey LCCS team -

I'm trying to figure out how to remove some the functionality from the LCCS SharedWB.  There's a few things like the arrow tool, pencil, highlight rectangle, etc.. that I don't need in my application.  Any tips on how to go about this?

1 Reply

Avatar

Employee

Hi,

Currently removing default shapes is a bit complicated and not documented, and we might add an API in the future release of our SDK.

But the good news is you can remove them,.

Here is code. I modified the WBTriangle.mxml file in WhiteBoardCustomShapes that you can find in SampleApps of the SDKNavigator.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768" xmlns:rtc="http://ns.adobe.com/rtc" xmlns:authentication="com.adobe.rtc.authentication.*" xmlns:session="com.adobe.rtc.session.*" xmlns:pods="com.adobe.rtc.pods.*">
     <mx:Script>
          <![CDATA[
               import com.adobe.coreUI.controls.EditorToolBar;
               import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBShapeToolBarDescriptor;
               import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBToolBarDescriptor;
               import com.adobe.coreUI.controls.whiteboardClasses.WBShapesToolBar;
               import com.adobe.coreUI.controls.whiteboardClasses.shapeDescriptors.WBMarkerShapeDescriptor;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBCustomShapeFactory;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBHighlightAreaShapeFactory;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBMarkerShape;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBMarkerShapeFactory;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBPropertiesToolBar;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBSimpleShape;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBSimpleShapeFactory;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextShape;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextShapeFactory;
               import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextToolBar;
               import com.adobe.coreUI.events.WBCanvasEvent;
               import com.adobe.rtc.events.CollectionNodeEvent;
               import com.adobe.rtc.events.SessionEvent;
               
               /**********************************************************
                * ADOBE SYSTEMS INCORPORATED
                * Copyright [2007-2010] Adobe Systems Incorporated
                * All Rights Reserved.
                * NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the
                * terms of the Adobe license agreement accompanying it.If you have received this file from a
                 * source other than Adobe, then your use, modification, or distribution of it requires the prior
                * written permission of Adobe.
                  * *********************************/
               
               [Embed (source = '../assets/WBCustomMarker.png')]
               public static var ICON_CUSTOM_MARKER:Class;
               
               [Embed (source = '../assets/WBFileImage.png')]
               public static var ICON_IMAGE:Class;

               [Embed (source = '../assets/WBTriangle.png')]
               public static var ICON_TRIANGLE:Class;

               
               // NOTE : RUN AS OWNER FIRST TO SET ALL THE COLLECTIONNODES NEEDED
               
               protected function roomConnector_synchronizationChangeHandler(event:SessionEvent):void
               {
                    if (roomConnector.isSynchronized) {
                         //Modify the toolBar after the white board is synchronized
//                         sharedWB.shapesToolBar = toolBar;
                         sharedWB.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE, onToolBarAdd);
                    }
               }
               
               // Modify the toolbar. Demonstrating the WBCustomShapeFactory.
               // So to add a custom shape we need the following
               // 1.) The shape class that defines what should be drawn when the mouse is dragged
               // 2.) Custom Cursor
               // 3.) Icon on the toolBar for the shape
               // 4.) The Property ToolBar for the shape
               
               // So the toughest part is defining the shape and its property toolbar
               protected function onToolBarAdd(p_evt:Event):void
               {
                    if (sharedWB.isSynchronized) {
                         
                         var toolBar:WBShapesToolBar = new WBShapesToolBar();
                         var data:WBToolBarDescriptor = new WBToolBarDescriptor(false);
                         
                         //toolBar.validateNow();

//                         sharedWB.shapesToolBar = toolBar;
     //                    toolBar.validateNow();

                         //Label Shape
                         var toolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.LABEL);
                         toolShape.label = "CShape";
                         //var toolBar:WBShapesToolBar = sharedWB.shapesToolBar as WBShapesToolBar;
                         //toolBar.addCustomShapeToToolBar(toolShape);
                         data.addShapeToolBar(toolShape);
                         
                         //Custom Marker or Wave Pen. Refer to WBCustomMarkerShape to check what the shape does
                         var wavePenToolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
                         wavePenToolShape.toolTip ="Custom Highlighter Pen Tool";
                         var markerShape:WBMarkerShapeFactory = new WBMarkerShapeFactory();
                         wavePenToolShape.shapeFactory = new WBCustomShapeFactory(WBCustomMarkerShape, WBMarkerShapeFactory.CURSOR_HIGHLIGHTER_PEN, new WBCustomMarkerToolBar());
                         wavePenToolShape.icon = ICON_CUSTOM_MARKER;
                         data.addShapeToolBar(wavePenToolShape);
                         
                         //Triangle Shape
                         var triangleShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
                         triangleShape.toolTip ="Triangle";
                         triangleShape.shapeFactory = new WBCustomShapeFactory(WBTriangleShape, WBMarkerShapeFactory.CURSOR_PEN, new WBPropertiesToolBar());
                         triangleShape.icon = ICON_TRIANGLE;
                         data.addShapeToolBar(triangleShape);
                         
                         //A bit buggy or incomplete.. Adding Images to the WhiteBoard
                         //Modify WBFileImageShape or WBFileImageShapeToolBar for your custom Needs
                         var imageShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
                         imageShape.toolTip ="Image";
                         imageShape.shapeFactory = new WBCustomShapeFactory(WBFileImageShape, WBSimpleShapeFactory.CURSOR_RECTANGLE, new WBFileImageShapeToolBar());
                         imageShape.icon = ICON_IMAGE;
                         data.addShapeToolBar(imageShape);
                         toolBar.dataProvider = data;
                         sharedWB.removeChild(sharedWB.shapesToolBar);
                         sharedWB.shapesToolBar = toolBar;
                    }
               }
               
          ]]>
     </mx:Script>
     <authentication:AdobeHSAuthenticator id="guestAuthenticator" userName="aponnusa@adobe.com" password="C0conut123"/>
     <session:ConnectSessionContainer id="roomConnector" borderStyle="none" synchronizationChange="roomConnector_synchronizationChangeHandler(event)" authenticator="{guestAuthenticator}" roomURL="http://connectnow.acrobat.com/aponnusa/deleteafcs" width="100%" height="100%">
          <pods:SharedWhiteBoard id="sharedWB" width="100%" height="100%" />
     </session:ConnectSessionContainer>
</mx:Application>

So to summarize the code

Add the following lines in your code

var toolBar:WBShapesToolBar = new WBShapesToolBar();
var data:WBToolBarDescriptor = new WBToolBarDescriptor(false); // False indicates that you dont need default items

//Define your shapes and add it to data using the api WBToolBarDescriptor.addShapeToolBar

//And then

toolBar.dataProvider = data;
sharedWB.removeChild(sharedWB.shapesToolBar);
sharedWB.shapesToolBar = toolBar;

Thanks, hope this code help you.