Top 2 Emotes for chat

[Dante557]

Hey guys, how's it going?

I've been working on something that I think some of you will enjoy. What does this code do? Well ladies and gents all it simply does is count the amount of times an emote has been used and then display it on screen. Nothing more, nothing less. The code is based on an awesome chrome plugin called Kappa-Per-Minute which basically provide the skeleton for it. I've modified it to account for the whole stream. Bit quirky but it gets the job done. The index page is basically the OBS chat which is hosted online, with 2 additions in the form of "data-timestamp" and "data-message" on each message. These prevent a message from being checked again. (I can make it more efficient, I don't think I NEED the timestamp for example but I can always do that later).

The font I have chosen to use is Caviar Dreams which I honestly love to bits but obviously you can change the font used in the CSS if you want. Anyway, enough blabbing on, you want the code. You can find the files attached. Oh, and have some screenshots

No Emotes


With Emotes


Edit: Changed the code slightly.
Edit2: Want the files? Here they are https://dl.dropboxusercontent.com/u/6646300/deepbot-Chat.zip

[Izlsnizzt]

Here's an alternative CSS with different and larger fonts, and a totally transparent backround.

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden;
}

BODY {
    background-color: transparent;
    font-family: Lao UI, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    color: #FFF
}

#chat_box {
    border-radius: 5px;
    background-color: rgba(0,0,0,0) !important;
    opacity: 1 !important; // Change this value to affect the transparency. If you just want to just change the background opacity, change background-color to use rgba(r,g,b,a) instead
    height: 60%;
    padding: 10px;
}

.nick {
    font-weight: bold;
    text-transform: capitalize;
}

.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    min-width: 18px;
    //width: expression(document.body.clientWidth < $width ? "18px":"auto");
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}

.turbo {
    background-color: #6441a5;
    background-image: url(http://static-cdn.jtvnw.net/jtv_user_pictures/turbo-global-badge-18x18.png);
}

.moderator {
    background-color: #009900;
    background-image: url(http://static-cdn.jtvnw.net/jtv_user_pictures/mod-global-badge-fd9d467f7424030f-18x18.png);
}

.broadcaster {
    background-color: #000000;
    background-image: url(http://static-cdn.jtvnw.net/jtv_user_pictures/broadcaster-global-badge-a33b04f2f5449625-18x18.png);
}

.staff {
    background-color: #6441a5;
    background-image: url(http://static-cdn.jtvnw.net/jtv_user_pictures/staff-global-badge-3697eea55118890e-18x18.png);
}

.admin {
    background-color: #FF0000;
    background-image: url(http://static-cdn.jtvnw.net/jtv_user_pictures/admin-global-badge-a19d6125f93450d3-18x18.png);
}

.creator {
    background-color: #6441a5;
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.png);
}

.vipbronze {
    background-color: #FFFFFF;
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}

.vipsilver {
    background-color: #FFFFFF;
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}

.vipgold {
    background-color: #FFFFFF;
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}

.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
}

#face1span {
    background: none !important;
    //padding-left: 0px !important;
}

#face1span span {
   // margin: -10px 0px 0px 0px !important;
}

#face2span {
    background: none !important;
    //padding-left: 0px !important;
}

#face2span span {
    //margin: -10px 0px 0px 0px !important;
}

.channel-stats {
    //width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 10px;
    margin-bottom: 5px;
    background-color: rgba(0,0,0,0) !important;
    border-radius: 5px;
}
Example screenshot with chat scaled up to show changes.



#NoPants

[Dante557]

Hey all, an update if you will. I have made another modification to the chat. This version allows the chat to be faded out after so many seconds of inactivity (Default: 30 seconds) and will fade back in when there is activity again. As a result when no one is talking your stream will have a clear, unobstructed view of the action happening. Of course if you have a lot of activity this will never happen but there are times in all streams (namely the beginning when people are just joining) when this will be the case.

It's a simple effect but a nice effect none the less. If you choose to use this though, there are a couple modification that you need to make to make it suit your needs. You can edit any part of this code but there are two settings that are configurable at base. These are;

Code: [Select]

var fadetime = 30000; //Change this number to change the time the fade out occurs. 1 second = 1000 milliseconds. Set to 0 to disable fading
var fadeEmotes = false; // True if you want the emote counters div to get faded as well, false if not
Changing these two variables will change the way the fading works. By default 30 seconds of inactivity and the emotes counter will stay unfaded.

Any suggestions you have feel free to let me know. I'll look into incorporating them Any problems let me know

Thanks,
Dante557

Note: The new "index.html" file will be included with this post. It still uses the css file from the original

Edit: Edited code slightly

[Hanger84]

I really want to use this on my chat overlay, but I don't see any attachments or code other than what's in the second post. Did it all get deleted?

[Dante557]

Sorry this is late, been busy with a multitude of other stuff.

The fade functionality should now be included in the new chat that Experts has set up which can be found at deepbot.tv/notifications/OBSChatv4.htm?fade=30 where you can easily adjust the fade time through the URL variable.

However if you do still wish to use this one, you can find the file in a ZIP folder here https://dl.dropboxusercontent.com/u/6646300/deepbot-Chat.zip

[serfma]

Hey guys, how's it going?

I've been working on something that I think some of you will enjoy. What does this code do? Well ladies and gents all it simply does is count the amount of times an emote has been used and then display it on screen. Nothing more, nothing less. The code is based on an awesome chrome plugin called Kappa-Per-Minute which basically provide the skeleton for it. I've modified it to account for the whole stream. Bit quirky but it gets the job done. The index page is basically the OBS chat which is hosted online, with 2 additions in the form of "data-timestamp" and "data-message" on each message. These prevent a message from being checked again. (I can make it more efficient, I don't think I NEED the timestamp for example but I can always do that later).

The font I have chosen to use is Caviar Dreams which I honestly love to bits but obviously you can change the font used in the CSS if you want. Anyway, enough blabbing on, you want the code. You can find the files attached. Oh, and have some screenshots

No Emotes


With Emotes


Edit: Changed the code slightly.
Edit2: Want the files? Here they are https://dl.dropboxusercontent.com/u/6646300/deepbot-Chat.zip

With the update today, this no longer works. :/ If you could update this for the latest update that would be absolutely fantastic as the default chat is a mess.