Work hack: use Google Docs to create an automatically updating TV kiosk presentation

At the co-working space my startup works from, there’s a large-screen TV in the open communal area that usually displays a looping kiosk presentation with announcements, event schedules and people’s names and photos running a PowerPoint presentation that had to be manually edited, transferred to the TV computer, opened and played.

In the spirit of startup hacks, I thought there had to be a smarter/faster/easier way.

After a bit of research and testing, Google Docs Presentations had almost exactly what I wanted – simple presentation editing tools, multiple people could edit the document together, changes are cloud-based and can be viewed full-screen with just a simple browser.

However, it was missing the ability to be automatically updated while being displayed, which is where I hacked together a quick HTML solution.

Using the native iFrame embed of Google Docs, I added a bit of JavaScript that forcefully reloaded the iFrame URL every few minutes, which did not require the entire page to be refreshed which means it can remain a browser’s fullscreen mode.

You can see a live sample here http://jsbin.com/ipilex/1.

One caveat is that Google Docs Presentations are locked to 4:3 aspect ratio, so it can’t properly fill a 16:9 or 16:10 display.

Although Microsoft SkyDrive’s PowerPoint Web App can also be embedded, it does not allow for automatically looping presentation which does not fit the purpose of a kiosk display.

I hope this helps someone out there who may have a similar TV kiosk set up.

30 insightful thoughts

  1. Now just use some fancy CSS to trim off the bottom toolbar and you have a perfect display!

    But honestly, this is a very clever way of doing something like this. Good job!
    I’m surprised Drive presentations don’t auto update like documents do.. though for something like this it could be a little distracting.

    1. Unfortunately because the toolbar is inside the iFrame, XSS and CSS can’t affect it 🙁

      What I guess you could do is put in an artificial element overlapping it, but that’s not a very elegant solution.

      1. Well, it’d look a little more seamless than having a Drive bar along the bottom sticking out like a sore thumb. Just covering that with a black bar that fits with the rest of the background would work.

        If only CSS/HTML measurements could perform basic mathematics, then you could just set the height of the iFrame to 100% + 29px and hide the overflow. Too complicated for CSS it seems, although i’m sure it’d be possible with a short snippet of JavaScript.

      2. If you really want to remove that toolbar, you can inject your own CSS via web browser

        [code]
        .punch-viewer-nav { display:none !important; }
        [/code]

        #JustSaying

      3. .container {
        height: 1920px;
        width: 1080px;
        overflow: hidden;
        }

        .container iframe {
        height: calc(100% + 28px);
        width: 100% !important;
        }

  2. For the record regarding Microsoft’s SkyDrive Powerpoint – if you are refreshing a presentation every few minutes why not time the refresh for the length of the presentation. This would allow you to serve a fresh presentation every time the presentation was shown. Just a thought.

    1. That would mean you can never change the duration of the PowerPoint presentation, since you’d then need to update/refresh the host page JavaScript as well.

  3. You could have a bunch of text written by people to a shared document (Google docs?) that is dynamically loaded by a JS page which uses impress js to show the data 🙂 It’d take an hour to write but would fill your screen.

    Of course, the definition of hacks is pretty self explanatory thereby concluding that the 16:9 vs 4:3 aspect ration issue isn’t a big deal. If it is, this would work 🙂

    1. can you please help me?
      hello to all.
      i am using an androied dongel.

      can that work also?
      i made a regolar slideshow, but i dont know how to make it.
      will ani one will be willing to get my slide show and help me??

  4. De huidige versie ondersteunt browsen documenten voor de gebruikers (geen mappen, hoewel) en het niet, op dit moment, ondersteunen het bijwerken, het maken, verplaatsen of vernielen documenten. Er is geen binding tussen gebruikers van de site en Google-accounts. U kunt een lijst van de google documenten voor de hele site en / of een lijst voor elke OG groep.
    Het primaire doel van deze module is een manier voor mensen om hun document lijst zichtbaar op de site hebben, met snelkoppelingen voor het bewerken en ze te downloaden (als ze kunnen) aanbieden. De lijst wordt gesorteerd op de laatst bijgewerkte datum.

    De module iantegreert OG zodat elke groep een specifieke Google-account gedefinieerd om documenten bladeren van kunnen hebben. Elke groep met een gekoppelde Google-account zal de sport een nieuwe “Google Docs” tabblad.

  5. Ok… where you use this code… entire new html page or you embedded in your presentation…

    1. hello
      i am using an androied dongel.

      can that work also?
      i made a regolar slideshow, but i dont know how to make it.
      will ani one will be willing to get my slide show and help me??

    2. I tried using this code; inserting my URL of Google Slide show and saving this html file and placing it on a webserver that I could aim my browser at… but I just get a black screen. The live sample “You can see a live sample here http://jsbin.com/ipilex/1.” worked fine… but my html file on my webserver pointed to by my browser failed? yet the google side URL that is inside of it is fine to use by itself. can anyone help me correct my issue?

  6. Any one Please like I want to Access the Prev/Next button Event in google Slides Toolbar using Javascript/C#..Please help me I’m stuck in this situation since the last 4 days

    1. Hey! did you find anyway to access buttons? I’m working on it and haven’t found anything.

  7. hello to all.
    i am using an androied dongel.

    can that work also?
    i made a regolar slideshow, but i dont know how to make it.
    will ani one will be willing to get my slide show and help me??

  8. hay again.hello to all.
    i am using an androied dongel.

    can that work also?
    i made a google slideshow, but i dont know how to make it.
    will ani one will be willing to get my slide show and help me??

  9. I’m having trouble getting this to work I changed the code to include my google doc link and when I open the html file in my web browser I can see the slides document however when I put the document in present mode the screen just goes black.

  10. put the iframe in a div and …

    .container {
    height: 1920px;
    width: 1080px;
    overflow: hidden;
    }

    .container iframe {
    height: calc(100% + 28px);
    width: 100% !important;
    }

Comments are closed.