dev-chat

[hot trout]

pretty standard to have on linux and mac but not windows

[river prism]

but i do have it

[hot trout]

oh

[river prism]

is there something I am missing here?

[hot trout]

well then curl -vvv http://whatever the url is

and see what curl says about the response

[river prism]

* Connected to --- (---) port 28000 (#0)
> GET / HTTP/1.1
> Host: ---
> User-Agent: curl/7.80.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Connection: close
<
hello i am api

* Closing connection 0```

tried again and got this

* Connected to --- (---) port 28000 (#0)
> GET / HTTP/1.1
> Host: ---:28000
> User-Agent: curl/7.80.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Connection: close
<
hello i am api

* Recv failure: Connection was aborted
* Closing connection 0
curl: (56) Recv failure: Connection was aborted```

[hot trout]

@river prism yeah see curl says the same thing

[river prism]

yeahh

[river prism]

would you have any idea as to what the problem is or how to fix it

[fading basalt]

How do I clear all the data in JS?
I have a timer which counts cooldown of a command, but each new time it counts it adds up

Like he counted 110 sec to 0 (cooldown 110)
Then on the next command with a cooldown 60 he will show 110 number for a moment and then show 60 and after that will start count down
On the third command (with cooldown of 50) he will show 110 for a moment, then 60 for a moment and only then starts to count from 50

And each time you can trigger a command 1 second earlier, on sec 1 then after new command on sec 2, then on sec 3...

[round pilot]

writing a custom widget, the chat message event's emotes list is including emojis as well as the twitch/bttv/ffz emotes, but the emojis don't have start/end indices? (the docs seem to imply they should)
also, whatever's doing that emoji parsing doesn't properly handle zero width joiners or variation selectors

[hot trout]

I think twitch might mangle those

I see that all the time in chats

(emoji followed by a male or female sign mostly)

@river prism I'm quite convinced your problem is the http response

[river prism]

yea alright

[hot trout]

try for a moment hard-coding the entire response

so like ```
"HTTP/1.1 200 OK" + CRLF + "Connection: close" + CRLF + "Content-Length: 7" + CRLF + CRLF + "Hello" + CRLF

[river prism]

Alright, it is now ```java
final String CRLF = "\r\n";

String response ="HTTP/1.1 200 OK" + CRLF + "Connection: close" + CRLF + "Content-Length: 7" + CRLF + CRLF + "Hello" + CRLF;```

same thing, curl: (56) Recv failure: Connection was aborted

[hot trout]

and does that worj?

hm

what does the whole code look like

[river prism]

uhm it's across multiple classes but

InputStream input = null;
        OutputStream output = null;
        try {
            if (debug) logger.info("[" + debugid + "] Connected.");
            input = socket.getInputStream();
            output = socket.getOutputStream();

            String html = plugin.getConfig().getString("default-response");

            final String CRLF = "\r\n";

            String response ="HTTP/1.1 200 OK" + CRLF + "Connection: close" + CRLF + "Content-Length: 7" + CRLF + CRLF + "Hello" + CRLF;

            output.write(response.getBytes());
            if (debug) logger.info("[" + debugid + "] Response sent.");
        } catch(IOException e) {
            logger.warning("Problem with communication: " + e);
            if (debug) logger.warning("[" + debugid + "] Failed to initialize worker thread.");
        } finally {
            if (input != null) {
                try {
                    input.close();
                } catch (IOException e) {if (debug) logger.warning("[" + debugid + "] Failed to close input.");}
            }
            if (output != null) {
                try {
                    output.close();
                } catch (IOException e) {if (debug) logger.warning("[" + debugid + "] Failed to close output.");}
            }
            if (socket != null) {
                try {
                    socket.close();
                } catch (IOException e) {if (debug) logger.warning("[" + debugid + "] Failed to close socket.");}
            }
        }```

[hot trout]

interesting

can you put a Thread.sleep(1000); before the output.write()

[river prism]

Will try that

[hot trout]

that's not, like, a fix

but from this code it never seems to actually read a request

and rather it seems to just send a response immediately

[river prism]

It does not read read the request atm, I just wanted something that worked before I started messing around with arguments

[hot trout]

right

so what's happening is sometimes the response will be sent before the client is done sending the request

and the connection closed

[river prism]

ah

[hot trout]

which is not how http is supposed to work

thus the error

randomly, because it's dependent on timing

putting a sleep() should fix it in the sense that you're always going to send your response after the request is done, but of course it's not a real fix

[river prism]

well. it responds correctly now reliably

can't I just make it read the arguments and then send it

[hot trout]

yes

[pulsar willow]

So the countdown works as expected, but only after it showed all of the earlier upper bounds?
Do you use setInterval()? If so, do you clear all intervals after they reached their end point?

[hot trout]

definitely do that instead of sleeping

[river prism]

ah alright so basically it's an issue that will go away as soon as i actually do what i'm gonna do with the bot

alright that's relieving..

[hot trout]

exactly

[river prism]

Alright thank you a lot for this

Would've probably taken me days

[lilac bridge]

@hot trout im having troubles finding that video about the commands

[lilac bridge]

Is there any way to make a sound command for a specific user?

[river prism]

ummm....hate to bother you again but i have tried many different things all of which have resulted in straight up not working, or just blocking and looping forever...it hurts me to have to ask what sounds like a really simple question but how do i do this ;-;

the current thing (below) just gets stuck in an endless loop and the inputstream never sends a -1 at the end if the request.

int _byte;
while ((_byte = input.read()) >= 0) {
  url += (char) _byte;
}```
would there be a way to just snatch the url and wait for the rest to finish because the oinly thing i need is the url and the arguments within it? i tried just using stack overflow and google but none of it made any sense to me

[elfin arch]

just curious, did you get this working?

[elfin arch]

<div id='one'>Almost before we knew it, we had left the ground.</div>
<div id='four'>Almost before we knew it, we had left the ground.</div>
<div id='nine'>Almost before we knew it, we had left the ground.</div>

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,400;0,900;1,100&display=swap');

#one {
color: red;
font-family: 'Exo 2', sans-serif;
font-weight: 100;
font-size: 100px;
}

#four {
color: blue;
font-family: 'Exo 2', sans-serif;
font-weight: 400;
font-size: 100px;
}

#nine {
color: green;
font-family: 'Exo 2', sans-serif;
font-weight: 900;
font-size: 100px;  
}

[solar birch]

Yes i did! Pretty easily btw! I made a firebase cloudfunction

[solar birch]

Only took 10 minutes

[tame valve]

Alright I'm here

[solar birch]

Lemme show u

[elfin arch]

oh niice. i was just curious. I'm doing a write up on how to build an API. just wonder if you go it

@tame valve see above 🙂

[tame valve]

So wait, where does each one go?
HTML and CSS by the looks of them?

[elfin arch]

ya; you just need the CSS really; the font import link has the weights

[tame valve]

Awesome!
Also while I gotcha: Can I make the : between the time numbers blink, and add a comma after the date number?

[solar birch]

There you go. Thats all there is to it, Ill be adding a filter parameter. to add bots in an array so the API doesnt return known bots

[elfin arch]

Niice. ya. i need to look more into that firebase thing.

[solar birch]

It's really easy

Even for beginners it's very well documented

Only thing is to publish this API you need to attach a credit card

But as long as you stay under the request limit you probably won't be spending any money

[elfin arch]

ya. that might be a no go for some. but maybe not an issue. i went the "heroku" direction but with replit: https://pjonp.blogspot.com/

[tame valve]

Thank you, by the way ❤️

[elfin arch]

1/2 through the set up; so i'm committed now 🙂

[elfin arch]

no problem. i told you it was ✅ ...heheh

i've ran into that wall a few times in the past but remember why now. only took doing it about 5 times

[tame valve]

Any light on the blinking separator?

I found some random blinking code and managed to get it to work but it shows after the AM/PM, so... no good lol

[elfin arch]

oh. i missed that... um; that would probably be a CSS animation... like a from Opacity 1 -> 0

[tame valve]

Yeah I got that part, the problem is getting it in between the numbers

This is what I found

  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}```

Damn what's the character for code here

[elfin arch]

<div id='nine'>This <span class='blink_me'>BLINK</span> End</div>

3 ` 's (the ~) mark

then add css after the top row of ` s

[tame valve]

So wait. CSS:

html,body {
    height: 100%;
}
body {
}
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: '{{fontName}}', sans-serif;
    font-size:{{fontSize}}px;
    font-weight: {{fontWeight}};
    color: {{fontColor}};
    text-shadow:{textShadow};
    text-align: center;
    position: absolute;
    float: left;
    display: flex;
    flex-wrap: wrap;
}
.time {
    font-size:{{fontSize}}px;
    font-weight: {{fontWeight}};
    color: {{fontColor2}};
    text-shadow:{textShadow};
}
.date {
    font-size:{{fontSize}}px;
    font-weight: {{fontWeight}};
    color: {{fontColor}};
    text-shadow:{textShadow};
}
.text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
}
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
}```

HTML:

<div id="clock">
    <p class="date">{{date}}<p class="time">&nbsp;{{time}}</p></p>
<div id='nine'>This <span class='blink_me'>BLINK</span> End</div>
   </div>```

[elfin arch]

oh.. ya; i had to go back to your original:

[tame valve]

Ew lol

[elfin arch]

haha

🤔 ... ya. that is a tricky one. i'm not sure how you are getting the {{time}}

[tame valve]

This is in "Data":

{"1224":"zeroPadding(hours) + ':' + zeroPadding(cd.getMinutes(), 2) + ampm;","eventsLimit":5,"includeFollowers":"yes","includeRedemptions":"yes","includeHosts":"yes","minHost":1,"includeRaids":"yes","minRaid":1,"includeSubs":"yes","includeTips":"yes","minTip":1,"includeCheers":"yes","minCheer":1,"direction":"top","textOrder":"nameFirst","fadeoutTime":999,"fontColor":"rgb(255, 254, 254)","theme":"texture","backgroundOpacity":50,"backgroundColor":"rgba(36, 6, 73, 0.15)","iconColor":"rgb(255, 255, 255, 255)","locale":"en-US","fontSize":28,"fontWeight":"900","fontName":"Exo","textShadow":"rgb(0, 0, 0) 0px 0px 0px","time1":"week[cd.getDay()]","messageOrigin":"bottom","time2":"''","time3":"''","time4":"''","datetime":"{{ date }} {{ time }}","1224hr":"zeroPadding(cd.getHours()) + ':' + zeroPadding(cd.getMinutes(), 2);","fontColor2":"rgb(255, 254, 254)"}

Oh man, what a mess

[elfin arch]

but some how you would need to split that to 4 then : then 51AM

in your Field Data; what is "time" ?

[hot trout]

@river prism I think you'll have an easier time using a framework to do this

something like Javalin.io seems usable

[tame valve]

This is hard, Streamelements displays the data one as ONE LINE

[hot trout]

it will handle the http stuff for you so you just deal with the result

[elfin arch]

the DATA doesn't matter. that is just saved stuff

look in the Fields tab for time

[tame valve]

