SlideShare a Scribd company logo

Capstone Project Final Presentation

Matthew Chang, profile picture
Matthew Chang

Team ngx is proposing a responsive air hockey web game that utilizes the ngxqrctl.js library for remote control via QR codes. The project aims to optimize server performance while providing a seamless user experience for players controlling the game on their smartphones. The presentation outlines the project's architecture, development environment, timeline, and features such as a scoring system and game rules.

Engineering
1 of 86
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
Air Hockey Web Game (using ngxqrctl.js) Proposal Team NGX kick-off presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)
INDEX • Team NGX • Introduction • How to Use • How to Play • Game Rule • System Architecture • System Environment • Schedule • Q&A 2
Team NGX Team NGX Air Hockey Web Game (using ngxqrctl.js) Team Mission - Make new user experience in a web - Make best web maintenance environment - Share our source code within worldwide developers Team Member & Role 3 Name Part Ikwhan Chang NGX Web Server, QR Controller JavaScript Library Sangtae Lee AirHockey Game Client Dongkyoung Jo NGX QR Controller
Introduction Project Name • Responsive Air Hockey Web Game What is this? • Air Hockey Game based on Web • Remote Controlling via QR Code • Server is based on NGXRCS (NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web server)
Goal 5 Optimize Server optimization Ngxqrctl.js Provide for developer to our js library(jQuery Plugin) Air Hockey Game(Demo) Provide our Air Hockey Game for demonstration(how to use our ngxqrctl.js) 1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster. 2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js 3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
How to Use? 6 1. Install our JS library Ngxqrctl.js : for developer 1) Add HTML element for showing qr-code <div id=”ngx-container”> </div> 2) Include the ngxqrctl script in developer’s site <script src="/path/to/ngxqrctl.min.js"></script>
How to Use? 7 1. Install our JS library Ngxqrctl.js : for developer 3) CSS #ngx-container #qr-view{ width: 100%; } (How to use CSS is not yet determined but we will use CSS for customizing style) 4) Initialize with JavaScript Initialize an NGX QR Controller instance as a jQuery plugin: $('#container').ngx-qrctl(). var $container = $('#ngx-container'); // init $container.ngx-qrctl({ // options layoutMode: 'fitRows’ });
How to Use? 8 2. Setting event Ngxqrctl.js : for developer (ex : onTouchStart) var $container = $('#ngx-container'); function onTouchStart() { // Here is user’s action console.log('layout done'); } // bind event listener $container. ngx-qrctl( 'on', ’touchStart', onTouchStart ); (list of event) dragstart dragmove dragend touchstart touchend touchmove
9 How to Play? Air Hockey Web Game 1. Connect our game’s website if there is two user, game will start Player 1 - disconnected Player 2 - connected
10 How to Play? Air Hockey Web Game 2. scan QR-code via user’s smartphone
11 How to Play? Air Hockey Web Game 3. Play!
12 Game Rule Air Hockey Web Game • Two players, One ball • Each side has their own goalpost • Ball can move inside rectangle area. • Available action Moving : left, right, jump • If the ball go into the opposite’s goalpost, on the ground during game, the user can get a single point • Time limitation : 3 min
System Architecture 13 Wi-Fi Connected User’s unique code Our Website Controller 1 (iphone or android) Controller 2 (iphone or android) Server : I/O , Game Logic Processing, Push Viewing Data (JSON) QR Code provided Wi-Fi Connected
System Environment 14 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
Development Environment 15 Lee Jo IntelliJ IDE Eclipse w/ STS Eclipse w/ Android Testing Server changes testing Jenkins Continuous Integration JIRA share Issue/Bug/TODO Issue Tracker Chang Git Repository
Schedule 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
Team NGX - 3th weekend 17 Ikhwan Chang (Presenter) - Server Turning - Architecturing SangTae Lee Dongkyoung Jo - QR-Code Research - jQuery Socket.io plugin Research
Schedule 18 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
Architecturing Server Cent OS (Main O/S) NGINX (Routing) NodeJS Socket.IO (Notification) ngx_rcs.js (plugin) Client(Game) jQuery.qr-code Client(Device) Smartphone HTML5 canvas User’s Touch Data (JSON) Air Hockey Game jQuery ngx_qrctl.js Push Notification (plugin)
Where our plugins located Server Client ngx_rcs.js (plugin) ngx_qrctl.js (plugin) Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
Type of QR-Code
QR-Code Processing http://larsjung.de/jquery-qrcode/
QR-Code Processing USERIP+USER-AGENT+HTTP HEADER {“Sat, 07 May 2011 17:31:38 GMT”,”Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0”,”165.194.33.5”} CREATE UNIQUE KEY(using MD5 with IP-Hash key) ENCODED TEXT : E5c09a1dd615d8c878dcfb0f2923f976 KEY : 165.194.33.5 CREATE QR-CODE(using jquery.qrcode : http://larsjung.de/jquery-qrcode/) $(selector).qrcode({ width: 100, height: 100, color: #3a3”, text: “http://qrcode.matthewlab.com/q=E5c09a1dd615d8c878dcfb0f2923f976“ });
Team NGX - 4th weekend 24 Ikhwan Chang - - setting to node.js and socket.io - - made to default push notification program SangTae Lee Dongkyoung Jo(Presenter) - - set up default layout - - restructure the class
Schedule 25 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
Team NGX - Why we change server O/S? • License problem • We provided web server from SK since we joined open source award challenge but said that they cannot provide window based server because they have not enough to Window license. • So they provide only server based on Linux • We seriously consider to change Cent OS(based on Linux) during first week and finally Cent OS has no problem if we changed.
Team NGX - Why we change server O/S? • Detected malware and DDOS attack • During summer vacation, we found that there was a lot of malware and DDOS in our server. • So we could not trust windows server anymore.
Team NGX - Setting socket.io and node.js • We finished to setup socket.io and node.js • Node.js can provide npm instructions • So user can easily install our NGX Server • User can install just two instructions • npm install –save express • npm install –save socket.io
Team NGX - Setting socket.io and node.js • If user want to run our server, there is easy instruction • Just “node index” instruction can run our server • We can check how more faster than previous server(Windows) • http://test.matthewlab.com/game : Test game • http://test.matthewlab.com/c : NGX Controller
Using JavaScript - Center circle - Center line - Goal area - Goalpost Team NGX - Default layout(prototype)
Team NGX - Game engine KineticJS - HTML Canvas JavaScript framework - Almost free(except support of technology) - Experience of use - Using the game engine
Team NGX - Game Volleyball Air hockey • similar elements • way of movement, collision, score etc • can reuse the last semester’s class • need to restructure the class
Team NGX - Problem • Implementation to actual hockey game is delayed • graduation thesis, broke down the laptop ..., other problems à We must speed up for progressing our project
Team NGX - Next to do • Implementation to actual hockey game quickly • Add to npm library and make jQuery plugin
Team NGX - 5th weekend 35 Ikhwan Chang(Presenter) - Completed to make server - Vaccine is added on our server - Send to OSS Awards(오픈소스 공모대전), finally. SangTae Lee Dongkyoung Jo - - Set game rules clear and then these rules are applied previous project - - Modify prototype UI and add both players and ball(s)
Schedule 36 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
Install to vaccine 37 - ClamAV is freeware for linux-based OS. - Our server is based on Cent OS. So we installed ClamAV and added to daily schedule.
Presented to oss award 38 Demo video : http://www.youtube.com/watch?v=Vjxvz-ngwSA Website : http://ngx.matthewlab.com - Finally, our server-side programming was presented for open source software award, sending all materials. - We captured our demo video and upload all source code at github for open source.
Server Architecture(OSS Awards) 39
Device Detection(OSS Awards) 40
Site Remote Control(OSS Awards) 41
Air hockey rules 42 - There are two players - If puck goal in the my section hole, the opposite play get 1 point. - A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first. - If a player get a 15 or 18 points, finally the player win the game. - Players cannot touch puck which is in opposite player section. - There is time limit to play game speedly.
Air hockey 43
What will we do next? 44 - The first evolution result will be noticed at 10/6. - If we passed first evolution, then there is technical test during October. So, Ikwhan Chang will focus on this technical test and other tests. - And Sangtae Lee and Dongkyoung Jo will focus on make air hockey game for perfect sample.
Team NGX - 6th weekend 45 Ikhwan Chang - ngx_qrctl.js is attached successfully in our Air Hockey Game - Now we can get user’s touch x-y coordination in our game. SangTae Lee(Presenter) Dongkyoung Jo - Implementing Game part (animation effect, movement, collision) - Design 2D collision equation yet applied to hockey game.
Schedule 46 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now
Team NGX - Game engine KineticJS - HTML Canvas JavaScript framework - Almost free(except support of technology) - Experience of use - Using the game engine
Team NGX - Game engine • Kineticjs take a time-out for focusing on other endeavors • It is going to service before long, but we cannot wait for their service.
Team NGX - Problem • Implementation to actual hockey game is little bit delayed • We decide to make hockey game only using html5. à have to learn html5 animation • It needs to calculate velocity of user’s controller • We already have a calculating collision function à We must speed up for progressing our project
Air Hockey Game
Team NGX - 7th weekend 51 Ikhwan Chang(Presenter) - Tested to communication between client and server - OSS Award: Failed SangTae Lee Dongkyoung Jo - Implementing Game part (animation effect, movement, collision) - Design 2D collision equation yet applied to hockey game.
Schedule 52 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now
Demo
Team NGX - 9th weekend 54 Ikhwan Chang(Presenter) - Redesign controller - Add to chat function in server and client. SangTae Lee Dongkyoung Jo - Add to Score and Game Ending Message - Tried to more smooth game - Change ball from vector to image - Add to sound effect
Schedule 55 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other Effec ts
Team NGX Problems from demonstration 56 1. There is not enough to adjust hockey game rule(e.g. puck cannot move opposite area) 2. There is no sound effect(it means game is looks like air hockey but not really) 3. Game is too simple 4. Game is too monotone(it is not enough to game since there is no image)
Team NGX Add to chat 57 [Player 1] : Hey what r u doing now?? NGX Controller NGX AirHockey Game
Team NGX Add to chat – source code 58 Ngx_qrctl.js NGX Server
Team NGX - 10th weekend 59 Ikhwan Chang(Presenter) - Fixed to server - Changed whole design SangTae Lee Dongkyoung Jo - Joined in ROTC Training - Since their main role is game logic, Ikwhan focused on game’s appearance in this week - Tried to find resources(sound, image) - Add to sound
Schedule 60 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other Effec ts
Team NGX Change whole design 61 - Replaced puck, pin from vector to image(design by Ikwhan) - Added to icy background image, relocated to score board
Team NGX Add game control button in NGX controller 62 Add game sound - Game starting sound - Bump sound
Team NGX - 11th weekend 63 Ikhwan Chang - Optimize server - Try to solve blinking images problem SangTae Lee (Presenter) Dongkyoung Jo - Optimize game appearances (focus on collision). - Make ending point of game and enable to setting the point. - Start to write final report.
Schedule 64 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g Effec ts Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other
Team NGX There are some problems… 65 - Blinking images(puck and pin). - When user control pin fast, it’s appearance is little strange.
Team NGX Last week… 66 Add game control button in NGX controller à Try to activate in the our game. But little bit delayed
Team NGX 67 This week…. - Enable setting ending sore in NGX controller - Solve blinking problems - Adjust game coordinate (when we redesign whole game , cooridinate was changed ) - Optimize game logic continuously.
Schedule 68 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g Effec ts Optimizin g JS Library Optimizin g 1st Demo Final Repo rt Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other
Team NGX Team NGX Air Hockey Web Game (using ngxqrctl.js) Team Mission - Make new user experience in a web - Make best web maintenance environment - Share our source code within worldwide developers Team Member Role(Revised) 69 Name Part Ikwhan Chang NGX Web Server, QR Controller JavaScript Library Sangtae Lee AirHockey Game Client Dongkyoung Jo UI Design
Introduction Project Name • Responsive Air Hockey Web Game What is this? • Air Hockey Game based on Web • Remote Controlling via QR Code • Server is based on NGXRCS (NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web server)
Goal Optimize 71 Server optimization Google Cloud Server(IaaS) Ngxqrctl.js Provide for developer to our js library(jQuery Plugin) Air Hockey Game(Demo) Provide our Air Hockey Game for demonstration(how to use our ngxqrctl.js) 1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster. 2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js 3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
Air hockey rules 72 - There are two players - If puck goal in the my section hole, the opposite play get 1 point. - A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first. - If a player get a 15 or 18 points, finally the player win the game. - Players cannot touch puck which is in opposite player section. - There is time limit to play game speedly.
Modified – Server Env 73 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
Modified – Server Env 74 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
Modified – IaaS 75 After – Google Cloud Before – Customized Server
Modified 76 Removed function • Chatting : It is not useful • KineticJS: Since KineticJS opensource project was closed, we could not use this framework.
Problem 77 • O/S was changed(4th week) • We provided web server from SK since we joined open source award challenge but we could not use windows server since there was license problem of Windows Server. • So they provide only server based on Linux • Moreover, we failed to challenge OSS award(So, SK planet could not provide server anymore) • = That’s why we move server from us to Google Cloud.
Problem 78 • Cannot use KineticJS • Kineticjs take a time-out for focusing on other endeavors • It is going to service before long, but we cannot wait for their service.
Before After 79 Modified Feature Before After Server H/W Server provided by SK Google Cloud Platform Server O/S Windows 2013 Server Enterprise R2 CentOS 7 Game – Appearance Using the image of puck and pin Using the vector(SVG) of puck and pin Game Engine KineticJS Pure-HTML5 Canvas Client – the function of controller Chatting Button control(Start/Pause/Resume) Client – QR Code Appearance QR with inner status message QR with color variation belong to the status of user
Result 80 Game Intro After user scanned qr-code
Result 81 Game Main
Result 82 • Game Controller • MoveXY : User can control their puck using touch pad • Game: User can set game score / User can pause/ resume that game.
Demo http://github.com/MatthewLAB/NGX_PROJECT
To be implementation Server Client ngx_rcs.js (plugin) ngx_qrctl.js (plugin) Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
QA
thanks!

More Related Content

PDF
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Andy Pemberton
 
PDF
Sprint 72
ManageIQ
 
PPTX
Build, Publish, Deploy and Test Docker images and containers with Jenkins Wor...
Docker, Inc.
 
PDF
[KubeCon NA 2018] Telepresence Deep Dive Session - Rafael Schloming & Luke Sh...
Ambassador Labs
 
PDF
Containerised Testing at Demonware : PyCon Ireland 2016
Thomas Shaw
 
PPTX
Gradle
Jadson Santos
 
PDF
[KubeCon NA 2018] Effective Kubernetes Develop: Turbocharge Your Dev Loop - P...
Ambassador Labs
 
PDF
Automated acceptance test
Bryan Liu
 
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Andy Pemberton
 
Sprint 72
ManageIQ
 
Build, Publish, Deploy and Test Docker images and containers with Jenkins Wor...
Docker, Inc.
 
[KubeCon NA 2018] Telepresence Deep Dive Session - Rafael Schloming & Luke Sh...
Ambassador Labs
 
Containerised Testing at Demonware : PyCon Ireland 2016
Thomas Shaw
 
Gradle
Jadson Santos
 
[KubeCon NA 2018] Effective Kubernetes Develop: Turbocharge Your Dev Loop - P...
Ambassador Labs
 
Automated acceptance test
Bryan Liu
 

What's hot (19)

PDF
[Image Results] Java Build Tools: Part 2 - A Decision Maker's Guide Compariso...
ZeroTurnaround
 
PPTX
CloudOps CloudStack Budapest, 2014
CloudOps2005
 
PDF
Sprint 71
ManageIQ
 
PDF
[212] large scale backend service develpment
NAVER D2
 
PDF
Getting started with puppet and vagrant (1)
Puppet
 
PDF
JCatapult
ghessler
 
PDF
如何透過 Go-kit 快速搭建微服務架構應用程式實戰
KAI CHU CHUNG
 
PDF
Gradle Introduction
Dmitry Buzdin
 
PDF
Возможности интерпретатора Python в NX-OS
Cisco Russia
 
PPTX
Automated Deployment Pipeline using Jenkins, Puppet, Mcollective and AWS
Bamdad Dashtban
 
PDF
DockerCon2017 - Skypilot
Thomas Shaw
 
PDF
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet
 
PDF
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
KAI CHU CHUNG
 
PDF
Introduction to gradle
NexThoughts Technologies
 
ODP
Container orchestration: the cold war - Giulio De Donato - Codemotion Rome 2017
Codemotion
 
PDF
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
Linaro
 
PDF
DrupalCon Los Angeles - Continuous Integration Toolbox
Andrii Podanenko
 
PDF
Tempest scenariotests 20140512
Masayuki Igawa
 
PDF
Testing with Docker
toffermann
 
[Image Results] Java Build Tools: Part 2 - A Decision Maker's Guide Compariso...
ZeroTurnaround
 
CloudOps CloudStack Budapest, 2014
CloudOps2005
 
Sprint 71
ManageIQ
 
[212] large scale backend service develpment
NAVER D2
 
Getting started with puppet and vagrant (1)
Puppet
 
JCatapult
ghessler
 
如何透過 Go-kit 快速搭建微服務架構應用程式實戰
KAI CHU CHUNG
 
Gradle Introduction
Dmitry Buzdin
 
Возможности интерпретатора Python в NX-OS
Cisco Russia
 
Automated Deployment Pipeline using Jenkins, Puppet, Mcollective and AWS
Bamdad Dashtban
 
DockerCon2017 - Skypilot
Thomas Shaw
 
Puppet Camp Paris 2015: Continuous Integration of Puppet Code (Intermediate)
Puppet
 
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
KAI CHU CHUNG
 
Introduction to gradle
NexThoughts Technologies
 
Container orchestration: the cold war - Giulio De Donato - Codemotion Rome 2017
Codemotion
 
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
Linaro
 
DrupalCon Los Angeles - Continuous Integration Toolbox
Andrii Podanenko
 
Tempest scenariotests 20140512
Masayuki Igawa
 
Testing with Docker
toffermann
 
Ad

Viewers also liked (20)

PPS
Adivina Que Ciudad Es
alfcoltrane
 
PDF
Monitoring File transfert (MFT) WAARP R66, OW2con'16, Paris.
OW2
 
PDF
Internet Threats and Risk Mitigation
BrandProtect
 
PPT
7. Por qué leer a los clásicos
María Belén García Llamas
 
PDF
Antepedia Reporter and Fossology: Updates and new challenges toward software ...
OW2
 
PDF
OW2 Open Source Community Technology Council Update, OW2con'16, Paris.
OW2
 
KEY
Spatial Sound 4: Getting the Best Surround Around
Richard Elen
 
PPT
NFPA Presentation Social Media
tellem
 
PDF
Participating in AppHub, the European Open Source Marketplace
OW2
 
PDF
OW2con'14 - Xlcloud, 3D rendering in the cloud
OW2
 
PPT
Corporate taxation introduction
dphil002
 
PPT
The psychophysiology of tobacco use and craving
The Institute for Triple Helix Innovation
 
DOC
1 early britain. the celts
Mr. Euc@s
 
PPT
Big data - Cassandra
Jen Wei Lee
 
PDF
ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB
OW2
 
PDF
OSCAR & AppHub, fostering market readiness at OW2, OW2con'16, Paris.
OW2
 
DOC
Wildi 2009 Resume Addendum
Wildi
 
PPTX
Cloud workload guidelines
Jen Wei Lee
 
PDF
Accelerating mission critical business processes with Bonita BPM 6. Antoine T...
OW2
 
PDF
Industrializing the creation of machine images and Docker containers for clou...
OW2
 
Adivina Que Ciudad Es
alfcoltrane
 
Monitoring File transfert (MFT) WAARP R66, OW2con'16, Paris.
OW2
 
Internet Threats and Risk Mitigation
BrandProtect
 
7. Por qué leer a los clásicos
María Belén García Llamas
 
Antepedia Reporter and Fossology: Updates and new challenges toward software ...
OW2
 
OW2 Open Source Community Technology Council Update, OW2con'16, Paris.
OW2
 
Spatial Sound 4: Getting the Best Surround Around
Richard Elen
 
NFPA Presentation Social Media
tellem
 
Participating in AppHub, the European Open Source Marketplace
OW2
 
OW2con'14 - Xlcloud, 3D rendering in the cloud
OW2
 
Corporate taxation introduction
dphil002
 
The psychophysiology of tobacco use and craving
The Institute for Triple Helix Innovation
 
1 early britain. the celts
Mr. Euc@s
 
Big data - Cassandra
Jen Wei Lee
 
ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB
OW2
 
OSCAR & AppHub, fostering market readiness at OW2, OW2con'16, Paris.
OW2
 
Wildi 2009 Resume Addendum
Wildi
 
Cloud workload guidelines
Jen Wei Lee
 
Accelerating mission critical business processes with Bonita BPM 6. Antoine T...
OW2
 
Industrializing the creation of machine images and Docker containers for clou...
OW2
 
Ad

Similar to Capstone Project Final Presentation (20)

PDF
Programming Language Final PPT
Matthew Chang
 
PDF
A new interface between smart device and web using html5 web socket and qr code
Matthew Chang
 
PDF
Project NGX - Proposal
Matthew Chang
 
PPT
​Presentation team ngx 5주차 발표자료
Matthew Chang
 
PPTX
Capstone Project Last Demonstration
Matthew Chang
 
PPTX
Create online games with node.js and socket.io
grrd01
 
PPTX
Building the Internet of Things with Thingsquare and Contiki - day 1, part 3
Adam Dunkels
 
PDF
HTML5 & JavaScript Games
Robin Hawkes
 
PPT
Inter galactic war
Ilie Halip
 
PDF
38199728 multi-player-tutorial
alfrecaay
 
PDF
201001162_report
Shirish Jadav
 
PDF
Openworld Engine workshop slides
Aaron Chan
 
PPTX
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Codemotion
 
PPT
Presentation team ngx 4주차 발표자료
Matthew Chang
 
PPT
Multiplayer Games Chapter 6 Network Topologies.ppt
MoissFreitas13
 
PPTX
Why WebRTC DataChannel excites me
Eric Zhang
 
PPTX
Outburst 3D
Ægir Þorsteinsson
 
PDF
HTML5 Games Status and issues
J.h. Liu
 
DOCX
Report for weather pi
Asutosh Hota
 
PPTX
Build a serverless distributed Pong game with Azure
Marco Parenzan
 
Programming Language Final PPT
Matthew Chang
 
A new interface between smart device and web using html5 web socket and qr code
Matthew Chang
 
Project NGX - Proposal
Matthew Chang
 
​Presentation team ngx 5주차 발표자료
Matthew Chang
 
Capstone Project Last Demonstration
Matthew Chang
 
Create online games with node.js and socket.io
grrd01
 
Building the Internet of Things with Thingsquare and Contiki - day 1, part 3
Adam Dunkels
 
HTML5 & JavaScript Games
Robin Hawkes
 
Inter galactic war
Ilie Halip
 
38199728 multi-player-tutorial
alfrecaay
 
201001162_report
Shirish Jadav
 
Openworld Engine workshop slides
Aaron Chan
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Codemotion
 
Presentation team ngx 4주차 발표자료
Matthew Chang
 
Multiplayer Games Chapter 6 Network Topologies.ppt
MoissFreitas13
 
Why WebRTC DataChannel excites me
Eric Zhang
 
Outburst 3D
Ægir Þorsteinsson
 
HTML5 Games Status and issues
J.h. Liu
 
Report for weather pi
Asutosh Hota
 
Build a serverless distributed Pong game with Azure
Marco Parenzan
 

More from Matthew Chang (20)

DOCX
Research and Analysis of SSH
Matthew Chang
 
PPTX
Digital Certified Mail (PPT)
Matthew Chang
 
PDF
Digital Certified Mail
Matthew Chang
 
PDF
Twitter Trend Analyzer
Matthew Chang
 
PDF
The implementation of Banker's algorithm, data structure and its parser
Matthew Chang
 
PDF
Image Compression Storage Policy for Openstack Swift
Matthew Chang
 
PDF
Urhyme introduction
Matthew Chang
 
PPTX
SDN Project PPT
Matthew Chang
 
PDF
Analyze of Tumblr.com
Matthew Chang
 
PPTX
Project Avalon
Matthew Chang
 
PDF
Logic Circuit Project Final Presentation
Matthew Chang
 
PDF
Profile_ Ikwhan chang
Matthew Chang
 
PDF
모바일 앱 개발 최종 발표 Proposal
Matthew Chang
 
PDF
Project Avalon Online(Game) Final Report
Matthew Chang
 
PDF
Report : Android Simple Bug Catch Game(Korean)
Matthew Chang
 
PDF
Db설계 프로젝트 1조 _중간제출
Matthew Chang
 
PDF
Presentation Team NGX
Matthew Chang
 
PPTX
Development of Design Structure Matrix(DSM) Tool
Matthew Chang
 
PDF
tumblr.com 에 대한 DB구조 분석
Matthew Chang
 
PDF
AI RPP 7조 발표자료
Matthew Chang
 
Research and Analysis of SSH
Matthew Chang
 
Digital Certified Mail (PPT)
Matthew Chang
 
Digital Certified Mail
Matthew Chang
 
Twitter Trend Analyzer
Matthew Chang
 
The implementation of Banker's algorithm, data structure and its parser
Matthew Chang
 
Image Compression Storage Policy for Openstack Swift
Matthew Chang
 
Urhyme introduction
Matthew Chang
 
SDN Project PPT
Matthew Chang
 
Analyze of Tumblr.com
Matthew Chang
 
Project Avalon
Matthew Chang
 
Logic Circuit Project Final Presentation
Matthew Chang
 
Profile_ Ikwhan chang
Matthew Chang
 
모바일 앱 개발 최종 발표 Proposal
Matthew Chang
 
Project Avalon Online(Game) Final Report
Matthew Chang
 
Report : Android Simple Bug Catch Game(Korean)
Matthew Chang
 
Db설계 프로젝트 1조 _중간제출
Matthew Chang
 
Presentation Team NGX
Matthew Chang
 
Development of Design Structure Matrix(DSM) Tool
Matthew Chang
 
tumblr.com 에 대한 DB구조 분석
Matthew Chang
 
AI RPP 7조 발표자료
Matthew Chang
 

Recently uploaded (20)

PPTX
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
rubeshbme
 
PPTX
Geodesy 1.pptx...............................................
abhi1361yadav
 
PDF
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
Cerebraix Technologies
 
PDF
PPT on Performance Review to get promotions
prashant593122
 
PPTX
CH1 Production IntroductoryConcepts.pptx
RacemMellouli1
 
PPTX
additive manufacturing of ss316l using mig welding
premcdr7799
 
PPTX
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
VinayB68
 
PPT
Mechanical Engineering MATERIALS Selection
arsalanahmad705384
 
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
abhi1361yadav
 
PDF
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf
AinieButt1
 
PPTX
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
Alberto González Trastoy
 
PPTX
OOP with Java - Java Introduction (Basics)
Rashmi T V
 
PPTX
Foundation to blockchain - A guide to Blockchain Tech
Davies Chacko
 
PDF
Automation-in-Manufacturing-Chapter-Introduction.pdf
pcmth867
 
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
IJAEMSJORNAL
 
PPTX
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd
ssusera400e8
 
DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
AYUSHMANAV
 
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
MehrabTaseenTalukder
 
PDF
Enhancing Cyber Defense Against Zero-Day Attacks using Ensemble Neural Networks
IJCNCJournal
 
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
rubeshbme
 
Geodesy 1.pptx...............................................
abhi1361yadav
 
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
Cerebraix Technologies
 
PPT on Performance Review to get promotions
prashant593122
 
CH1 Production IntroductoryConcepts.pptx
RacemMellouli1
 
additive manufacturing of ss316l using mig welding
premcdr7799
 
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
VinayB68
 
Mechanical Engineering MATERIALS Selection
arsalanahmad705384
 
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
abhi1361yadav
 
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf
AinieButt1
 
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
Alberto González Trastoy
 
OOP with Java - Java Introduction (Basics)
Rashmi T V
 
Foundation to blockchain - A guide to Blockchain Tech
Davies Chacko
 
Automation-in-Manufacturing-Chapter-Introduction.pdf
pcmth867
 
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
IJAEMSJORNAL
 
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd
ssusera400e8
 
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
AYUSHMANAV
 
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
MehrabTaseenTalukder
 
Enhancing Cyber Defense Against Zero-Day Attacks using Ensemble Neural Networks
IJCNCJournal
 

Capstone Project Final Presentation

  • 1. Air Hockey Web Game (using ngxqrctl.js) Proposal Team NGX kick-off presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)
  • 2. INDEX • Team NGX • Introduction • How to Use • How to Play • Game Rule • System Architecture • System Environment • Schedule • Q&A 2
  • 3. Team NGX Team NGX Air Hockey Web Game (using ngxqrctl.js) Team Mission - Make new user experience in a web - Make best web maintenance environment - Share our source code within worldwide developers Team Member & Role 3 Name Part Ikwhan Chang NGX Web Server, QR Controller JavaScript Library Sangtae Lee AirHockey Game Client Dongkyoung Jo NGX QR Controller
  • 4. Introduction Project Name • Responsive Air Hockey Web Game What is this? • Air Hockey Game based on Web • Remote Controlling via QR Code • Server is based on NGXRCS (NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web server)
  • 5. Goal 5 Optimize Server optimization Ngxqrctl.js Provide for developer to our js library(jQuery Plugin) Air Hockey Game(Demo) Provide our Air Hockey Game for demonstration(how to use our ngxqrctl.js) 1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster. 2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js 3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
  • 6. How to Use? 6 1. Install our JS library Ngxqrctl.js : for developer 1) Add HTML element for showing qr-code <div id=”ngx-container”> </div> 2) Include the ngxqrctl script in developer’s site <script src="/path/to/ngxqrctl.min.js"></script>
  • 7. How to Use? 7 1. Install our JS library Ngxqrctl.js : for developer 3) CSS #ngx-container #qr-view{ width: 100%; } (How to use CSS is not yet determined but we will use CSS for customizing style) 4) Initialize with JavaScript Initialize an NGX QR Controller instance as a jQuery plugin: $('#container').ngx-qrctl(). var $container = $('#ngx-container'); // init $container.ngx-qrctl({ // options layoutMode: 'fitRows’ });
  • 8. How to Use? 8 2. Setting event Ngxqrctl.js : for developer (ex : onTouchStart) var $container = $('#ngx-container'); function onTouchStart() { // Here is user’s action console.log('layout done'); } // bind event listener $container. ngx-qrctl( 'on', ’touchStart', onTouchStart ); (list of event) dragstart dragmove dragend touchstart touchend touchmove
  • 9. 9 How to Play? Air Hockey Web Game 1. Connect our game’s website if there is two user, game will start Player 1 - disconnected Player 2 - connected
  • 10. 10 How to Play? Air Hockey Web Game 2. scan QR-code via user’s smartphone
  • 11. 11 How to Play? Air Hockey Web Game 3. Play!
  • 12. 12 Game Rule Air Hockey Web Game • Two players, One ball • Each side has their own goalpost • Ball can move inside rectangle area. • Available action Moving : left, right, jump • If the ball go into the opposite’s goalpost, on the ground during game, the user can get a single point • Time limitation : 3 min
  • 13. System Architecture 13 Wi-Fi Connected User’s unique code Our Website Controller 1 (iphone or android) Controller 2 (iphone or android) Server : I/O , Game Logic Processing, Push Viewing Data (JSON) QR Code provided Wi-Fi Connected
  • 14. System Environment 14 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
  • 15. Development Environment 15 Lee Jo IntelliJ IDE Eclipse w/ STS Eclipse w/ Android Testing Server changes testing Jenkins Continuous Integration JIRA share Issue/Bug/TODO Issue Tracker Chang Git Repository
  • 16. Schedule 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
  • 17. Team NGX - 3th weekend 17 Ikhwan Chang (Presenter) - Server Turning - Architecturing SangTae Lee Dongkyoung Jo - QR-Code Research - jQuery Socket.io plugin Research
  • 18. Schedule 18 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
  • 19. Architecturing Server Cent OS (Main O/S) NGINX (Routing) NodeJS Socket.IO (Notification) ngx_rcs.js (plugin) Client(Game) jQuery.qr-code Client(Device) Smartphone HTML5 canvas User’s Touch Data (JSON) Air Hockey Game jQuery ngx_qrctl.js Push Notification (plugin)
  • 20. Where our plugins located Server Client ngx_rcs.js (plugin) ngx_qrctl.js (plugin) Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
  • 23. QR-Code Processing USERIP+USER-AGENT+HTTP HEADER {“Sat, 07 May 2011 17:31:38 GMT”,”Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0”,”165.194.33.5”} CREATE UNIQUE KEY(using MD5 with IP-Hash key) ENCODED TEXT : E5c09a1dd615d8c878dcfb0f2923f976 KEY : 165.194.33.5 CREATE QR-CODE(using jquery.qrcode : http://larsjung.de/jquery-qrcode/) $(selector).qrcode({ width: 100, height: 100, color: #3a3”, text: “http://qrcode.matthewlab.com/q=E5c09a1dd615d8c878dcfb0f2923f976“ });
  • 24. Team NGX - 4th weekend 24 Ikhwan Chang - - setting to node.js and socket.io - - made to default push notification program SangTae Lee Dongkyoung Jo(Presenter) - - set up default layout - - restructure the class
  • 25. Schedule 25 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
  • 26. Team NGX - Why we change server O/S? • License problem • We provided web server from SK since we joined open source award challenge but said that they cannot provide window based server because they have not enough to Window license. • So they provide only server based on Linux • We seriously consider to change Cent OS(based on Linux) during first week and finally Cent OS has no problem if we changed.
  • 27. Team NGX - Why we change server O/S? • Detected malware and DDOS attack • During summer vacation, we found that there was a lot of malware and DDOS in our server. • So we could not trust windows server anymore.
  • 28. Team NGX - Setting socket.io and node.js • We finished to setup socket.io and node.js • Node.js can provide npm instructions • So user can easily install our NGX Server • User can install just two instructions • npm install –save express • npm install –save socket.io
  • 29. Team NGX - Setting socket.io and node.js • If user want to run our server, there is easy instruction • Just “node index” instruction can run our server • We can check how more faster than previous server(Windows) • http://test.matthewlab.com/game : Test game • http://test.matthewlab.com/c : NGX Controller
  • 30. Using JavaScript - Center circle - Center line - Goal area - Goalpost Team NGX - Default layout(prototype)
  • 31. Team NGX - Game engine KineticJS - HTML Canvas JavaScript framework - Almost free(except support of technology) - Experience of use - Using the game engine
  • 32. Team NGX - Game Volleyball Air hockey • similar elements • way of movement, collision, score etc • can reuse the last semester’s class • need to restructure the class
  • 33. Team NGX - Problem • Implementation to actual hockey game is delayed • graduation thesis, broke down the laptop ..., other problems à We must speed up for progressing our project
  • 34. Team NGX - Next to do • Implementation to actual hockey game quickly • Add to npm library and make jQuery plugin
  • 35. Team NGX - 5th weekend 35 Ikhwan Chang(Presenter) - Completed to make server - Vaccine is added on our server - Send to OSS Awards(오픈소스 공모대전), finally. SangTae Lee Dongkyoung Jo - - Set game rules clear and then these rules are applied previous project - - Modify prototype UI and add both players and ball(s)
  • 36. Schedule 36 We’re now 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep)
  • 37. Install to vaccine 37 - ClamAV is freeware for linux-based OS. - Our server is based on Cent OS. So we installed ClamAV and added to daily schedule.
  • 38. Presented to oss award 38 Demo video : http://www.youtube.com/watch?v=Vjxvz-ngwSA Website : http://ngx.matthewlab.com - Finally, our server-side programming was presented for open source software award, sending all materials. - We captured our demo video and upload all source code at github for open source.
  • 42. Air hockey rules 42 - There are two players - If puck goal in the my section hole, the opposite play get 1 point. - A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first. - If a player get a 15 or 18 points, finally the player win the game. - Players cannot touch puck which is in opposite player section. - There is time limit to play game speedly.
  • 44. What will we do next? 44 - The first evolution result will be noticed at 10/6. - If we passed first evolution, then there is technical test during October. So, Ikwhan Chang will focus on this technical test and other tests. - And Sangtae Lee and Dongkyoung Jo will focus on make air hockey game for perfect sample.
  • 45. Team NGX - 6th weekend 45 Ikhwan Chang - ngx_qrctl.js is attached successfully in our Air Hockey Game - Now we can get user’s touch x-y coordination in our game. SangTae Lee(Presenter) Dongkyoung Jo - Implementing Game part (animation effect, movement, collision) - Design 2D collision equation yet applied to hockey game.
  • 46. Schedule 46 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now
  • 47. Team NGX - Game engine KineticJS - HTML Canvas JavaScript framework - Almost free(except support of technology) - Experience of use - Using the game engine
  • 48. Team NGX - Game engine • Kineticjs take a time-out for focusing on other endeavors • It is going to service before long, but we cannot wait for their service.
  • 49. Team NGX - Problem • Implementation to actual hockey game is little bit delayed • We decide to make hockey game only using html5. à have to learn html5 animation • It needs to calculate velocity of user’s controller • We already have a calculating collision function à We must speed up for progressing our project
  • 51. Team NGX - 7th weekend 51 Ikhwan Chang(Presenter) - Tested to communication between client and server - OSS Award: Failed SangTae Lee Dongkyoung Jo - Implementing Game part (animation effect, movement, collision) - Design 2D collision equation yet applied to hockey game.
  • 52. Schedule 52 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now
  • 53. Demo
  • 54. Team NGX - 9th weekend 54 Ikhwan Chang(Presenter) - Redesign controller - Add to chat function in server and client. SangTae Lee Dongkyoung Jo - Add to Score and Game Ending Message - Tried to more smooth game - Change ball from vector to image - Add to sound effect
  • 55. Schedule 55 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other Effec ts
  • 56. Team NGX Problems from demonstration 56 1. There is not enough to adjust hockey game rule(e.g. puck cannot move opposite area) 2. There is no sound effect(it means game is looks like air hockey but not really) 3. Game is too simple 4. Game is too monotone(it is not enough to game since there is no image)
  • 57. Team NGX Add to chat 57 [Player 1] : Hey what r u doing now?? NGX Controller NGX AirHockey Game
  • 58. Team NGX Add to chat – source code 58 Ngx_qrctl.js NGX Server
  • 59. Team NGX - 10th weekend 59 Ikhwan Chang(Presenter) - Fixed to server - Changed whole design SangTae Lee Dongkyoung Jo - Joined in ROTC Training - Since their main role is game logic, Ikwhan focused on game’s appearance in this week - Tried to find resources(sound, image) - Add to sound
  • 60. Schedule 60 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other Effec ts
  • 61. Team NGX Change whole design 61 - Replaced puck, pin from vector to image(design by Ikwhan) - Added to icy background image, relocated to score board
  • 62. Team NGX Add game control button in NGX controller 62 Add game sound - Game starting sound - Bump sound
  • 63. Team NGX - 11th weekend 63 Ikhwan Chang - Optimize server - Try to solve blinking images problem SangTae Lee (Presenter) Dongkyoung Jo - Optimize game appearances (focus on collision). - Make ending point of game and enable to setting the point. - Start to write final report.
  • 64. Schedule 64 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g Effec ts Optimizin g JS Library Optimizin g 1st Demo Final Demo Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other
  • 65. Team NGX There are some problems… 65 - Blinking images(puck and pin). - When user control pin fast, it’s appearance is little strange.
  • 66. Team NGX Last week… 66 Add game control button in NGX controller à Try to activate in the our game. But little bit delayed
  • 67. Team NGX 67 This week…. - Enable setting ending sore in NGX controller - Solve blinking problems - Adjust game coordinate (when we redesign whole game , cooridinate was changed ) - Optimize game logic continuously.
  • 68. Schedule 68 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Mid-term Exam UI / layo ut class, transactio n Design Server Game Demo Architecturin g Set-up Default Layo ut research about QR-Code processing Solve to minor problem s Sync w/clie nt Sync w/serve r Apply QR-Code library to our game implementation to build QR-Code image processing Optimizin g Effec ts Optimizin g JS Library Optimizin g 1st Demo Final Repo rt Default Game Appearanc e packing JavaScript Librar y OSS Challenge deadline(28th Sep) We’re now Extra Game Controlle r Sound Effect and Other
  • 69. Team NGX Team NGX Air Hockey Web Game (using ngxqrctl.js) Team Mission - Make new user experience in a web - Make best web maintenance environment - Share our source code within worldwide developers Team Member Role(Revised) 69 Name Part Ikwhan Chang NGX Web Server, QR Controller JavaScript Library Sangtae Lee AirHockey Game Client Dongkyoung Jo UI Design
  • 70. Introduction Project Name • Responsive Air Hockey Web Game What is this? • Air Hockey Game based on Web • Remote Controlling via QR Code • Server is based on NGXRCS (NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web server)
  • 71. Goal Optimize 71 Server optimization Google Cloud Server(IaaS) Ngxqrctl.js Provide for developer to our js library(jQuery Plugin) Air Hockey Game(Demo) Provide our Air Hockey Game for demonstration(how to use our ngxqrctl.js) 1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster. 2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js 3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
  • 72. Air hockey rules 72 - There are two players - If puck goal in the my section hole, the opposite play get 1 point. - A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first. - If a player get a 15 or 18 points, finally the player win the game. - Players cannot touch puck which is in opposite player section. - There is time limit to play game speedly.
  • 73. Modified – Server Env 73 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
  • 74. Modified – Server Env 74 Client #1 Server Routing ... . . . Push Data (JSON) Socket.io (Push Server) Client #N Push Data (JSON)
  • 75. Modified – IaaS 75 After – Google Cloud Before – Customized Server
  • 76. Modified 76 Removed function • Chatting : It is not useful • KineticJS: Since KineticJS opensource project was closed, we could not use this framework.
  • 77. Problem 77 • O/S was changed(4th week) • We provided web server from SK since we joined open source award challenge but we could not use windows server since there was license problem of Windows Server. • So they provide only server based on Linux • Moreover, we failed to challenge OSS award(So, SK planet could not provide server anymore) • = That’s why we move server from us to Google Cloud.
  • 78. Problem 78 • Cannot use KineticJS • Kineticjs take a time-out for focusing on other endeavors • It is going to service before long, but we cannot wait for their service.
  • 79. Before After 79 Modified Feature Before After Server H/W Server provided by SK Google Cloud Platform Server O/S Windows 2013 Server Enterprise R2 CentOS 7 Game – Appearance Using the image of puck and pin Using the vector(SVG) of puck and pin Game Engine KineticJS Pure-HTML5 Canvas Client – the function of controller Chatting Button control(Start/Pause/Resume) Client – QR Code Appearance QR with inner status message QR with color variation belong to the status of user
  • 80. Result 80 Game Intro After user scanned qr-code
  • 82. Result 82 • Game Controller • MoveXY : User can control their puck using touch pad • Game: User can set game score / User can pause/ resume that game.
  • 84. To be implementation Server Client ngx_rcs.js (plugin) ngx_qrctl.js (plugin) Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
  • 85. QA