New post
0

BrightAuthor - Welcome screen with customers logo

Avatar
sboesch
None
Follow

Hi

I need to create a welcome screen with

  • a background image
  • some static text (eg "Welcome to XYZ")
  • some dynamic text (the names of the awaited persons)
  • the logo of the awaited persons company

In my first attempt, I created a video/image zone with live text content + background image.
When I added another image zone in the upper right corner (for holding the transparent and/or non-fitting customer logo) the logo had a black background which looks absolutely ridiculous.

Is there any solution to this issue?

For now, I created a complete photoshop template which contains all contents. This works, but our customer has claimed that it's too complicated to use two different programs for such a simple, daily occurring, task. And I have to admit, he's totally right.

Date Votes

7 comments

  • 0
    Avatar
    ^UD\_$

    That rings a bell.

    We had that issue before, and found a workaround by placing two single pixels, that are almost transparent. One at top left corner, and other at bottom right corner of the overlaying PNG image.

    The two pixels should be transparent enough to not be noticed on the screen, but still not fully transparent in order to get rid of the black bars.

    Seems like a bug.

    BTW, have you tried building your screen as HTML?

     

  • 0
    Avatar
    sboesch

    Thank you for your response.
    I'll give it a try tomorrow.

    But unfortunately I can say in advance that this won't give the smooth workflow expected by my client.
    It's not a huge problem for me to get it working, but I want to provide my client (or rather his secretary) the best user experience possible.

    What I mean by that is: Drag the logo into BrightAuthor, edit the text, save as new presentation, schedule for tomorrow 3 p.m.

    What do you mean with building my screen as HTML?
    I guess this won't solve my workflow problem?

    I already thought about building a web-based application which takes care off the whole presentation and scheduling mechanism and makes BrightAuthor obsolete but actually thats way too much effort :)

  • 0
    Avatar
    ^UD\_$

    If web-based application is an option, then look at http://new.monitorsanywhere.com/online-monitors-anywhere/

    You may be able to quickly provide a solution for your client, so they never have to interact with BrightAuthor, while still using BrightSign players. Their subscription is reasonably priced.

    The content would be ingested by the BrightSign player, as a URL.

  • 0
    Avatar
    Russell Sulley

    To put my companies logo on it, I ended up doing a html page,  with a png logo ( with transparent background )   and i also added a few css effects to make the image appear as if its rotating. 

     

    <style type="text/css">

    /* WebKit and Opera browsers */
    @-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform: rotateY(-360deg); }
    }

    /* all other browsers */
    @keyframes spinner {
    from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    }
    to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
    }
    }

    </style>
    <style type="text/css">

    #stage {
    margin: 1em auto;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
    }

    </style>
    <style type="text/css">

    #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 16s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    }

    #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    }

    </style>
    <div id="stage" style="background: rgba(0,0,0,0);">
    <p id="spinner" style="background: rgba(0,0,0,0); text-align: center; color: #fff;"><img src="teeth-first-logo.png"></p>
    </div>

     

    i called this logo.html ,  added a html zone, and put it there...  

  • 0
    Avatar
    Russell Sulley

    and by html zone, i meant image zone with a html file loaded.

     

  • 0
    Avatar
    ^UD\_$

    Good Stuff!

    Thanks for sharing it here.

    So with HTML you are not getting the black bars where the image is transparent. Correct?

  • 0
    Avatar
    Russell Sulley

    Nope, works for me fully transparent background area from image.

Please sign in to leave a comment.