Free TeeBoard v0.1.5 beta

[DeezjaVu]

I completely agree with your stance on this...

However, wouldn't it be possible to embed the twitch chat? (not sure if Air is capable of that)

It was capable of that about 2 years ago. When I was working on another tool (TMSViewer) it had the twitch chat embedded in an HTML component (which is part of the AIR framework) and worked fine. The day I released TMSViewer (yes the exact same day) Twitch broke chat and it hasn't worked since, so I had to remove it :(.
The main problem is Adobe AIR, which uses a modified webkit engine to render html. Unfortunately Adobe never bothered to keep the engine updated and it's therefor outdated and has problems displaying the latest and greatest (html5, etc..). Some things work, others don't, so it's hit and miss. And like with the Twitch chat, what once worked may not in the future.

So with TeeBoard I never even bothered trying.

Adobe is now - finally - looking into updating the WebKit engine or replacing it with something else (StageWebView), but this may take a while (if it happens at all).
https://forums.adobe.com/message/6508322

 

[Warchamp7]

Most donation services don't include it in their API.

Ah, okay. Would it ever be in the plans to have Teeboard keep track itself?

 

[DeezjaVu]

Ah, okay. Would it ever be in the plans to have Teeboard keep track itself?

Haven't decided on that yet. Been meaning to ask the different services to actually add it to their API data.

The problem with doing this in TeeBoard is that those services only send a limited number of donations (5 or 10). So by the time a user adds the service to TeeBoard there may already be more donations than what their API returns and the top donation may not be in that limited list.

 

[RoyalSandwitch]

Countdown does not works...this happens if I open HTML file in Browser

 

[DeezjaVu]

Countdown does not works...this happens if I open HTML file in Browser

And you're opening that in the browser because?
Add the html file in OBS via the CLR Browser plugin and set the width to 400, height to 100.

 

[RoyalSandwitch]

I did but then nothing appears...all other widgets look normal in browser and work in OBS so thats why I mention that

 

[DeezjaVu]

I did but then nothing appears...all other widgets look normal in browser and work in OBS so thats why I mention that

Forget the browser. If it doesn't work when added to OBS via the CLR Browser plugin, read the documentation (F1) under widgets.

 

[PopsRocker]

I'm loving this tool, the only thing that is holding me back from using it is the donation alerts. Is it possible to add support for a custom notification system? I'm looking at using this - http://bobdev-fsnconcept.rhcloud.com/ - which gives the streamer complete control over their notifications instead of relying on a third party system. It's more complicated for a new user but I'm a web developer and understand it completely.

Thank you and looking forward to using TeeBoard

 

[DeezjaVu]

I'm loving this tool, the only thing that is holding me back from using it is the donation alerts. Is it possible to add support for a custom notification system? I'm looking at using this - http://bobdev-fsnconcept.rhcloud.com/ - which gives the streamer complete control over their notifications instead of relying on a third party system. It's more complicated for a new user but I'm a web developer and understand it completely.

Thank you and looking forward to using TeeBoard

Here you go: https://www.youtube.com/watch?v=QYizkLzC8Po&list=PLLDriMXG9yePgV8E0aFE_xVR_VUOaW554&index=7
You can access the videos from within TeeBoard by hitting F2.

 

[Fatsuno]

I absolutely love this tool. It's helped me improve and grow my stream to the point that I'm now partnered with twitch! I wouldn't have been able to build the excitement from viewers without the features that Teeboard offers.

Only confusing issue that I have is that sometimes when I have a donation come in, Teeboard will play the notification a second time. It doesn't show twice in the recent donations listing, nor on my StreamTip history it just plays the notification sound and pops up a second time shortly after the donation first comes in. A second much smaller complaint is that there seems to be a lengthy delay after someone subscribes to the channel before Teeboard picks it up and plays the notification.

Thank you again for Teeboard, it's absolutely amazing to use.

 

[DeezjaVu]

I absolutely love this tool. It's helped me improve and grow my stream to the point that I'm now partnered with twitch! I wouldn't have been able to build the excitement from viewers without the features that Teeboard offers.

Glad to hear and gratz on the partnership.

Only confusing issue that I have is that sometimes when I have a donation come in, Teeboard will play the notification a second time. It doesn't show twice in the recent donations listing, nor on my StreamTip history it just plays the notification sound and pops up a second time shortly after the donation first comes in.

Sounds like a bug. I'll have a look.

A second much smaller complaint is that there seems to be a lengthy delay after someone subscribes to the channel before Teeboard picks it up and plays the notification.

I'll be reviewing the timers for the next update. Each notification type is on a different timer to avoid collision. Followers uses the shortest timer, subs the longest one. I know I adjusted the one for the Followers, mostly to see how it goes. I'll be adjusting the others as well.

Thank you again for Teeboard, it's absolutely amazing to use.

