Advertisement

Content Authoring Tool to Assign Signage Items to Regions on a Paper Poster

  • Akira HattoriEmail author
  • Hiroshi Suzuki
  • Haruo Hayami
Conference paper
  • 1.2k Downloads
Part of the Lecture Notes in Computer Science book series (LNCS, volume 9734)

Abstract

This paper describes a content authoring tool for our Hyper Panel system. This content authoring tool makes it possible to assign signage items, such as pictures and movies, according to the layout of a paper poster. Users can do that by dragging and dropping regions and signage items on the poster image. We developed a prototype of the content authoring tool as a web application and evaluated it. The results indicated that our content authoring enables users to understand how to use it and to almost correctly relate signage items to the corresponding regions on a paper poster in an intuitive method.

Keywords

Digital signage Paper poster Content authoring tool HTML5 

1 Introduction

There is an increasing proliferation of digital signage [1]. They are now found in many public spaces such as train station, airports, hotels, shopping malls, etc. Compared with traditional paper-based media such as paper posters, digital signage can deal with a wide range of content types and makes it possible to easily update the content. Some of them supports interactions between the viewers and the displays using touchscreens, gesture technologies and mobile devices [2]. However, few studies have so far been made at combining digital signage and paper-based media. The latter has been used for years and is readily available. Thus, we have been developing “Hyper Panel system” to make extensive use of both advantages of digital signage and paper-based media by integrating them [3]. The Hyper Panel system enables an intuitive operation to show signage items such as pictures and movies related to the regions on a given paper poster. When a viewer of the Hyper Panel system attaches a small device with supersonic sensors which we developed in our previous study to the paper poster, the coordinate values of the device are acquired and the signage items corresponding to the position are shown on his/her tablet terminal.

A digital signage system typically consists of one or more displays, one or more media players and a content management system [1, 2]. The latter is responsible for providing capabilities for content authoring and delivery. So far, we developed a fundamental mechanism of the Hyper Panel system to support interactive display of signage items. We believe that developing a content management system for the Hyper Panel system produces the intended effect. Therefore, in this paper, we propose the content authoring tool of our Hyper Panel system. We discussed it in [4]. However, we have not compared it with other method yet. Most content authoring tools of the existing digital signage provide a function to define the screen layout. With this function, users can segment the screen into a variety of areas for various purposes. However, such a segmentation function is inadequate for use in our Hyper Panel system because it requires that signage items are assigned according to the layout of a paper poster.

2 Related Work

There has been an increasing interest in interactive digital signage [5, 6]. Our Hyper Panel system also has interactivity. A digital signage system typically consists of one or more displays, one or more media players and a content management system [1, 2]. A large number of studies have been made on the development of digital signage systems. These studies focused on reflections on and lessons from long-term use of a digital signage [7], user-generated signage contents [8, 9], an interactive digital signage [10, 11], etc. Some of them combined paper-based media such as maps and posters with digital information [12, 13]. They make use of near-field communication technology. However, little attention has been given to the content management system. To solve inefficiency and scalability issues introduced by use of proprietary signage content formats, Dayarathna, M., etc. proposed a method of using XML to describe signage contents and evaluated the flexibility in signage content authoring [14]. Their system has a function to manage signage contents, but it does not provide a function to make the screen layout. Takata, S., etc. developed a digital signage system that is low-cost and easy to introduce in small stores [15]. Their system has a function to manage signage contents on the web. However, it handles only a movie file and does not manage the screen layout. Commercial and open-source digital signage systems have a function to manage signage contents. The function allows users to design a screen layout and to make a content with multi areas displaying different items. However, such a function is inadequate for use in our Hyper Panel system because users cannot assign signage items according to the layout of a paper poster in an intuitive environment.

3 Hyper Panel System

Hyper Panel system provides signage items according to the layout of a given paper poster [3]. This system treats any regions on the paper poster as hyperlink anchors that allow viewers to obtain detail information about the content of the region on their mobile devices such as smartphones and tablet terminals. To realize this feature, we developed a small device with supersonic sensors, which is called “viewpoint tag”. When a viewer of our Hyper Panel system attaches the viewpoint tag to a given paper poster, the coordinate values of the tag are acquired and the signage items corresponding to the position are shown on his/her mobile device. With this mechanism, the Hyper Panel system makes extensive use of both advantages of digital signage and paper-based media. Figure 1 shows a prototype of the Hyper Panel system which we developed. A content management system is necessary for the Hyper Panel system to produce the intended effects. In the next section, we propose the content authoring tool for our Hyper Panel system.
Fig. 1.

Prototype of Hyper Panel system

4 Content Authoring Tool

4.1 Outline

