hi,
I need to have an appliaction like this http://blogs.adobe.com/arunpon/swfs/WBTriangle.swf
I had used sampleApps -WhiteBoardCustomShapes-class files into my application.But i dont know how its possible to have a whiteboard toolbar with image icon as in the link above.My sample code is as follows.
<fx:Declarations>
<rtc:AdobeHSAuthenticator id="auth" />
<rtc:RoomSettings id="settings" autoPromote="true"/>
</fx:Declarations>
<mx:Canvas id="cv_home" width="1324" height="739" y="10" x="0" >
<mx:TextInput visible="false" id="roomURL" width="295" tabIndex="1">
<mx:text>https://collaboration.adobelivecycle.com/flexapp/myfirstroom</mx:text>
</mx:TextInput>
<mx:Text id="notificationMessage" text=""/>
<mx:ProgressBar leading="10" x="318" y="138" minimum="0" maximum="100" id="pb"/>
<rtc:ConnectSessionContainer id="sess"
authenticator="{auth}"
initialRoomSettings="{settings}" autoLogin="false" width="1314" height="714" y="15" x="0">
<myPackages:SuperPanel backgroundColor="#000000" backgroundAlpha="0.2" alpha="1.0" id="sp_wb" title="White Board" width="732" height="414" x="0" y="50" showControls="true" enableResize="true" layout="absolute" >
<mx:Canvas disabledOverlayAlpha="0" enabled="true">
</mx:Canvas>
<rtc:SharedWhiteBoard addedToStage="{myPackages.WBTriangleShape}" backgroundColor="#fdf9f9" id="wb" width="100%" height="100%" y="1" x="1" creationComplete="wb.shapesToolBar.move(0,0)"/>
<myPackages:WBFileImageShapeToolBar x="161" y="42" height="146" width="214"/>
</myPackages:SuperPanel>
<rtc:AudioPublisher left="779" right="223" id="audioPub" y="147" height="128"/>
<rtc:AudioSubscriber x="-54" y="188"/>
<s:Label x="758" y="29" text="Connected to the Room" color="#3D3B3B" fontSize="10" fontFamily="Verdana" fontWeight="bold" textDecoration="none" height="20" fontStyle="italic"/>
<s:Label x="896" y="29" id="lbl_classroom" text=" {index.roomName} " color="#0E629C" fontSize="10" fontFamily="Verdana" fontWeight="bold" height="22" fontStyle="italic"/>
<!-- <s:Button x="723" y="11" label="Disconnect" width="123" height="43" id="btn_dct" click="btn_dct_clickHandler(event)"/>-->
<myPackages:SuperPanel id="sp_chat" title="Chat" x="743" y="329" showControls="true" enableResize="true" width="318" height="185" layout="absolute">
<rtc:SimpleChat newMessageColor="0x000000" x="10" y="0" width="100%" height="100%"/>
</myPackages:SuperPanel>
<myPackages:SuperPanel title="FileShare" id="sp_fileshare" x="745" y="524" showControls="true" enableResize="true" width="316" height="197" layout="absolute">
<rtc:FileShare id="fs" width="100%" height="100%" x="6" y="0"/>
</myPackages:SuperPanel>
<myPackages:SuperPanel id="sp_roster" title="Participants" height="157" x="486" y="472" width="235" showControls="true" enableResize="true" layout="absolute">
<rtc:Roster dataProvider="{sess.userManager.userCollection}" labelField="displayName" fontSize="11" width="100%" height="100%" y="4" x="6"/>
</myPackages:SuperPanel>
<myPackages:SuperPanel id="sp_webcam" title="WebCam" x="740" y="50" showControls="true" enableResize="true" width="321" height="267" layout="absolute" >
<rtc:WebCamera width="100%" height="100%" x="2" y="24"/>
<mx:Button label="Start My Audio"
toggle="true" id="audioButt" color="#3A3838"
click="audio_click(event)" y="0" height="18" fontWeight="normal" width="149" x="0" fontSize="10"/>
</myPackages:SuperPanel>
<myPackages:SuperPanel id="sp_sharedNotes" title="Shared Notes" x="124" y="472" showControls="true" enableResize="true" width="354" height="209" layout="absolute" >
<rtc:Note id="simpleNote" width="100%" height="100%" x="0" y="-2" />
</myPackages:SuperPanel>
<myPackages:WBTriangleShape x="70" y="472" width="50" height="50" />
</rtc:ConnectSessionContainer>
</mx:Canvas>
and the class file WBFileImageShapeToolBar is as follows:
package myPackages
{
import com.adobe.coreUI.controls.whiteboardClasses.IWBPropertiesToolBar;
import com.adobe.coreUI.events.WBCanvasEvent;
import com.adobe.rtc.collaboration.FilePublisher;
import com.adobe.rtc.events.FileManagerEvent;
import com.adobe.rtc.messaging.NodeConfiguration;
import com.adobe.rtc.messaging.UserRoles;
import com.adobe.rtc.session.ConnectSession;
import com.adobe.rtc.sharedManagers.FileManager;
import com.adobe.rtc.sharedManagers.UserManager;
import com.adobe.rtc.sharedManagers.descriptors.FileDescriptor;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.FileFilter;
import mx.containers.HBox;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.core.UIComponent;
import mx.managers.PopUpManager;
import mx.utils.UIDUtil;
/**
* @private
* The Idea is to use FileManager to save images and use the file or image URL's to display the image shape.
* Sometimes the URL might be bad the image might be broken or the image is broken if the internet connection is slow
* Note:
* Known Issues: When a image Shape is selected, the image toolBar is displayed, and choosing an image from the toolBar would not set the
* new shape to be drawn.
*/
public class WBFileImageShapeToolBar extends UIComponent implements IWBPropertiesToolBar
{
protected var _imageComboBox:ComboBox;
protected var _imageFileURL:String;
protected var _imageName:String;
protected var _hBoxHolder:HBox;
protected var _connectSession:ConnectSession;
protected var _filePublisher:FilePublisher;
protected var _fileManager:FileManager;
protected var _userManager:UserManager;
public static const groupid:String = "toolBarImages";
protected var _thumbNailDialog:ThumbNailDialog;
import myPackages.ThumbNailDialog;
//Initialize the FileManager and initialize a thumb nail dialog to display the images.
public function WBFileImageShapeToolBar()
{
super();
_connectSession = ConnectSession.primarySession as ConnectSession;
_filePublisher = new FilePublisher();
_filePublisher.initialize();
_filePublisher.addEventListener(FileManagerEvent.FILE_ALERT,onFileAlert);
_fileManager = ConnectSession.primarySession.fileManager;
_fileManager.addEventListener(FileManagerEvent.UPDATED_FILE_DESCRIPTOR,onNewImageAdded);
//_userManager = ConnectSession.primarySession.userManager;
_thumbNailDialog = new ThumbNailDialog(_fileManager,this);
/* if(!_fileManager.isGroupDefined(groupid) && _fileManager.getUserRole(_userManager.myUserID) == UserRoles.PUBLISHER) {
var nodeConfig:NodeConfiguration = new NodeConfiguration();
nodeConfig.sessionDependentItems = false;
_filePublisher.createAndUseGroup(groupid, nodeConfig);
}else {
_filePublisher.groupName = groupid;
} */
}
// set the imageURL to the latest file uploaded. imageURL would be the propertydata and definiondata for the imageshape
protected function onNewImageAdded(p_evt:FileManagerEvent):void
{
var fileDescriptor:FileDescriptor = p_evt.fileDescriptor;
if (fileDescriptor.groupName == groupid && fileDescriptor.uploadProgress == 100) {
_imageFileURL = fileDescriptor.downloadUrl;
_imageName = fileDescriptor.name;
}
}
// set the imageURL to the latest file uploaded. imageURL would be the propertydata and definiondata for the imageshape
public function set imageFileURL(p_URL:String):void
{
_imageFileURL = p_URL;
}
public function set imageName(p_imageName:String):void
{
_imageName = p_imageName;
}
protected function onFileAlert(p_evt:FileManagerEvent):void
{
trace(p_evt.alertMessage);
}
//Return the property data ie imageURL of the image selected in the ThumbNailDialog
public function get propertyData():*
{
var returnObj:Object = new Object();
returnObj.imageName = _imageName;
return returnObj;
}
public function set propertyData(p_data:*):void
{
_imageName = p_data.imageName;
}
public function set isFilledShape(p_filled:Boolean):void
{
//do nothing for now...
}
// Add the buttons and their eventlisteners needed for the property toolBar. There is room for more controls
override protected function createChildren():void
{
//<mx:HBox id="shapeController" alpha="1.0" backgroundColor="#000000" backgroundAlpha="0.5" left="5" right="5" bottom="10" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5" verticalAlign="middle">
var maxHeight:Number = 0;
_hBoxHolder = new HBox();
addChild(_hBoxHolder);
_hBoxHolder.alpha = 1.0;
_hBoxHolder.setStyle("backgroundColor","#000000");
_hBoxHolder.setStyle("backgroundAlpha",0.5);
_hBoxHolder.percentHeight = 100;
_hBoxHolder.percentWidth = 100;
var addButton:Button = new Button();
addButton.label = "Add Image";
addButton.addEventListener(MouseEvent.CLICK,uploadImage);
addButton.width = 120;
addButton.height = 25;
_hBoxHolder.height = Math.max(addButton.height,maxHeight);
maxHeight = _hBoxHolder.height;
_hBoxHolder.width += addButton.width;
_hBoxHolder.addChild(addButton);
var removeButton:Button = new Button();
removeButton.label = "Choose..";
removeButton.addEventListener(MouseEvent.CLICK,removeImage);
removeButton.width = 90;
removeButton.height = 25;
_hBoxHolder.height = Math.max(removeButton.height,maxHeight);
maxHeight = _hBoxHolder.height;
_hBoxHolder.width += removeButton.width;
_hBoxHolder.addChild(removeButton);
//Add edges & Border & padding at the end
_hBoxHolder.width += 20;
_hBoxHolder.height += 10;
_hBoxHolder.setStyle("paddingTop",5);
_hBoxHolder.setStyle("paddingRight",5);
_hBoxHolder.setStyle("paddingBottom",5);
_hBoxHolder.setStyle("paddingLeft",5);
}
public function upload():void
{
uploadImage();
}
//Upload Image using the FilePublisher
protected function uploadImage(p_evt:Event=null):void
{
var filterArray:Array=[new FileFilter("Images", "*.jpg;*.gif;*.png;*.jpeg")];
_filePublisher.browse(UIDUtil.createUID(), filterArray);
if (_thumbNailDialog.isPopUp) {
PopUpManager.removePopUp(_thumbNailDialog);
}
}
protected function removeImage(p_evt:Event):void
{
PopUpManager.addPopUp(_thumbNailDialog,parent);
PopUpManager.centerPopUp(_thumbNailDialog);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
}
what change i have to do for getting an application like in the above link.
Expecting your immediate reply.
Thanks and Regards,
Sreeja.T
Views
Replies
Total Likes
Hi Sreeja,
I guess you are missing the sole point of our help. We can help you with some issue in our framework or can give a generic idea, but it's absolutely NOT WELCOME to expect us to debug thru your 100s of lines of code. You have to figure these things by yourself but if it’s a framework issue that’s troubling you, we are always available for help.
Hope this sets the expectations correctly
Thanks
Hironmay Basu
Views
Replies
Total Likes
yes hironmay,
i understood my mistake.I will try find the solution.
Thanks,
sreeja.T
Views
Replies
Total Likes
Hi Sreeja,
In my opinion you are complicating your own code. Refer to WBTriangle.mxml on how to add custom images to your whiteboard. Copy that piece of code into your app's mxml file. Understanding this file would help you integrating the custom shapes sample app into you app.
Drag the files [ThumbnailDialog.as, WBFileImageShape.as, WBFileImageShapeToolBar] into your project. And you must be set.
Code you might need to add to your main mxml file
[Embed (source = '../assets/WBFileImage.png')]
public static var ICON_IMAGE:Class;
// Add it onCreationcomplete of your WhiteBoard or under synchronization change of your app
sharedWB.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE, onToolBarAdd);
//And this is all that is required to add images to ur WhiteBoard
//once you have dragged the classes you have mentioned
protected function onToolBarAdd(p_evt:Event):void
{
//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);
}
Views
Replies
Total Likes
Thank you sooo much aponnusa.It will really help me in my project.I will
defenitly try it and inform u the result.
Thanks,
Sreeja
Views
Replies
Total Likes
Its working fine.Thanks again.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies