The Design of Real-time Display Screen Control Techniques for Mobile Devices 1

Transcription

1 , pp The Design of Real-time Display Screen Control Techniques for Mobile Devices 1 Jungsoo Hwang 1, Ji Hee Jeong 1, Soon-Bum Lim 1, 1 Dept. of Multimedia Science, Sookmyung Women s University, Cheongpa-ro 47-gil 100, Yongsan-gu, Seoul, 04310, Korea ] Corresponding Author : sblim@sm.ac.kr Abstract. With the development of smartphone technology has come the era of the smartphone supports most of the features of the PC. However, in a number of situations in which people want to display something through a large screen there is the inconvenience of editing the screen using PC. In this study, we have designed a real-time and displayable program that quickly and easily edit the screen using mobile device. It has a function to display the created screen in a mobile device into a PC display in real-time. There are advantages that user can launch the screen directly with the mobile without using the PC and a large number of users can edit by accessing the server at the same time. Keywords: mobile control, Real-time display 1 Introduction Since the advent of the smart phone, the rate of PC usage is decreasing and the time has come in which mobile supports most of PC functions. However, in situation where people need to deliver instructions using large screen to a large number of people, there is inconvenience of using a PC while editing the screen. Therefore, we intended to develop a program to edit the screen with ease and display on PC using the mobile device. The program includes the ability to input text on the screen and display on PC specified effect. 1 This research was supported by the MTIE, Korea, under the "development of sharing service for social learning and culture exchange" supervised by the KEIT ISSN: ASTL Copyright 2016 SERSC

2 2 Related Technologies 2.1 HTML5 HTML5 is the next generation of Web standards made by Web standards organizations W3C (World Wide Web Consortium), where all the web browser related companies are participating, such as Microsoft, Mozilla, Apple and Google. HTML5 can be divided into semantic markup part and API part. Semantic markup part has been added the new 26 markup to enable meaningful representation much more clearly than previous versions of HTML4 [1]. Through this, the search engine or the like is expected to provide improved functions of various services or applications based on the content of the web. For the API part, the new features not present until HTML4 were added to support a web-based application development [2]. 2.2 Web Socket and node.js It is a technology that enables two-way communication in real time through the web without complex programming on the server side. Compared to the way that requests data to the server in an existing Web browser, a technology is capable of transmitting data from the server to the browser. Socket.io of Node.js is a technology to implement a real-time web, regardless of the type of browser using JavaScript. Socket.io is Web Socket, made by Guillermo Rauch, is an abstraction of FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling into a single API. That is, this is a method used to identify the type and version of the browser and the Web server by selecting the most appropriate technology[3]. 3 System Design and Major Features The whole system is composed of the mobile that can edit canvas, the PC display that receiving edit data, and the server that connects these two devices. There are two functions used in mobile device. First, a text input and effect setting function to the canvas. It can also give motion effects, which increase the readability and highlight the text. The second is the text objectification function. The text entered in the text field is made as a single object. This object can be selected directly on the canvas, the selected objects can be deleted and modified. There are three functions of the server. The first is the ability to transmit data to the PC. The second is the ability to have multiple users connecting to the server. That is, a number of users are able to connect server and control a single screen at the same time. The third is the ability to retrieve and modify data on the server. 190 Copyright 2016 SERSC

3 4 System Implementation and Development 4.1 System implementations The system can be used in mobile and Web-based Chrome browser and developed in HTML 5, JavaScript and CSS. We developed servers that act as send and receive data using socket.io modules from Node.js as web socket server. Fig. 1. System Configuration 4.2 Design of the Functions Synchronization of data Users access by typing the IP address of the server in the web browser on mobile device. The socket.io module draws data values on the canvas of the importing page by importing the data from the current PC display. Fig. 2. Importing Page Copyright 2016 SERSC 191

4 4.2.2 Text Input and Positioning This is a feature to enter text and specify the effect of drawing on a canvas. Input text is drawn in the lower left corner of the canvas, position can be specified directly via the 'drag-and-drop' functionality after select an object. The objectified text has the border line to make it easier to move and modify Motion Selection to the Text There are three types (up and down, left and right, vibration) of motion effect in a text. When selecting the motion, the text can be moved, vibrated or and emphasized from the area that is not departing from the canvas from the specified location. Fig. 3. Motion Selection to the Text A large Number of Users Sending Data to the PC Display When clicking 'send' button on the mobile UI, data drawn on the current canvas is sent to the PC monitor. Real time information is displayed on the PC of the mobile device using the socket. 192 Copyright 2016 SERSC

5 Fig. 4. Sending Mobile Screen to PC Display 5 Conclusion In this paper, we designed a program which is controllable in real time by utilizing mobile devices using HTML5 and WebSocket. This program has the advantage of immediately display on the desktop screen after creating the notice in mobile with ease. However, since the HTML5 and WebSocket technology are in the development stage, this results in the limited functionality of the program. If complementing this would make the program useful in more fields. References 1. Lee W.S, HTML and Mobile Web, TTA Journal Vol.128, pp (2010.3) 2. Steve Fulton, HTML5 Canvas, Hanbit Media, Inc., Shim S.M, WebSocket and Sockt.io, NHN developer blog, Copyright 2016 SERSC 193