You're welcome :)

 

[AlderaaN]

I'm loving this tool, the only thing that is holding me back from using it is the donation alerts. Is it possible to add support for a custom notification system?

You can access the videos from within TeeBoard by hitting F2.

Hello DeezjaVu.

First, I'd like to say thank you for sharing your program with all of us. Its feature-set looks incredible.

Second:
At its current state, I find it very time consuming to create a custom Follower/Subscriber/Donator notification that includes a custom background image (GIF/PNG/JPG).
Would it be possible for you to implement this option in its GUI instead or in conjunction to raw HTML/CSS editing?

Regards,
//subscribed to thread.

 

[DeezjaVu]

Hello DeezjaVu.

First, I'd like to say thank you for sharing your program with all of us. Its feature-set looks incredible.

You're welcome.

Second:
At its current state, I find it very time consuming to create a custom Follower/Subscriber/Donator notification that includes a custom background image (GIF/PNG/JPG).

Then imagine what it would take to implement a GUI for it :)

Would it be possible for you to implement this option in its GUI instead or in conjunction to raw HTML/CSS editing?

It's something I have briefly given some thought, but if you really think about it, it would almost be like developing Adobe Dreamweaver (well not really, but you get the picture). The whole html/javascript version was an afterthought to be honest and is mearly there because people would then be able to use images rather than getting stuck with the default widget. Maybe, and that's a big maybe, at some point I'll add a simple basic GUI, but nothing planned atm.

Personally, I'd rather include more html/javascript samples for people to use and I encourage people to share their own customizations.

 

[AlderaaN]

You're welcome.


Maybe, and that's a big maybe, at some point I'll add a simple basic GUI, but nothing planned atm.

I see.

Thank you for the prompt and insightful reply.

I hope you'll reconsider and take another look into it.
This would basically nullify the need to use external notification tools (which are problematic when it comes to Single-Monitor setups like the one I'm running here).

Also, it will further help cement TeaBoard as the definitive Swiss Army Knife for Streamers :)

Regards,

 

[DeezjaVu]

I see.

Thank you for the prompt and insightful reply.

I hope you'll reconsider and take another look into it.
This would basically nullify the need to use external notification tools (which are problematic when it comes to Single-Monitor setups like the one I'm running here).

IMO, there already is no need to use external tools. The Flash based widget is ready to go out of the box. So is the html/javascript version.

If you want to use your own image(s), simply replace them in the "images" folder and you're again good to go. This is also where most other tools end, which is understandable as it's nearly impossible to do anything more (image and some basic css).

TeeBoard's html/javascript widget however can be customized any way you want, especially since it includes a very powerful animation engine, but yes, it requires some basic skill/knowledge and time to do so.

On top of all that, you can create your own custom Flash widget and hook it up with TeeBoard using the provided Flash Library (swc). I admit, this isn't very well documented yet, but I plan on doing a video explaining/showing how to do that.

 

[AlderaaN]

Hello again,

Following DeezjaVu's Custom Notification Part 1 video, I'm trying to set up a custom notification and would very much appreciate assistance with three issues:

1. Have the custom notification utilize a custom font, using the CSS @font-face command.
Here's the code from my teeboard-notifications.html:

#notification-msg @font-face {
   color: #FFFFFF;
   font-size: 50px;
   font-family: 'Rexlia Rg';
   src: local("fonts/rexlia rg.ttf") format('truetype');
   font-weight: bold;
   /*text-transform: uppercase;*/
   position: relative;
   top: 90px;
   left: 40px;
}

The issue is that the text doesn't appear using the custom font which was specified.

Some more info:

A. Regarding the "src local...", I have no idea if it searches my Windows Font's folder or the relative path to my custom notifications widget, so I've copied it there as well, to no avail:

c:\Users\USERNAME\Documents\TeeBoard\mywidgest\obs-js\fonts\rexlia rg.ttf

B. The font includes a white space in its name, so following the guidelines outlined here, I've encased its "scr: local..." name with quotes, didn't help either.

C. I've attached the Font file to this post, it's free for commercial use.​

2. Have the custom notification reveal itself from the bottom of the screen, stop somewhere at the center of the screen and then hide itself back at the bottom.
Here's the code from my teeboard-notifications.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);
   // tween x position from offscreen (0 - width of image) to 0
   TweenLite.fromTo(div, 0.6, {y:1420}, {y:500, 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, 0.6, {y:-280, delay:6});
}

The text appears from the bottom and stops where I want it, but at the end it hides itself by moving to top instead of moving back to the bottom.

3. Custom notification's position on screen:

A. My screen resolution is 1920x1200.
B. The custom background image dimensions which I use is 648x220.​

