Free Free Stream Notifications (Twitch, Paypal, Patreon)

[BobDev]

how i set it up on mac ?

I dont have mac but I'm pretty sure its unix based system:

- obs works on mac - https://obsproject.com/download#obs2_dl
- If you dont have java, install it - 1.7 or above. - http://docs.oracle.com/javase/7/docs/webnotes/install/mac/mac-jdk.html
It might be already installed, just check version with "java -version" in terminal
- python is pre-installed on mac - check if "python -m SimpleHTTPServer" works for you, it should
- I couldnt find browser plugin for mac but the developer wrote in August that he works on it

[EDIT2]
I did some digging, currently obs multi does not support plugins, browser plugin is under implementation and it will be released at some point with obs.

[EDIT3]
Since there is no browser plugin if you want to use notifications you need to use capture area - just like I showed in one of my videos

- if you want paypal animated notification, you need to add color to parent class in alert.css, just like followAlrt.css has it defined,
follow and sub notifications already have red bg by default
- open desired notification html in chrome, dont know if safari will work
- log in to twitch or start ipnlistener - depending on which notification you want to use
- add new source -> capture area -> and capture the area and set red color to be ignored by obs

that is how you will set notification on mac (you could figure it out bt yourself if you would watch my videos)

 

[BobDev]

BobDev updated Free Stream Notifications (Twitch, Paypal, Patreon) with a new update entry:

FSN v1.01

New release 1.01: http://bobdev-fsnconcept.rhcloud.com/download

Changes:
1. New Dashboard implemented
2. Python no longer needed, tomcat web server is used instead
3. Single html file that goes to obs that supports twitch and paypal
4. New effects, transition screen, notification list
5. Base for online version established - TBD

...

Read the rest of this update entry...

 

[Bamse]

Hi there!
Thanks for the awesome tool, I've been using it quite a lot (altho mostly for followers, I'm way to small to have either subs or donations ;D).
I use the allInOne.html and I've recently redone my overlay a bit. I'd like to move down the main notification that appears in the middle of the screen so it shows in the lower third of the screen instead. I guess this is done via the allinone.css but my very limited skills kinda grind it to a halt there.
Could you give me a pointer where to change the position of the main big notification?

Thanks in advance!

Edit:
Nevermind, I solved it with a bit of RTFM:ing. Thanks again for a cool and useful tool!

 

[BobDev]

Hi there!
Thanks for the awesome tool, I've been using it quite a lot (altho mostly for followers, I'm way to small to have either subs or donations ;D).
I use the allInOne.html and I've recently redone my overlay a bit. I'd like to move down the main notification that appears in the middle of the screen so it shows in the lower third of the screen instead. I guess this is done via the allinone.css but my very limited skills kinda grind it to a halt there.
Could you give me a pointer where to change the position of the main big notification?

Thanks in advance!

Edit:
Nevermind, I solved it with a bit of RTFM:ing. Thanks again for a cool and useful tool!

Yes, good to hear that:)
Sorry i didnt reply sooner, I was busy implementing online version.
I also switched to database instead of filesystem, that will make test and transition screen appear faster

 

[Bamse]

Really nice to hear, looking forward to trying it out :)

One more question tho, I've been trying to make the small grey box, in my case bottom left, adaptive in width depending on how long the total text string is by changing the cblock witdh in the css-file. I've been trying some widths in percent but cannot get it to display properly. Is there a good/easy way to do this?
I've tried making the width anything from 120% (which seemed logical in my head ;D) but it just shows a small not even 10px wide grey box all the way up to 800% which makes short names display nicely but makes longer name shoot all across the screen :P
Sorry for all the noob-questions tho. I know this isn't directly related to your tool because it's basic css/html knowledge but I thought I'd give it a shot atleast. :)

Again, thx a bunch :D

 

[BobDev]

Really nice to hear, looking forward to trying it out :)

