Add a Fullscreen Toggle to a Dashboard (Revised)

Apr 19th, 2011
by Joshua Tapley.

With an embeded .swf file and some simple edits to your html, you can add a fullscreen toggle to your dashboard.

Tested in the latest versions of IE, Firefox, Chrome and Safari (Button does not return from fullscreen, use Escape Key)

Recently I have found the need for both fixed size and fullscreen versions of my dashboards for different display types (conference screens vs. monitors for example). In researching fullscreen Flash buttons, I have located the following tutorial, and with a few edits, created a button that works in Xcelsius and is downloadable at the bottom of this post:

Flash Tutorial Here

By embedding this Flash file as an image, and adding the following line to the HTML code, a dashboard embedded within an HTML document may toggle between fullscreen.

Please download the attached files and let me know if there are any ways to improve this functionality!

Plus a new custom button from Heath (poster below): http://data-ink.com/wp-content/uploads/2011/09/heath_fullscreen1.zip

Josh Tapley
josh@data-ink.com

Related Posts:

Posted in: Tricks.

←
→

  • Josh, this is a terrific idea! Very cool and useful. The only issue i see with this is that when you let the user adjust the embedded swf object size, you take on some risk that the components in your dashboard may degrade in quality. Fonts may not look as good, images may reduce quality and components may overlap, or scroll in ways you did not predict during design. I had a similar issue and resolved it by using some simple JS to allow users to control the SWF size, not full control, but the ability to select from 3 predefined sizes (100%, 125%, 150%). This gives you some more control as the designer. If you are interested, you can find more details here: http://www.bihappyblog.com/2011/01/28/control-the-size-of-your-xcelsius-dashboard-in-infoview/
    Thanks again for this post! – Ron

  • Heath

    I can see this being very useful in most of my dashboards.

    One question. What does the button_blu.swf have in it that changes the flash settings?

  • Joshua Tapley

    This is the key actionscript in the button swf that drives the action. Check out the Flash tutorial that I linked to for the full code. I removed the canvas repositioning from the button because it doesn’t work properly embedded in an Xcelsius dashboard.

    7.function toggleFullScreen(){
    8. //if normal size, go to fullscreen, else go to normal size
    9. if(Stage[“displayState”]==”normal”){
    10. Stage[“displayState”]=”fullScreen”;
    11. }else{
    12. Stage[“displayState”]=”normal”;
    13. }
    14.}

    – Josh

    • Heath

      Josh, thank you for your quick response. Well me being a self taught xcelsius hack, I am a little lost. I am java programmer that tries to create dashboards also. Maybe you can point me in the right direction. what is a key actionscript and how do you embed it into a xcelsius dashboard. Was the button swf created in xcelsius or adobe flash pro?

      if the button was not created in xcelsius that makes a little more sense.

      Thanks again for your help

      Heath

      • Joshua Tapley

        The button was made in flash. In order to use it, you can just down the file and embed as an image. You then make the basic changes to the HTML.

        If you want to create your own graphic, you can just put it behind the swf layer and make the swf invisible. It just won’t be able to use any mouseover effects.

        Please let me know if you have any other questions!

  • Daniel Cvetkovic

    Hi, is there any chance I could get a copy of the source FLA file? The button is a little big for my use, re-sizeing the component in xcelsius doesn’t seem to work (well it does initially but then converts back to full size making only part of the image visable). I would also like to modify the graphics.

    Cheers
    Daniel Cvetkovic

  • Joshua Tapley

    Daniel,

    While I didn’t keep track of my Flash files well after my trial version of the program ran out, Heath (poster above) did a great job improving the button.

    His version knows if your already in fullscreen or not and his .swf and .fla files can be downloaded here: http://www.data-ink.com/downloads/heath_fullscreen.zip

    As an alternative, I often use the flash button with 100% (scaled) over an existing image or stock Xcelsius button to get the same effect with a look fitting to that particular dashboard. The only limitation here is that the component underneath doesn’t react to the mouseover.

    – Josh

    • Hi, very good job!! I was looking the FLA file but the link provided for heath_fullscreen.zip its broken, can you please check that or tell me other way to get it?

      Thanks!

  • Nice tip for xcelsius dashboard makers.

  • Joshua Tapley

    The link in the original post for Heath’s fullscreen button has been updated!

    Best,
    Josh

  • Mailtagu

    Hi Josh,
    I saw your post, it will be if you can have a step by step list to show the dashboard in full screen. I am missing some of the steps mentioned above.
    Also, if you have any ideas to post to show the dashboard on a 46 LCD screen without any menu bar, the dashboard canvas should occupy the whole tv screen.

    Thanks,
    Tagu
     

    • Preeti

      Hi Mailtagu,
      Were you able to simulate what Josh created?I am still not able to accomplish it.
      Can you share with me the step by step process.

      Regards,
      Preeti

  • Chris

    So funny: I was going to write that there was a beautiful implementation of this trick on Data-ink’s many examples when I noticed you (Josh) wrote the article. Great tip: thanks again for sharing.

  • Nim

    Thanks! This worked like a charm

    • Nyyarko

      can u help me with the steps, cant get it to work. Thanks

  • Dolaonline

    Tried several times to reproduce this example but still lost. Seems feasible but could you please post steps to accomplish a full screen dashboard?>

  • sandeep s

    Hi Josh
    It works when exported to swf. But it does not work after publishing to the server.
    Thanks
    Sandeep