Our goal is to provide a single system that allows more diverse web UXs to come out of the web with a simple 2D view through this new UI / UX awareness.
- The server is configured in CentOS 7 and uses NginX as a proxy to connect to Node.js. Node.js provides a web socket through the Socket.io plug-in. In our server, it communicates with the controller via Socket.io. In addition, we do a URL route in Node.js. For example, if a user installs jquery.qrctl.js on a site, a unique controller address such as https://jquery-qrctl.herokuapp.com/c/vmY3ax-hWSDDq19pAAAF will come out, In the case of vmY3ax-hWSDDq19pAAAF, this is the unique ID of the site generated by node.js. This allows Route to use the Express.io template to provide site-specific controllers.
- The controller is a webView that users move to when they take the QR code on their smartphone. This site is a Jade template through Express.js on the server, and it processes various events using jQuery Mobile based on jQuery. jQuery Mobile provides a user swipe, touch event, touch event, acceleration sensor, etc. The controller recognizes this and sends data to the server via Socket.io.
- The client that the user installs on the website is made with jQuery Plugin through CoffeScript. Users can easily load our jqueryQrctl class into the desired DOM object, which will result in a queue code on the site. After that, the data that the user manipulates on the smartphone is received from the server through Socket.io. jqueryQrctl receives the event and generates the event, and the site developer binds it and connects with the event handler to take the desired action.
-
Install dependencies: npm install && bower install
-
Add to below script code end of body tag
</body>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="bower_components/jquery-qrcode/dist/jquery.qrcode.min.js"></script>
<script src="jquery.qrctl.js"></script>- Make default jQuery QR Control Selector
example) <body id="qr_area">- Initialize to jQuery QR Ctl plugin
$( "#qr_area" ).jqueryQrctl({
'position':'top',
'width':10,
'height':10
});- Now you can using user's remote control action via event handler
// When user move his/her finger, touched coordinates will be arrived
$('#qr_area').bind('move',function(event,x,y){
$.moveCircle(x,y);
})
// When user swipe his/her device to the left or right, swipeleft or swiperight action will be arrived
$('#qr_area').bind('swipeleft',function(event) {
alert("swipe left!");
});
$('#qr_area').bind('swiperight',function(event) {
alert("swipe right!");
});
// When user touch the custom button with binded key,'btnDown' action with key will be arrived
$('#qr_area').bind('btnDown',function(event,key){
alert(key+ "is entered!");
});- Recognize user device
Once the QR code is generated on the site as above, the QR code is scanned with a QR code-recognizable browser (e.g. Google App, Naver App, Daum App, etc.). After that, you will automatically be taken to a site like https://jquery-qrcode.herokuapp.com/c/vmY3ax-hWSDDq19pAAAF.
- Use the website via QR code and smartphone
Above is a simple diagram of how users scroll down the matthewlab.com. In the case, I am going to scroll down when matthewlab.com has a 'swiperight' event. If the user rubs the screen to the left with his finger, the site will automatically drop.
Rather than Swipe function, the NGX Controller also provides functions such as touch (move to XY coordinates) and WSAD. This feature will continue to be added and will include all actions that take advantage of the smartphone's sensors in jQuery Mobile (eg acceleration sensors, gyro sensors, etc.)
- You need to install socket.io and node.js on your server
(How to install socket.io and node.js will be attached!)
-
The other step is same as usage on matthewlab server(step 1~3 are same)
-
Initialize to jQuery QR ctl plugin via your own server
$( "#qr_area" ).jqueryQrctl({
'position':'top',
'width':10,
'height':10,
surl:'{your_socket.io_server_url}'
});(If you want to use via our HerokuApp, use 'https://jquery-qrctl.herokuapp.com' as your_socket.io_server_url)