One more question tho, I've been trying to make the small grey box, in my case bottom left, adaptive in width depending on how long the total text string is by changing the cblock witdh in the css-file. I've been trying some widths in percent but cannot get it to display properly. Is there a good/easy way to do this?
I've tried making the width anything from 120% (which seemed logical in my head ;D) but it just shows a small not even 10px wide grey box all the way up to 800% which makes short names display nicely but makes longer name shoot all across the screen :P
Sorry for all the noob-questions tho. I know this isn't directly related to your tool because it's basic css/html knowledge but I thought I'd give it a shot atleast. :)

Again, thx a bunch :D

About that, I implemented this list in a hurry and for some reason the css element is not adapting correctly to text length, I need to work on it and fix it, I'll try to add this fix in next update, probably next week.

[EDIT] I woke up this morning and had an idea how to fix this.

in child element instead of default width put something like this:
min-width: 300px;
max-width: 500px;
width:inherit;

to childText also put this:
width:inherit;

This way the width will adapt to the content of the notification.
Did I mention css is awesome:)

i didnt test it but this is how I would do it, when I will find some time I will add this to current implementation and test it.

 

[BobDev]

About that, I implemented this list in a hurry and for some reason the css element is not adapting correctly to text length, I need to work on it and fix it, I'll try to add this fix in next update, probably next week.

[EDIT] I woke up this morning and had an idea how to fix this.

in child element instead of default width put something like this:
min-width: 300px;
max-width: 500px;
width:inherit;

to childText also put this:
width:inherit;

This way the width will adapt to the content of the notification.
Did I mention css is awesome:)

i didnt test it but this is how I would do it, when I will find some time I will add this to current implementation and test it.

Ok above worked but, all child elements are also resized, and that is not what we want so I found better solution, each element will resize based on each own content

This is achieved with couple of changes:
Change allInOne.html, at the bottom of the file there is:

<div class="container">
               <div class="child"><div class="childText"></div></div></div>
               <div class="child"><div class="childText"></div></div></div>
               <div class="child"><div class="childText"></div></div></div>
               <div class="child"><div class="childText"></div></div></div>
               <div class="child"><div class="childText"></div></div></div>
           </div>

Change above to this

<div class="container">
               <div class="child"><div class="textParent"><div class="childText"></div></div></div>
               <div class="child"><div class="textParent"><div class="childText"></div></div></div>
               <div class="child"><div class="textParent"><div class="childText"></div></div></div>
               <div class="child"><div class="textParent"><div class="childText"></div></div></div>
               <div class="child"><div class="textParent"><div class="childText"></div></div></div>
           </div>

You also need to replace css, remove child and childText elements and past this into allInOne.css

.child {
  position:absolute;
  width: 500px;
  height:auto;
}

.textParent {
  margin: 3px;
  padding: 2px;
  padding-right: 5px;
  padding-left: 5px;
  overflow: hidden;
  position:relative;
  background-color:rgba(201,206,208,0);
  height:35px;
  min-width: 300px;
  max-width: 500px;
  display:inline-block;
  border: 1px solid black;
  font-family: "DIRTYEGO"; font-size: 35px;
}
.childText {
  margin-right:7px;
  margin-left:7px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  white-space: nowrap;
  display:inline-block;
}

There is also hard-coded cap in allInOne.html, to ensure that the suffix is shown when nt text is to long, you would need to change it to bigger value (runAnimation function).
from:

if (text.length > 15) {
                    if (direction == 3 || direction == 1) { // bottom left or // bottom right
                        $(collection[0]).text(text.substring(0, 15) + suffixShort);
                    }
                    else {
                        $(collection[4]).text(text.substring(0, 15) + suffixShort);
                    }
                }

to something that will fit into your new max, in my case it is 500px so 30 is enough:

if (text.length > 30) {
                    if (direction == 3 || direction == 1) { // bottom left or // bottom right
                        $(collection[0]).text(text.substring(0, 30) + suffixShort);
                    }
                    else {
                        $(collection[4]).text(text.substring(0, 30) + suffixShort);
                    }
                }

