Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

whiteboard background

Avatar

Level 3

friends.

Can i set pdf document as bacground of sharedwhiteboard afcs component. if it is possible means easily i can annotate the pdf document  using whiteboard.

i am expecting the best answer. please help me.

9 Replies

Avatar

Employee

I did some experiment and I have good news and bad news!

First some bad news: PDF is NOT FLASH, nor the FlashPlayer can display PDF natively, so no you cannot set a PDF as background of the Whiteboard.

Now some good news: But with AIR you can have an HTML component as the background of whatever application you are writing, so you could, potentially, put a shared whiteboard on top of an HTML component (see example at the bottom)

And now, some bad news as the grand finale! If you load a PDF document in the HTML view, it correctly displays the PDF plugin, but the plugin takes over all the events, even if it shouldn't be in the foreground. Maybe there is a way to "send it back" to the background, but right now I cannot think of anything. You can dig in the Flex documentation and see if you can find a way.

In any case, here is a simple example of a canvas overlaying an HTML component (again, remember that it's an AIR app) :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
           
            private var drawing:Boolean = false;
           
            private function canvasInit(e:Event):void {
                var c:Canvas = Canvas(e.target);
                c.graphics.lineStyle(2, 0xff0000, 1);
               
                c.addEventListener(MouseEvent.MOUSE_UP, onMouseEvent);
                c.addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent);
                c.addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent);
            }
           
            private function onMouseEvent(e:MouseEvent):void {
                //trace(e.type);
                if (e.type == MouseEvent.MOUSE_DOWN)
                    drawing = true;
                else if (e.type == MouseEvent.MOUSE_UP)
                    drawing = false;
                else if (e.type == MouseEvent.MOUSE_MOVE) {
                    var c:Canvas = Canvas(e.target);
                   
                    //trace((drawing ? "drawing to " : "moving to ") + e.localX + "," + e.localY);
                    if (drawing)
                        c.graphics.lineTo(e.localX, e.localY);
                    else
                        c.graphics.moveTo(e.localX, e.localY);
                }
            }
        ]]>
    </mx:Script>
    <mx:HTML top="0" bottom="0" left="0" right="0" location="http://labs.adobe.com/technologies/afcs/"/>
    <mx:Canvas top="0" bottom="0" left="0" right="0" initialize="canvasInit(event)">
    </mx:Canvas>
</mx:WindowedApplication>

Avatar

Level 3

Hi raff.

Thank u very much for ur idea. Through html loader i can set background pdf. is there any way to make the tool box like canvas drawing to make annotate over the pdf file.

I am developing air application only.

Tool box should contain eraser,pencil and color apply tool. something like that.

Please give an idea to me to implement the things.

Thanks

Avatar

Employee

Hi Karthick,

This code below should give you a clue...

<mx:Canvas    id="canvas" height="100%" width="100%">
     <your pdf html tag />
     <rtc:SharedWhiteBoard id="sharedWhiteBoard" width="{pdfHolder.contentWidth}" height="{pdfholder.contentHeight}" backgroundAlpha="0.0" visible="false"/>

</mx:Canvas>

So bascially you are adding SharedWhiteBoard pod on top of your pdf document with a background-alpha of 0.0 (this makes the shared white board transparent.)

Arun

Avatar

Level 3

HI

I know how to load the pdf file in the container namely spacer with use of urlrequest and htmlloader. but i don't know how to load the pdf file using html tag.

please give me a example for that. i have to load the file dynamically.

Avatar

Level 3

i found the way to load the pdf using html tag. if i load pdf dynamically, pdf document is in foreground. whiteboad is in bacground. i am not able to see the whiteboard. what is the way to send pdf to background. please give an idea.

Avatar

Level 3

canvas is working properly. but pdf is not in background. it comes to foreground. what should i do to sent it back?

Avatar

Level 3

pdf is always coming in foreground. i am not able to set it as background to canvas. please help me.

Avatar

Former Community Member

Do you really think asking the same question 3 times in a row improves your chances? It was the middle of the night here! In this case, this is an AIR question - I'd suggest heading to the AIR forum and asking about overlaying flash content over a pdf there.

nigel

Avatar

Employee

Maybe you could read our full responses before posting your questions over and over.

In my original response I said "And now, some bad news as the grand finale! If you load a PDF document in the HTML view, it correctly displays the PDF plugin, but the plugin takes over all the events, even if it shouldn't be in the foreground. Maybe there is a way to "send it back" to the background, but right now I cannot think of anything. You can dig in the Flex documentation and see if you can find a way."

So, yes, I know (and I told you) that the PDF player is coming in the foreground (or catching the foreground events) when you load a PDF, and no, I don't know how to fix that. Please read the documentation of the different components you are using and try to understand how they work.

And please, don't expect that we write your full application for you. We are happy to help if and when we can, but this forum is specific to AFCS questions, not on every problem you encounter writing your apps.