Our content authoring tool is based on a client-server model and has five functions. They are (1) to register poster images, (2) to assign signage items to regions for display on a paper poster placed on our Hyper Panel system, (3) to change the size and position of the regions and the assigned signage items, (4) to preview the assignment, and (5) to provide the assignment information to a media player of the Hyper Panel system. The database of our content authoring tool has three tables to manage the assignment information. They store poster images, regions on paper posters, signage items related to the regions, respectively. The relationships are created among these tables.

By the way, those who manage contents of a digital signage are not always technically savvy. Therefore, it is important that such non-technical users of a content management system can easily understand how to properly use it. This is why our content authoring tool provides users with an intuitive environment.

4.2 Functions

  1. (1)

    To register poster images

    This function is to add an image file of a paper poster. When registering a new poster, users specify the paper size and orientation and our content authoring tool obtains the size of the poster image. When the content authoring tool provides a content created for a paper poster to a media player of our Hyper Panel system, it converts the coordinates of the regions contained in the content from pixels to millimeters using the paper size and the image size of the poster. This conversion makes it possible to create a content in accordance with the size of a poster.

     
  2. (2)

    To assign signage items to regions

    This function is to assign signage items according to the layout of a paper poster. Users can specify a region to which they want to assign signage items by dragging and dropping on the poster image. If the specified new region does not overlap with any regions registered before, it is added to the database and drawn as a rectangle on the poster image. The database stores two coordinate pairs, which are the upper-left and the lower-right corners, and brief description for each region. Once a region is added, users can relate signage items by dragging and dropping the files into the region.

     
  3. (3)

    To change regions and signage items assigned

    This function is to change the size and position of regions added to the database and signage items related to them. When changing a region, users click the region on a poster image and drag it to the desired size and position. This manner is similar to the way that general office software and graphics software employ. They can remove any signage items from a list of the items related to the clicked region.

     
  4. (4)

    To preview assignment.

    This function is to check if signage items are correctly assigned according to the layout of a paper poster. When users click a region, the signage items related to the region is overlaid to the poster image in sequence. With this function, they can determine the appropriateness of the size and position of the regions and the signage items related to them together.

     
  5. (5)

    To provide the assignment information.

    This function is to output assignment information in XML format. This information is about the relation between regions and signage items. It contains the coordinates of regions converted to millimeters and the URLs of the signage items related to the regions to lead a media player of our Hyper Panel system to the items. This function is available as WebAPI. When the media player sends the information about a paper poster displayed on the Hyper Panel system to the function, it can obtain the assignment information corresponding to the poster. Using this information, it shows signage items on a viewer’s mobile device in accordance with the position where the viewer attaches a viewpoint tag on the paper poster.

     

4.3 Implementation

We developed the content authoring tool as a web application with each function accessed as an individual web page. We implemented the server-side functionality using PHP and MySQL. Assignment information is stored in the database (MySQL). This information is available through the WebAPI provided by our content authoring tool in XML format. At the client-side, we implemented the functionality using HTML5 and Javascript with Fabric.js, which is a Javascript library that works with HTML5 canvas and provides interactive object model on the top of canvas element [16]. We made good use of the library to specify and draw regions on a poster image by dragging a mouse (see (i) in Fig. 2).
Fig. 2.

User interface of out content authoring tool

When a new region is added to the database, a rectangle is drawn in blue to indicate the region on the poster image. It can be moved and resized by dragging and dropping and the results are immediately reflected in the database. We also implemented the function to relate signage items to regions using HTML5 File API and Drag and Drop API. These two APIs make it possible for users to do this assignment by dragging and dropping signage items, which are files saved on their PC, to a region indicated by a blue rectangle on a poster image (see (ii) in Fig. 2). When the client-side scripts communicate with the server-side scripts to add a new region and relate signage items, they send the coordinate pairs of the region and the files to the server-side scripts through Ajax using jQuery.

The function to preview the assignment allows users to see if signage items are correctly assigned according to the layout of a paper poster. When a region is clicked on the poster image to preview the assignment, the signage items related to the region are overlaid on the poster image and users can view them one after another (see (iii) in Fig. 2). To implement this feature, we used Zoombox plugin of jQuery.

5 Evaluation

5.1 Experiment

In order to see if users can easily and correctly assign signage items to a paper poster with our content authoring tool, we conducted an experiment to compare it with the method to make assignment information in XML format using a text editor. Three university students participated in the experiment. In this paper, we call them participant A, B and C. Participant A and B major in a computer-related discipline, while participant C does not. Participant B and C assigned signage items using our content authoring tool before using a text editor. Participant A did that in reverse order. For the purpose of this experiment, we measured the time it takes the participants to assign signage items by a stop-watch. The participants gave us the start and end signs of the trials. We also asked the experimental participants to answer questions about the usability of our content authoring tool after assigning with both methods.

