Football in JavaScript // Zhao Jinjiang

This talk delves into the intersection of football and JavaScript, presented by a member of the Vue core team and software engineer at BIT. The speaker shares their passion for football and discusses various tools and visualizations they have created to aid coaches and content creators in illustrating football concepts. They cover the complexities involved in drawing accurate football pitches, including pitch sizes, markings, and player representations. The session highlights the use of libraries for creating visual representations of football matches, incorporating player data, and showcasing goal analytics. Additionally, the speaker discusses leveraging AI for video analysis in football, converting video clips into technical graphics. The talk culminates in the introduction of development tools for creating cross-compatible components for Vue and React.

support women devs. Um I remember coming here for my very first cityjs. I was one of the parties attendees three years ago and to come here and to give a talk about my very favorite uh favorite domain. It's um it's a full circle moment. So thank you so much for artists and everyone for giving me the opportunity. So yeah, >> big applause. Big applause. Thank you so

much. That was a fantastic talk. You also made me understand why sometimes when I look at my end, I'm like it feels hotter than this though. Yeah. So I learned a lot. Uh thank you so much and remember to go find Ashwaria later if you if you want to talk to her about all the things that that she talked about. Uh our well our next speaker uh

is setting up is a very interesting talk is football in JS and for I don't know if there's any Americans here but it's football. Okay football you soccer is not a thing. Okay it's called football guys. Uh and and uh yeah, as you can see, he's very on team wearing a football football jersey. Yes. Yes. Uh so far uh the boss man has gone. So I don't

have any uh housekeeping announcements for you. Uh other than uh I don't know. Stay hydrated. Weather very hot. Actually, it's not hot now. It'll be hot soon. No, the the cool the cool weather is gone. The cool weather is gone. It's very hot now. Drink more water, everybody. But don't spill your water. Okay, he's ready. Round of applause for Dinang. >> Thank you. Thank you. Thank you

everyone. How are you doing? >> Good. Okay. Okay. Football time. Football time. Oh, also almost lunch time, right? Uh but yeah, we can still wait for a second until it's finished. Uh yes, today. Yeah. Hello everyone. Today's topic is obviously about football. Um football in JavaScript and JavaScript. Uh but before we talk about the all the things about football, first thing first when we talk football is

about football or soccer if you want to say that. Uh okay, let's let's go. So hello everyone. Jin. You can also call me JJ as well. Uh I'm a view core team member and also I'm a software software engineer at BIT. Uh, bit is a basically a component based web development system. I'm also a big football fan. I watch football game. This is was the home stadium

of Olympia. Yeah. Uh, thanks Aries for help me get the ticket in Greece. Yeah. And Yeah. Thank you. Thank you. That's Olympia. Olympia. [laughter] >> Oh, sorry. But but thank you for helping me get the ticket. >> Okay. [laughter] And uh I also play football. So just in case you want to find me in local football uh pitch, here is an dating app uh stringer soccer for

footballer can find me. Okay. So uh I've gave a talk about uh understanding view single form component and it compiler uh in the last 60 years Singapore. It's been two years a lot of things happen especially about football. So first I got a coaching certificate from a football association of Singapore and then I got a volunteer job in a local US academy called Western NextGen. So and

beside the voc team member and be software engineer, I'm also a football coach at Western Next and I also started a YouTube channel talking about football about all the things I have learned with a friend of mine De who also a software engineer and F1 photographer. So it's a dual content channel talking about football and formula one. Uh so beside uh real code team member uh software

engineer a bit and football coach at western next I'm also a YouTuber now talking about football but imagine sorry if you don't understanding but we have translation okay so uh back to the topic why we have topic today um since as both football coaches or content creators sometimes you need some visual things to deliver your ideas or messages in a better way so and we I'm a

software engineer so I'm thinking maybe we can make something to make it uh easier. So today's topic is just about what I've done some kind of homemade football visual things for coaches and content creators. Hope you enjoy it. So now let's kick off. Okay, first topic is about football pitch or football field. Football field is not simple as you imagine or you think because their sizes are

