Free TeeBoard v0.1.5 beta

Jollyriffic · Jun 15, 2014

DeezjaVu said:
Nope. This is done for a reason. If you'd increase the display time to let's say 20 seconds, that means you can (only) have 3 "new" notifications within a minute. Any more than that would not be displayed when the next result comes in (with more new notifications).

There's a "special" CSS/HTML/JavaScript version of the notification widget available, but since you mentioned you're not a coder, that may get tricky.
The js version is located in:

[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/

If all you really want to do is display a .gif image, you can simply swap out the image that is currently there and adjust the dimensions in the html file.

i can do html and hacked together some php, should be able to handle the gif part.
only really wanted the notification to be longer so that the gif had time to do its full rotation, but i could speed that up.
thanks for the info

Scardigne · Jun 15, 2014

Could you release the small "donation notify" patch tomorrow please? I have an event planned ^_^

Jollyriffic · Jun 15, 2014

i've tryed everything i could think of, and nothing seems to display a gif image on screen.

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




<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">
html, body {
height: 100%;
/*background-color: #FFFFFF;*/
background-color: rgba(255,255,255,0)!important;
}

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

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

#notification-msg {
color: #000000;
font-size: 24px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-transform: uppercase;
position: relative;
top: 50px;
left: 50px;
}

#notification {
visibility: hidden;
}

</style>

<script>

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

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:-920}, {x:0, 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:-920, delay:6});
}

</script>

</head>
<body>



<div id="notification">
<div id="notification-msg">
TEEBOARD JAVASCRIPT NOTIFICATIONS!!
</div>
<img id="notification-img" src="images/notification-bg-follow.gif" width="1360" height="768">
</div>

<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1360" height="768" id="teeboard-notifications" align="middle">
<param name="movie" value="teeboard-notifications.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<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 type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="1360" height="768">
<param name="movie" value="teeboard-notifications.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<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>

</object>
</div>

</body>
</html>

DeezjaVu · Jun 15, 2014

Jollyriffic said:
i've tryed everything i could think of, and nothing seems to display a gif image on screen.

Do you have the 3 gifs and are they in the "images" folder?