In this experiment, we used a poster to introduce a department at a university. The participants related 50 signage items to 10 regions on the poster. To do that, we gave them a printed A4-size poster to show the regions, a printed poster and a list to show what items are related to which regions, and a printed assignment information in XML format as a sample. The following is the sample:

Open image in new window

The participants assigned the signage items in accordance with these instructions. Using a text editor, they looked up coordinates of the regions with a general graphics software. About a network environment in the experiment, participant A and B used WiMAX connection, while participant C used optical fiber.

5.2 Results

Table 1 summarizes the time taken for the participants to complete the assignment of the signage items. The asterisk (*) and plus (+) marks in the table indicate that the participants used our content authoring tool before a text editor before and that the participant does not major in computer-related discipline and used optical fiber, respectively. As you can see, participant B and C completed the assignment using our content authoring tool for 4 min and 19 min faster than when making the assignment information in XML format, respectively. On the other hand, participant A did the assignment in almost the same time with either method. Participant B and C alternated between adding a region and relating signage items to the region, while Participant A related all signage items after registering all of regions. All participants used the function to preview after finishing relating all signage items. Participant B used a text editor with the function to support making a file in XML format. After creating the XML file, the participant checked it using a web browser. Participant A and C used a text editor bundled with operating system. All participants made the assignment information in XML format after looking up all coordinates of the regions with a graphics software.
Table 1.

Results of the assignment

Participant

Our content authoring tool

Text editor

A

27’ 30”

27’ 43”

B*

23’ 48”

27’ 49”

C*,+

17’ 17”

36’ 14”

In the questionnaires, all participants chose our system to a question which method was easy to understand. The reasons were the follows:
  • I specified coordinates of regions in an intuitive method.

  • Assignment on a poster image made it possible to easily understand what I was doing.

  • It is how to imagine because I could add signage items on a poster image.

We also asked the participants about ease of use of our content authoring tool with 5 categories: very easy, easy, neither easy nor difficult, difficult, and very difficult. They answered “easy” to questions on how to specify a region on a poster image and relate signage items to it. The reason was “Dragging and dropping is easy”. They also answered “easy” to a question on how to preview the assignment. Only participant C used the function to change regions and signage items. The participant answered “I was a little confused because I had to move to the page to use the function”.

5.3 Discussion

The results of the questionnaires suggest that our content authoring tool provides an environment in which users can assign signage items according to the layout of a paper poster with having an intuitive understanding of what they are doing. This is because all of the functions are available by drag and drop on a poster image. Users can easily understand how to use our content authoring tool even though they are not technical-savvy.

We discuss the results of the assignment of signage items with our content authoring tool. Participant B and C correctly related all signage items to the indicated regions, while Participant A related the same signage item to the indicated region multiple times. The number of such assignment was 7 items. However, there was no item that the participant forgot to relate. Six of them were intended to be related to the first region of the list given as instructions and the rest was the largest file size in the signage items. Actually, the participant had related signage items one after another before the last upload was completed. After all signage items were related, the participant noticed that the upload of signage items had not been complete and related the items again, but the participant did not noticed the multiple assignment and did not used the function to change the assignment. We think that a lack of the upload progress information of signage items caused such multiple assignment of the same item. Such progress information would help users know how long have to wait for the upload. In fact, when the participant understood the feature that our content authoring tool do not show the upload progress information, there was almost no multiple assignment. It is also useful to make it impossible to relate the same signage item to the same region more than one time.

As for the assignment information in XML format, participant A and B did not make any grammatical mistakes, but they made some typing mistakes. For example, they described more than one element for the same signage items in an element for a region to relate some different items to. On the other hand, participant C made both mistakes. The participant did not input a space between attributes, a diagonal (/) to denote an end tag, quotation marks for attribute values, and some end tags. These mistakes can be solved using a text editor with the function to support making a file in XML format. However, such a tool is not used widely, especially for non-technical people. A simple user interface like our content authoring tool is suitable for such users.

Participant C was able to assign signage items faster than the others did using our content authoring tool. The one reason is probably the usage of optical fiber network. In addition, unlike the others, the participant used the function to change the assignment. When using it, the participant also checked if signage items was correctly related, so he hardly used the function to preview the assignment.

These suggest that with progress information, our content authoring tool make it possible more effectively and efficiently, that is, more correctly and quickly assign signage items according to the layout of a paper poster.

6 Conclusion

In this paper, we proposed a content authoring tool for our Hyper Panel system. This content authoring tool makes it possible to assign signage items according to the layout of a paper poster. Users can specify regions and related signage items there on a poster image. As the results of the experiment described in this paper, we found that our content authoring tool provide an easy to understand environment in which users can almost correctly assign signage items in an intuitive method. However, there is room for improvement on its usability. We need to introduce measures to prevent users from relating the same signage items to the same region multiple times. It is also necessary to unify the functions to assign signage items and to change the assignment. These would lead to the improvement in the effectiveness and efficiency of our content authoring tool, which are our future work. In addition, we would like to make use of our Hyper Panel system in various fields, for example, a town guide and education. We have to evaluate it based on the field trials.

