Skip navigation
Currently Being Moderated

Adding custom items to the LCCS whiteboard?

Feb 18, 2010 7:31 PM

Q: Is this possible? For example I have a photo that I drag onto the whiteboard and it becomes shared?

 

If so, what actionScript or examples should I review?

 

Thank you.

 
Replies
  • Currently Being Moderated
    Feb 18, 2010 10:28 PM   in reply to jamesstar889

    That's certainly possible. Check out the WhiteBoardCustomShapes sample.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2010 10:13 AM   in reply to jamesstar889

    Hi there,

       

      It should be possible! I'm bumping this up because Arun knows how to get

    this working - in the meantime, check out the WhiteboardCustomShapes sample

    in the sampleApps section of the SDK package.

     

      hope that helps

       nigel

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 5, 2010 1:53 PM   in reply to jamesstar889

    There sure is. First, look at the two examples for reference.

     

    Here are the steps that I've followed to get this to work.

     

    First, you'll need a "shapeDescriptor" that describes your new shape. Extend WBShapeDescriptor for this.

     

    Next, you'll need a new "shape". Extend WBShapeBase for this.

     

    After that, you need to extend the SharedWhiteBoard and register the new shape. The way I did it is, in the onSyncChange, you call something like:

    _canvas.registerFactory(new WBCustomShapeFactory(ImageShape, null, null) );

    That registers the factory so the whiteboard knows how to make your stuff.

     

    When you want to add a new shape, just do something like:

    var desc:WBImageShapeDescriptor = new WBImageShapeDescriptor();

     

    desc.url = imageurl

    desc.x = 0;

    desc.y = 0;

    desc.width = 100;

    desc.height = 100;

    whiteboard.model.addShape(desc)

     

     

     

    I'm sure I've missed something here, feel free to fill in my gaps.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 5, 2010 2:35 PM   in reply to jamesstar889

    When I say "extend" I mean subclass. Create a new class, for instance "WBImageShapeDescriptor"

     

    class WBImageShapeDescriptor extends WBShapeDescriptor {

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 8, 2010 10:38 AM   in reply to jamesstar889

    Hi,

     

    Factory id is used to redraw the shape, once the sharedWBModel is updated with your shape attributes. So a shape would'nt if its missing factoryId and if that factoryId is not registered with the WhiteBoard.

     

    About trying to resize the image, do you override your updateDisplayList in your ImageShape.as

     

    Also from the steps you have mentioned, I see that you have followed everything and short of something trivial. Can you attach your code so that I can take a look and see what's missing.

     

    Thanks

    Arun

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 8, 2010 3:54 PM   in reply to jamesstar889

    Quick checklist.

     

    Can you confirm that ImageShapeFactory.as implements IWBShapeFactory or extends WBSimpleShapeFactory,  and ImageShape.as extends WBShapeBase.

     

    Thanks

    Arun

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2011 1:38 AM   in reply to jamesstar889

    Hi All

     

    I want to change/customize the standard toolbar of lccs. I have already checked the example WhiteBoardCustomShapes and its working too.

     

    Now what I need: I already have one application which is based on five mxml documents e.g., ChatPanel.mxml, ConnectPannel, googlemap.mxml (main file), MapArea and whiteBoard.mxml.

     

    my whiteboard.mxml file code is shown bellow:

     

     

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rtc="CocomoNameSpace" creationComplete="initWhiteBoard()">

       

        <mx:Script>

            <![CDATA[

                private function initWhiteBoard():void {

                    whiteBoard.setStyle("backgroundAlpha",0);

                }

            ]]>

        </mx:Script>

       

        <rtc:SharedWhiteBoard id="whiteBoard" width="100%" height="100%" enabled="true" />

    </mx:Canvas>

     

     

    Now what I changed in this document whiteboard.mxml:

     

    1) I coppied all the files from WhiteBoardCustomShapes (e.g., files including in src and assests folder i.e., WBFileImageShape etc.) to my project folder.

     

    2) in my whiteBoard.mxml file I made changes as follow:

     

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rtc="CocomoNameSpace" creationComplete="initWhiteBoard()">

     

    which is same as my whiteboard.mxml after this I have added

     

    <mx:Script>

            <![CDATA[

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBPropertiesToolBa r;

                import com.adobe.coreUI.controls.whiteboardClasses.shapeDescriptors.WBMarker ShapeDescriptor;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBMarkerShapeFacto ry;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBMarkerShape;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBSimpleShape;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextToolBar;

                import com.adobe.coreUI.controls.EditorToolBar;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextShape;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBTextShapeFactory ;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBCustomShapeFacto ry;

                import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBTool BarDescriptor;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBSimpleShapeFacto ry;

                import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBHighlightAreaSha peFactory;

                import com.adobe.rtc.events.CollectionNodeEvent;

                import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBShap eToolBarDescriptor;

                import com.adobe.coreUI.controls.whiteboardClasses.WBShapesToolBar;

                import com.adobe.coreUI.events.WBCanvasEvent;

                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

               

             

    /*  // comment this code from origonal and call the sharedWB.addEventListner function inside the initWhiteBoard() function.//

     

      protected function roomConnector_synchronizationChangeHandler(event:SessionEvent):void

                {

                    if (roomConnector.isSynchronized) {

                        //Modify the toolBar after the white board is synchronized

                        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) {

                        //Label Shape

                        var toolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.LABEL);

                        toolShape.label = "CShape";

                        var toolBar:WBShapesToolBar = sharedWB.shapesToolBar as WBShapesToolBar;

                        toolBar.addCustomShapeToToolBar(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;

                        toolBar.addCustomShapeToToolBar(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;

                        toolBar.addCustomShapeToToolBar(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;

                        toolBar.addCustomShapeToToolBar(imageShape);

                    }

                }

               

            ]]>

        </mx:Script>

    The above whole code I got it from WBTriangle.mxml file came with lccs sample code.

     

    add my whiteboard.mxml remaining part of code and changed the object whiteBoard to sharedWB

     

    <mx:Script>

            <![CDATA[

                private function initWhiteBoard():void {

                  

                   sharedWB.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE, onToolBarAdd);

     

                   sharedWB.setStyle("backgroundAlpha",0);

                }

            ]]>

        </mx:Script>

       

        <rtc:SharedWhiteBoard id="sharedWB" width="100%" height="100%" enabled="true" />

    </mx:Canvas>

     

     

     

    Results: I havent got the new toolbar with custom image button. but I am still having the same standard LCCS toolbar for the whiteboard.

     

    Any help, would be a great favour for me.

     

     

    Regards

    boby

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2011 6:05 PM   in reply to bobyopenmeetings


    In relation to my coding I pasted before: two major difference i found in my project and WBTrinagle  Project.

     

    to activate the custome toolbar I need to call this function bellow

     

    synchronizationChange="roomConnector_synchronizationChangeHandler(even t)"

     

    within the <rtc:ConnectSessionContainer> tag whereas this tag is already occupied by googlemap.mxml (main file) e.g., synchronizationChange="onSyncChange()" and onSyncChange() has body like

                        private function onSyncChange():void {

                                   if (cSession.isSynchronized) {

                                                           vs.selectedIndex = 1;

                                       }

    }

     

    Second difference is my whiteboard.mxml document is containg <mx:Canvas> tag whereas WBtrinagle.mxml is using <mx:Application >tag

     

    Anybody who can help me to resolve these issues.

     

    Regards

    Boby

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points