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.

[ablerman]

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

[Former 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

[jamesstar889]

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

[jamesstar889]

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!

[ablerman]

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.

[jamesstar889]

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.

[ablerman]

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

class WBImageShapeDescriptor extends WBShapeDescriptor {

}

[jamesstar889]

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.

[jamesstar889]

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

[jamesstar889]

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

[jamesstar889]

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???

[aponnusa]

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

[jamesstar889]

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.

[jamesstar889]

Hi Arun,

please see your private mail - thank you

[jamesstar889]

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!

[aponnusa]

Quick checklist.

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

Thanks

Arun

[jamesstar889]

Hi Arun,

ImageShapeFactory extends WBSimpleShapeFactory

and ImageShape2 extends WBSimpleShape <<

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

[Former Community Member]

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

[Former 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