So there's like 4 of them

  "time1": {
    "label": "First Displayed",
    "type": "dropdown",
    "value": "Year",
    "options": {
      "zeroPadding(cd.getFullYear(), 4)": "Year",
      "month[cd.getMonth()]": "Month",
      "zeroPadding(cd.getDate(), 2)": "Date Number",
      "week[cd.getDay()]": "Day",
      "''": "None"
    }```

That's one

[elfin arch]

what is datetime

[tame valve]

Not there at all

[elfin arch]

and ... whoa... you imported vue and open a whole new world of options for the Field tab. ... my mind is blown; but i don't know vue

[tame valve]

I didn't, Mr. Boost did

[elfin arch]

oh. that sneeky bastard.

[tame valve]

Hahahaha

[elfin arch]

on this line: {"1224":"zeroPadding(hours) + ':' + zeroPadding(cd.getMinutes(), 2) + change that : to '<span class='blink_me'>:</span>'

🤞 ... i'm guessing

[tame valve]

Which tab is this in? I'm blind

[elfin arch]

in the data tab

[tame valve]

Yeah that breaks it

[elfin arch]

first line here: {"1224":"zeroPadding(hours) + '<span class="blink_me">:</span>' + zeroPadding(cd.getMinutes(), 2) +

[elfin arch]

opps; ya i double used ' s. try that. blink_me in " s

[tame valve]

Turned it green but still broken

Interestingly, when I save and back out of the editor and then come back in, it's back to single 's

[elfin arch]

one last try; ... put a \ before each " in the blink_me ... so \"blink_me\"

[tame valve]

That does this

(We're only messing with the bottom row)

[elfin arch]

let me see if i can play with what you posted. give me a few minutes.

[tame valve]

Sure thing man, thank you

[elfin arch]

can you repost your DATA tab?

[tame valve]

Will have to do that as a file, Discord doesn't let me do that whole thang

[elfin arch]

1 sec

that's working with the "zeroPadding(hours) + '<span class=\"blink_me\">:</span>' + zeroPadding(cd.getMinutes(), 2) + ampm;" (looking at the : )

[hot trout]

add animation-timing-function: steps(2, end);

so it blinks instead of fading in and out

[elfin arch]

@tame valve did that get it?

[elfin arch]

i can only get it to go from 0->.5 or .5->1 and loop?

[hot trout]

huh

that blinks correctly for me

[elfin arch]

that's 50% opacity red

swap to from 1 to 0

[hot trout]

oh you're right

the small size made it hard to see

[elfin arch]

but, very interesting. (i hate CSS) so i don't know these fun tricks

[hot trout]

there we go ```css
animation: blinker 1s steps(2, jump-none) infinite;

I don't understand why these videos end up at 1s when I record for like 4 seconds

this would've been much easier if they hadn't removed <blink> from html

[elfin arch]

oh. niice.

ya; they removed the marquee too, right?

[hot trout]

oh wikipedia of all places taught me a simpler version ```css
.blinkme {
font-size: 20px;
font-family: avenir;
color: red;
animation: blinker 2s step-end infinite;
}

    @keyframes blinker {
        50% {opacity: 0};
    }```

it's funny neither blink nor marquee was ever standard

blink was supported by mozilla and descendents

but ie didn't

ie supported instead the much more complicated marquee

[elfin arch]

it's all CSS now; or greensocks/anime

🤞 that helps ya GM. ... i need to have a chat with Boost about the Vue-doo magic. my mind is blown. i thought it was strict JSON ... but makes more sense now with the {{VAR}} stuff.

[uneven oxide]

@brazen owl, posting multiple links will result in not being able to post again.

[terse crest]

Don't get it what you guys trying to achieve here but see you suffer a lot

I made that blinking : one time with a class, if seconds % 2 -> addClass with opacity

But Vue into a widget...crazy

[elfin arch]

not much suffering. just trying to get the : to blink from the DATA tab 😉 #dev-chat message

i'm new to Vue. so learning new stuff.

0 js.

[hot trout]

I mean you could do a blinking animation in javascript by adding and removing classes

or you could do it the easy way and use a css animation

I looked up the old blink tag on wikipedia earlier and it had a nice example of why you don't do that

[elfin arch]

i'd do the JS way... to be honest (i know CSS is better, but i'm not a CSS person)

ughh. .. but that css is way better.

[hot trout]

wait

<marquee> still works

what the hell

[elfin arch]

close Internet Explorer and try a real browser

[hot trout]

I'm in heckin chrome

[elfin arch]

🤣

[hot trout]

it's got that early 2000s vibes

[elfin arch]

i'm going to use that for sure. the code snobs will call me out though.

[terse crest]

Some real perversions here

[elfin arch]

forgot to \escape the JSON #dev-chat message

[terse crest]

It depends really. I was already using setInterval to make a timer, and it was better to sync the blink animation with it

[elfin arch]

There was no JS in the original question.

only HTML/CSS/DATA

[terse crest]

Didn't know

[elfin arch]

the best way to do the blink thing; ... i'd do like you; that toggle Class in JS. ... but that CSS animation is nice.

and in a few hours someone will be like "Greensocks" better... never use CSS animiate use Greensocks!

[terse crest]

That's a really weird case, html into data, vue.js in custom widget... Like wtf

[terse crest]

I know, I love CSS

[elfin arch]

i know; right?!? that is new to me.

[terse crest]

Same to me, just saying

[elfin arch]

but hindsight; is like oooohhh.... that {{variable}} injection makes waaaay more sense now

cause Vue

[tame valve]

Ok sorry

I fell asleep

Let's see here.

[terse crest]

I hAtE wEeBs!!

[elfin arch]

it's good here 🙂 and i like the convos never anything is better or worse ... more of a try this or that

[tame valve]

Alright, so.
This in the CSS box:

            font-size: 20px;
            font-family: avenir;
            color: red;
            animation: blinker 2s step-end infinite;
        }

        @keyframes blinker {
            50% {opacity: 0};
        }```

What else?

[still juniper]

SE uses Angular, I think those {{}} come from there and not Vue (might be wrong tho)

[elfin arch]

CSS is good. it's the DATA tab to inject to blinky

[elfin arch]

that could be true. ... i'm a "react" person... and i say that lightly.

[hot trout]

you can remove everything but the animation from blinkme

[tame valve]

HTML is this now

<div id="clock">
    <p class="date">{{date}}<p class="time">&nbsp;{{time}}</p></p>
<div class='blink_me'>BLINK</div>
   </div>```

And result is

There's a blink but it's the word BLINK. Which, I get, I just change that word in the HTML to :

But I got to that point before. The blink is going to be after the time digits this way

[elfin arch]

yasss

[hot trout]

yes you need to make it so that the time that's filled in has a : with class blinkme

[tame valve]

Also this blink is fading... there's no way to make it pop in and pop out instead (like a real clock), right?

[hot trout]

if it's fading you didn't use the right css

[elfin arch]

1 thing ad a time...

[hot trout]

yes also that

[tame valve]

Yeah let's put it in the right place first lol

[elfin arch]

#! make the : blink.

then we do the pretty (CSS)

[tame valve]

Ok so how do I make it go in between the time digits?

This is the one thing that never worked

[hot trout]

what does the data stuff look like again

[tame valve]

{"1224":"zeroPadding(hours) + ':' + zeroPadding(cd.getMinutes(), 2) + ampm;","eventsLimit":5,"includeFollowers":"yes","includeRedemptions":"yes","includeHosts":"yes","minHost":1,"includeRaids":"yes","minRaid":1,"includeSubs":"yes","includeTips":"yes","minTip":1,"includeCheers":"yes","minCheer":1,"direction":"top","textOrder":"nameFirst","fadeoutTime":999,"fontColor":"rgb(255, 254, 254)","theme":"texture","backgroundOpacity":50,"backgroundColor":"rgba(36, 6, 73, 0.15)","iconColor":"rgb(255, 255, 255, 255)","locale":"en-US","fontSize":28,"fontWeight":"900","fontName":"Exo","textShadow":"rgb(0, 0, 0) 0px 0px 0px","time1":"week[cd.getDay()]","messageOrigin":"bottom","time2":"''","time3":"''","time4":"''","datetime":"{{ date }} {{ time }}","1224hr":"zeroPadding(cd.getHours()) + ':' + zeroPadding(cd.getMinutes(), 2);","fontColor2":"rgb(255, 254, 254)"}

A block of mess

lul

[hot trout]

that's ok I can unmess that

[elfin arch]

🤔 that top line....

