iberryboi
iberryboi
  • 9
  • 72 545
Stream Elements: Custom Chatbox User Group Tutorial
iberry.gumroad.com/l/user-group-chatbox
github.com/flygOn-LiTe/widget-api-service
Gumroad- iberry.gumroad.com/
Discord- @iberryboi
Github- github.com/flygOn-LiTe
Personal site- rowberry.dev
TIMESTAMPS
00:00 Intro
00:35 Event Listener
01:05 Guard Clause
01:42 Message Data
02:09 hasBadge Helper Function
02:56 User Group Logic
04:03 Memoizing Function
04:20 Client Class
05:53 Cached Group
07:18 addRow Function
08:30 innerHTML
09:50 CSS Styling
10:47 Test Function
11:28 Widget Progress
11:47 BONUS CODE
12:37 getUserId
13:58 checkFollowerStatus
14:39 Channel ID
15:48 Conclusion
#streamelements #widget #twitch #chatbox
Переглядів: 198

Відео

Stream Elements: Twitch Sliding Chatbox Coding Master Class
Переглядів 2682 місяці тому
iberry.gumroad.com/l/sliding-chatbox rowberry.dev/blog/se-test-functions/ Gumroad- iberry.gumroad.com/ Discord- @iberryboi Github- github.com/flygOn-LiTe Personal site- rowberry.dev TIMESTAMPS 00:00 Intro 00:50 Event Listener 02:20 addRow Function 02:50 Test function 04:44 Container 05:20 Track Row Positions 06:30 Create Row 07:32 Animation 10:39 New Row Animation 11:45 CSS Styling 15:00 Queue ...
Stream Elements: Chat Box Animations with GSAP
Переглядів 3935 місяців тому
Chatbox Code- iberry.gumroad.com/l/animated-chatbox Test Functions- rowberry.dev/blog/se-test-functions/ Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev Widget Platform Template- railway.app/template/UvkJaG?referralCode=xqd8QO Widget Platform Demo- frontend-service-production.up.railway.app/ TIMESTAMPS 00:00 Intro 01:48 Boilerplate 02:...
Stream Elements: Custom Chat Box Widget Coding Basics
Переглядів 2 тис.5 місяців тому
Chatbox Template- iberry.gumroad.com/l/chatbox-template Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev Widget Platform Template- railway.app/template/UvkJaG?referralCode=xqd8QO Widget Platform Demo- frontend-service-production.up.railway.app/ TIMESTAMPS 00:00 Intro 00:49 Get The Messages 03:35 Simulate Message Events 07:26 Build Messa...
Stream Elements: Custom Goal Bar Widget with Phaser 3 + Midjourney
Переглядів 676Рік тому
Code- iberry.gumroad.com/l/phaser-goalbar Tutorial- rowberry.dev/blog/phaser-se-goal-bar/ Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev Widget Platform Template- railway.app/template/UvkJaG?referralCode=xqd8QO Widget Platform Demo- frontend-service-production.up.railway.app/ TIMESTAMPS 00:00 Intro 01:30 Create UI asset 02:55 Exportin...
Stream Avatars: Intro To Custom Scripts
Переглядів 1,1 тис.2 роки тому
Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev
Stream Elements: Custom Twitch Goal Bar Widget SVG Coding Basics
Переглядів 4 тис.3 роки тому
Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev Widget Platform Template- railway.app/template/UvkJaG?referralCode=xqd8QO Widget Platform Demo- frontend-service-production.up.railway.app/ TIMESTAMPS 00:00 Intro 00:50 Create UI asset (Adobe Illustrator) 07:19 Export SVG as Code 08:00 Coding Widget functionality 17:40 Error Fix 18:01 Fin...
How to use ANY Custom Font with Streamlabs Alerts
Переглядів 34 тис.4 роки тому
Gumroad- iberry.gumroad.com/ Discord- @iberryboi GitHub- github.com/flygOn-LiTe Personal site- rowberry.dev Widget Platform Template- railway.app/template/UvkJaG?referralCode=xqd8QO Widget Platform Demo- frontend-service-production.up.railway.app/
How to configure a N64 USB Controller in RetroArch for N64 games
Переглядів 30 тис.4 роки тому
Fast & Easy how to setup your n64 USB controller inputs in retroarch to play n64 games. Discord- @iberryboi

