Code for Images on the Whiteboard

[_vesuvias]

I promised startx2000 in another thread that I would post
some code for images in a whiteboard and here it is. This is based
on 0.91 version of the SDK. We need to add two classes: ImageShape
and ImageShapeFactory. And make 3 minor changes to
WBShapesToolBar.as (in
com.adobe.coreUI.controls.whiteboardClasses).



The two following two classes need to be added to
com.adobe.coreUI.controls.whiteboardClasses.shapes:

ImageShape.as

ImageShapeFactory.as



For brevity sake I will just list the changes to
WBShapesToolbar. If you do the changes in this order the line
numbers should be correct:



Add the following import to the top (line3):

quote:

---

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

---

Around line 113 you should see:

quote:

---

protected var arrowFactory:WBArrowShapeFactory = new
WBArrowShapeFactory();

protected var highlightAreaFactory:WBSimpleShapeFactory = new
WBHighlightAreaShapeFactory();

---

change it so that you add the imageShapeFactory variable on
line 115:

quote:

---

protected var arrowFactory:WBArrowShapeFactory = new
WBArrowShapeFactory();

protected var highlightAreaFactory:WBSimpleShapeFactory = new
WBHighlightAreaShapeFactory();

protected var imageShapeFactory:ImageShapeFactory = new
ImageShapeFactory();

---

Around line 171 you shold see:

quote:

---