[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-follow.gif
[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-sub.gif
[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-donate.gif

DeezjaVu · Jun 15, 2014

Scardigne said:
Could you release the small "donation notify" patch tomorrow please? I have an event planned ^_^

Grab it here: https://dl.dropboxusercontent.com/u/58645452/air/TeeBoard v0.1.2b.zip

Note that the widgets have been updated in the meantime as well and because you're not going through the usual "patch" process, you'll have to delete (or rename) this folder:

[USER DOCUMENTS]/TeeBoard/widgets

After installing v0.1.2b and starting TeeBoard it will (re)create the above folder with the updated widgets.

Jollyriffic · Jun 15, 2014

DeezjaVu said:
Do you have the 3 gifs and are they in the "images" folder?

[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-follow.gif
[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-sub.gif
[USER DOCUMENTS]/TeeBoard/widgets/notifications/obs-js/images/notification-bg-donate.gif

yes, just copied the names of the images already in the latest version and then made three gifs for easy swapping from png to gif
the actual png images in there don't show either if i leave things as is. its always just a colored bar with the name has followed or donated.

DeezjaVu · Jun 15, 2014

Jollyriffic said:
yes, just copied the names of the images already in the latest version and then made three gifs for easy swapping from png to gif
the actual png images in there don't show either if i leave things as is. its always just a colored bar with the name has followed or donated.

You mean in OBS? Then you've selected the wrong path in the CLR Browser plugin source properties. Point it to the correct html file.

Jollyriffic · Jun 15, 2014

got it, the correct version i clicked was just obs not obs-js
i've got the image working now. it cracks me up, once i edit my music down to 10 seconds i'll post a youtube of my test here, i'm sure you'll enjoy it.

Jollyriffic · Jun 15, 2014

Quick test uploaded to youtube, christ that gif cracks me up!

Scardigne · Jun 16, 2014

the screen gets covered for like 4 seconds? xD

Jeffrey Veenhuis · Jun 16, 2014

DeezjaVu, Can you tell me if multiple accounts is still in progress or is it just my PC that's having issues with that? :)

Jollyriffic · Jun 16, 2014

Scardigne said:
the screen gets covered for like 4 seconds? xD

after modding the html and using my own gif, yes.
but took some work and tinkering around

its over the top, but if you were to ever watch my stream, you'd know it fits my brand of "oh dear jesus".

DeezjaVu · Jun 16, 2014

Jeffrey Veenhuis said:
DeezjaVu, Can you tell me if multiple accounts is still in progress or is it just my PC that's having issues with that? :)

Authorizing multiple accounts should work. I have 3 accounts authorized with TeeBoard and can switch between them.

What hasn't been implemented yet is switching to an account of which you are an editor (in the Dashboard tab). You can add an account, but you can't switch to it.

Warchamp7 · Jun 16, 2014

I'm having issues with the Notifications widgets. I can preview it in Teeboard, drop it into Chrome, but doesn't work when I add it in OBS with the CLR Browser

DeezjaVu · Jun 17, 2014

Warchamp7 said:
I'm having issues with the Notifications widgets. I can preview it in Teeboard, drop it into Chrome, but doesn't work when I add it in OBS with the CLR Browser

You might be missing the Flash Player for "other browsers". CLR Browser doesn't detect the pepper flash plugin used by Chrome.
http://get.adobe.com/flashplayer/otherversions/

Once installed, restart OBS.

Warchamp7 · Jun 17, 2014

DeezjaVu said:
You might be missing the Flash Player for "other browsers". CLR Browser doesn't detect the pepper flash plugin used by Chrome.
http://get.adobe.com/flashplayer/otherversions/

Once installed, restart OBS.

Tried that, still no luck :\

I get just an empty box in OBS

Edit: so html, body {} has background-color: rgba(255,255,255,0)!important;

If I set that opacity to 1, it's visible, but it's always visible. I'd like it to be transparent whenever it's not showing a notification :\

DeezjaVu · Jun 17, 2014

Warchamp7 said:
Tried that, still no luck :\

I get just an empty box in OBS

Edit: so html, body {} has background-color: rgba(255,255,255,0)!important;

If I set that opacity to 1, it's visible, but it's always visible. I'd like it to be transparent whenever it's not showing a notification :\

Have you changed the "Single Process" to "true" for the CLR Browser plugin?

OBS -> Settings -> Browser -> Runtime -> Single Process: True

Warchamp7 · Jun 18, 2014

DeezjaVu said:
Have you changed the "Single Process" to "true" for the CLR Browser plugin?

OBS -> Settings -> Browser -> Runtime -> Single Process: True

Didn't change anything.

To clarify, I can get the notification widget to show in OBS, but unless I give it a visible background in the html file, it's not visible.

Code:

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

Widget is invisible. Nothing shows up when a notification happens.

Code:

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

Widget is always visible as a white box, notifications pop up in that box when one happens

ThisGuyBryan · Jun 18, 2014

Quick question for anybody here that may know, I would like to use a custom animation (a simple fade I'm thinking), does anybody know how I would go about doing this? I got the custom image working, just looking to personalize a tin bit more. Any help would be appreciated, thanks!

DeezjaVu · Jun 18, 2014

Warchamp7 said:
Didn't change anything.

To clarify, I can get the notification widget to show in OBS, but unless I give it a visible background in the html file, it's not visible.

Widget is always visible as a white box, notifications pop up in that box when one happens

You have to set the Single Process to True, as explained in the TeeBoard help, for transparency to work.

Note that the 64bit version of the CLR Browser plugin is unstable with Single Process set to True, but there's nothing I can do about that. 32bit is therefor recommended.

Free TeeBoard v0.1.5 beta

Jollyriffic

Member

Scardigne

New Member

Jollyriffic

Member

DeezjaVu

Member

DeezjaVu

Member

Jollyriffic

Member

DeezjaVu

Member

Jollyriffic

Member

Jollyriffic

Member

Scardigne

New Member

Jeffrey Veenhuis

New Member

Jollyriffic

Member

DeezjaVu

Member

Warchamp7

DeezjaVu

Member

Warchamp7

DeezjaVu

Member

Warchamp7

ThisGuyBryan

New Member

DeezjaVu

Member