19 Replies Latest reply: Dec 21, 2011 6:05 PM by bobyopenmeetings RSS

    Adding custom items to the LCCS whiteboard?

    jamesstar889

      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.

        • 1. Re: Adding custom items to the LCCS whiteboard?
          ablerman Community Member

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

          • 2. Re: Adding custom items to the LCCS whiteboard?
            Nigel Pegg Community Member

            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

            • 3. Re: Adding custom items to the LCCS whiteboard?
              jamesstar889 Community Member

              Hey!

               

              thanks for replying

               

              I've had a quick browse on the WhiteboardCustomShapes, looks promising

               

              Will post any success or failure I have on this shortly.....

              • 4. Re: Adding custom items to the LCCS whiteboard?
                jamesstar889 Community Member

                Hi Nigel,

                 

                thank you, this has been a helpful resource.

                 

                I did notice that the custom shape example seems to be attached to the default toolbar.

                Is there any way to add an image by clicking on something as simple as a button on the stage?

                 

                This is some code for adding a rectangle...

                 

                var rectangleShapeDesc:WBRectangleShapeDescriptor = new

                WBRectangleShapeDescriptor();

                rectangleShapeDesc.x = _lastMouseX;

                rectangleShapeDesc.y = _lastMouseY;

                rectangleShapeDesc.width = rectangleShapeDesc.height = 100;

                sharedWB.model.addShape(rectangleShapeDesc);

                 

                how would I go about something like sharedWB.model.addShape(image)?
                I noticed there are other contributors such as the factoryID, definitionData, shapeID and propertyData.

                 

                Any help would be appreciated, thanks!

                • 5. Re: Adding custom items to the LCCS whiteboard?
                  ablerman Community Member

                  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.

                  • 6. Re: Adding custom items to the LCCS whiteboard?
                    jamesstar889 Community Member

                    Sounds all exciting

                     

                    When you say "extend", are you referring to within the class itself?

                     

                    Extend WBShapeDescriptor, so adding to the class file? or can I simply refer to the class file from within my MXML?

                     

                    Thank you for your speedy reply.

                    • 7. Re: Adding custom items to the LCCS whiteboard?
                      ablerman Community Member

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

                       

                      class WBImageShapeDescriptor extends WBShapeDescriptor {

                      }

                      • 8. Re: Adding custom items to the LCCS whiteboard?
                        jamesstar889 Community Member

                        Okay understand.

                         

                        And you further state...

                         

                        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.

                         

                        The registerFactory appears to be part of the WBCanvas, a standalone whiteboard?
                        How does this configure to the shared whiteboard?

                         

                        Kind regards.

                        • 9. Re: Adding custom items to the LCCS whiteboard?
                          jamesstar889 Community Member

                          Okay, in theory, something like the WBRectangleShapeDescriptor file extends WBShapeDescriptor - correct?

                           

                          So in theory, I could copy the WBRectangleShapeDescriptor and rename to something like WBImageShapeDescriptor?

                           

                          Given I can do this, I am still confused as to how you use the image url to add an instance of image to the WB.
                          I've considered addChild(), but where should I place this kind of information?

                           

                          Soldiering on - James

                          • 10. Re: Adding custom items to the LCCS whiteboard?
                            jamesstar889 Community Member

                            Hi,

                             

                            I've made some good progress with adding an image to the whiteboard.

                             

                            Except, rather than trying to add a custom tool option to the tool bar for adding an image, I am creating a simple button (custom tool bar).

                             

                            This is what I have...

                             

                            STEP 1

                            // Adds new image to whiteboard

                            newimage = new WBImageShapeDescriptor();

                            newimage.width = newimage.height = 100;

                             

                            sharedWB.model.addShape(newimage);

                             

                            STEP 2

                            I have created 3 different files... ImageShapeFactory.as, WBImageShapeDescriptor.as, and ImageShape.as

                             

                            Call to make a new WBImageShapeDescriptor > makes a new ImageShape and the ImageShapeFactory for new Factory ID.

                             

                            Okay, now from here, the image appears to be getting registered with the whiteboard, as I can see clearly it is receiving a shape ID, as well as in the room console, I can also see it is being added as a new shapeDefinitionNode.

                             

                            The problem is, it is not appearing on the whiteboard as an editable object, and it is also not being added to the shapeContainerNode in the room console.

                             

                            Any help would be appreciated - I can sense I am getting close to solving this....

                             

                             

                            • 11. Re: Adding custom items to the LCCS whiteboard?
                              jamesstar889 Community Member

                              I've been drilling into WBCanvas.as, possibly it is related to the factoryID, if no factoryID is found, then it returns function.

                               

                              However, in my WBImageShapeDescriptor, a factoryID is presented as:

                              factoryID = "com.adobe.coreUI.controls.whiteboardClasses.shapes::WBImageShapeFactory";

                               

                              Ideas???

                              • 12. Re: Adding custom items to the LCCS whiteboard?
                                aponnusa Adobe Employee

                                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

                                • 13. Re: Adding custom items to the LCCS whiteboard?
                                  jamesstar889 Community Member

                                  Hi Arun,

                                   

                                  I believe you are correct, has to be something quite obvious and trivial

                                   

                                  Do you have a personal email addy I could email the source files to you?

                                   

                                  I am involved in a project called ' Hi ' - Human Interface, quite an exciting project to be working on.

                                  It is being sourced from New Zealand.

                                   

                                  Can we chat re: source files, and ' Hi' via email?

                                   

                                  Much appreciated.

                                  • 14. Re: Adding custom items to the LCCS whiteboard?
                                    jamesstar889 Community Member

                                    Hi Arun,

                                     

                                    please see your private mail - thank you

                                    • 15. Re: Adding custom items to the LCCS whiteboard?
                                      jamesstar889 Community Member

                                      Okay, I've been tracking the 'updateDisplayList, and I noticed that before this gets called, the function drawShape is called.

                                       

                                      It appears that as factory is not recognised and appears to only recognise IWBShapeFactory and not ImageShapeFactory, it returns.

                                       

                                      This part of the coding is skipped...

                                      var shape:WBShapeBase = factory.newShape();

                                      shape.definitionData = p_desc.definitionData;

                                      trace("24.1 What is being passed to the shape definition data? " + p_desc.definitionData);

                                      shape.canvas = this;

                                      shape.propertyData = p_desc.propertyData;

                                      shape.shapeFactory = factory;

                                      trace("24.2 Factory " + factory);

                                      shape.animateEntry = p_animate;

                                      newContainer.content = shape;

                                      shape.shapeID = p_desc.shapeID;

                                      _shapeContainersByID[p_desc.shapeID] = newContainer;

                                      shape.addEventListener(WBShapeEvent.PROPERTY_CHANGE, shapePropertyChange);

                                      shape.addEventListener(WBShapeEvent.TEXT_EDITOR_CREATE, textEditorCreate);

                                      shape.addEventListener(WBShapeEvent.TEXT_EDITOR_DESTROY, textEditorDestroy);

                                      shape.popupTextToolBar = popupPropertiesToolBar;

                                       

                                      newContainer.rotation = p_desc.rotation;

                                      newContainer.validateNow();

                                      newContainer.width = p_desc.width;

                                      newContainer.height = p_desc.height;

                                      newContainer.move(p_desc.x, p_desc.y);

                                      newContainer.validateNow();

                                       

                                      I realise that this is part of the re draw, but it is initiated before updateDisplayList, and as this is skipped, then updateDisplayList is also passed.

                                       

                                      I'll keep digging, let me know if you discover anything.

                                       

                                      Cheers!

                                      • 16. Re: Adding custom items to the LCCS whiteboard?
                                        aponnusa Adobe Employee

                                        Quick checklist.

                                         

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

                                         

                                        Thanks

                                        Arun

                                        • 17. Re: Adding custom items to the LCCS whiteboard?
                                          jamesstar889 Community Member

                                          Hi Arun,

                                           

                                          ImageShapeFactory extends WBSimpleShapeFactory

                                           

                                          and ImageShape2 extends WBSimpleShape <<

                                           

                                          If I change ImageShape2 to WBShapeBase, I get a series of errors...

                                          • 18. Re: Adding custom items to the LCCS whiteboard?
                                            bobyopenmeetings

                                            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.WBPropertiesToolBar;

                                                        import com.adobe.coreUI.controls.whiteboardClasses.shapeDescriptors.WBMarkerShapeDescriptor;

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

                                                        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.WBCustomShapeFactory;

                                                        import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBToolBarDescriptor;

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

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

                                                        import com.adobe.rtc.events.CollectionNodeEvent;

                                                        import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBShapeToolBarDescriptor;

                                                        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

                                            • 19. Re: Adding custom items to the LCCS whiteboard?
                                              bobyopenmeetings Community Member


                                              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(event)"

                                               

                                              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