{"1224":"zeroPadding(hours) + '<span class=\"blink_me\">:</span>' + zeroPadding(cd.getMinutes(), 2) +

[hot trout]

and the fields?

[tame valve]

Been over this before. When I do that, this happens

Now there's no clock

Fields:

Can't post the whole thing as Discord tries to push Nitro on me

One thing that's weird is, in the tutorial video I saw of this (by Nutty), this widget had the option to not show a clock. It doesn't seem to be in there anymore (I'm using it in two lines and I only need the clock in one of them, so I guess this data thing accidentally helps me get the clock out of the other one lol)

[hot trout]

is there a "time" in the fields?

[tame valve]

There's 4
time1, time2, time3 and time4

So from what I understand, these are because the widget is 4 elements and you get to pick which order they appear in.

[elfin arch]

in your html where it is {{time}} change that to {{1224}}

[tame valve]

The one that is -actually- the time is the 1224 one, yeah?

Ah HA, ok

Did that. Still no clock

[elfin arch]

exactly what i was wondering; where is "time" coming from 🤣

[tame valve]

Wait a second...

[hot trout]

what widget is this?

[elfin arch]

it's gotta be working.

[tame valve]

It's not

So when I do 1224 in HTML it also removes the clock

What I just tried was, instead of replacing the : with <span class="blink_me">:</span>
In Data, I did it in Fields. Still no-go

[elfin arch]

send me a dm @tame valve

[tame valve]

Clock by MrBoost

Should've done that from the get go, so you can look in there instead of having me repost things 🙂

Oh, I just realized why I shouldn't post it hahahaha

[elfin arch]

🤣

1 sec

[pastel granite]

Hi guys, could somebody help me out adding animations to additional StreamElements data?
I want to add animated text for {{sender}} for example in the JS section.
As soon as I add the const sender the animation stops working.
I think I have to add some code separately for every animation? Sorry, I'm completely new to this.

My code in the JS part:

const name = '{{name}}';
const sender = '{{sender}}';
const amount = '{{amount}}';
const animation = 'rubberBand';

const userNameContainer = document.querySelector('#username-container');
const senderContainer = document.querySelector('#sender-container');
const amountContainer = document.querySelector('#amount-container');

userNameContainer.innerHTML = stringToAnimatedHTML(name, animation);
senderContainer.innerHTML = stringToAnimatedHTML(sender, animation);
amountContainer.innerHTML = stringToAnimatedHTML(amount, animation);

function stringToAnimatedHTML(s, anim) {
    let stringAsArray = s.split('');
    stringAsArray = stringAsArray.map((letter) => {
        return `<span class="animated-letter ${anim}">${letter}</span>`
    });
    return stringAsArray.join('');

}```

CSS and HTML are working fine.

[elfin arch]

did you add a "sender-container" into the HTML ?

[pastel granite]

Yes. It's within a div container. <div id="sender-container"></div>

[elfin arch]

in your function stringToAnimatedHTML(s, anim) { change to function stringToAnimatedHTML(s = "TEST", anim) {

[pastel granite]

That doesn't work. FYI: As soon as I remove the parts for username and amount, the sender animation works fine. The same happens for the username and the amount part. It seems that the function does only work for one container!?

[hot trout]

check your web inspector's console log

[elfin arch]

^ ctrl shit J

i see no errors on load with that code.

[pastel granite]

Oh, okay. I get a Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

[elfin arch]

which one don't you have?

🙂

[pastel granite]

Uhm. Okay. I see. Thank you so much for the hint.
But I want to add the values in a custom text field with {sender} {name} and {amount}. Like

{sender} keeps {name} {amount} months in the dungeon. (Just for example)

The text has to be flexible for different variations.

[hot trout]

you're gonna need some more code for that

[pastel granite]

I think so. I'm lost. lol

[elfin arch]

are you doing this for a sub variation?

[pastel granite]

Yes. It's for subs. Sub gifts and / or community gifts

[hot trout]

you could replace the strings yourself

and make a message like [sender] does something to [name] instead

the problem being that the usual {name} and such are replaced by streamelements before your code runs

[pastel granite]

Are there any examples out there? I'm able to unsderstand how it's working if I can take a look at it but never coded something like this by myself. Sorry.

[hot trout]

yeah hold on

[pastel granite]

❤️

[elfin arch]

Are you doing it inside the Alert Box as custom CSS or going full custom code widget?

[hot trout]

  let elems = document.querySelectorAll(selector);
  elems.forEach(elem => {
    elem.innerHTML = elem.innerHTML.replace("[displayname]", content);
  });
}```

[elfin arch]

judging from what i've seen, it's Alert Box, but just want to check

[hot trout]

and then somewhere else you'd do ```
setLine(".line1, .line2", display_name);

do do a replacement of "[displayname]" with the variable display_name (which you'd run through stringToAnimatedHTML() first) in any element that has class line1 or line2

do you get the idea?

[pastel granite]

Yes, it's an alert box.

[elfin arch]

So you'll need to do the custom CSS for each variation

...just a heads up 🙂

[hot trout]

lul

a slightly arduous process

I made a way around it

[pastel granite]

I just duplicate them to keep the code for all of them the same and just change the messages in the custom text field.

[elfin arch]

that is fair. hahaha.

[pastel granite]

As I said: I'm completely new to this...

[elfin arch]

do you want an image or video in it? or sound?

hahaha; you'll be a professional in 30 minutes. we all are

[pastel granite]

I use images and videos.
And don't laugh at me... I use the dropdown field to chose image or video to get the correct code in the html part.

            {srcurl}
        </div>```

```    "srcurl": {
    "type": "dropdown",
    "label": "Bitte wählen:",
    "value": "bild",
    "options": {
      "<img src='{{image}}'/>": "Bild",
      "<video id='video' playsinline autoplay muted style='width:100%; height:100%'><source id='webm' src='{{video}}' type='video/webm'></video>": "Video"
    }```

lol

[hot trout]

in your case what I'd do probably is something like ```
let message="{message}"

message.replace("[name]", stringToAnimatedHTML(name, animation));
(the same for the other two)

document.querySelector(".message").innerHTML = message;

so instead of replacing the name/sender/amount individually, replace the whole message at once

I'm assuming {message} is the right one here I'm not entirely sure

[pastel granite]

Okaaay... I have to try that. Let me collect the jigsaw. ❤️

[hot trout]

oh you want {{anouncement}} it seems

[pastel granite]

Okay. I don't get it. Sorry. Damn. I just wanted to align the whole alertbox at the bottom. And now it seems to be a project of my life.

[hot trout]

what don't you get

[pastel granite]

What I really need now to replace the message. Just your latest code snippet?

[hot trout]

@pastel granite what's the html look like now

[shrewd magnet]

Hello!,
is this the channel that i need to contact for support help?..

i do need help getting my twitch account unbound from my old stream elements account which i dont remember

[hot trout]

no it is not

this is the channel for help with developing widgets

[shrewd magnet]

on the website?

is there any live support ?

[hot trout]

did you look at the channel list and see a helpdesk channel that mentions the platform you're inquiring about?

[tame valve]

Hey guys!
So, I noticed the chat widget CAN use my system fonts as custom fonts.
Is there a way to add code into other stuff so those also do this, thus allowing me to just tick custom, type it in and it works?

Like instead of having to import a specific font via CSS every time, then seeing it in OBS, not liking the design and having to re-do?

Or, maybe a way to import adobe fonts instead of google? That'd do the trick actually

[still juniper]

What's exactly the issue with Google Fonts? Not sure I've understood, but you don't need to import each font manually in the CSS, you can control it easily with a dropdown:
<link href="https://fonts.googleapis.com/css?family={{fontFamily}}:100,300,400,500,700,900" rel="stylesheet"> (for the HTML, or the equivalent @import in the CSS)

And then add a field like

  "fontFamily": {
    "type": "googleFont",
    "label": "Font",
    "value": "Montserrat"
  }

[tame valve]

The problem with google fonts is I can't find one I like in there because the filters aren't thorough enough.
Adobe fonts are just generally better, and the search filters are a LOT better.
I'm trying to match a font that's in a nowplaying widget and the filters just make it a LOT easier

[still juniper]

ok ok, I thought you were replacing the import manually for each font or something. I haven't played with system fonts or other fonts, sorry

[tame valve]

I was, because I don't see another way of doing it

Obviously this is impossible to work with

[shrewd magnet]

ok thanks now im get it

[ancient knoll]

Hi Guys, Im currently looking at the level up goal widget by annedor. I was wondering if anyone has worked out how to have it track subs rather than Tips?

[late carbon]

Does anyone know if someone else is using a widget that I share via URL if it will be able to do things that are activated through chat or will it be reading my chat?

[severe shell]

You would need to change some values on JS tab.
Taking a quick look, where it says "tip-goal", you change to "subscriber-goal" and where it says "tip-latest" you change to "subscriber-latest"
And remove the $ sign on HTML tab. Maybe there are other fields to play, but you would need to test and work on it.

[severe shell]

Could you elaborate your question? I'm not sure if I understood it

[late carbon]

So I'm developing a widget for a friend and had just planned on giving them the URL so that I could update it for them without having to worry about giving them the new version every time. I know that you can use the SE bot to retrieve information from the chat and use that to modify overlay based on that but I was wondering if I didn't actually share the widget through publishing it or w/e just hitting the Copy URL button and sending them that link if it would still be able to read their chat.

lol after some initial testing it does appear that no you can't

[severe shell]

If you created the widget on your account and want to send the link for that overlay, it will be linked to your account. So if your widget uses any SE event, it will be triggered for your channel and not theirs.

What I usually see is some orgs that have banners with their sponsors and then they gave that link to the streamer so the org can update the sponsor images and the streamer will get it automatically

[late carbon]

Oh it's nothing that fancy. It's just for development purposes I don't want to have to keep sending them the updated versions xD

Guess I'm just gonna have to send them new versions everytime I update it or find another way around it

[severe shell]

Or your friend can give you editor on their Streamelements

That way you can edit their overlay whenever you want to update it

[tame valve]

Guys!
Does SE have a way to have alert test buttons inside OBS?

The way it's set up right now is not great, you have to be inside your overlays on the website, then click the menu thing, then click alert type and THEN finally, the alert

And then you have to alt tab back to OBS to see but if it's quick you missed it.... And here we go again

[tame valve]

Also...
A couple of AWESOME dudes helped me earlier with some clock overlays.
I find that I need to do some more tweaking on this and I'm struggling again...
But this is easy, I just want the text in the clock to align to the right so I can line them up properly.

[onyx glen]

I am trying to be able to use obs studio to stream, but my audio suddenly cut out, can someone help

[lilac bridge]

Is there any way to make a sound command for a specific user?

[onyx glen]

Like an audio input for my digital audio interface

[hardy walrus]

@lilac bridgeThere is not.

[lilac bridge]

oh streamlabs does.... guess ill be switching to that.. Thanks

[torn charm]

Question, is there a version of the eventlist widget that can tell the difference between gifted subs and regular subs

[pulsar willow]

Only useable by a specific user or is the sound triggered by the first chat msg of a specific user?
Solutions for both scenarios should be possible with custom widgets. (The first one is already covered by the 'Video On Command' custom widget, tough).

[pulsar willow]

sounds like a CSS problem? Did you already try text-align or margin-left?
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

[pulsar willow]

This sounds like a general OBS problem?
If so, the folks on the official OBS Discord might help you.

In newer OBS Versions you can find a link to that under the 'Help' category in the OBS menu bar.

[pulsar willow]

I have a question regarding video playback (of mp4 videos).
The example below plays in the browser, but not in OBS (so basically in CEF).

According to some stackoverflow answers, this is a codec issue (?)
https://stackoverflow.com/questions/59575063/cefchromium-embedded-framework-doesnt-play-mp4-videos
https://stackoverflow.com/questions/65687191/can-chromium-embedded-frameworks-mediarecorder-support-h-264-mime-types

Is there anything, I can do about it?

HTML:

<div class="main-container">
  <video id="video" playsinline>
    <source id="source" type="video/webm">
  </video>
</div>

CSS:

.main-container {
  width: 100%;
  height: 100%;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* centers the video. */
}

JS:

window.addEventListener('onWidgetLoad', function (obj) {
  let videoElmt = document.getElementById("video");
  let sourceElmt = document.getElementById("source");
  
  videoElmt.pause();
  
  sourceElmt.src = "https://cdn.streamelements.com/uploads/ef08ac9b-56d4-4880-a671-4547bb672978.mp4";
  videoElmt.volume = 0.5;
  
  videoElmt.load();
  
  videoElmt.play();
  
  console.log("onWidgetLoad completed.");
});

[hot trout]

CEF in OBS can definitely play mp4

in fact your exact code works fine here

[pulsar willow]

hmmm ... might be an issue of the OBS version for Linux?
because on my machine it silently fails.

[hot trout]

that's very possible

no issues in obs mac either

[pulsar willow]

@hot trout
This is giving me a bit of a headache, because the widget I'm writing at, is blocked while the video is playing...
Since it silently fails, the widget is permanently blocked 😅

But thanks for testing! At least it would work for the majority of people.

[hot trout]

there's a huge update coming to the browser source in 27.2 btw

you may want to check if that solves your issue

they're updating CEF in it

(finally)

[pulsar willow]

that sounds promising 😯

[hot trout]

it's one of those things that most people don't really know about but that people like me have been waiting for for literal years

the CEF in obs rn is very old

on windows

mac/linux have somewhat newer versions already

like I had some code break because I used string.replaceAll()

which the CEF in OBS doesn't have

[pulsar willow]

well, that raises new problems for me, as I do use classes and stuff in my widget ... 😨

[hot trout]

I'm confused as to how that is impacted?

[pulsar willow]

I assumed since the class syntax is quite new to JS (afaik) it might be a problem? But even better if it isn't!

[hot trout]

oh

I mean the cef in obs windows is old but it's not that old

but yeah as desktop chrome gets updated it gets harder and harder to deal with

so yay update coming soon

they're at rc2 now I think

[uneven oxide]

@dapper cliff, posting multiple links will result in not being able to post again.

[tame valve]

Tried a LOT. Couldn't get it to align right

I've solved it this way:

Before

After

I've basically duplicated the clock 3 times, and stripped them so each one only has one set of data. So one time, one weekday, one month+day and one year

And aligned everything on the left

But now I'm doing the other scene and I need them all to the right so I'm back having the same problem.... Oof

[late carbon]

idk how to help you but I just wanna say, that's a clean looking overlay

[wary rover]

Hello there. Quick question. I know you can have arguments in commands like ${1}. However, after looking through articles and variables, I don't see anyone using ${2}. How would I incorporate this into my command? I have a file with 2 filter keywords, and I want each command argument to have its own respective filter. I hope that wasn't too confusing

Like to keep it simple, I have !test arg1 arg2, and arg2 is a sub case of arg1

[pulsar willow]

As far as I understood, the widget / overlay you use is an external one from MrBoost, isn't it?
Is the HTML generated dynamically or can you post the structure here?

[pulsar willow]

Is the question whether there are any concerns about the usage of ${2}?
Some commands in #command-share do use it.

[wary rover]

Yeah, I was wondering if it's an established variable. Because the API I'm using doesn't like it :/

Fyrewire pastebin API^

[pulsar willow]

@wary rover
so some thing like $(customapi.https://api.thefyrewire.com/twitch/pastebin/XXXXXXX?filter=${1},${2})?

But I'm not sure whether the api allows to filter for subcategories.

For the above command it says:

This will randomly select a line tagged with either [${1}] or [${2}].

https://thefyrewire.com/docs/api/twitch/pastebin/#return-filtered-lines

[wary rover]

Thanks avoeh! I set it up exactly like that, so I'm assuming its the way their logic operates. Would be nice if they added a parameter for those who don't want random values. Like filter=${1} works like a charm, but the second you put in ,${2} it breaks

${customapi.https://api.thefyrewire.com/twitch/pastebin/XXXXX?filter=${1}&filter=${2}} Welp I just got it to work LUL

[pulsar willow]

😄 👍

[wary rover]

Thank you for your time and help!

What a weird way to set it up to be honest

[pulsar willow]

it makes sense, would be nice to have it officially documented though 😅
nonetheless, it's amazing that thefirewire provides such an API 👍

[tame valve]

Yes!

[hot trout]

f

[tame valve]

That wasn't a link, stoopid bot

Well hi there! It's me again lol

For @pulsar willow

[hot trout]

it didn't like your typekit css link

[tame valve]

Squid here is familiar with it hahaha

[tame valve]

This should be dead simple, right? Just getting it to align right instead of left

I feel like I -should- be able to figure it out but I'm out of ideas because every single CSS/HTML/JS etc etc resource I find, has examples that aren't really used in the way SE expects things

So nothing I try works in there

[hot trout]

pretty basic css

[tame valve]

Lol I knew it was going to make me feel dumb

Got the code, friend?

[hot trout]

in the css for #clock remove everything under text-align

and set the text-align either left or right

[tame valve]

So it's the float thing screwing everything up then

[hot trout]

it's the flex thing making it a bit harder here

you just want the text to wrap normally

[tame valve]

Ok let's see

OMG hahaha

Worked, thank you again, good sir!

[mild cipher]

This person's left the server now, but just wanted to chime in and say that the reason why it wasn't working is because , is reserved for separating keywords. If you want to combine two filter keywords, you can use a different separator, like -, e.g. filter=$(1)-$(2) will make a single keyword like case1-case2 👍

[still juniper]

Info for all devs, but especially those with custom widgets handling/dependent on SE queue: I've found out documentation is missing a number of events in the skippable array, that is the events that should never trigger a call to SE_API.resumeQueue(). Some of them have a critical impact, especially when using the widgets in the real world. You can find more info in the Github repo issue+PR I've opened. Not sure how often the repo is checked, so I wanted to warn here sooner rather than later just in case.

The updated array is
let skippable=["bot:counter","event","event:test","event:skip","alertService:toggleSound","message","delete-message","delete-messages","kvstore:update"];

[young shard]

personally i'd just make an event allow list instead of an event block list, because who knows what events might be added later

[opaque wasp]

After searching into the docs, seems like there isn't an SE API to timeout users, is this right? If yes, is there any solution to catch timeout events via SE's events listener?

[hardy walrus]

Definitely something you'd listen to via twitch api.

[severe shell]

The event generated by SE when doing timeout/ban is the listener: "delete-messages" (in plural). But it does not give any other information other than that and the userID.

[still juniper]

kinda the same problem, we don't really know what events might be added later that do cause widgets to be added to the queue, especially if your widget is meant to be multiplatform. The real issue is that we're handling half the operation (remove from queue) when SE is in charge of the other half (add to queue), and hoping that we both know what we're doing, and that's very bad. IMHO, either adding to the queue should be on our side too, so devs know for sure what and when things are added & removed, or SE sends some param with their events flagging if the event affects the queue, so devs don't have to manually track this info (the latter is prob much more easier and of course a non-breaking change)

[silk moat]

Hey, i met a problem with the last event rotator widget ; in fact, i just put settings on never stop and he keep stopping i've tried to modify JS but nothing happened the developper is C06STUDIOS but i don't fin him

[gloomy kestrel]

@wooden pulsar ^^^^

[fathom kettle]

Heyy!!

I recently got in to creating StreamElements widgets and one of my clients asked if I could create something like Nerd Or Die has with there widget settings.
However I cant find docs or examples to recreate the following widget settings:

[hardy walrus]

they're using the custom widget open from the ➕ in the editor.

Not the stock alertbox.

[fathom kettle]

Yeah I understand but I cant seem to find how I would create that in the JSON / FIELDS area

[hardy walrus]

Channel topic github link would be a place to start.

[fathom kettle]

They have like an advanced settings tab and I am curious how they did their settings magic:

[fathom kettle]

I have read the CustomCode file thats on the SE widgets GitHub.
Sorry that I dont understand what you mean with it

EDIT:
Sorry I found it >..<
Click ➕ in the editor.
Open ALERTS and select AlertBox
Then eneable custom CSS and edit the HTML, CSS, JS and JSON

[pulsar willow]

Just to make sure I got it right: There is still no other way to structure custom widgets other than "group": "some name" in Fields, right?

[fathom kettle]

@pulsar willow as far as I know that is still the way

[wooden pulsar]

Send me a PM so we can maybe find together why my very old widget is buggy

[hot trout]

this is the alertbox

oh you found it already

man discord should really fix the colour for ➕

that thing is invisible

[severe shell]

hahaha yeah, I saw the messages from sudo and MsTess and was like "why are they typing blank spaces?" 😄

[opaque wasp]

Alright cool, that seems everything I needed. Thanks for your time

[pastel granite]

Hi all,

I'm wondering if it's possible to add active mods (current session) to the credits roll page.

[mellow quail]

Hey @mild cipher just letting you know this worked! By setting store items as Example1, Example2 and Example3 all with their own names I could then use ${redeem ${random.pick 'Example1' 'Example2' 'Example3'}} as the output for the command to then make the command itself !example and this worked perfectly! Thank you again so much

[unique plover]

Hey there, I'm not really sure where I can ask for help, but on my Stream elements dashboard. It is not allowing me to set up my SE Pay. I have around $500 sitting in the SE pay and it won't let me put in my info to be able to have the opportunity to withdraw my money into my bank. The image is of what it tells me after I attempt to put in my social , address, and phone number.

[uneven oxide]

@unique plover ⤵️

Please contact us via email for support with SE.Pay. You can use our contact form here: https://streamelements.com/contact Thank you.

[pulsar willow]

Is there a way to get error-related information out of an error event object?
I found some stackoverflow answers about this, but each is recommending something different and none seem to work.

<video id="video" playsinline>
  <source id="source" type="video/webm" src="some.url.whatever/asdf">
</video>

let sourceElmt = document.getElementById("source");

sourceElmt.addEventListener('error', (event) => {
  console.log(event.currentTarget.error.code);
});

[icy hound]

Is there a limit on being an Editor in StreamElements? I get this error

[hardy walrus]

@icy hound merch is not available for editor atm.

[icy hound]

I clicked the invite link of the one I was modding but this lead me to the pic.

[hardy walrus]

Make sure you're on your page and not someone else's when you accept it.

[icy hound]

Ahhh I'll try it again

[fading basalt]

Hi,
Can you advice where I can look into commands related to twitch to use with JS in the overlay?
Like I need a function which are getting all the information from the chat after command !speak

e.g. !speak "hello I am a viewer"

In JS I need to record "hello I am a viwer" in a cell and then return it to the screen random position.

What commands should I use?

[terse crest]

Third link from channel info, read about "message" event. The rest should be handled by your js code

[fading basalt]

Thanks

[pulsar willow]

This might help you. (Widget dimensions should be at least 800x1000px for the example. )

Of course the features and style could be improved a lot, but it's a start.
I've added some Code that deletes the message after a certain timespan (20 seconds here).

// function to get random number in range (min and max included)
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// function that is called when an event occurs.
window.addEventListener('onEventReceived', function (obj) {
  // ignore any event that isn't a chat message.
  if (obj.detail.listener !== 'message') return;
  
  let data = obj.detail.event.data;
  let message = data.text;
  let command = "!speak ";        // appended a space to prevent false positive (!speaking etc.)
  
  // '!' reads 'not'
  if (!message.startsWith(command)) return;
  
  // create new HTML element, style it and append it to the widgets body.
  let newElmt = document.createElement("p");
  newElmt.innerHTML = message.substring(command.length);
  newElmt.style.display = 'inline';
  newElmt.style.position = 'absolute';
  newElmt.style.top = randomIntFromInterval(10, 800) + "px";      // vertical range
  newElmt.style.left = randomIntFromInterval(10, 1000) + "px";    // horizontal range
  document.body.appendChild(newElmt);
  
  // removes the element after X milliseconds.
  setTimeout(() => {
    document.body.removeChild(newElmt);
  }, 20000);
});

[fading basalt]

Thank you, will have a look!

[pulsar willow]

bump

[still juniper]

You probably want to check error on parent <video>: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error

[pulsar willow]

For some reason this is null.
Since the <source> triggers immediately an error event, I assume that it isn't a MediaError.
But I wasn't able to extract any error code so far.

https://jsfiddle.net/cb891rgs/

[still juniper]

I see, honestly don't know how to handle <source> errors. However, if you don't need multiple <source> tags, or at least for debugging, you can directly use src in the video tag:

<video id="video" playsinline src="some.url.whatever/asdf"></video>

let videoElmt = document.getElementById("video");

videoElmt.onerror = () => {
  console.log(videoElmt.error)
}

(in this example it will print something with code: 4, message: "MEDIA_ELEMENT_ERROR: Format error"

[pulsar willow]

thank you! @still juniper 👍

[wide creek]

Hi, sorry to bother you all, I just installed the streamelements leaderboard extension and enabled it as panel 1 on my twitch, it says no data and isn't displaying points or how long people have been subbed for, any advice please?

[terse crest]

A question for #tech-talk

[serene osprey]

anyone know anything i can do to change the watchtime variable? i want it to list a more accurate time rather than every 10 minutes

or if anyone has custom commands they might have added to their stream elements please let me know

[severe shell]

It is not possible to change it. The 10 minutes update is by design

[terse crest]

Btw they banned cors requests to that endpoint

[hot trout]

just proxy it then

[cold fog]

Can you change the command for giveaways?

[still juniper]

Where did you get that info from?

[terse crest]

Browser's console and Google then

[terse crest]

You mean run node.js server?

[hot trout]

any http proxy can strip and modify headers

[still juniper]

I mean, CORS was never supported on that endpoint afaik, it's not that they banned it

[broken coyote]

just use herokuapp or if you have your own node server. just setup cors anywhere

takes 10 mins to set up a proxy

[manic mauve]

Hi I am trying to make my alerts quieter, but in stream elements editor it isnt working and it is still same. I made it from 100% to 18% and it was same. I tried to make it on 0% and it still was like 300% 😄 Please help me 😦

[pliant compass]

Hi i got a chatbox template from the github and was wondering if theres some framework i'll need to install to make the double brackets work on css?

[pliant compass]

have you tried going into the individual alerts (follower alerts, subscriber alert) and change the volume there? eg.

[terse crest]

All those variables should be specified in FIELDS tab in order to work. There should be .json file somewhere

[pliant compass]

there is a .json file, maybe its working as expected but vscode just threw it as an error since its not default css? thanks though maybe i'll have another look and try it

[terse crest]

There should be nothing to do with vscode, create custom widget and throw everything there. Of course vscode itself doesn't know what to do with that text, replacing happens on SE's side

[pliant compass]

ahh right okay that makes sense, shouldve thought of that before, thanks!

[hot trout]

yes vscode complains because it doesn't know about it

I use variables to make it stop

so I have an html file that I use in my browser for developing and in that I put a css (or js) tag like so

whereas in the html for streamelements I put this

which lets me write the css like so

the same concept for javascript

[manic mauve]

Yes I was doing this and it was still same on 18% as like on 100%

[indigo imp]

i have a problem with the intergration of obs and the stream deck, my media request buttons don't work mainly the play/pause as well as the skip back and fouth

fourth*

[severe shell]

Well, I had this issue long ago but it was only because I always forgot to click on SAVE button on Overlay Editor, so OBS was always playing the same volume. 😅
Also, check the variation settings and change the volumes in there (always clicking on SAVE after changing)

[severe shell]

This is using the SE.Live plugin, right? My recommendation is that you check with people in #helpdesk-selive. I've heard some people with some issue with streamdeck yesterday, don't know if it is the same problem, though.

[indigo imp]

thanks will do

[manic mauve]

I am sure I clicked on save but I can try it again

[severe shell]

Another suggestion is to create a new empty overlay and try to setup an alert in there, just to test. If that works, try to duplicate your current alert to that new overlay

[manic mauve]

I hope it will work, bcs I am starting to be bored of that

[opaque wasp]

I would like to ask about posting a widget into #widget-share, where should I ask?

[gloomy kestrel]

#widget-share channel topic

[ruby thistle]

this link lives in my head rent free: https://strms.net/codeshare

[opaque wasp]

Wait guys, I don't have the widget ready yet. Just want to make a few questions about it.

[ruby thistle]

sure shoot!

[opaque wasp]

I'm planning to develope two versions of the same stream widget, my will is to give away the basic one for free and sell the more advanced and customizable one. Is it something doable? Would that fit #widget-share/SE ToS? Any similar expirience in the past?

[ruby thistle]

we currently only allow Free to Use widgets, so we would have no problem hosting your free solution, but as with every widget its submit to a review before we share it

so feel free to use the form and after the review I can get in touch with you about it

[opaque wasp]

Can't we talk before?

[ruby thistle]

sure you can DM me

[wispy rampart]

Is there anyone here that would be willing to do some work for me?

willing to pay

[terse crest]

<-- feel free to DM :)

[wispy rampart]

someone with rep pref 🙂 sorry

[opaque wasp]

I'm avaible, DM me. I can show you past works and clients.

[wispy rampart]

added u

[unkempt spindle]

Hello, i just switched from Slobs To OBS. I’m currently adjusting my overlay through stream elements SE.live but I’m having a few issues

[opaque wasp]

I'm seeing a lot of people having problems with host alerts while using SE. Idk where this should be said tho.

[terse crest]

lol

[atomic flax]

For some reason my credits roll didn't reset after my last stream. It has gather the info from in between scenes and added it to everything that happened on last stream...

Any advice?

[spring pasture]

hi! i'm new here so i'm sorry if this is the wrong place to ask or a dumb question. i was hoping to set up something for stream where i had a looping "idle" animation up that would react to donations. and when it reaches a certain goal(s), the animation would change to a different loop/idle to reflect the progress.

idk if this is possible, but if anyone could point me in the direction of something like this, or to a guide where i could figure out how to set this up myself, i would appreciate it a bunch!

i would make the animations myself btw, so that's not what i'd need. just the means to get it to react/change based off goal progress. thank you~

[pulsar willow]

welcome 🖖

If there is no such thing already, you could use a Custom Widget to implement it yourself.
Those are basically HTML, CSS, JavaScript and some JSON for the input fields.

You find more information in the channel description (the github one).
It might also be helpful to take a look at published custom widgets in #widget-share .

[spice cypress]

hi i have my problem to my js, i think my code has a problem and cant fix it

its o goal widget that rotate 360

this is the ui

it for a tip goal but the js isnt working

[elfin arch]

check for errors in the console @spice cypress; might be trying to do Math on Strings?

[spice cypress]

this the error i get

[elfin arch]

I don't think any of these exist:

see: https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-event

[elfin arch]

i mean obj.detail .... that you have @spice cypress

[spice cypress]

theres no error now but my goal widget still not working

[elfin arch]

your problem is in the JS tab. change the obj.data... values to hard coded values. then work backwards to fill each one in

[elfin arch]

hardcode these in ^ @spice cypress

[spice cypress]

i dont get this?

[elfin arch]

...so for like these lines:

hard code the values in: ```js
$('#title').html('title');
$('#goal-current').text('23');
...

[elfin arch]

keep checking the console for errors like ^this. and replace those object.detail.amount with a value like "5"

[spice cypress]

i did change my js to this

[spice cypress]

no errors but theres no result and i the goal seems to be not working

[elfin arch]

you don't get any error for this?

[spice cypress]

no idont have any error

[elfin arch]

what do you see in the console when you add a console.log("obj.detail.type: ", obj.detail.type) ?

[elfin arch]

looking for a log that starts with: "obj.detail.type: "

[spice cypress]

i dont see console.log("obj.detail.type: ", obj.detail.type) on the console

[elfin arch]

HTML:```html
<div id="type"></div>

JS: ```js
window.addEventListener('onWidgetLoad', function (obj) {
     console.log("obj.detail.type: ", obj.detail.type)
    $('#type').html(obj.detail.type || "obj.detail.type is null");
});

obj.detail.type does not exist

you are are also missing some selectors in your jQuerys ... the $('tip') needs the # to get the container ID; $('#tip')

[spice cypress]

pls exxplain why should i put type null ? it should be tip right since im making a goal widget for tip

[elfin arch]

you have a bunch of data that doesn't exist; so you can hard code values in. then fix the spots where you see the value being null

[spice cypress]

can i dm you

[elfin arch]

sure.

[opaque wasp]

window.addEventListener('onWidgetLoad', async function (obj) {
    const data= obj["detail"]["session"]["data"];  
      if (data["subscriber-latest"]["gifted"]){
          $('#latest-sub-event').text(`${data["subscriber-gifted-latest"]["name"]} gifted x${data["subscriber-gifted-latest"]["amount"]}`);
    } else {
        $('#latest-sub-event').text(`${data["subscriber-latest"]["name"]} - x${data["subscriber-latest"]["amount"]}`);
    }
});

Can anyone point out what's wrong with this? If I simulate a sub gift and then trigger onWidgetLoad, it result in "gifted x0".

[hot trout]

do you have actual data

the simulated event doesn't save

[opaque wasp]

mmm, cheers and sub got saved actually

[opaque wasp]

i do not btw

[hot trout]

I mean simulating them doesn't save to the widget data

so when you reload the widget it comes up with no data

gift a sub on your channel for real and it should show up

assuming you have those data keys correct

which you can check with the url in the channel topic

[opaque wasp]

I'm not refreshing the webpage just open the editor and close to trigger the reload

[opaque wasp]

they are correct

[severe shell]

"onWidgetLoad" is used to load initial values on your widget. It will not be updated when receive an event. When you run a sub event, you need to use "onEventReceived" to update the values.

If you want to change something when you trigger an event, you should use "onEventReceived" after that.

[opaque wasp]

isn't onWidgetLoad get triggered anytime you open up the widget?

[severe shell]

Here you can see the keys for onEventReceived:
https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-event

[severe shell]

Only when you start the widget, yes. When you trigger an event, it will not load again

[opaque wasp]

It will load again if I edit the custom code and close the editor, right?

[severe shell]

Right, but if you run the emulate button, it will make no difference, because onWidgetLoad get actual values on start. And the emulate button does not save data anywhere.

[opaque wasp]

Alright gotcha, thanks!

[hot trout]

like I said, gift a sub on your channel for real and it will show up

[uneven prawn]

yo

i need some help

[spice cypress]

hi im creating a widget goal but kind of an health bar instead of increament od numberes it decrement

i did the function but for decrement of the Healt text but the healthbar is not responding and i dont know whats may seems be the problem

[spice cypress]

🙏

[thorn jungle]

is there a way for the streamelemtns/night bot to type something when ads are being run

[hot trout]

no, as there is no signal from twitch to the bots that ads are being run

[fading compass]

How long does it take to approve an app? +-

send client and secret i mean

[hardy walrus]

@fading compass I assume you applied for Oauth access?

[fading compass]

rigth

[hardy walrus]

Okay

Email [e-mail] with the name you gave for the app along with the app name.

The person who handles this is off today and perhaps tomorrow so Monday would be the earliest they'd probably look at the ticket.

[fading compass]

ty a lot

[simple steppe]

Hi. I would like to get list of nicknames of gifted viewers. As API endpoint or JS event listener. How to deal with it?

[simple steppe]

@severe shell @hardy walrus

[hardy walrus]

I simply directed you here. Can't help.

[simple steppe]

ok. I'll wait for someone else

[severe shell]

SE API nor JS event listener do not provide a list of the viewers who received a sub gift. But you can get the viewer name when someone sends a gift using onEventReceived
obj.detail.listener.subscriber-latest. Check if obj.detail.event.gifted is true and then you can see the user who received the name in obj.detail.event.name
Check the values here:
https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-event

[simple steppe]

unlucky. Wanted to display a gift alert along with the gifted nicknames :/

[ancient wigeon]

Can I get some help please?

[raw cloud]

guys hello can i know the command for valorant rank for night bot

[hardy walrus]

@raw cloud You'd have to ask them. Can't help with that.

[raw cloud]

thank you for ur response , can i have their discord server pls . thanks a lot,

[fast rose]

Hello, Im trying to link my youtube and twitch account together but it is saying my youtube account is already claimed. How can I make it so that they are on the same account?

[uneven oxide]

@fast rose ⤵️

Account Merging - Please note:

• Merging accounts only allow faster ways to switch between accounts
• Merging accounts does not allow data sharing between accounts - different streaming platforms, different type of events
• Merging accounts allows duplicating/sharing overlays between the accounts

If you understand the limitations of merging and want to proceed, please find the JWT tokens (!jwt) from both accounts you want to merge and fill out the form here: https://streamelements.com/contact with each token correctly labelled

[opaque wasp]

When we duplicate an overlay to another account, why all the media involved are transfered too?

[pulsar willow]

By "media" you mean fields of type "...-input", right? (e.g. "type": "video-input")

I assume it happens because the selected media is stored as an URL in the 'Data' tab of the widget?
Therefore my approach so far was to replace the content of 'Data' with {}.

[terse crest]

Happend to me too, I think it's actually doesn't transfer the media itself, it copies the data and the media is just a link to the file on your library

[terse crest]

I suppose the link will also expire at some point, seen "broken" images after transferring the widget

[shadow ibex]

Hey, does anyone know if the force field animated super theme got updated or something? One of my overlays just disappeared....
Everything was good until just a few minutes ago and I wasn't even on the streamelements website

[cedar saffron]

Hey Helpdesk,
Hopefully this is the right place to post this: I am having an issues with all the PHOENIX RISING ANIMATED SUPER THEME overlays. They will not let me put in my custom sounds for alerts it will only play the scifi ding thats on it, even when my custom sound is selected. Any way to fix this?

[spice cypress]

hi good morning can some one help me i have a problem to my new experiment goal widget

[pulsar willow]

what kind of problem do you have with your widget?

[spice cypress]

i set my field like this but i dont get the value of the character

[young shard]

you're missing the closing } for "Rogue"

[spice cypress]

i already fix that but still the dropdown not reading my field to my html

[young shard]

that will put "Dragon" as the value of src

you'll need to use javascript to get the value of imgCharacters to then map to the value of Dragon, Mage, Knight, or Rogue, and then insert that value into the src attribute

[spice cypress]

so i must set a function on js that will inherit the value of Dragon, Mage, Knight, or Rogue to my imgCharacters

[spice cypress]

is this right

[vocal rover]

hey so uhmm im trying to add streamelements recent event list to my overlay

but the usernames and recent events are overlapping each other

is this a problem with the css?

[spice cypress]

yes probably its from the css

[vocal rover]

this is the username portion, any idea what i should put there? i tried text-align: left; but didnt seem to work

[spice cypress]

adjust the margin-left

make it 43

[vocal rover]

i tried to adjust both username container and the details container and they didnt budge if i increased or decreased them

ooh i think i may have fixed it thanks man! i adjusted the width to match the background width

[spice cypress]

`.username-container {
animation: 1.2s fade-in;
animation-fill-mode: forwards;
display: inline-block;
width: 140px;
font-weight: 400;
margin-top: 4px;
margin-right: 30px;
position:absolute;
}

.details-container {
position: absolute;
animation: 1.2s fade-in;
animation-fill-mode: forwards;
display: inline-block;
right: 0px;
font-weight: 700;
text-align: right;
margin-right: 35px;
margin-left: 65px;
margin-top: 3px;
}`

[vocal rover]

it was pixeled at 140 rather than 100%

to match the backgrounds margins

thanks for your help too!!!

[spice cypress]

coluid you try this code replace youre .username-container and .details-container with this

[vocal rover]

okay

wow thank you, this is perfect!

[spice cypress]

i try to adjust the same thing

[spice cypress]

your'e welcome

[nocturne hull]

hey, does anyone know why a font that I installed on my pc doesnt show up on the site?

[spice cypress]

set it on youre css font

font-family: "Font that you want to use";

font-family: 'VT323'; sample

[nocturne hull]

@spice cypress Stream chat doesnt have custom css option

[spice cypress]

oh you will create a costume widget stream chat otherwise you cant use youre costum font

[uneven oxide]

@nocturne hull ⤵️

Google Fonts
More than 900 google fonts are supported at this time. You can preview them here: https://fonts.google.com/

Custom Fonts

Steps:

1. Install the font on the streaming PC or choose a pre-installed windows font.
2. In the overlay widget settings, select Text Settings
3. Click on Enable Custom Font
4. Type the name of the font as it appears in the windows font directory (This is usually C:\Windows\Fonts)

Note: After installing fonts, the browser and OBS must be restarted for the font to appear.

[spice cypress]

try to find on widget-share a costum chat widget

[nocturne hull]

bet thanks @spice cypress

appreciate the help

[spice cypress]

find this one its a costumize chat widget

[vocal rover]

any idea why these images are cutting out half way?

i edited the width from 20 to 40, but the place where its drawing the image. if i try to edit the mask size it gets cut off

[spice cypress]

what do you mean cutting out?

[vocal rover]

everytime i change the mask size, it was original cover; but i changed it to 30pixels

it cuts out like in the first image

is it because of the svg images its grabbing it from earlier?

the full image does not show

only half but more zoomed in

[pulsar willow]

I noticed that in some cases the actual chat messages differs from the message received by a widget.

For example:
chat message: a b c

displayed in twitch chat: a b c
printed in the console as: a b c

What assumptions can I make about chat messages?
Are they always trimmed?

For testing I used:

window.addEventListener('onEventReceived', function (obj) {
  if (obj.detail.listener !== 'message') return;
  
  console.log(`'${obj.detail.event.data.text}'`);
});

[still juniper]

Messages sent through IRC by Twitch are always trimmed afaik. Twitch removing duplicated spaces in their rendering is their own internal formatting on top of that

[pulsar willow]

ah kk, thank you! 👍

[spice cypress]

Can you show the image that you said cutting out

[graceful stone]

Does anyone know if its possible to use StreamElements tts in a Custom Widget?

[opaque wasp]

#dev-chat message

[graceful stone]

Thx!!!!

[cedar heart]

Hey I have a Question about the API,
I have Opened a Giveaway

When I GET https://api.streamelements.com/kappa/v2/giveaways/5e1cc492fd06bc9a31340a42

I become the following response:

https://dev.streamelements.com/docs/kappa/b3A6NTM5NzE2Ng-channel

Okay I have found the issue, I can get the Giveaways over this URL
https://api.streamelements.com/kappa/v3/giveaways/5e1cc492fd06bc9a31340a42

[upbeat granite]

Hello, I have a question about scrolling text that I was hoping someone could answer—

I have a label for latest subscriber, and I have it scrolling just in case the username is too long for my bounding box. By default, the space between the end and start of the username is really big, to the point where there's a stretch of time where there's no text at all scrolling across the screen.

Is there a way to minimize the gap space between the end and start of the username being scrolled?

[severe shell]

The marquee element in HTML does not repeat until the last element disappear. So yeah, there will be a moment without any text because the scroll will only run again when everything is out.

[upbeat granite]

Gotcha, that makes sense! Thanks for the explanation

ALSO hey, thank you and everyone else at Streamelements (and the SE community) for providing a free product AND free support, like what, who does that lol?! You guys are awesome, keep up the great work!

[clear finch]

Hi guys,

I'm currently trying to ditch StreamLabs and move over to SteamElements but there are a few hiccups, I have custom styled (HTML/CSS) goal progress bars. The tip goal option doesn't allow for custom HTML/CSS styling (like the alerts do) and the static HTML/CSS/JS object doesn't seem to include the total data.

Can someone help point me into the right direction?

This is an example of what my goal bars currently look like

code example (what is currently set up in StreamLabs, doesn't quite work in jsfiddle 😛 ) https://jsfiddle.net/ca62ov3f/

[hot trout]

@clear finch you'd have to create a custom widget

luckily someone has done exactly that: #widget-share message

so you'd just adjust your styling to match that one

or you can slot the streamelements data into the code you already had

for which see https://github.com/StreamElements/widgets/blob/master/CustomCode.md

[clear finch]

Thanks @hot trout I’ll look into it 😄 trying to ditch StreamLabs as soon as I can 😂 turned out to be a whole lot more work than I had thought

#downsidesOfCustomizing

[hot trout]

yeah

streamelements lets you do a whole lot more than streamlabs does though so it's worth the effort

[clear finch]

they do and at the same time they don't 😛

but hey, any product has goods and bads (trust me, I know, I'm a UX designer )

I'm leaving streamlabs because they're a shitty company, with shitty morals 😄

But they did make it 'easy' to adjust just that one widget. StreamElements so far allows for far more customisation however a few more "base" examples wouldn't hurt, or just add a "custom HTML" option to the goal bars that you can just select. Or more documentation on how to get started

wasn't too clear either to address the streamelements API for data 😄

but hey, can't have it all right?

[pulsar willow]

I did find some code that uses parseInt(obj.detail.event.data.tags.mod) to check whether a user is a mod.
Is there any reason not to use Boolean(obj.detail.event.data.tags.mod) or use an implicit conversion?

[still juniper]

mod is a string not a number. Boolean("0") and Boolean("1") both evaluate to true, definitely not what you want

[pulsar willow]

thank you 👍

[spice cypress]

hi is there a way how can i random the color of the username in chat widget thanks for the answer

or inherit the color of the username thats all thanks

[grand flame]

Hello , sorry for bothering. I don't know where to address this issue.

I'm having a little issue with SE.Pay

[severe shell]

To get the username color, you can check detail.event.data.displayColor from message listener. However, this option sometimes is not available, so you would need to treat that in those cases.

window.addEventListener('onEventReceived', function (obj) {
  if(obj.detail.listener === 'message') {
    const displayColor = obj.detail.event.data.displayColor ? obj.detail.event.data.displayColor : '#FFFFFF'
    console.log("displayColor:", displayColor)
  }
})

[spice cypress]

Oh so if I can't get the color of the username I have to create syntax

[severe shell]

If you want to random it:

const newColor = '#' + Math.floor(Math.random()*16777215).toString(16);

[severe shell]

From the example I gave, if the displayColor value does not exist, it will be white (#FFFFFF)

[uneven oxide]

@grand flame ⤵️

Please contact us via email for support with SE.Pay. You can use our contact form here: https://streamelements.com/contact Thank you.

[spice cypress]

Ok thanks I'll try it later

[slow tinsel]

Hello everyone!

I've been trying to configure the Alpha Gaming Rotating Feed to display Session Followers and Session Followers Goal but I didn't manage to get it working.

This is the addon: https://streamelements.com/dashboard/overlays/share/5de9a01f0a74c326b5fa6c68

So my goal was to make Event 1 display latest follower (that Is working as intended) and on Event 2 I wanted to display the session followers/session followers goal such as "FOLLOWERS 0/100".

The thing is even if I select "Followers this session" in Event 2 and add a {amount} or {count} it doesn't work properly. It seems that it is showing me random numbers.

Is there a specific variable to get session followers (not the javascript one, I know you can get that using javascript).

Thank you in advance!

[hot trout]

{count} is correct for that

the number should match the number in the session data:

(there is no {name} for that)

[slow tinsel]

huh. what about goal? set manually or can i grab "Follower goal progress" from Session data using a variable?

[hot trout]

it's not set up for that

so if you want a session follower goal you have to jank it:

result

or use the other field to make the text white

or a combination

[slow tinsel]

aight, thanks for the help ❤️

[fading compass]

@hardy walrus Sorry to bother you again, I sent the email last Saturday but I still haven't had an answer

[junior zinc]

Hi Guys,

I show a list of the highest tier members of my channel on the stream. I used to write them manually on a TextGDI+ and movement filter, but now there are too many, and the Text box can't show all. Is there any way to do this with SE? Thanks in advance.

[severe shell]

Highest tiers you mean tier 3 subscribers?

[hardy walrus]

@fading compass Mind DMing me the email it was sent from?

[fading compass]

done

[junior zinc]

Yes, but im on YouTube (It could be more tiers, but in this case, tier 3 is the Max) subscribers are members on YT 🥲

I'm missing some features also for youtube, so It would be awesome that someone guides me 😅

[severe shell]

Oh, so let's wait for someone who is more experienced with Youtube streaming... I don't know much of Youtube streaming platform

[still juniper]

so...uhm... another surprise regarding queueing: SE_API.resumeQueue() removes from the queue all custom widgets in the overlay, not just that one you make the call from. So basically, you have zero control over the queue/duration of your custom widget, because you depend on what other custom widgets in the overlay do (if they resume earlier than you, you're screwed because your widget did get removed too).

@elfin arch I've joined the devs Discord (you sent me the link some time ago) but it seems pretty dead, doesn't seem staff interacts with it a lot. Should I bring queue issues there? Is there a better way to let staff know the issues/feature requests and have a conversation about them?

[willow bane]

@random comet
#widget-share message
I think there is some problem with the widget because I have tried it in several ways and it doesn't work. I tried:

• URL steamID64
• steamID64 numbers

I also tried changing the region to Spain, leaving it in USA and even adding Europe in the code.
and
My profile is public
https://i.imgur.com/uCrTZyc.png

[rain zenith]

Hey lovely people in this discord,

I'm looking into a way to use SE in my app. But to get oauth2 credentials, i need to fill out a form. That would be no problem once my app is finished. But so that i can get started right away with all the back-end logic, are there mock credentials i could use for developing?

[hardy walrus]

You'd have to use your JWT token.

[rain zenith]

Okay, so no testing the oauth flow for now. Well, no problem. Thanks for the info!

[random comet]

Can you give me the name of the game you were playing when this occured ?

[willow bane]

7 Days To Die

I didn't really try any other games, just that one.

[manic oxide]

For some reason my Chatstats page doesnt load?

https://stats.streamelements.com/c/alphacja

[proud spade]

Have you changed your name?

[manic oxide]

Yes

[uneven oxide]

@manic oxide ⤵️

If you changed your name on Twitch, please follow these steps:

1. Visit https://streamelements.com/logout and then log in again by connecting with Twitch.
2. On the right side of the dashboard page that opens, select Join under bot settings. If it says Part select that and then select Join to send the bot to the chat. Don't forget to mod the bot by typing /mod streamelements in your channel if you have not already.
3. Post your old and your new name here so that we can update your channel's chatstats tracking (must be done by staff).

[proud spade]

Put it in #helpdesk-twitch please, along with your issue.

That way the proper people will see it.

[manic oxide]

Sorry didnt know if the wesite constituted for twitch

Old Name - Alpha_CJA
New Name - AlphaCJA

[pulsar willow]

Since when do checkboxes trigger the widget to reload? 😯

[loud junco]

I am experiencing issues with this. I have an MP3 file that's 173kb. When I go to upload a sound, it just says it failed at the bottom. I tried processing it through the linked website I'm replying to, but it still is failing. Is it because I am running obs as admin? Or--?

[quiet plover]

Is there a way to dump the same info that !song command provides into a notepad? I want to set up an overlay that displays the following information about the current song playing through media requests:
[Title] - [Youtube channel]

It's just that I noticed the current song overlay that SE supports by default only allows you to show the song title, and not the channel, while the !song command manages to pull the channel the song is from
This can be annoying when you're playing a song like "Epilogue" which can be a thousand different songs without knowing what channel the song came from

[elfin arch]

you could use the https://dev.streamelements.com/docs/kappa/b3A6NTM5NzIwNg-channel-playing end point to get that information inside your own custom widget and make your own.

[quiet plover]

it looks like that might be able to get the information Im looking for, but Honestly I have no idea how to implement that in a custom widget. Is there a good source for getting started on how to do that?

[spice cypress]

hi why these 3 fonts not working?

[elfin arch]

are you familiar with Javascript?

[frank lake]

Can I store data based on alert variations? For example, if I have 10 alert variations for the subscription alert I want to be able to track each person that has subscribed and which alert variations appeared on screen when they subscribed

[quiet plover]

not really, I learned it a really long time ago, but I don't remember any specific code

[elfin arch]

i don't believe you can with the custom alert box. 1 sec...

[elfin arch]

give me a minute and i'll try to layout a quick basic for ya. won't be pretty but give you an idea of where to start 😉

[quiet plover]

I appreciate it! If I can just get the channel and title displayed in text, I'm sure I can find a way to spruce it up

[elfin arch]

i can probably get ya that far pretty easy

[elfin arch]

HTML: ```html
<div id='main'></div>

CSS: ```css
#main {
 color: red 
}

JS: ```js
window.addEventListener('onWidgetLoad', obj => {
const seId = obj.detail.channel.id; //get your channel ID;
setInterval(_=> { //set interval to check current song every 10 seconds
fetch(https://api.streamelements.com/kappa/v2/songrequest/${seId}/playing)
.then(json => json.json())
.then(data => {
if(!data) {
//do stuff here if no song playing
$('#main').html('No song playing.');
} else {
//do stuff here when song is playing
$('#main').html(Channel: ${data.channel} <br>Title: ${data.title});
};
}).catch(e => console.error(e));
},10*1000); //check every x milliseconds
});

[quiet plover]

it looks like this will display the channel I'm logged into on youtube, rather than the channel that uploaded the song playing

[elfin arch]

🤔 ... i see

[quiet plover]

I am figuring out how to gussy the font up for showing as an overlay, so if we can get that field to show the song's youtube channel, then this will be exactly what I'm looking for

[elfin arch]

are you using a playlist that you have?

i'm seeing it show the channel

[quiet plover]

im using a youtube playlist that i put together

playing it through the SE media requests

this is what shouldve shown for the example i showed above

[prime helm]

anyone know at all how i can get a command to work for a valorant rank? i have the api to show the data but idk how to make it into a command

[quiet plover]

its gonna be confusing with the multiple tracks called "epilogue" that the playlist has

[elfin arch]

i've seen this one used before: #dev-chat message

[quiet plover]

im noticing the API might be looking at the youtube channel that put the playlist together, rather than the song thats playing since the !song command also returns the same problem

[prime helm]

ill see if it works ill get back with you

[elfin arch]

hmmm.... ya; it seems to be grabbing the channel for the playlist

[prime helm]

@elfin arch it worked thank you!

been looking for too long lol

[elfin arch]

That's as close as I can get ya; next step would be to set up a youTube dev account to get an API token and take the ID from SE then get then get the info from yT.... or it could be a bug

[pulsar willow]

can someone help me with this or with some css for slow text fade for twitch chat?

[quiet plover]

I see, thanks for getting me this far, Ill tinker with it and see if I can get it working

I'm gonna go with a bug btw, the channel displays normally with a song thats manually requested. I'll report it to the Support team

[severe shell]

Very recent, end of January

[terse crest]

So it was a bug after all..

[severe shell]

OBS has nothing to do with uploading files on Streamelements website. Try to logout (https://streamelements.com/logout), remove cookies from the page and try again

[terse crest]

you need -webkit-mask-image: linear-gradient(to bottom, white 0%, black 100%). Apply it to the container.

Also you can play with percentages and I don't remember which color (black or white) is transparent, so maybe also switch them

[severe shell]

Hmm, maybe using custom css and storing on SE_API every time the variation triggered? I wonder, never tried that.
But all the variations would need to be custom.
@frank lake I think it might be possible, but not sure, never tried that before. You would need to increment the key value every time because SE_API.store.set doesn’t do that:
https://github.com/StreamElements/widgets/blob/master/CustomCode.md#se-api

[pulsar willow]

da bot left my channel after name change, does this fix itself

[severe shell]

Please follow these two steps:

[uneven oxide]

@pulsar willow ⤵️

Please logout of StreamElements at https://streamelements.com/logout and then login again to your account (Twitch/YouTube/Facebook).

@pulsar willow ⤵️

Go to the Dashboard > Right side > Part channel > Join channel (https://streamelements.com/dashboard) https://i.imgur.com/uYVb8OK.png

[pulsar willow]

ty ty will do <3

[severe shell]

Let me know if it works for you 😊

[pulsar willow]

it worked tyvm <33

[royal jacinth]

Yello

Siganme encmi canal

[pulsar willow]

good news, and thank you 👍

[hot trout]

did someone just alphabetise the channels

[hardy walrus]

https://tenor.com/view/star-wars-obi-wan-kenobi-may-the4th-may-the-force-be-with-you-may-the-fourth-be-with-you-gif-14064679

[pulsar willow]

Oh ok is it on obs or streamlab website ccs?

[terse crest]

Streamelements website - my overlays - edit overlay - open code editor - css tab - find something like .main-container - paste as a new row betwen {}

ok I tested it, you should just use transparent for transparent (wow, css so cool) and color doesn't matter for the mask at all
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, white 100%);

remember folks. transparent = transparent

[loud junco]

Will try!

[pulsar willow]

Oh ok I’ll screenshot it when I get home so ya can show me how lol

[pulsar willow]

There is no way to make a checkbox field non-editable, right?

[opaque wasp]

I'm curious about this, why would you need such thing?

[severe shell]

Not possible, at least not documented... I'm also curious

[pulsar willow]

I felt like it was an ok way to nonverbally communicate always-active values.
The only other way I could think of doing this would involve label fields. 😅

[terse crest]

Actually would be a neat feature

Also maybe a read-only inputs and textareas

[pulsar willow]

was this right?

[terse crest]

#log>div doesn't look like a chat container, mb post a screenshot of your html

[pulsar willow]

Wouldn't #log>div just select the divs that are immediate children of #log?

[terse crest]

yes, and we want to get as parent as possible

maybe even just body { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, white 100%); }

[solar trout]

In the snippet of code in this jsfiddle https://jsfiddle.net/uy6Ls4pw/2/, is there anything I can do to get the text "new line" in the animation to be shown on a line under "0%" ? Thanks

[hot trout]

            gauge.querySelector('.gauge__cover').innerHTML = `${Math.round(percentageOfEmotes * 100)}%` + "<br>" + "new line";

ye olde stick a <br> in there

you'll want a text-align: center; on that css class too

[severe shell]

I would just keep the backquotes at the beginning and at the end

gauge.querySelector('.gauge__cover').innerHTML = `${Math.round(percentageOfEmotes * 100)}% <br/> new line`;

[hot trout]

oh, yeah

I just swapped out the \n for a <br> without looking at anything else

[severe shell]

Yeah! 😄 I really don't like those + signs on text

[pulsar willow]

i dont think it worked.. :/ unless i didnt do it right lol

[terse crest]

add my snippet to the very end or the beginning

[hot trout]

also

did someone just unalphabetise the channels

[solar trout]

I feel so dumb for not seeing that!!!!! Thank you so much

[pulsar willow]

wdym lol

[terse crest]

should be fired

[terse crest]

typo lol

[hot trout]

@solar trout don't forget that .textContent also needs to be set to .innerHTML or else it just renders the <br> as text

[solar trout]

Thank you so much.

[solar trout]

Got it. Thanks

[pulsar willow]

so like this?

omg it worked thanks so much!! @terse crest

[terse crest]

🙂

[solar trout]

works like a charm - thanks again

[winter aspen]

hey, does anybody know, how you can turn the "Prize Wheel by pjonp" widget, so it only accepts the command from broadcaster?

[severe shell]

If I understood correctly, at the moment moderator and broacaster are the ones the widget accept, right?

[winter aspen]

ye

I tried removing the moderator check

but then its error

[severe shell]

Okay, maybe you didn't remove it correctly.
From line 79, change it from:

if (chatMessage.hasUserId(streamerUserId) || chatMessage.hasUsername(WheelBot) || chatMessage.isModerator()) hasPerm = true;

To:

if (chatMessage.hasUserId(streamerUserId) /* || chatMessage.hasUsername(WheelBot) || chatMessage.isModerator()*/ ) hasPerm = true;

All the command is just one line, ok?!

[winter aspen]

chatMessage.hasUsername(WheelBot) this not important?

[severe shell]

This is just if you have a bot and want to use it to trigger

[winter aspen]

k thx, Ill try

[severe shell]

It is said on line 4:

  WheelBot = 'yourbotname', //Lowercase name if wanting to use a bot to call commands

[severe shell]

Let me know if that works

[winter aspen]

it works, thx

[pulsar willow]

Hello is there were I ask problems about overlays on the SE website?

[hot trout]

if you're creating your own widget, yes, if you're having trouble with the provided ones, #helpdesk-twitch

[pulsar willow]

Okay thank you!

[quiet plover]

is there a setting im not seeing that allows the SE chat overlay to scroll from the top down instead of the bottom up? I'd like to get it scrolling the other way so it looks better at the top of the screen

[severe shell]

The default chat widget is very limited. It is better to go to #widget-share and look for one of many custom chat widgets, so you can use it and they have more options to customize

[quiet plover]

alright ill check it out

[spice cypress]

hi im making a eventlist and i want to get my twitch channel name how can i do that?

instead of follower i like to change that to my chanel name

[pulsar willow]

The parameter passed to the onWidgetLoad handler has a property obj.detail.channel.username
You can simply save it in some global variable and use it when you need it.

[fading compass]

i sent u a pm with the mail, did u read it?

[hardy walrus]

I did however the person responsible for it said there were no tickets with that email.

[clever stream]

Hey all! Is there a way to add line breaks to the alert message?

[proud spade]

If you add <br> into the message it should create a line break.

[clever stream]

Really sorry to say this but I actually have some more to add to the problem
I am reading the message over TTS. but TTS reads the tags without ignoring them.

[proud spade]

I don't think there's a way around that :( Hold shift and hit enter in the alert message text box.

[clever stream]

Yeah so far I could not find a solution. I'll keep the TTS part for later. Thank you so much @proud spade for the response

OMG Thanks a lot!

[clever stream]

Thanks a lot for helping out @proud spade !

[proud spade]

shift enter works in discord too, only reason I thought of it haha

[clever stream]

https://tenor.com/view/you-saved-my-life-saviour-hero-you-saved-me-grateful-gif-15158280

[polar forum]

Found Prize Wheel by pjonp and was wondering if there is a way to add more segments unless 25 is cap? Was hoping to see if I could get to 30 if possible

[cyan valve]

is it possible to emulate a streamelements tts via js?

[opaque wasp]

Any update on this side?

[severe shell]

It is not possible to make subgroups

[opaque wasp]

Is there a place to submit feature suggestions?

[acoustic dragon]

Does anyone know how to fix this I was messing with it and it just made everything bigger

I somehow cut my whole entire screen to make it like that

[uneven oxide]

@opaque wasp ⤵️

Check out the StreamElements ideas board: https://strms.net/ideas. You'll be able to add ideas, upvote ideas you agree with and track their progress with email notifications. Adding and upvoting ideas also helps the staff know which ideas should be prioritized so please take some time to upvote.

[severe shell]

Hmm, maybe you changed your preview scaling to canvas. Right-click your preview and go to Preview Scaling > Scale to Window

[acoustic dragon]

@severe shell i tried that and it didnt work :/

[severe shell]

Hmm, so unlock your "Starting Soon" and then right-click on it and go to Transform > Reset Transform. Check if that works

[acoustic dragon]

is it possible i can screen share it to you @severe shell

because its on every single scene that its cut up like this

[severe shell]

I cannot go into a screen share at the moment, maybe in one hour I will be good for that.
If you don't have it solved until there, you can send me a DM

[acoustic dragon]

ok

because i was just trying to transfer over to streamelements and somehow i ended up in this situation

[elfin arch]

👍 I will send the field data for more options in a few hours

[acoustic dragon]

ok i fixed everything thanks anyway @severe shell

[polar forum]

Awesome, thank you!

[unique dagger]

Is this the right place to get help with overlays?

I created an alertbox for my overlays but I messed it up and it doesn't show up on the overlays I duplicated it to for me to highlight to be deleted. I don't want to have to recreate the whole overlay I just want the alert box gone so I can redo that.

[oak sable]

not sure if this is the right place to ask, but I'm wondering if there's an API request to see someone's total sent messages in a chat or in a specific amount of time (like last 7 days etc)? would be helpful for a project I have. Chat Stats does this, but I want to pull for an individual chatter

[pulsar willow]

So, you want to delete the alertbox?
And neither the 'delete' key on your keyboard nor the delete button in the overlay editor work?

[unique dagger]

@pulsar willow the alertbox doesn't show up on the overlay at all when I activate it and it's not in that list that's below that delete button. There is no title for the alertbox I created in the layers for me to click on to delete.

@pulsar willow none of these is the correct alertbox the only way I see it is when I activate that alert and it shows up in my obs

[pulsar willow]

hmm, that is strange.
Does the alertbox show when you copy the whole overlay? (My Overlays -> those three dots -> duplicate)

[unique dagger]

@pulsar willow no it's just the same as before

@pulsar willow ok so I don't know the main issues why I can't see the widget in the overlay or in the layers and only in obs but I managed to fix my issue. Thank you for your time.

[dusty snow]

What is the difference between online interval and offline interval??

[elfin arch]

delete everything in the Field Data tab; then copy paste this over: https://raw.githubusercontent.com/pjonp/pjTestBot/master/modules/.SE_Overlays/prizeWheel/fieldData_50_segments.json it'll give you up to 50 segments 🙂

[opaque wasp]

here is your crown 👑

[elfin arch]

hahah. thanks 🙂

[cyan valve]

Is it possible?

[spice cypress]

hi is it possible to change it to my own png and set it as an event icon?

[north tartan]

hello, I would like to ask if its possible to read the channel point redemptions claimed? I am trying to use onEventReceived but it does not enter the function. or a different event-type should be used for twitch channel point redemptions? thank you in advance 🙂

[hardy walrus]

@north tartan we have nothing for twitch points yet.

[north tartan]

thank you for the prompt response 😄

[hardy walrus]

Do note I say yet.

[elfin arch]

not officially .... but are you making a custom widget and have some JS knowledge?

[north tartan]

yes, I am trying to create a custom widget wherein a viewer can redeem a twitch channel point reward and streamelements will add points to the viewer. in summary, widget will convert twitch channel points to streamelements points

I have a bit of JS knowledge (and google is here as to help also 😄 )

[elfin arch]

take a look at #dev-chat message 😉

it will add a if (listener === 'reward-redeemed') listener for ya

[north tartan]

oh thanks! I will look into this more! thanks for the help 🙂

[terse crest]

Yes

You want to add some fields as described in the Overlay Editor Docs, upload your images and replace the links with your {variables}

[spice cypress]

i change it to this but its not working

[terse crest]

Did you add the field for it tho?

[spice cypress]

yeah i have a field for that

[terse crest]

it should be a background-image not image

And followerIcon, not followIcon

[spice cypress]

and

[spice cypress]

still no image

[terse crest]

let's check it
in the editor window, press Ctrl-shift-c, click on the widget preview, press delete
Ctrl-shift-c again, click on some element inside the widget then try to find your event-follower element in the elements tree on the right, then look at the styles for it

like so

[spice cypress]

Oh it's not for the text container

[spice cypress]

using it on js event-container

[terse crest]

it's just an example

I mean you need to look at the actual code to see if it's there or not

ctrl-shift-c - click here

and don't expose the links to your overlays on public

[terse crest]

^

[terse crest]

press delete and do it again

you need to remove that iframe-blocker

[terse crest]

it should be event-follower, not event-Follower, case matters

[terse crest]

what's in the styles?

[terse crest]

it should be url({followIcon}) sorry I'm not fully awake yet lol

[spice cypress]

oh i think i shoul set a css height and width

[terse crest]

exactly

because you renamed it from event-image to icon

[terse crest]

congrats, you won

[spice cypress]

im good thanks for the help 😇 🙏

[ocean jackal]

hi, i use obs on my macOS big sur, and i have a ps5 played in a MSI monitor, i have a HDMI cable in the msi monitor that connects to the back of my mac into the USB-C and when i add a display capture it only shows the desktop of the msi monitor, not the ps5 gameplay. can i get some help?

[hardy walrus]

Ghoul want the OBS discord https://discord.gg/obsproject

[terse crest]

btw anyone knows how to auto timeout users if they lost in !roulette?

[hardy walrus]

Not possible.

The response can't be modified and would most likely require another bot to do it.

[elfin arch]

does /timeout {user} work?*

[hardy walrus]

Oh

https://tenor.com/view/star-wars-droids-these-are-gif-13163950

[terse crest]

huh?

[elfin arch]

the responses are in the https://streamelements.com/dashboard/bot/modules page

[terse crest]

ah ok, let me try

[elfin arch]

it should 🤞 work; i'm just assuming that if the /me works then the other slash commands would

[terse crest]

it works but you cannot have /timeout and /me on the response at the same time, so if you put /timeout at the beginning it will just timeout without any response

[elfin arch]

ya; the message will be the reason for the timeout; so can't do both a response + timeout

[terse crest]

Sadge

maybe somehow let the bot react to it's own messages...

[elfin arch]

unless the ${customapi} works in the modules? then you could ... maybe

[terse crest]

it works

[elfin arch]

ooooh; then you got options

[terse crest]

is there an endpoint to timeout?

[elfin arch]

you can send messages to chat; so send 2 messages one for the `you lose' and one for '/timeout'

...haven't tested that; but should be able to send the slash commands via SE API; i don't think you can with jebaited middleware though

[terse crest]

didn't know you can send message via se api

https://api.streamelements.com/kappa/v2/bot/channel/say I see

no, it's POST

[elfin arch]

yup; /say requires the JWT

https://jebaited.net for oauth middleware