Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A simple jQuery plugin to control the website via QR-code and smartphone's webview


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.

System Architecture

System Configuration

Server: CentOS, NginX, Node.js,,

  • 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 plug-in. In our server, it communicates with the controller via 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 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 template to provide site-specific controllers.

Client (Controller): jQuery, jQuery Mobile,

  • 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

Client (Website): jQuery, CoffeeScript,

  • 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 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.


  1. Install dependencies: npm install && bower install

  2. Add to below script code end of body tag

<script src=""></script>
<script src="bower_components/jquery-qrcode/dist/jquery.qrcode.min.js"></script>
<script src="jquery.qrctl.js"></script>
  1. Make default jQuery QR Control Selector
example) <body id="qr_area">
  1. Initialize to jQuery QR Ctl plugin
$( "#qr_area" ).jqueryQrctl({
  1. Now you can using user's remote control action via event handler

Client event binding example

// When user move his/her finger, touched coordinates will be arrived

// 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
    alert(key+ "is entered!");

How to use

  1. 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

  1. Use the website via QR code and smartphone

Above is a simple diagram of how users scroll down the In the case, I am going to scroll down when 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.)

(Setup via your own server)

  1. You need to install and node.js on your server

(How to install and node.js will be attached!)

  1. The other step is same as usage on matthewlab server(step 1~3 are same)

  2. Initialize to jQuery QR ctl plugin via your own server

$( "#qr_area" ).jqueryQrctl({

(If you want to use via our HerokuApp, use '' as your_socket.io_server_url)


MIT © Matthew Chang


A simple jQuery plugin to control webpage via QR Code and smartphone (WebView)







No releases published


No packages published