different. If you have watched the Apple TV Plus show Tesla, you'll definitely agree with that. uh from the Wembley Stadium uh to the Anfield the home stadium of Liverpool and the Craven Cottage which is the smallest football pitch in Premier Premier League the home of Flander their size are totally different and not to mention for the Fer standard they have the wide range of the size of

football pitch you can play football is for everyone in everywhere so to draw a football pitch on the screen you have to deal with that like this different sizes then second these balls and markings. Since markings on the pitch are not simple neither, let's talk about the lines and dots first. They are like the penalty area, penalty spots, go area. Even for the corners, they are measured

in yards, not in meters. Yeah. Uh it's still fine. We can we we can do the math. We we can convert them. It's okay. Let's continue. Stripes. Stripes [snorts] on the pitch or sometimes the grid. You may say, "Oh, I'm a weber. I know is it just a CSS tricks just some repeated background? No, it's not that simple because the stripes are not just for better look

but for some technical purposes. If you look carefully, the first three stripes and the last three stripes on the pitch are always six yards which align with the small goal area, the penalty spot and the big penalty area. And the last 12 strips share the rest of the pitch. So there Yeah. So there the widths are different. You have to deal with that. Same for the different

sides of the T you have to calculate. Yeah. So that's a detail. Not to mention other technical markings invisible for coaches like the the bottom third uh middle third or some other things like the right the the the right one the most famous one invented by coach Pep Guardiola the positional play margin something like that in different sizes of pitches. And not to mention if you play

five size football or seven size football which is more than popular nowadays they have different uh basic markings to draw. So overall to draw a perfect pitch on the screen, you have to specify the size on the screen, the real size in the real world and the pitch type, all kinds of markings and eventually uh whether you want to show the uh the piece in the horizontal

direction or the vertical direction and some quantum. So that's about football pitch. Now you can npm coach pitch to get it. Yes. Okay. Now, let's talk about the object or the content on the pitch. Basically, there just some balls, players, arrows, lines, areas, etc. And the most challenging one is the player, the player marker. So, sometimes just a colorful dot, but but sometimes not. You may put

more information like the player number or uh the names or even more after post match analysis uh some personal data like the goals assist booking injuries etc. So it's not simple you have to deal with the details a lot and also you have to specify the position on the pitch and do some uh math transformation like you specify the uh position in meters we do the other

transforms for you. So for example in react we provide a function in the children you can call the convert function you just pass in the meter number numbers in meter we do the other other computation transformation for you and same to view we have a similar ID uh concept like the scope slot. So in the scope slot we also provide convert function you can use it as

well in the same way. Okay. So also for the all the markers the ball marker player marker arrow marker and another base marker you can extend to your own if you want to build something else available now. Yeah support both view and react. Yes. Okay. So uh on top of them let's uh share [snorts] some show cases uh using them. So first one is the match lineup

uh match lineup UI. So it's just a yeah just a lineup uh you can see how team send their players on the pitch and also in some cases like the postmatch analysis you can see the statistics data like the the goals and injuries something like that. uh behind that is just kind of a JSON data. You define the teams player information and the passing it it just

work and uh beside that we also support the integration with some ministry football data platform like the sweat.com and API.com. uh live demo. So here I have prepared some data JSON data fetched from the API football.com and the spammon. We just dropped the clear data in. Yeah, here it goes. And same to the spot. Yeah. So, if you're familiar with those football data platform, you can just

get the data and render it uh as a football lineup UI. Yeah, that's and you can also uh take a screenshot, save as an image. Okay, so let's continue. The second showcase is I call go poster which is a canvas that you can draw some uh player or uh a ball or an arrow to show how a goal scored. Uh it also support half pitch view and

the full pitch view and you can also add some title and subtitle to to to explain how it goes code. Uh and also you can download it as an image. Yeah, that's a simple app. And now let's take a break. Uh let's do some football knowledge test with this app to see how you can recognize those famous go in the football history. Okay, get ready. The first

one, what that what is that? By who and when. >> You know how you can say the love? >> Yes. Yes. Cra Robin Van Percy 2014 FIFA World Cup. Yes. Flying Dutchman. Okay, let's continue. The second one. Second If you know I say it loud. >> The jersey with red and blue. >> Yes. Leo Messi. >> Yeah. Dribbling five player in a row and find the net.

