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.
Views
Replies
Total Likes
That's certainly possible. Check out the WhiteBoardCustomShapes sample.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.....
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
When I say "extend" I mean subclass. Create a new class, for instance "WBImageShapeDescriptor"
class WBImageShapeDescriptor extends WBShapeDescriptor {
}
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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....
Views
Replies
Total Likes
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???
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Hi Arun,
please see your private mail - thank you
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
Quick checklist.
Can you confirm that ImageShapeFactory.as implements IWBShapeFactory or extends WBSimpleShapeFactory, and ImageShape.as extends WBShapeBase.
Thanks
Arun
Views
Replies
Total Likes
Hi Arun,
ImageShapeFactory extends WBSimpleShapeFactory
and ImageShape2 extends WBSimpleShape <<
If I change ImageShape2 to WBShapeBase, I get a series of errors...
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes