16 Replies Latest reply: Apr 15, 2012 11:45 AM by Chris9351 RSS

    srceenshots, thumbnails made outside the stage....?

    Chris9351 Community Member

      Hi,

       

      here is my idea:

      It is a projector on a CD. The user starts it, the PC connects to the Internet and makes some screenshots (thumbs) of  predefined Websites (outside the stage). The user can only see the thumbnails popping up on the stage.

      For doing that I should be able to make screenshots outside the stage... right?

      Is it possible? If yes, could somebody kick me in the right direction please?

        • 1. Re: srceenshots, thumbnails made outside the stage....?
          josh_chunick Community Member

          quite possible... using Valentin's qtwidgets Xtra here: http://valentin.dasdeck.com/xtras/qtwidgets_xtra/win/

           

          the demo should show you how to use webkit within the Xtra to get screenshots of a website.

           

          Alternatively, there is something called a 'headless' version of WebKit with Javascript API with versions for both win and mac, which can be found here: http://www.phantomjs.org/

          It is accessed from the command line, thus it can be used in conjunction with Valentin's Shell Xtra (both mac and PC).

           

           

          Edit: I re-read your post and it sounds like you want to take a screenshot of an already open browser... that's also possible with another Xtra called scrnXtra, found here: http://valentin.dasdeck.com/xtras/scrn_xtra/ as well, you will need a way to get the windows handle of the browser using something like BuddyAPI (you can use up to two methods free), which can be found here: http://www.mods.com.au/budapi/   you would use something like the baWindowList() handler so that you can get and then pass the window handle to scrnXtra3... however, this will also get a screenshot of the chrome of the window too, and not just the web page.

           

          Without knowing more about your project it's difficult to give any advice as to which direction to take.

           

          Edit 2: Lastly, to resize the image down to a thumbnail, I would use another of Valentin's xtras called ImgXtra, found here: http://valentin.dasdeck.com/xtras/img_xtra/ - your best setting would probably be bicubic with a bit of sharpending... brings out a bit more detail in the image after downsampling (downsizing).

          • 2. Re: srceenshots, thumbnails made outside the stage....?
            Chris9351 Community Member

            Thank you so much Josh!

            I will have a look at all the extras in the next time.

            I'm afraid  the scrXtra is absoultely outdatet and will not work....

            Here some more details:

            I will not know if a user has a browser opened or not so I will have to start one. BUT: the user should only see the stage with the thumbs popping up and no other windows or actions.

            Thanks again.

            • 3. Re: srceenshots, thumbnails made outside the stage....?
              SeanWilson MVP

              If you use Tabuleiro's WebXtra in a hidden MIAW, you can grab the .image of the browser window. I don't know about current availability of the xtra.

              • 4. Re: srceenshots, thumbnails made outside the stage....?
                josh_chunick Community Member

                Chris9351 wrote:

                 

                Thank you so much Josh!

                I will have a look at all the extras in the next time.

                I'm afraid  the scrXtra is absoultely outdatet and will not work....

                Here some more details:

                I will not know if a user has a browser opened or not so I will have to start one. BUT: the user should only see the stage with the thumbs popping up and no other windows or actions.

                Thanks again.

                Glad to help! :-)

                 

                However, I have some questions based off your post:

                1. What platforms are you targeting?... both PC and Mac or just PC?

                2. What version of Director are you running? I had no problems getting Valentin's ScrnXtra3 working on D11.5 on Windows 7.

                3. Forgive me, but I'm still not clear about what exactly you're trying to do. You mention that you don't know if the user has a browser open or not, and if not then you will launch a browser... for what purpose?... for the purpose of simply generating thumbs still seems very unclear... the reason why I ask what your app is trying to do will provide me with the info needed to give you the best advice possible. For instance, if you simply need to get a screnshot of a specific webpage then I wouldn't open an external browser because you have very little control over that... the user's browser may be set to open multiple tabs... are you going to need to somehow force their browser to a specific website?... as well, in order to target a browser you will have to know it's name and from that get it's window handle... if you embed the browser into Director this becomes much easier through Sean_Wilson's suggestion or mine using Webkit thru the QtWidgets Xtra... or, if you simply need to get screenshots of a website for thumbs without really needing to show the website or browser then your best solution is probably PhantomJS which can be used completely transparently.

                 

                P.S. If you go with PhantomJS or Webkit thru QtWidgets Xtra and don't know where to start for the code, then let me know and I can provide some.

                • 5. Re: srceenshots, thumbnails made outside the stage....?
                  SeanWilson MVP

                  Josh, I haven't tested it, but are you sure the qtWidgets WebKit object has an .image? I think the sprites play DTS.

                  • 6. Re: srceenshots, thumbnails made outside the stage....?
                    Chris9351 Community Member

                    Thanks Josh and Sean.

                    I use Dir11 and the projector will run on PC's only. It will consist of max. 20 frames (lets say "pages"  >>> users view), and there will be 4-8 links on each page. My idea is to make thumbs instead of simple text links or buttons. When the user clicks on a thumbnail the (external) browser starts and goes to the right page:

                     

                    on mouseup me

                      gotonetPage"http://www.thissite.html","_new"

                    end

                     

                    I could of course prepare the thumbs during authoring but the idea is to do it "live" at runtime.

                    Starting a browser on the stage - mmhh, could be a nice option but this would include resizing it because the stage will not be really big...

                    • 7. Re: srceenshots, thumbnails made outside the stage....?
                      josh_chunick Community Member

                      Using PhantomJS (with the render.js script or render_multi_url.js script in the examples folder), Valentin's Shell Xtra to execute PhantomJS, BuddyAPI to find the user's folder to write the images to, and Valentin's ImgXtra to resize the images is probably the best solution. However, I was testing it out to see how well it would work and the variability in load times of the websites (which you can't really get around) is... well, quite variable. As well, PhantomJS seems to be the best solution for capturing the actual viewport of the browser without the browser chrome (and considering how many toolbars I used to see installed on people's browsers when I did tech support, you really don't want to leave that up to chance!)

                       

                      After you download PhantomJS open render_multi_url.js and edit this line:

                      page.viewportSize = { width: 800, height : 600 };

                      to this:

                      page.viewportSize = { width: 1024, height : 768 };

                      then add this line below it:

                      page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };

                       

                      why am I using those values and adding that line? Because 1024x768 should be the minimum viewable area that most websites are designed for (some at higher resolutions, but tend to also be designed to scale down too). The next line clips the area. If we didn't do that then the height of the screenshot would reflect the height of the website if there's a lot of content. To see what I mean check out css-tricks.com and how long it is.

                       

                      So, now make sure that file is in the same folder as phantomjs.exe

                      The whole phantomjs folder should be within your director project folder.

                       

                      You should have the Shell Xtra installed, so now you can test. In the message window in Director try this:

                        shell_setCurrentDir(the moviepath & "phantomjs\")

                        params = "www.google.ca www.css-tricks.com www.random-roll.com www.adobe.com www.yahoo.com www.arstechnica.com"

                        shell_cmd_thread("phantomjs render_multi_url.js " & params, EMPTY, 30, true, #complete, #stdout)

                       

                      where #complete and #stdout are handlers in a moviescript:

                      on complete (str)

                      put str

                      end

                       

                      on stdout (str)

                      put str

                      end

                       

                      As far as the ImgXtra and BuddyAPI are concerned, well, that's a tad more complicated... I'm doing up an example right now complete with a loading animation (which you can create yourself here: http://ajaxload.info/) that will load the thumbnails as they are generated. The key here is using programmer techniques to create thumbs when things are not happening... in order to mask or mitigate the sometimes long load times. For example, you might start to load the first 'page' of thumbnails during the loading of your application... and subsequent 'pages' thumbs can be loaded while the user is on the first page... as well, you might stick with using the previously generated thumbnails on subsequent launches of the app and then use the shell_cmd_thread() to get and test updated thumbs against the older ones using a simple if statement like this:

                       

                      if thumbOld <> thumbNew then

                      -- swap out the old thumbnail for the new one

                      end if

                      • 8. Re: srceenshots, thumbnails made outside the stage....?
                        josh_chunick Community Member

                        here's a link to a working example I did up: http://www.mediafire.com/?h0ruoe6j6okhd2p

                         

                        *Note: there's a lot that I didn't do, but the core of it is there, and there's things I would do differently, but for the sake of a relatively easy example to follow I think it works well enough. I will also say that there are bugs, but I'll leave those up to the OP to sort out.

                        • 9. Re: srceenshots, thumbnails made outside the stage....?
                          Chris9351 Community Member

                          Thank you so much Josh!

                           

                          I try to get it up and running but have some problems. Shell Xtra, BuddyAPI Xtra and IMGExtra is in the extra /core folder, your sample movie is in the Phantom JS folder. When I start the movie, the following appears in the message window:

                           

                          -- "folder exists: 1"

                          -- "pRegSprites: [(sprite 2), (sprite 3), (sprite 4), (sprite 5), (sprite 6), (sprite 7)]"

                          -- "C:\Users\Christoph\AppData\Roaming\webThumb\to render 'http://www.google.ca'http://www.google.caUnable to render 'http://www.css-tricks.com'http://www.css-tricks.comUnable to render 'http://www.adobe.com'http://www.adobe.comUnable to render 'http://www.yahoo.com'http://www.yahoo.com.png"

                          -- "C:\Users\Christoph\AppData\Roaming\webThumb\to render 'http://www.random-roll.com'http://www.random-roll.com.png"

                          -- "C:\Users\Christoph\AppData\Roaming\webThumb\to render 'http://www.arstechnica.com'http://www.arstechnica.com.png"

                          -- "#complete"

                           

                          On the stage the loading gifs are still visible and no thumbs appear.

                           

                          I guess, I'm still doing something wrong..?

                          • 10. Re: srceenshots, thumbnails made outside the stage....?
                            josh_chunick Community Member

                            That folder is literally the folder I created the example in. I simply zipped it up. All you need to do is downlaod the Xtras it depends on (Valentin's Shell and Img Xtras, and the BuddyAPI Xtra) and put them into your Xtras folder (ie. locate where your copy of Director is located and go into the Configuration folder and then into the Xtras folder and put those Xtras in there). I would have compiled it, however I don't own a copy of BuddyAPI and so cannot run it as a projector b/c more than 2 functions are being used from Buddy... I could have switched BuddyAPI with fileXtra or some other obscure free ones out there, but I didn't.

                            • 11. Re: srceenshots, thumbnails made outside the stage....?
                              Chris9351 Community Member

                              Still not working...

                               

                              Here is a screenshot of the included movie xtras:

                               

                              film_xtras.jpg

                               

                              So the required xtras are there (at the bottom)....

                              I've found the webThumb.cfg - it has 0 kb.

                              What else can I do?

                               

                               

                               

                              I'm a right thinking that I would have to distribute the phantom JS together with the movie? If so, it will  unfortunately be too much (38 MB). However, I would be happy to see it working.

                               

                              Another issue of my idea was not to store anything on users computer. This would mean to create the thumbs directly as cast members. I know, the disadvatage would be to start the play everytime again and again...

                              • 12. Re: srceenshots, thumbnails made outside the stage....?
                                josh_chunick Community Member

                                I'll try to compile it... you mentioned that you're using D11, so maybe it's an issue with the ever-buggy D11... I'm using D11.5... btw, out of curiosity it would look like CoreAudioMix is probably not legit for D11 (?? not sure if it was introduced in D11.5 only).

                                • 13. Re: srceenshots, thumbnails made outside the stage....?
                                  josh_chunick Community Member

                                  Here's the link to the file with both the working copy and the compiled version. The compiled version works flawlessly for me. Let me know how you get along with it.

                                  link: http://www.mediafire.com/?kyn7tx2jgcvvrwa

                                  • 14. Re: srceenshots, thumbnails made outside the stage....?
                                    Chris9351 Community Member

                                    Thanks for the sample.

                                    I have to figure out why it is not working for me. I guess the firewall blocks some activities of the movie. I will give you feedback in the next days for sure.

                                    • 15. Re: srceenshots, thumbnails made outside the stage....?
                                      josh_chunick Community Member

                                      Unless you have a crazy secure firewall it's simply accessing websites

                                      through port 80 using TCP just like any browser would - nothing special....

                                      just allow the program in your firewall settings.

                                       

                                      Josh

                                      • 16. Re: srceenshots, thumbnails made outside the stage....?
                                        Chris9351 Community Member

                                        [back from holidays]

                                        I use commodo security package, so acces to memory etc. was blocked. It works now - thank you again.

                                        Because of the size of phantom JS I have to think in an another direction.

                                         

                                        Chris