References

  1. 1.
    ITU Telecommunication Standardization Sector: Digital signage: the right information in all the right places. ITU-T Technology Watch report (2011)Google Scholar
  2. 2.
    Davies, N., Clinch, S., Alt, F.: Pervasive Displays: Understanding the Future of Digital Signage. Morgan & Claypool, San Rafael (2014)Google Scholar
  3. 3.
    Suzuki, H., Hattori, A., Sato, H., Hayami, H.: Hyper panel system: display system for poster layouts with detailed contents. In: Stephanidis, C. (ed.) HCII 2015 Posters. CCIS, vol. 529, pp. 45–50. Springer, Heidelberg (2015)CrossRefGoogle Scholar
  4. 4.
    Hattori, A., Suzuki, H., Hayami, H.: Contents authoring tool for relating pictures and movies to positions on a paper poster. IPSJ J. Inf. Process. Soc. Jpn. 57(1), 270–279 (2016)Google Scholar
  5. 5.
    Want, R., Schilit, B.N.: Interactive digital signage. Computer 45(5), 21–24 (2012). IEEECrossRefGoogle Scholar
  6. 6.
    Veenstra, M., Wouters, N., Kanis, M., Brandenburg, S., Raa, K., Wigger, B., Moere, A.V.: Should public displays be interactive? Evaluating the impact of interactivity on audience engagement. In: Proceedings of the 4th International Symposium on Pervasive Displays, pp. 15–21. ACM, New York (2015)Google Scholar
  7. 7.
    Clinch, S., Davies, N., Friday, A., Efstratiou, C.: Reflections on the long-term use of an experimental digital signage system. In: Proceedings of the 13th International Conference on Ubiquitous Computing, pp. 133–142. ACM, New York (2011)Google Scholar
  8. 8.
    Jose, R., Pinto, H., Silva, B., Melro, A., Rodrigues, H.: Beyond interaction: tools and practices for situated publication in display networks. In: Proceedings of the 2012 International Symposium on Pervasive Displays, 6 p. ACM, New York (2012)Google Scholar
  9. 9.
    Kanis, M., Groen, M., Meys, M., Veenstra, M.: Studying screen interactions long-term: the library as a case. In: Proceedings of the International Symposium on Pervasive Displays 2012. ACM, New York (2012)Google Scholar
  10. 10.
    Chen, Q., Malric, F., Zhang, Y., Abid, M., Cordeiro, A., Petriu, E.M., Georganas, N.D.: Interacting with digital signage using hand gestures. In: Kamel, M., Campilho, A. (eds.) ICIAR 2009. LNCS, vol. 5627, pp. 347–358. Springer, Heidelberg (2009)CrossRefGoogle Scholar
  11. 11.
    Kim, E., Lee, H.J., Lee, D.H., Jang, U., Kim, H.S., Cho, K.S., Ryu, W.: Efficient contents sharing between digital signage system and mobile terminals. In: 15th International Conference on Advanced Communication Technology, 2013, pp. 1002–1005 (2013)Google Scholar
  12. 12.
    Borrego-Jaraba, F., Ruiz, I.L., Gomez-Nieto, M.A.: A NFC-based pervasive solution for city touristic surfing. Pers. Ubiquit. Comput. 15(7), 731–742 (2011). Springer-Verlag, LondonCrossRefGoogle Scholar
  13. 13.
    Reilly, D., Rodgers, M., Argue, R., Nunes, M., Inkpen, K.: Marked-up maps: combining paper maps and electronic information resources. Pers. Ubiquit. Comput. 10(4), 215–226 (2006). Springer-Verlag, LondonCrossRefGoogle Scholar
  14. 14.
    Dayarathna, M., Withana, A., Sugiura, K.: Infoshare: design and implementation of scalable multimedia signage architecture for wireless ubiquitous environments. Wireless Pers. Commun. 60(1), 3–27 (2011). Springer USCrossRefGoogle Scholar
  15. 15.
    Takata, S., Hayashi, K., Tamatsu, K., Yamagishi, Y., Nagase, H.: Development and use of a digital signage system for revitalizing regional shopping districts. Knowl. Manag. E-Learn. 6(4), 426–439 (2014). Laboratory for Knowledge Management & E-Learning, Faculty of Education, University of Hong KongGoogle Scholar
  16. 16.

Copyright information

© Springer International Publishing Switzerland 2016

Authors and Affiliations

  1. 1.Faculty of Global Media StudiesKomazawa UniversityTokyoJapan
  2. 2.Faculty of Information TechnologyKanagawa Institute of TechnologyAtsugiJapan

Personalised recommendations