КОМЕНТАРІ

  • @flufflessMC
    @flufflessMC 17 днів тому

    awesome, the only vid on the topic and than it is also a good one

  • @MikMWP
    @MikMWP 19 днів тому

    How would i add an outline to the text? like a stroke on the outside of the text, not inside it

  • @ricardoarias7524
    @ricardoarias7524 24 дні тому

    Hi thank you very much for this guide <3 But about the bagdes, how do i get the url for them, as well for the emotes

  • @sheyrobinson00
    @sheyrobinson00 27 днів тому

    Thank you so much, I can’t tell you HOW MANY MONTHS, I’ve tried literally searching for UA-cam scrolling through a lotttt of videos, hoping someone would make a UA-cam video. I know a bit of coding, but not enough to create stuff like this so thank you!

  • @vawkwardbat
    @vawkwardbat Місяць тому

    Thanks! Do you know how I can make emotes appear larger in the text box? I only seem to get tiny emotes through, ven when the font is larger, but I'd like to adjust their size independent of the font if possible... thank you!

  • @IGNFliping
    @IGNFliping Місяць тому

    tysm ❤

  • @godchi1dvonsteuben770
    @godchi1dvonsteuben770 Місяць тому

    Now set up a PlayStation controller for N64, in Retroarch, lol... Good luck.

  • @godchi1dvonsteuben770
    @godchi1dvonsteuben770 Місяць тому

    So, make a video that shows how to map a BACKBONE (Dual shock style) controller for N64 in Retroarch, THEN you'll be posting a useful video. Mapping an actual N64 controller is childs play. R analog = C buttons. But how do uou map c buttons when A, B, X, Y are the only options listed?

  • @Iloveyouqueens
    @Iloveyouqueens Місяць тому

    Great video thank you so much

  • @Muffinmouth
    @Muffinmouth Місяць тому

    This is the best tutorial for scripting widgets out there! Send you a friend request on discord, hoping to ask you some questions!

  • @GengarQT
    @GengarQT Місяць тому

    thank you so much! i want to ask, what if i want to use as a border a custom box that i designed on illustrator, how do i implement it?

  • @gogreyhoundmusic
    @gogreyhoundmusic 2 місяці тому

    THIS IS INCREDIBLE! Thank you so much for the help. I learned a TON about where I was going wrong.

    • @iberryboi
      @iberryboi 2 місяці тому

      Great to hear! If you have any other questions ever just ping me in the comments.

    • @gogreyhoundmusic
      @gogreyhoundmusic Місяць тому

      @@iberryboi hope all is well! I think i've hit another wall/my lack of knowledge is in my way. Could I send you my code (which is really just your code, lol) to see what it is that I'm doing wrong?

    • @iberryboi
      @iberryboi Місяць тому

      ​@@gogreyhoundmusicYea for sure! Are you on discord?

  • @psycomtv1
    @psycomtv1 2 місяці тому

    you are just amazing 😄

  • @gogreyhoundmusic
    @gogreyhoundmusic 2 місяці тому

    DOPE tutorial. I'm currently learning to code so there are tons of advanced concepts here for me - but i get VERY excited when i AM able to follow along. one thing - I would like to decorate several things uniquely. I would like each alert to have its own styling, and I would also like to style messages uniquely depending on the user group (VIP, Mod, Follower, User, perhaps custom groups defined in the code). Would that be possible, or am I dreaming too big?

    • @iberryboi
      @iberryboi 2 місяці тому

      Thank you! Absolutely, that can be done.

    • @gogreyhoundmusic
      @gogreyhoundmusic 2 місяці тому

      @iberryboi awesome. I'm going to keep digging around in your code and trying to manipulate it and rewrite it to get the desired outcome. I'm still in over my head, but being able to follow your logic as you code is helping tremendously! Can't wait for the next one. Thank you so much for putting this info out.

    • @iberryboi
      @iberryboi 2 місяці тому

      @@gogreyhoundmusic Sweet! Glad they are helpful, wasn't sure if this format was good or not, I will make more because you said that.

    • @gogreyhoundmusic
      @gogreyhoundmusic 2 місяці тому

      @@iberryboi I'm running into a brickwall when it comes to using the chatters 'role' (broadcaster, mod, vip, follower, custom group) to if/else different class decorations in the JS. it's no doubt because im trying to do something beyond my level - BUT if you were needing a topic for your next video - I would love a lesson in how to accomplish it.

    • @iberryboi
      @iberryboi 2 місяці тому

      @@gogreyhoundmusic Ok i will make a video on it! Stay tuned!

  • @PinkyPawsVOD
    @PinkyPawsVOD 3 місяці тому

    thx for that, but how do i add emotes from betterTTV, 7TV or FrankerFaceZ?

  • @SinisterPixel
    @SinisterPixel 3 місяці тому

    Would you be able to create a guide for UA-cam? I'm specifically having trouble with the emotes since it seems like you need to call them a different way from Twitch

    • @iberryboi
      @iberryboi 3 місяці тому

      Absolutely, I will do that.

  • @-itimora-
    @-itimora- 3 місяці тому

    How do you line all the JS Code up so nicely? 5:38

    • @-itimora-
      @-itimora- 3 місяці тому

      Nevermind I found it out, But a other problem is... how do you make the test that reapeat it self over and over to stop?

    • @iberryboi
      @iberryboi 3 місяці тому

      @@-itimora- Comment out/remove the setInterval function and just use the field button to test

  • @Gabofer8a
    @Gabofer8a 3 місяці тому

    Excellent video. Have you configured a wireless n64 controller?

  • @BotsandMagic
    @BotsandMagic 3 місяці тому

    ...where's part 2?

  • @katty841
    @katty841 3 місяці тому

    ❤❤❤❤

  • @ItsEnvinae
    @ItsEnvinae 4 місяці тому

    THANK YOU for making this video, there's like NO tutorials for that kind of thing on UA-cam or I just can't find the right ones... but this one you made is gonna be so useful!! Thanks for your hard work!

  • @FernandoLopes-ec5cp
    @FernandoLopes-ec5cp 4 місяці тому

    Thank you for the quick and nice video. I manged to get my N64 controlelr working porperly (as configured) by toggling "Remap Controls for this Core" ON. Then the controller remap under the core settings worked as intended.

  • @hasraz7365
    @hasraz7365 4 місяці тому

    Hey, was just wondering is there a way to make the colors customisable?

  • @waffleboi2110
    @waffleboi2110 5 місяців тому

    GYAT DAMNN ANOTHER ONE?

  • @waffleboi2110
    @waffleboi2110 5 місяців тому

    LETS GOOO ITS UP

  • @timchbrown
    @timchbrown 6 місяців тому

    This video always bails me out when I have to configure my usb controller. Thank you very much.

  • @janisozols922
    @janisozols922 6 місяців тому

    Great stuff! Really would like to see in depth video on creating custom chat widget.

    • @iberryboi
      @iberryboi 5 місяців тому

      ty! here it is: ua-cam.com/video/rf735Ti4260/v-deo.htmlsi=ZpCajmtVM31y1RR2

  • @waffleboi2110
    @waffleboi2110 6 місяців тому

    Yo i was wondering if you could post a guide for a custom chat box; similar to the ones you can find on etsy and such. If you can it would be much appreciated.

    • @iberryboi
      @iberryboi 6 місяців тому

      @@waffleboi2110 yea sure thing, I've been meaning to release a video on this!

    • @waffleboi2110
      @waffleboi2110 6 місяців тому

      @@iberryboi thanks man! I just started learning about webdev stuff and i really wanna up my streaming :) would be much helpful! I got somewhat of an idea down, but i know im probs making this as hard as possible lmfao. I've been using BeniArts as an inspo for what i want to do for my own chat! Hopefully your next vid will help with that!

    • @iberryboi
      @iberryboi 6 місяців тому

      @@waffleboi2110 I checked out BeniArts, great design on those! I will show you how to implement something similar.

    • @waffleboi2110
      @waffleboi2110 6 місяців тому

      @@iberryboi Neat! Thanks for taking the time to do so :D I think i figured out a bunch of the stuff from beni arts widgets too, im just 10000000% sure i can do this with more efficient code with a guide.

    • @waffleboi2110
      @waffleboi2110 6 місяців тому

      @@iberryboi hey man i wanted to ask if you got a discord i could add you on? with just this video i think i've figured out how to make the chatbox completely on my own, just wanna toss a few of my ideas at you and see if they make sense. Planning to use anime.js for the animation, and jQuery to simplify the JS a bit.

  • @ImlerithGoro
    @ImlerithGoro 6 місяців тому

    Thank you man, really.

  • @simplylogan93
    @simplylogan93 7 місяців тому

    Can this also be achieved using Adobe Animate? I know you can export SVG but I can't find an option to export the code. Unless I have to export from an HTML canvas?

  • @AradiaArts
    @AradiaArts 7 місяців тому

    so I'm having an issue where the font is only changing the {Name} but not "has followed!" part of my alert. What did I do incorrectly?

  • @LuminaeusPanda
    @LuminaeusPanda 8 місяців тому

    I can never seem to absorb this info which for you isn't a bad thing because I means I always gotta keep watching this. its helped me heaps so huge props to you for making this so simple and easy to follow.

    • @iberryboi
      @iberryboi 8 місяців тому

      tyvm! That seems to be the case with alot of people 🤣

  • @XnazxulX
    @XnazxulX 8 місяців тому

    i know this is 3 years old but man.. this will always be helpful. Thank you so much for this

  • @iberryboi
    @iberryboi 8 місяців тому

    i pronounced "Lua" wrong lol

  • @andrewg3522
    @andrewg3522 8 місяців тому

    Thank you for this!

  • @Big5mokE719
    @Big5mokE719 8 місяців тому

    Thanks brotha! Been trying to configure this retrolink controller and everything i found so far was using auto configure or just wrong but think this will actually work

  • @Xtimus
    @Xtimus 8 місяців тому

    ty dude!

  • @rhysmaughan9823
    @rhysmaughan9823 8 місяців тому

    I'm having the problem where the alert doesn't show the followers name its worked fine for the others but the follower alert isn't having it

  • @jasonorourke1531
    @jasonorourke1531 9 місяців тому

    thanks

  • @jaephillie
    @jaephillie 10 місяців тому

    Very helpful video! I followed everything but I keep getting one error - editor mode: will not report channel event visible

  • @nvlvibes
    @nvlvibes 11 місяців тому

    can we make this bar vertical?

    • @iberryboi
      @iberryboi 11 місяців тому

      Absolutely, it would be mostly the same but you'd be animating the height instead of the width.

    • @nvlvibes
      @nvlvibes 11 місяців тому

      @@iberryboi you have discord or something I have so many questions

    • @iberryboi
      @iberryboi 11 місяців тому

      @@nvlvibes yes my discord name is iberryboi

    • @nvlvibes
      @nvlvibes 11 місяців тому

      @@iberryboi I have sent you the request.

  • @jaybird_0909
    @jaybird_0909 Рік тому

    i know this is old but watched this and did everything and it does not work anymore

  • @TribalIsland
    @TribalIsland Рік тому

    Could you make some more advanced stuff such as widgets connected to certain commands through stream avatars

  • @Ryixxx
    @Ryixxx Рік тому

    absolute life saver <3

  • @FuPlaayz
    @FuPlaayz Рік тому

    This worked! Thank you for making this guide!

    • @jaybird_0909
      @jaybird_0909 Рік тому

      you have the most recent comment, i cannot get this to work at all. and ive watched and done exactly everything he has done.

  • @freedoom755
    @freedoom755 Рік тому

    That's really cool! Do you have a skript for custom avatars so they can enter for example !battleroyal?

  • @Erlynbebe
    @Erlynbebe Рік тому

    I wanted to get into making widgets and this was lovely, still alittle confused but that's fine since you explained stuff clearly enough, it's really late for me so it could be a tired brain lmao I didn't want to ask, if you could maybe do a video on having the number or percentage filled outside the bar attached to a sign post or mascot? I've seen some of those recently and they look interesting to do! But they are vertical, not sure if that matters T-T EITHER WAY TY! I LOVED THIS!

  • @ARTSYENVI
    @ARTSYENVI Рік тому

    This tutorial is amazing ! Thanks a lot, it helped. I wonder, will you make tutorials on chat widget next ? On how to create a custom twitch chatbox and stuff like that :D ?

  • @jasmineamine
    @jasmineamine Рік тому

    Hi i have followed each step and it's not working :( i've been at this for an hour now, could you please help?