Also for list work in bottom corners you need to edit changeDirection() function, change BottomRight and BottomLeft to this

else if (direction == 1) {//BottomRight
                        var yD = $(window).height() - (($(".textParent").length + 1) * ($($(".textParent")[0]).height() + cssprop($($(".textParent")[0]), "margin"))) - 10;
                        $('.container').css({"top": yD, "right":0, "bottom": 0, "left": ""});
                    }
                    else if (direction == 3) {//BottomLeft
                        var yD = $(window).height() - (($(".textParent").length + 1) * ($($(".textParent")[0]).height() + cssprop($($(".textParent")[0]), "margin"))) - 10;
                        $('.container').css({"top":yD, "bottom": 0, "right": "", "left": ""});
                    }

The result will look like this:

Do all that on your own or wait for next update:)

 

[BullHorn7]

Hmm very strange. I set it up with your video and when I test things, they work.
When I actually get a real follower, nothing happens. I made sure I saved my correct Twitch username. What else could I be missing? :o

I'm also interested in moving the big popup away from the middle of the screen. It's cool that some guy figured it out, but could the solution be posted somewhere?

 

[Bamse]

Bob: Thanks a million! I'll try it out tonight or tomorrow (if I have the time, I'm preparing for this years moose hunt that's taking place all next week;D).

Bullhorn:
1. Remember to login to twitch using the icon to the top right in the dashboard. When you're logged in you'll see the arrow pointing OUT from the "door". If you're logged out it'll point towards the door. If this is the case, click it again so you get the arrow pointing out. I missed this aswell the first few times.
2. I did it the ugliest way possible; Edit allInOne.html, line 398 and line 400. To get it the way I show in the picture above I change the divided-by number to 1.3 and 1.2 respectively.

this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 1.3) +
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 1.2) +
                                            $(window).scrollLeft()) + "px");

 

[BobDev]

Hmm very strange. I set it up with your video and when I test things, they work.
When I actually get a real follower, nothing happens. I made sure I saved my correct Twitch username. What else could I be missing? :o

I'm also interested in moving the big popup away from the middle of the screen. It's cool that some guy figured it out, but could the solution be posted somewhere?

Well you can open the allInOne.html in chrome and press Ctrl+Shift+L and check the logs, if you are connected to twitch you will see Twitch object being downloaded, over and over again
You can do the same in dashboard to check if dashboard is connected.

It is very important to first connect dashboard and then enable the allInOne.html in obs source
the page that is in that source depends on dashboard, so the order is important.
1. Open dashboard, connect to twitch
2. Enable obs source

Alternatively:
1. Open allInOne.html in chrome
2. If you are signed in to twitch in chrome you will see something like this added to the url:
#access_token=kqj2i354iysma4c3udsxczi0gofhlb&scope=user_read+channel_read+channel_subscriptions
That means you are signed in and the code connected to twitch

If you are not signed in you will be redirected to twitch and asked to log in
3. Copy entire url and add it to obs source

If you have still trouble with it - write me an e-mail we can figure it out.

I plan to do video about how to change look of the notifications.
Right now what you can do is play around with margin-left, margin-right, margin-top, margin-bottom of 2 elements that make the main "banner" notification.

For example to make it show on bottom of the screen, depending on your screen size you would add : margin-top: 200px;
Add it to "block" class and to "logo" class and you are good to go.

Or you can create those class selectors in obs browser plugin

.block {
  margin-top: 200px !important
}
.logo {
  margin-top: 200px !important
}

 

[BobDev]

Bob: Thanks a million! I'll try it out tonight or tomorrow (if I have the time, I'm preparing for this years moose hunt that's taking place all next week;D).

Bullhorn:
1. Remember to login to twitch using the icon to the top right in the dashboard. When you're logged in you'll see the arrow pointing OUT from the "door". If you're logged out it'll point towards the door. If this is the case, click it again so you get the arrow pointing out. I missed this aswell the first few times.
2. I did it the ugliest way possible; Edit allInOne.html, line 398 and line 400. To get it the way I show in the picture above I change the divided-by number to 1.3 and 1.2 respectively.

