Skip navigation
Chris9351
Currently Being Moderated

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

Mar 18, 2012 10:29 AM

Tags: #lingo #stage #thumbnail #screenshot

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?

 
Replies
  • Currently Being Moderated
    Mar 19, 2012 6:36 AM   in reply to Chris9351

    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).

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 2:41 AM   in reply to Chris9351

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 7:38 AM   in reply to Chris9351

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2012 9:06 PM   in reply to josh_chunick

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2012 7:32 AM   in reply to Chris9351

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 7:42 AM   in reply to josh_chunick

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 9:05 AM   in reply to Chris9351

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 10:46 AM   in reply to Chris9351

    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).

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 12:29 PM   in reply to josh_chunick

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2012 4:13 AM   in reply to Chris9351

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points