Okay. the assessment. Last one. Last one. Last one. Last one. Last one. If you are local Singaporean, you should definitely know that it's a five two five go. Nope. It happened last year. Shaw uh to the equalizer support Singapore national team to get qualified to the Asian Cup for the first time in the history. Yeah. Yeah. Yeah, we are going to the Asian Cup next year. Okay.

[laughter] Okay. Cool. Cool. So now you can get the app through ging lineup or go poster to enjoy your own goal poster and feel free to share with your friend on social media etc. Okay, cool. Let's move on. Next topic is about AI. Uh yeah, it's hard to give a talk without AI nowadays. >> [laughter] >> So the basic idea is from a video clip to a

animated technical board. So uh yeah once you got a video clip uh you yeah so there are some traditional solutions in the football industry which is heavy expensive hard to use. So I decide to make something on my own. So first I analyze the video clip with AI or which I use is the library called Roboflow/Sports based on YOLO. the if the model if you know and

also run the process on the Google collab. So uh first thing we just do the player and ball detection with the tracking ID so we know the players how player moves. Then the second step I'll just go quick since we running out of time. So team identification to uh recognize whether a team whether player belong to team A or team B and then we recognize the the

the key points or the feature point of the pitch. So we can do the uh transformation from the screen position to the real pitch position. So basically that's the whole idea. So after all uh yeah for more information I can check out the link. I'll share it later. But eventually you got the JSON data. Then we can do some uh post editing. Uh since time is limited,

I'll skip uh the the live demos. But basically there are five steps. So first you can take a look and then you input the team information and the player information. And then you do the player linking like you you link the track ID of the of the player and the real player information. Then you pick up the key frame and then uh do the final tuning. So

like some player may be in the wrong position you can you can you can drag and drop drag the move the position and eventually got uh exported JSON data to consume further. Then the next step is build a replay replayer. So like this uh if you can recognize what the go is you can shut it a lot. So you can just uh uh by the arrow keys

to to see how the the Yeah. So yeah the answer is clean bi l classical first run first this isn't la lia yeah [laughter] okay cool so since it's just a JSON data abstract JSON data so we can actually uh replay in more creative ways for example the 3D way so here's a lab demo another one so this one is actually a 3D football stadium oh And

you can see how the ball goes, how the player runs, and eventually see how the goal scored. Okay. So, uh yeah, that's almost everything. But before the end, uh I'd like to share some back product I made during the journey. So, first one is called VueTSC Plus. This is a tool based on view simple compiler aure uh last cityjs conference uh Singapore and also based on vue

tsc the the creator of views is here Johnson. Yeah say hello there. Okay so this one uh this tool can help you to to compile everything. If you uh you want to support your component library for both Vue.js and uh ReactJS. This tool can help you compile everything like ts files, tsx files and view files into plain javascript and css. Yeah, that's that's the tool. And then

the second thing I'd like to share is called dual template which is a GitHub repository template you can use to create a library or component which you want to support both rea and gs. quite similar. It provide a ReactJS file and view component file and the use.ts file. You can put all the shared or common JavaScript logic and types there. And we also have three entry files

beside the index default one. We also have the viewts and the react ts in with which you can if you just want to consume the component in react you can just import the compon package slashreact or slash view for viewjs only and also provide the demos docs test and mammcript out of box. So that's the template you can just click the button on the corner to use

it today. And the last one so all the uh all all the component uh all all the packages component shares they open source at bigcloud uh slash my name football so you can get all of them and also provide a similar f structure as a dual template provide also including the docs and demos uh yeah so football is a big industry uh it's a lot of thing

to explore further I hopefully I can keep going and share more and more in the future Uh then last thing last uh I'd like to give some credit to uh technical board online FM stadium and the football meta which I learned a lot of thing about football from them. So yeah, that's all. >> Thanks. [applause] >> Thank you so much. That's that's fantastic. I today I learned

that football like I as a former basketball player, we only have to worry like the three-point line different then the entire pitch different. This is a Okay, Arie saying something. >> I have a question. Ronaldo Messi. [laughter] >> Good question. >> Yeah, but what is the answer? Um I think no I I would say I would say Leono Messi over Ronaldo a little bit but both are

really good players. >> Yeah. also.