Free TeeBoard v0.1.5 beta

DeezjaVu · Sep 9, 2014

AlderaaN said:
Thank you again.

1. Using your instructions, the resulting text that's being passed by TeeBoard seems to align to the top-left corner:
http://i.imgur.com/ix3OdTk.png

Regards,

Add the following to #notification:

HTML:

 position: relative;
 width: 100%;

And the following to #notification-message

HTML:

 width: 100%;

If that doesn't do the trick, time to put those google skills to work.

AlderaaN · Sep 9, 2014

DeezjaVu said:
If that doesn't do the trick, time to put those google skills to work.

Thanks for all your help, DeezjaVu!

Unfortunately, I'm unable to solve this issue.
I've spent the last afternoon looking at more than two dozen "solutions" across the net, to no avail.

I'm confident that if a solution will be found, I (and the rest of the readers interested) will have no problem implementing it in other forms of custom background images/notifications, etc.

If anyone cares to take another look, here's my current teeboard-notifications.html.
I've done my best integrating all of DeezjaVu's recommendations in regards to the text positioning, starting here:

Code:

<html>
<head>
<title>TeeBoard Notifications Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- visit http://www.greensock.com/get-started-js/ for more info -->

<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

<style type="text/css" media="all">
@font-face {
    font-family: 'Rexlia Rg';
    src: url("fonts/rexlia rg.ttf");
}

html, body {
    height: 100%;
    /*background-color: #00FF00;*/
    background-color: rgba(0,255,0,0)!important;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#flashContent {
    width: 200px;
    height: 100px;
}

#notification-msg {
    color: #FFFFFF;
    font-size: 50px;
    /*font-family: Tahoma, Geneva, sans-serif;*/
    font-family: 'Rexlia Rg';
    font-weight: bold;
    /*text-transform: uppercase;*/
    position: absolute;
    top: 33px;
    width: 100%;
}

#msg {
    display: table;
    margin: 0 auto;
}

#notification {
    /*visibility: hidden;*/
    position: relative;
    width: 100%;
}

</style>

<script>

// relative paths to notification images
var imgFollow = "images/notification-bg-follow.png";
var imgSub = "images/notification-bg-sub.png";
var imgDonate = "images/notification-bg-donate.png";

function teeboardNotification(type, msg) {
    //alert("notification: " + type + " - " + msg);
 
    var img = document.getElementById("notification-img");
 
    // set image depending on notification type
    if(type == "follower") {
        img.src = imgFollow;
    }else if(type == "subscriber") {
        img.src = imgSub;
    }else if(type == "donation") {
        img.src = imgDonate;
    }
 
    // set the notification message
    var txt = document.getElementById("msg");
    txt.innerHTML = msg;

    // animate everything onto the screen
    var div = document.getElementById("notification");
    div.style.visibility = "visible";
    TweenLite.killTweensOf(div);
    // tween x position from offscreen (0 - width of image) to 0
    TweenLite.fromTo(div, 1.33, {x:636, y:1420}, {x:636, y:800, ease:Bounce.easeOut, onComplete:hideNotification});
}

function hideNotification() {
    // animate everything back off screen
    var div = document.getElementById("notification");
    // tween x position from 0 to (0 - width of image)
    TweenLite.to(div, 1.33, {x:636, y:1420, delay:6});
}

</script>

</head>
<body>

<!--
Animations should take no longer than 10 seconds (showing + hiding), as notifications are queued,
meaning that if there are 2 new followers, 2 alerts are invoked, 10 seconds apart.
-->

<div id="notification">
  <div id="notification-msg">
        <span id="msg">TEEBOARD JAVASCRIPT NOTIFICATIONS!!</span>
  </div>
  <img id="notification-img" src="images/notification-bg-follow.png" width="648" height="220">
</div>

<div id="flashContent">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="100" id="teeboard-notifications" align="middle">
    <param name="movie" value="teeboard-notifications.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#00ff00" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="transparent" />
    <param name="scale" value="noscale" />
    <param name="menu" value="false" />
    <param name="devicefont" value="false" />
    <param name="salign" value="lt" />
    <param name="allowScriptAccess" value="always" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="200" height="100">
      <param name="movie" value="teeboard-notifications.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#00ff00" />
      <param name="play" value="true" />
      <param name="loop" value="false" />
      <param name="wmode" value="transparent" />
      <param name="scale" value="noscale" />
      <param name="menu" value="false" />
      <param name="devicefont" value="false" />
      <param name="salign" value="lt" />
      <param name="allowScriptAccess" value="always" />
    </object>
    <!--<![endif]-->
  </object>
</div>


</body>
</html>

Regards,

locknlol · Sep 9, 2014