What should be added to the code in section 2, so that I can control its position on the X axis throughout the animation process?
EDIT - Solved #3:

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);
   // tween x position from offscreen (0 - width of image) to 0
   TweenLite.fromTo(div, 0.6, {x:636, y:1420}, {x:636, y:400, 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, 0.6, {x:636, y:1420, delay:6});
}

Again, help is appreciated!

Regards,

 

[DeezjaVu]

Hello again,

Following DeezjaVu's Custom Notification Part 1 video, I'm trying to set up a custom notification and would very much appreciate assistance with three issues:

1. Have the custom notification utilize a custom font, using the CSS @font-face command.
The issue is that the text doesn't appear using the custom font which was specified.

2. Have the custom notification reveal itself from the bottom of the screen, stop somewhere at the center of the screen and then hide itself back at the bottom.
The text appears from the bottom and stops where I want it, but at the end it hides itself by moving to top instead of moving back to the bottom.

3. Custom notification's position on screen:

A. My screen resolution is 1920x1200.
B. The custom background image dimensions which I use is 648x220.​

What should be added to the code in section 2, so that I can control its position on the X axis throughout the animation process?

Again, help is appreciated!

Regards,

@font-face doesn't work like that. You add it as a separate element in CSS and then refer to it in other CSS elements.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

In your custom notification folder (the one that contains the html file), create a new folder and name it "fonts". Place your font in there.
Use the code from the pastebin.

http://pastebin.com/yta4fy1R

Note that I changed the easing type to Elastic.easeOut as I like that one more for animating from bottom to top. Elastic easing does require a bit more time for it to look good, so I increased the slide in animation to 2 seconds. The slide out animation is done in the "hideNotification" function, so that's where you tell TweenLite where the notification should go to, in your case 1420 pixels on the y-axis.

TweenLite.to(div, 0.6, {y:1420, delay:5});

 

[AlderaaN]

Wonderful!

Thank you very much DeezjaVu, for the time you've taken to explain all of this here!

This is how my merged code looks now, and it all works:

<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: 43px;
    /*font-family: Tahoma, Geneva, sans-serif;*/
    font-family: 'Rexlia Rg';
    font-weight: bold;
    /*text-transform: uppercase;*/
    position: relative;
    top: 94px;
    left: 90px;
}

#notification {
    /*visibility: hidden;*/
}

</style>

<script>

// relative paths to notification images
var imgFollow = "images/notification-bg-follow-custom1-transparent.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("notification-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">
        TEEBOARD JAVASCRIPT NOTIFICATIONS!!
   </div>
  <img id="notification-img" src="images/notification-bg-follow-custom1-transparent.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>

Question please:
Kindly have a look at this image: http://i.imgur.com/Lnoq6oP.png
I've captured it (PrtScn) from OBS' Full-screen Preview Mode.

How do I set it, so that the %name% (BluePho3nix in this case) which is passed from TeeBoard, will always be centered on the image's X axis (again, in this case it's 648x220 pixels) ?

Regards,

 

[DeezjaVu]

Wonderful!

Thank you very much DeezjaVu, for the time you've taken to explain all of this here!

Question please:
Kindly have a look at this image: http://i.imgur.com/Lnoq6oP.png
I've captured it (PrtScn) from OBS' Full-screen Preview Mode.

How do I set it, so that the %name% (BluePho3nix in this case) which is passed from TeeBoard, will always be centered on the image's X axis (again, in this case it's 648x220 pixels) ?

Regards,

Wrap the text in a <span> tag and position the span tag within the div via CSS.

<span id="msg">TEEBOARD JAVASCRIPT NOTIFICATIONS!!</span>

Then use the following CSS:

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

You may have to add "position: absolute;" to the #notification-msg style.

And because the text is now inside a different element (span instead of div), you'll need to change the javascript to match that.

// set the notification message
var txt = document.getElementById("msg");
txt.innerHTML = msg;

 

[AlderaaN]

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

• The Y axis margin I can probably solve by entering:
  

  top: XXpx;

  In the #notification-msg section.
  
  
• But again, I have no idea how to set it so the text is always centered in relation to the X axis of the background image.

2. I think I'm missing something that defines the proportions (width, and perhaps height) of the background image which I'm using, which can then be passed on to format the text.


3. Looking at this line which appears twice in the configuration file:

<object type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="200" height="100">

It specifies the dimensions of the flash animation to be 200x100. My background image is 648x220. Does it have anything to do with it?


4. If it helps, here's how my teeboard-notifications.html file currently looks like:

<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: 48px;
    /*font-family: Tahoma, Geneva, sans-serif;*/
    font-family: 'Rexlia Rg';
    font-weight: bold;
    /*text-transform: uppercase;*/
    position: absolute;
    top: 0px;
    left: 0px;
}

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

#notification {
    /*visibility: hidden;*/
}

</style>

<script>

// relative paths to notification images
var imgFollow = "images/notification-bg-follow-custom1-transparent.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-custom1-transparent.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,