AbstractâThe design and development of an information display system are discussed in this paper. This system is used to display dynamic content (e.g., ...
2017 International Conference on New Trends in Computing Sciences
A Cost Effective Information Display System based on Open Source Technologies Feras Al-Hawari1, Hadi Etaiwi2, Sahel Alouneh1 1 Computer Engineering Department Information Systems and Technology Center German Jordanian University Amman, Jordan {firas.alhawari, hadi.etawi, sahel.alouneh}@gju.edu.jo 2
PowerPoint slides to be able to display dynamic content, connect to web services, and split the screen into different controllable regions. Moreover, a web application was developed to manage the content that will be displayed in the various regions. It is worth noting that, the user can also interact with the displayed content using QR codes [2] via portable devices (e.g., smartphones). In addition, open source technologies (e.g., Raspbian OS [3], Apache web server [4], PHP engine [5], and MySQL [6]) were used to cut the cost of the software needed to operate the system as well as develop and deploy the content management application.
Abstract—The design and development of an information display system are discussed in this paper. This system is used to display dynamic content (e.g., announcements, news, slideshows, and other information) on HD TV screens that are distributed across the university campus. The low cost and small size raspberry pi devices running a Linux-based OS are utilized to open a dynamic web page in web browsers and then transfer the views to the corresponding screens for display. To cut costs further, the management software to update the displayed content is developed in-house and deployed using free open source software technologies such as the Apache server, PHP engine, and MySQL database management system. Furthermore, users may interactively scan a QR code on a screen using a reader running on their smartphones to easily access the offered services.
The systems in [7] and [8] are similar to the IDS. However, users cannot interact with QR code images as they do when using the IDS. Unlike the solution presented here, in [9-13] pervasive displays were used and considered. Moreover, in [14] and [15] the solutions are also context aware. Many commercially available solutions such as: Monitors AnyWhere [16], Navori [17], Scala [18], Omnivex [19], Visix [20], and Elementi [21] provide features similar to the IDS. However, those systems are expensive, when compared to the discussed in-house IDS solution, in terms of installation fees, software prices, licensing costs, and maintenance contract fees.
Index Terms—information display system; screens; raspberry pi; open source software; content management; web applications; Apache; PHP; MySQL; QR code
I. INTRODUCTION An information display system (IDS) is typically deployed in universities to display announcements, school news, images, and other information on TV screens that are placed in public locations in the university such as lobbies, squares, hallways, and cafeterias. A basic component in such a system is the management software as it is used to manage the content to be displayed on the screens and to make that information accessible, via the Intranet, to the devices that control the various screens.
The rest of the paper is organized as follows: in section II the system architecture is explained, in section III the system software design is discussed, in section IV the interaction between the user and the displayed content is demonstrated, and in section V a summary and future work are presented. II. SYSTEM ARCHITECTURE The architecture of the IDS is shown in Fig. 1. Accordingly, the IDS relies on the existing university Intranet (switches, links, etc.) for the intercommunication between the web browsers running on the raspberry pi devices and the web application that is deployed on the server.
Previously, old PCs were used at the German Jordanian University (GJU) to display a PowerPoint slideshow (i.e., the displayed content), which was pulled from a shared network directory, on the screens. Although that in-house solution is low cost and functional, it turned out to be somehow impractical due to the following reasons: mounting and concealing the PCs is difficult because they are bulky and heavy, replacing a faulty PC is relatively costly, pulling different dynamic content from different data sources (e.g., database, web services, etc.) is not possible using a PowerPoint slideshow, and interacting with the displayed content is not feasible. In this paper, a new enhanced IDS solution that was designed and implemented to overcome the limitations of the old system is presented. Mainly, the raspberry pi [1] replaced the PCs to reduce the device cost, size, and power consumption. Furthermore, a dynamic web page substituted the
Moreover, the network firewall is utilized (by defining appropriate security policy rules) to secure the system by restricting access from the Internet to the IDS devices and server. The actual system is comprised of the following basic hardware components: •
11 wall-mounted 50-inch HD LED screens. The screens were distributed across 7 buildings in the GJU campus to make the service available to the students in the public areas that are close by to their respective schools.
•
11 raspberry pi (model B) devices with a 700 MHz single-core CPU, 250 MHz dual-core GPU, and 512 MB RAM. Each device was connected to its corresponding screen via an HDMI cable and connected to its network switch via an Ethernet cable. A 16 GB micro SD class 10 memory card was also installed on each device to run the OS and applications. Moreover, a heatsink and a fan were additionally installed on each device to cool down the system that runs almost 10 hours a day.
•
1 server machine, which is used to host the web application (i.e., the dynamic web page that is displayed on each screen) and the content management software.
Fig. 2. The three-tier web application architecture
A. Dynamic Web Page Application The server-side scripting language PHP (Hypertext Preprocessor) was used to develop the dynamic web application page. The PHP file resides on the server machine and is considered as one of the web-tier components. A PHP file may contain HTML elements, PHP code, and even clientside scripts (e.g., JavaScript or jQuery code). When the PHP page is requested by a web browser (that is running on the client device), the Apache web server, in response to that request, sends the file of that page to the PHP engine for preprocessing. The engine keeps all the non PHP elements as is and compiles and executes the PHP code segments in that file to replace them with their corresponding HTML elements (note that the rendered HTML elements can be dynamic in this case i.e., they may vary based on the data in the database, session parameters, or user input). Then, it sends the generated HTML page back to the Apache web server, which in turn transmits it to the requesting browser at the client side for display.
The cost of each raspberry pi was around 30 Jordanian Dinars (JDs), which is much less than the price of an old PC that is about 250 JDs. Moreover, the dimensions of the raspberry pi board are 8.6 cm x 5.4 cm and its weight is about 45 grams, making it one of the lightest boards on earth. Furthermore, the free Raspbian OS that is Debian-based was used to operate the raspberry pi devices. Whereas, the open source Ubuntu OS (also Debian-based) was installed on the server machine. III. SOFTWARE ARCHITECTURE AND DESIGN The IDS depends on two basic software applications: the dynamic web page application (i.e., the web page that is displayed on the screens) and the content management application (i.e., the application that is used by the system administrators to manage the dynamic web content on the screens). Both applications were implemented based on the three-tier web application architecture shown in Fig. 2. Accordingly, the web application is divided into a client tier, web (or application) tier, and data tier. The client tier is basically the web browser that runs on the client devices (i.e., a raspberry pi, desktop, laptop, or portable device) from which the web application pages are requested and then displayed on the screen of the requesting client. While, the web tier consists of the Apache web server and the PHP engine that are running on the server machine, as well as the web files (e.g., HTML, images, JavaScript, CSS, etc.) and PHP files that are also stored on the server machine. Whereas the data tier is basically the database tables in which the system’s data is stored. The data tables are managed by the MySQL database management system (DBMS) that is also running on the server machine.
The dynamic web page is divided into the regions shown in Fig. 3. A snapshot of the content in each region at a certain moment in time is demonstrated in Fig. 4. Based on that, different dynamic (the dynamic content in the regions may also be pulled from different data sources) or static content is displayed in each region as discussed below: •
278
Photo Gallery: A jQuery carousel is utilized to horizontally navigate through a list of images (e.g., graduation, sport events, and campus life images) in a carousel-like manner within this region. The IDS administrator may manage those images from the content management application.
list of HTML content (weather forecast and bus schedules information) in a carousel-like manner within this region. A web service is used to access and display the weather information on this region. • Prayer Times: A web service is used to access and display the prayer times for the current day on this region. • Clock: A jQuery code block is called inside the HTML div element tags of this region to display the clock and hence the current time. • QR Codes: The QR codes are shown on this region to enable the user to scan them using a QR scanner in order to interactively access important web pages or services (e.g., E-Learning, Student Information System, GJU Facebook page, Wi-Fi, etc.) via their portable devices. For example, the PHP code block shown in Fig. 5 is used to retrieve the latest 10 announcements from the database and then generate their corresponding HTML content. The PHP code block starts at line 2 and ends at line 17. At line 3, the mysqli_connect method is used to establish a connection to the MySQL database. At line 6, an SQL select statement is constructed to query the latest 10 announcements that were edited by the admin user and saved in the announcements table in the ids schema. At line 7, the mysqli_query method is used to execute the constructed SQL statement. The while loop block at lines 10-13 iterates over each retrieved announcement (if any) using the mysqli_fetch_assoc method, gets and surrounds the announcement text with the HTML table row (
) and cell (
) elements, and then concatenates the generated HTML content to the current value of the $data variable. Finally, the value of the $data variable is echoed at line 15 producing an HTML table with an announcement text rendered in each of its rows.
Fig. 3. The different regions that are displayed on the information screen
•
•
•
Announcements: The HTML marquee element (see line 1 in Fig. 5) is used to scroll the announcements and news text in this region vertically up. The IDS administrator may manage the announcements from the content management application. While, a PHP code block is used to retrieve the latest announcements from the database and then render them in HTML format for display within this region on the client-side. Events: The HTML marquee element is used to scroll the upcoming events text in this region vertically up. The IDS administrator may manage those events from the content management application. Again, a PHP code block is used to retrieve and then generate the HTML content for the events to be displayed in this region. Weather Forecast/Bus Schedules: A jQuery carousel is utilized to horizontally navigate through a
Fig. 4. A snapshot of the content of an information screen at a specfic moment in time
279
For example, the manage announcements page is shown in Fig. 7. It can be used to view, edit, delete, and add new announcements. When either the edit or add announcement link is clicked, the CMA navigates to the add/edit page shown in Fig. 8. Consequently, an easy to use text editor may be used to enter and format the content of the announcement. Moreover, an image file may uploaded to display its corresponding image along with the announcement. Furthermore, the appearance order of the announcement, with respect to other announcements, can be specified in this page. Note that, the photo gallery, events, and QR images are also managed from the CMA using web pages that are similar to the pages that were discussed to manage announcements. The Entity Relationship (ER) diagram that summarizes the CMA database design is shown in Fig. 9. The groups table is used to specify the different CMA user roles. Different user roles are supported to control who can manage all, or some of, content in the different manageable regions. The users table contains the username, password, and role of each user. Note that, for security reasons each password is encrypted before it is stored in the database. Whereas, the announcements, events, gallery_images, and qr_images tables are used to store announcements, events, photo galley images, and QR code images respectively. The image path, if any, of the corresponding record is saved in the image_path column in those tables. Those tables include a hide_flag and delete_flag to consider a record hidden or deleted respectively. The order column is used to save the appearance order of the corresponding record. They also contain a modified_by and modification_date columns to allow logging, for tracking purposes, the user_id of the user who performed the latest modification and the time of that modification respectively. In addition, the HTML code for an announcement is saved in the html_code field in the announcements table.
Fig. 5. The PHP code to retrieve the latest announcements from the database and generate their corresponding HTML content for display on the screens
Fig. 6. The HTML code that is used to call the weather web service
Moreover, the example shown in Fig. 6 illustrates how the weather widget (web service) [22] was used to display the current conditions and weekly forecast for the GJU location as shown in Fig. 4. First, the latitude (lat) and longitude (lon) values were changed to point to the location of the GJU main campus. Then, the value of the name parameter was modified to “Amman, Jordan” to reflect the place of the GJU. B. Content Management Application The Content Management Application (CMA) enables administrators to easily manage (i.e., add, edit, view, and delete) the records in the photo gallery, announcements, events, and QR images areas. Whereas, the weather forecast, bus schedule, prayer times, and clock areas are currently not manageable from the CMA (i.e., the corresponding PHP code needs to be edited by the CMA developers to modify the content in any of those areas). The PHP language is used to develop the web pages of the Content Management Application (CMA). An administrator can remotely access and then login to the CMA by opening its URL in a web browser that is running on his/her client device (e.g., desktop, laptop, or smartphone).
Fig. 7. The dynamic web page used to manage announcements in the CMA
280
Fig. 10. The QR code image for the URL of the GJU Elearning login page Fig. 8. Page to Add or Edit an announcement information
Fig. 11. Scanning the QR code for the GJU Elearning login page using a QR code reader that is ruuning on a smartphone Fig. 9. ER diagram for the CMA database tables
IV. QR CODES AND USER-CONTENT INTERACTION The QR code generator available from [23] was used to generate the QR code images that are displayed at the bottom region on the screen shown in Fig. 4. The QR code types that were generated are URLs and Wi-Fi. In the first case, the desired website address (i.e., URL) is mapped to a corresponding QR code. Whereas in the second case, the Wi-Fi guest network credentials (i.e., network name and password) are mapped to a QR code. Accordingly, students (or other users) with a smartphone equipped with a QR code reader can interact with the screen by scanning the QR code of the desired service to automatically open a web page in the smartphone’s browser or connect to the GJU Wi-Fi guest network Thereby obviating the need for a user to remember URLs or Wi-Fi credentials to access the desired services. For example, the GJU E-Learning URL (https://elearning.gju.edu.jo/login/index.php) was mapped to the QR code shown in Fig. 10. When that image was scanned with a QR code reader that is running on a smartphone, the reader detected the URL and gave the user the option to open the URL in the smartphone’s browser as shown in Fig. 11. When the “Open in browser” button was clicked, the E-Learning login page was conveniently opened in the smartphone’s browser as shown in Fig. 12.
Fig. 12. The GJU Eleraning login page is automatically openned in the smatphone’s browser
V. SUMMARY AND FUTURE WORK The IDS has been deployed for several months and it was informative, reliable, highly available, and fast. Given the relatively small size of the displayed data, the IDS had negligible effect on the Intranet bandwidth. Using the small
281
Raspberry PI devices made the installation and maintenance much faster and easier. Running a lightweight Linux based OS on those devices was a key factor to improve the reliability of the system as it did not require a device reboot for several months. Moreover, the IDS was low cost as it used inexpensive devices and free open source technologies. Moreover, it was flexible and dynamic because it can be controlled using a content management system that was implemented in-house. Students were also able to interact with the screens using smartphones to access basic services without the need to remember URLs or Wi-Fi credentials. We are planning to support several customized screen layouts that are manageable from the CMA to target the different users in each school or building. In addition, we are considering the integration of the QR code generation module in the CMA to facilitate the generation and management of the QR code images.
[14] Cardoso, C.S. Jorge, and J. Rui, “A framework for context-aware adaptation in public displays,” In OTM Confederated International Conferences On the Move to Meaningful Internet Systems, pp. 118-127. Springer Berlin Heidelberg, 2009. [15] M. Sharifi, T. Payne, and E. David, “Public display advertising based on bluetooth device presence,” Mobile Interaction with the Real World (MIRW 2006) 52, 2006. [16] Monitors AnyWhere. Available from http://new.monitorsanywhere.com/ [last accessed October 28, 2016]. [17] Navori. Navori Digital Signage Software. Available from https://www.navori.com/ [last accessed October 28, 2016]. [18] Scala. Scala Digital Signage Software. Available from http://scala.com/ [last accessed October 28, 2016]. [19] Omnivex. Omnivex Corporation. Available from http://www.omnivex.com/ [last accessed October 28, 2016]. [20] Visix. Visix Incorporated. Available from http://www.visix.com/ [last accessed October 28, 2016]. [21] Elementi. Convergent Media Systems Corporation. Available from https://www.convergent.com/spinetix/digital-signage-software/ [last accessed October 28, 2016]. [22] Forecast Embeds. The Dark Sky Company, LLC. Available from http://blog.darksky.net/forecast-embeds/ [last accessed October 28, 2016]. [23] QR Code Generator. Denso Wave Incorporated. Available from http://goqr.me/ [last accessed October 28, 2016].
ACKNOWLEDGMENT Special thanks to Mr. Tamer Hyasat, Mr. Mohannad Alhalahleh, and Eng. Hamzeh Noayran for helping in mounting and powering the screens as well as assembling and interconnecting the raspberry pi devices to the screens and network. REFERENCES [1] [2]
[3] [4]
[5] [6] [7]
[8]
[9]
[10]
[11]
[12]
[13]
M. Richardson and S. Wallace, “Getting started with Raspberry PI,” O'Reilly Media, Inc., USA, 2012. Y. Liu, J. Yang, and M. Liu, “Recognition of QR code with mobile phones,” In 2008 Chinese Control and Decision Conference (IEEE), pp. 203-206, July 2008. W. Harrington, “Learning Raspbian,” Packt Publishing Ltd, UK, 2015. Apache: HTTP Server Project. The Apache Software Foundation. Available from https://httpd.apache.org/ [last accessed October 28, 2016]. G. Pomaska, “PHP Hypertext Preprocessor,” In WebseitenProgrammierung, Springer Fachmedien Wiesbaden, pp.175-250, 2012 P. DuBois, “MySQL,” Sams Publishing, USA, 2003. D. Nandedkar and D. Adokar, “Design & implementation of remotely managed embedded digital signage using raspberry pi for railway system,” International Journal of Electronics, Communication and Soft Computing Science & Engineering (IJECSCSE), vol. 4, pp. 177, 2015. T. Arsan, A. Parkan, and H. Konu, “Design and implementation of remotely managed embedded digital signage system,” International Journal of Computer Science, Engineering and Applications, vol. 4, pp. 1, 2014. S. Hosio, H. Kukka, J. Goncalves, V. Kostakos, and T. Ojala, “Toward meaningful engagement with pervasive displays,” IEEE Pervasive Computing, vol. 15, pp. 24-31, 2016. C. Ardito, P. Buono, M.F. Costabile, and G. Desolda, “Interaction with large displays: a survey,” ACM Computing Surveys (CSUR), vol. 47, pp. 46, 2015. T. Heikkinen and T. Ojala, “Design and evolution of web-based screen management middleware for interactive multipurpose public displays,” Displays, vol. 39, pp. 42-54, 2015. N. Davies and M. Langheinrich, S. Clinch, I. Elhart, A. Friday, T. Kubitza, and B. Surajbali, “Personalisation and privacy in future pervasive display networks,” In Proceedings of the 32nd annual ACM conference on human factors in computing systems, pp. 2357-2366, April 2014. T. Kubitza, S. Clinch, N. Davies, and M. Langheinrich, “Using mobile devices to personalize pervasive displays,” ACM SIGMOBILE Mobile Computing and Communications Review, vol. 16, pp. 26-27, 2013.