This is such a silly issue; I'm unable to set "SingleProcess" in "Runtime" to true, there is no drop down arrow, and I'm unable to type "True" to replace the defaulted "False"

DeezjaVu · Sep 9, 2014

locknlol said:
This is such a silly issue; I'm unable to set "SingleProcess" in "Runtime" to true, there is no drop down arrow, and I'm unable to type "True" to replace the defaulted "False"

The property has been removed from the latest CLR Browser build, so is no longer required.

DeezjaVu · Sep 9, 2014

AlderaaN said:
Thanks for all your help, DeezjaVu!

Unfortunately, I'm unable to solve this issue.
I've spent the last afternoon looking at more than two dozen "solutions" across the net, to no avail.

I'm confident that if a solution will be found, I (and the rest of the readers interested) will have no problem implementing it in other forms of custom background images/notifications, etc.

Regards,

I have it working with centered text, so the sample code I provided should do the trick really.

I've attached it to this message. I added coloured borders to each individual element so you can clearly see what does what. Simply remove or comment them out once you had a look. Also uncomment the "visibility:hidden" property once you have had a look at it all.

CSS is a PITA and I'd rather not have to deal with it.. ever. Silly things like centering text is like rocket science, when it shouldn't be.

locknlol · Sep 9, 2014

DeezjaVu said:
The property has been removed from the latest CLR Browser build, so is no longer required.

Cool thanks!

AlderaaN · Sep 10, 2014

DeezjaVu said:
I have it working with centered text, so the sample code I provided should do the trick really.

I've attached it to this message. I added coloured borders to each individual element so you can clearly see what does what. Simply remove or comment them out once you had a look. Also uncomment the "visibility:hidden" property once you have had a look at it all.

CSS is a PITA and I'd rather not have to deal with it.. ever. Silly things like centering text is like rocket science, when it shouldn't be.

Man, thank you for all your help, DeezjaVu, it finally works!

And I see that you've done something really cool with your latest code:
It will actually allow other streamers, regardless of their streaming resolution to enjoy this custom [centered ;)] notification. Great!

Donated.

Regards,

TheTotallyBlue · Sep 13, 2014

Thanks for the awesome tool for twitch, although I have one problem. I can't load any videos using the media tool. I'm using .flv files I recorded in OBS and CLR Browser plug in is up to date. The screen either goes black or it says the plug in failed to load. Please help, thanks.

DeezjaVu · Sep 13, 2014

TheTotallyBlue said:
Thanks for the awesome tool for twitch, although I have one problem. I can't load any videos using the media tool. I'm using .flv files I recorded in OBS and CLR Browser plug in is up to date. The screen either goes black or it says the plug in failed to load. Please help, thanks.

Does the preview work in TeeBoard itself (click the eye-icon at the top right of the Media Widget tab)?

the plug in failed to load

Where does it say that?

Architect_Gaming · Sep 13, 2014

Hi there, I've been using TeeBoard a lot and am loving it, however it will randomly close sometimes, and when I try to relaunch the program it won't open. I've tried running as administrator, going to the file location and hitting the .exe, even running it from the start menu (Windows 8). Only restarting my computer will get it to run again, I even check to make sure it's not still running in my task manager or processes. Do you know why this will happen? It's very annoying when I'm preparing to stream and I have to restart and bring everything back up again.

Thanks for the help!

DeezjaVu · Sep 13, 2014

Architect_Gaming said:
Hi there, I've been using TeeBoard a lot and am loving it, however it will randomly close sometimes, and when I try to relaunch the program it won't open. I've tried running as administrator, going to the file location and hitting the .exe, even running it from the start menu (Windows 8). Only restarting my computer will get it to run again, I even check to make sure it's not still running in my task manager or processes. Do you know why this will happen? It's very annoying when I'm preparing to stream and I have to restart and bring everything back up again.

Thanks for the help!

That's a new one. Probably best to contact me and we'll have a look via Skype.
https://sites.google.com/site/deezja/contact

Can't really think of anything that might cause this.

wbakunis · Sep 13, 2014

Would it be at all possible to at the live twitch chat to the teeboard client itself? I'm somewhat getting tired of having to pop the chat out of my dashboard everytime I stream. I'd like to just start up teeboard and be able to see my chat.

DeezjaVu · Sep 14, 2014

wbakunis said:
Would it be at all possible to at the live twitch chat to the teeboard client itself? I'm somewhat getting tired of having to pop the chat out of my dashboard everytime I stream. I'd like to just start up teeboard and be able to see my chat.

Look into using an IRC client:
https://sites.google.com/site/deezja/news/twitch-irc

Fatsuno · Sep 18, 2014

Hey there, I'm trying to set up a custom set of notifications and I'm running into a minor problem. The Follow and Donation notifications are fine, but I want to use a specific .GIF as my Subscriber notification. I've gotten it to accept the image but the sizing is completely wrong. Is there a way for me to resize only the Subscriber notification within the .html file and not effect the sizes of the Donation and Follower notifications.