{type:"tool", toolTip:_lm.getString("Shapes"),
icon:ICON_SHAPES, children:

[

{type:"label", label:_lm.getString("Shapes")},

{type:"tool", toolTip:_lm.getString("Line Tool"),
icon:ICON_LINE, shapeFactory:arrowFactory,
shapeData:WBArrowShapeFactory.NO_ARROW_HEAD},

---

Add a line just before that last line so that is now looks
like:

quote:

---

{type:"tool", toolTip:_lm.getString("Shapes"),
icon:ICON_SHAPES, children:

[

{type:"label", label:_lm.getString("Shapes")},

{type:"tool", toolTip:_lm.getString("Image Tool"),
icon:ICON_LINE, shapeFactory:imageShapeFactory, shapeData:"
http://www.adobe.com/products/creativesuite/include/highlights/flashplayer_10.jpg"},

{type:"tool", toolTip:_lm.getString("Line Tool"),
icon:ICON_LINE, shapeFactory:arrowFactory,
shapeData:WBArrowShapeFactory.NO_ARROW_HEAD},

---

NOTE: the line we added has a url for the shapeData that will
specify the image you want use. Feel free to change it to whatever
you want. This line is passed into the source of the actual image.



ImageShape.as and ImageShapeFactory.as are attached. You need
to cut and paste them out of here and into the appropriate package
based directory
(com.adobe.coreUI.controls.whiteboardClasses.shapes). Let me know
if you get this to work, if not i will try and help when I can.



Ves

[Former Community Member]

bravo! you know, I was thinking more about this today on my
way to work. I wonder if there wouldn't be a simple solution like
being able to activate / deactivate the actual "white" base of the
pod - or even having it at an alpha of 0%, then loading the images
into a container underneath the pod.



On the flip-side if I *really* knew what I was talking about
that might make a difference :D



Thanks for that code - this will help out greatly for my
project!

[Former Community Member]

You can always set backgroundAlpha to 0, and put the
whiteboard over an image component. What vesuvias is up to actually
lets you use the toolbar to add images, which is about 1000 times
cooler.

[Former Community Member]

thanks vesuvias  

[chinmay_raval]

+1 its a better idea to put a dashboard on image.

[Former Community Member]

Hi,

Can you have a complete fla examlpe of whiteboard jpg import ?

thanks again

[chinmay_raval]

Hi,

Find the code in attachment. I hope it help you a bit.

[jcahill23]

Hi. Like a few others in the forum I'm trying to modify the source so that I can put my own images on the whiteboard. But got a bit stuck.

I saw that others (vesuvias and chironmany) have said they 'attached' some of their own modified classes.

Was wondering if they wouldn't mind posting the code again...? And also just give a quick conceptual explanation about which of the afcs whiteboard classes handle "sharing" the images on the whiteboard.

Thanks!

[aponnusa]

hi,

Please refer to Nigels post above where You can always set backgroundAlpha of WhiteBoard to 0, and put the whiteboard over an image component. What vesuvias is up to actually lets you use the toolbar to add images, which is about 1000 times cooler. Also please refer to CollabPicViewer for reference.

If you still need to modify the source, I have attached the files that was posted.

[aponnusa]

/// ImageShapeFactory.as

package com.adobe.coreUI.controls.whiteboardClasses.shapes
{
    import com.adobe.coreUI.controls.whiteboardClasses.IWBPropertiesToolBar;
    import com.adobe.coreUI.controls.whiteboardClasses.WBShapeBase;
   
    public class ImageShapeFactory extends WBSimpleShapeFactory
    {
               
       
        public override function newShape():WBShapeBase
        {
            var shape:ImageShape = new ImageShape();
            if (_shapeData!=null) {
                shape.definitionData = _shapeData;               
            }
            if (_toolBar) {
                shape.propertyData = _toolBar.propertyData;
            }
            return shape;
        }
       
        public override function get toolBar():IWBPropertiesToolBar
        {
            if (!_toolBar) {
                _toolBar = new WBPropertiesToolBar();
                var tmpShape:ImageShape = new ImageShape();               
                _toolBar.propertyData = tmpShape.propertyData;
            }
            return _toolBar;
        }

        public override function get toggleSelectionAfterDraw():Boolean
        {
            return false;
        }
       
        public override function set shapeData(p_data:Object):void
        {
            _shapeData = p_data;
        }
       
        public override function get cursor():Class
        {
            return CURSOR_RECTANGLE;
           
        }
       
    }
}

//***************************************************************************

////// ImageShape.as

package com.adobe.coreUI.controls.whiteboardClasses.shapes
{
    import mx.controls.Image;
    import flash.filters.DropShadowFilter;
   
    public class ImageShape extends WBSimpleShape
    {
        public var image:Image = new Image();
        public function ImageShape()
        {
            super();
        }
       
        public override function get definitionData():*
        {
            return _shapeType;
        }
       
        public override function set definitionData(p_data:*):void
        {
            if (p_data is String) {
                image.source = p_data;
                addChild(image);
            }
            _shapeType = p_data;
        }
       
        protected override function updateDisplayList(p_w:Number, p_h:Number):void
        {
            super.updateDisplayList(p_w, p_h);
            if (image){
                image.width = p_w;
                image.height = p_h;
            }
            if (_dropShadow) {
                filters = [new DropShadowFilter(4, 45, 0, 0.3)];
            } else {
                filters = null;
            }
           
        }
    }
}

//

[Former Community Member]

Hi,

You might also want to look at the CollabPicViewer example in the examples folder. It uplaods images on top of whiteboard and users can see it in a collaborative fashion. It uses some extra classes also included in that example

Thanks

Hironmay Basu

[jcahill23]

Thanks all for the advice.

[sminrana]

Hi

Thanks for ImageShape classes, i really appreciate it nice works!!! it worked for me.

but can you tell me how can i integrate that image or any images into whiteboard system so that it resize handler appear, also UNDO/REDO work with that.

Thanks

[SreejaVirtus]

hi,

I m using latest version of sdk and based on your guidance i had added two classes ImageShape.as and ImageShapeFactory.as

while making changes to  WBShapesToolbar.as i couldnt find the 171 line

ie., {type:"tool", toolTip:_lm.getString("Shapes"), icon:ICON_SHAPES, children:
[
{type:"label", label:_lm.getString("Shapes")},
{type:"tool", toolTip:_lm.getString("Line Tool"), icon:ICON_LINE, shapeFactory:arrowFactory, shapeData:WBArrowShapeFactory.NO_ARROW_HEAD},

and i had made the remaining all changes.So what i have to do as next step.

expecting your quick reply.

Thanks & regards,

Sreeja

[aponnusa]

Hi Sreeja,

I would strongly recommend not to follow this approach, as you are modifying code in the LCCS framework. This would mean you updating your version of SDK as we release a new one.

This app was built when there were no API's to add custom shapes. [infact this app was a motivation for us provide API's to add custom shapes]

If possible follow your previous approach, and use WhiteBoardCustomShapes in the SDK's sample app as a reference.

Thanks

Arun