this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 1.3) +
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 1.2) +
                                            $(window).scrollLeft()) + "px");

No dont do that:)

Read me reply and do it my way:)
also when you hover on top of those buttons (corner of screen), you will see a popup sayin what the button is for.

 

[BullHorn7]

I think I had my first issue due to the software not shutting down properly. I noticed a bunch of javaw.exe in the task manager. After a full restart all was solved.

Regarding 2nd issue I'll do that, thanks!

Another issue (high priority): There's no queue/buffer so if you have 2 or more people donate/sub/follow at the same time, only the latest one will appear on-stream

 

[BobDev]

I think I had my first issue due to the software not shutting down properly. I noticed a bunch of javaw.exe in the task manager. After a full restart all was solved.

Regarding 2nd issue I'll do that, thanks!

Another issue (high priority): There's no queue/buffer so if you have 2 or more people donate/sub/follow at the same time, only the latest one will appear on-stream

Actually there is a queue, each type of notification has its own queue.
Did you experience some problems with notifications not showing?

Could you elaborate on it, how many where skipped, which types where they, any useful information that you can give me to help track the problem

 

[BullHorn7]

I did tests. Test 1, Test 2, Test 3, Test 4, Test 5 - in quick succession - Only 1 appeared as the first and then 5 appeared as the second.

I'm having other issues now though, I emailed you about it (Sometimes it works fine, sometimes it doesn't work at all, sometimes it notified 1 follower and then stops working, etc)

 

[BobDev]

I did tests. Test 1, Test 2, Test 3, Test 4, Test 5 - in quick succession - Only 1 appeared as the first and then 5 appeared as the second.

I'm having other issues now though, I emailed you about it (Sometimes it works fine, sometimes it doesn't work at all, sometimes it notified 1 follower and then stops working, etc)

Those are the test notifications, it is not showing because you are sending them to often.
Unfortunately it is sending those test notifications via filesystem and by the time the timer kicks in to read the value from file it is no longer there (replaced).

I'm working on a way to make it better, now that I'm using database.
Hopefully test mechanism will improve.

 

[BobDev]

There is a bug in current release, ig you using 1.02 then go to line 740 in dashboard.html and erase this code

         else {
                    prop.twitch_logged_in = false;
                    updatePropertyFile();
                }

it cause the dashboard to disconnect from twitch
I already uploaded the fix to my webpage

 

[BobDev]

Quick note, I forgot to mention that the paypal button currently supports business accounts only - I'm working on support for normal accounts right now.

 

[Zellidon]

I'm having some issues. For some reason when I try to use the start.bat a window pops up and then closes immediately. Even when I try to use the ipnListener.jar in the root folder when I double click it nothing happens. Not sure what I'm doing wrong =/

 

[BobDev]

I'm having some issues. For some reason when I try to use the start.bat a window pops up and then closes immediately. Even when I try to use the ipnListener.jar in the root folder when I double click it nothing happens. Not sure what I'm doing wrong =/

Problem is probably with your java

Open start.bat and copy the commands there and run them in cmd.exe (of course from the same location that start.bat is in)
First command is this: "cd apache-tomcat-7.0.54\bin && catalina start"

This is most likely the one that fails.
Make sure that JAVA_HOME or JRE_HOME environment variables are defined in your system.
About how to do this you can read here: https://jamfnation.jamfsoftware.com/article.html?id=348

Other reason might be that you have java that is too old, both tomcat and ipnListener require java 1.7 or greater.
check your java version by typing in cmd: "java -version"

 

[Zellidon]

I kinda worked around the start.bat and used the python webserver to set everything up. It seems to be working fine. I'm confused on how it's working exactly though. Do I have to leave the dashboard open in order for this to keep notifying me? Or will this automatically keep working on its own somehow? I'm just curious how the information is getting from Twitch to my source in OBS exactly and what I need to keep running to ensure that it does.