DeezjaVu · Sep 18, 2014

Fatsuno said:
Hey there, I'm trying to set up a custom set of notifications and I'm running into a minor problem. The Follow and Donation notifications are fine, but I want to use a specific .GIF as my Subscriber notification. I've gotten it to accept the image but the sizing is completely wrong. Is there a way for me to resize only the Subscriber notification within the .html file and not effect the sizes of the Donation and Follower notifications.

Yeah there is. You can check for the type of notification and perform a different action for each. Right now, by default, it already does that, but only to swap to the correct image. The animation - TweenLite.fromTo() - is the same for each notification type.
So what you'd need to do is move the animation call and sizing of the image inside an if() statement.

Some pseudo code:

HTML:

function teeboardNotification(type, msg) {
    //alert("notification: " + type + " - " + msg);
   
    var img = document.getElementById("notification-img");
   
    // set image depending on notification type
    if(type == "follower") {
        img.src = imgFollow;
    }else if(type == "subscriber") {
        img.src = imgSub;
    }else if(type == "donation") {
        img.src = imgDonate;
    }
   
    // set the notification message
    var txt = document.getElementById("notification-msg");
    txt.innerHTML = msg;
   
    // animate everything onto the screen
    var div = document.getElementById("notification");
    div.style.visibility = "visible";
    TweenLite.killTweensOf(div);

    if(type == "follower" || type == "donation") {
        // set size for follower or donation image
        img.width = "920";
        img.height = "250";
        // tween x position from offscreen (0 - width of image) to 0
        TweenLite.fromTo(div, 0.6, {x:-920}, {x:0, onComplete:hideNotification});
    }else {
        // set size for subscriber image
        img.width = "500";
        img.width = "300";
        // tween x position from offscreen (0 - width of image) to 0
        TweenLite.fromTo(div, 0.6, {x:-500}, {x:0, onComplete:hideSubNotification});
    }
}

You'll then also need 2 separate "hide" animations. As you can see in the code above I specified a different "onCompete" call for each animation. They'd look something like this:

HTML:

function hideNotification() {
    // animate everything back off screen
    var div = document.getElementById("notification");
    // tween x position from 0 to (0 - width of image)
    TweenLite.to(div, 0.6, {x:-920, delay:6});
}


function hideSubNotification() {
    // animate everything back off screen
    var div = document.getElementById("notification");
    // tween x position from 0 to (0 - width of image)
    TweenLite.to(div, 0.6, {x:-500, delay:6});
}

DeezjaVu · Sep 20, 2014

DeezjaVu updated TeeBoard with a new update entry:

Update v1.1.5 beta

TeeBoard has been updated to v0.1.5
Check the patch notes for more info.
Patch notes: https://docs.google.com/document/d/1fooS5LuGtDsDWQC271UMulU7jHINgPq9pRnMrnaB-VM/pub

If you already have TeeBoard installed, you will be notified of the update the next time you start the app.

In case TeeBoard doesn't automatically (re)start after the update, check the Task Manager and kill the process, then restart TeeBoard.

Read the rest of this update entry...

Bojan1983 · Sep 20, 2014

Hi, i ve been following teeboard project last few weeks and i watched all of your videos...

Today i finally decided to try it.

Having problem atm with editing chat settings - http://puu.sh/bGtTz/cba463b828.png . Whatever I do it stays default. (i did apply, reset, restart and everything i could try, nothing worked)

what did i miss?

DeezjaVu · Sep 20, 2014

Bojan1983 said:
Hi, i ve been following teeboard project last few weeks and i watched all of your videos...

Today i finally decided to try it.

Having problem atm with editing chat settings - http://puu.sh/bGtTz/cba463b828.png . Whatever I do it stays default. (i did apply, reset, restart and everything i could try, nothing worked)

what did i miss?

Check if the following files exist:

[USER DOCUMENTS]\TeeBoard\widgets\chat\config.xml
[USER DOCUMENTS]\TeeBoard\widgets\chat\teeboard-chat.xml

If not, delete the "widgets" folder (in your user documents) and restart TeeBoard.

[USER DOCUMENTS]\TeeBoard\widgets

Bojan1983 · Sep 20, 2014

Yeap, that was the problem! Thanks!

sickmind33 · Sep 20, 2014

IDK if it's me, but I just updated Adobe Air AND TeeBoard, now TeeBoard won't launch

Free TeeBoard v0.1.5 beta

Member

Member

New Member

Member

Member

Attachments

New Member

Member

New Member

Member

New Member

Member

New Member

Member

New Member

Member

Member

New Member

Member

New Member

Member