Adaptable Web Presentation System with LayeredCanvas Synchronization Mechanism for Scalability

Eishun Ito, Tadachika Ozono, Toramatsu ShintaniDepartment of Computer Science,

Graduate School of Engineering, Nagoya Institute of Technology

Gokiso-cho, Showa-ku, Nagoya, Aichi, 466-8555 Japan

Email: {ashun, ozono, tora}@toralab.org

Abstract—Occasionally, during a presentation, the presenterand audience will discuss the subject of the presentation. Thediscussion may digress from the context of the slide material.However, the presenter is limited to displaying the preparedslides. Therefore, we propose Adaptable Web Presentation, thatperceives the presentation state, and shows the material, slides,and content. For Adaptable Web Presentation, we develop SlideManagement Mechanism, consisting of three parts: editor, con-troller, and screen. We develop Slide Management Mechanismas a web application. Further, we consider a practical use ofour slideware application, and the scalability. To improve thescalability, we apply Layered Canvas Synchronization Mechanismdesigned for real-time web collaborative works, which is arendering system with an HTML5 Canvas element. This paperintroduces Slide Management Mechanism and evaluates thescalability with Layered Canvas Synchronization Mechanism.

I. INTRODUCTION

In a typical presentation, the presenter tends to arguethe opinions. However, presentations have audiences, andinteraction between the presenter and audience. Discussion orremarks of the argument is significant. An interactive presen-tation is that has an active interaction between the presenterand audience. The interactive presentation has problems. As adiscussion progresses, the subject may digress from the slidematerials. Although, the presenter might occasionally demandthe extra materials, we were unable to display anything butprepared slides. Therefore, we aim to develop a new slidewareapplication to support such a presentation.

In this paper, we propose a new presentation style calledAdaptable Web Presentation. Adaptable Web Presentation isan expanded interactive presentation that perceives the pre-sentation state and displays the material, slides, and content.Adaptable Web Presentation requires a slide relationship thatretains the connection between slides. The relationship is pro-duced by Slide Management Mechanism. Slide ManagementMechanism supports designing the slide architecture, whichdisplays a presentation scheme or overview. The audience willbe able to look at the next slide or an extra slide, wheneverdesired. The presenters will be able to confirm the scenario ata glance.

To consider a practical use, we needed to improve the slideediting capacity. In this paper, we specifically focus on collabo-rative editing. When several people access the web application,the rendering performance reduces. Thus, we applied LayeredCanvas Synchronization Mechanism[1], which is a renderingsystem with an HTML5 Canvas element, to Slide Management

Fig. 1. Architecture.

Mechanism designed for real-time web collaborative work.Layered Canvas Synchronization Mechanism improved thescalability, which is proven by the evaluation experiment inSection VI.

The remainder of this paper is organized as follows: InSection II, we discuss Adaptable Web Presentation with otherpresentation works and slideware applications. We describethe proposed Slide Management Mechanism in Section III.Section IV addresses a recommender mechanism for AdaptableWeb Presentation. In Section V, we present Layered CanvasSynchronization Mechanism for scalability, and Section VI andSection VII show the evaluation experiment and discussion.Finally, Section VIII presents our conclusions.

II. RELATED WORKS

In this section, we describe related presentation works.The web presentation is implemented as a web application,which has advantages: introduction, sharing, and seamless. Weapplied a presentation. Moreover, we applied an interactivepresentation, which improved discussion in the presentationbetween the presenter and audience. Audience members usu-ally ask questions after the presentation, however, they maywant to interrupt the presentation to ask, instead of waiting.

Prezi1 puts slides together on one page, and expresses pagetransitions by pan and zoom. The slides on one page show usthe structure, and an overview of the presentation. The system

1https://prezi.com/

2017 6th IIAI International Congress on Advanced Applied Informatics

978-0-7695-6178-3/17 $31.00 © 2017 IEEEDOI 10.1109/IIAI-AAI.2017.223

452

2017 6th IIAI International Congress on Advanced Applied Informatics

978-1-5386-0621-6/17 $31.00 © 2017 IEEEDOI 10.1109/IIAI-AAI.2017.223

452

2017 6th IIAI International Congress on Advanced Applied Informatics

978-1-5386-0621-6/17 $31.00 © 2017 IEEEDOI 10.1109/IIAI-AAI.2017.223

453

edit page was designed to assist in understanding the structureof the presentation.

Slides2 creates page transitions in multiple directions fromthe slide. Thus, the multiple directions give the presentermultiple options. On the other hand, these multiple optionscan confuse the presenter regarding which page is the bestpath.

SlideShark3 converts an existing presentation file, suchthat it can be used among multiple devices such as an iPad.SlideDogs4 provides a seamless presentation corresponding tovarious forms of presentation. For a seamless presentation, thissystem converts certain presentation formats, such as pptx orpdf, into a Slide Object format, which adjusts for renderingwithin the canvas.

Visualizing Real-Time Questionnaire Results to PromoteParticipation in Interactive Presentations[2] Interactive pre-sentations are meant to gather real-time feedback from anaudience while delivering the presentation. Inoue et al.[3] alsodeveloped a hybrid interactive presentation system that consistsof the traditional slideware application, such as Microsoft Of-fice PowerPoint or Apple Keynote, and a web application thatgathers feedback from an audience. The application uses a real-time questionnaire whose result is shown on the presentationslide.

To share knowledge through a presentation, they developedSlideWiki[4], which is a cloud sourcing platform for collabora-tive presentation creation. The concept of SlideWiki is to shareknowledge. We developed a collaborative editing presentationmechanism, not only to share, but to reuse.

A Reactive Presentation Support System based on a SlideObject Manipulation Method[5]. A reactive presentation canimmediately react to an unexpected context change: the audi-ence state, unexpected questions, and audience knowledge.

NextSlidePlease[6] is a slideware application with a di-rected graph structure approach for authoring and deliveringmultimedia presentations. HyperSlides[7] is dynamic presenta-tion prototyping using a simple markup language for creationof hierarchically structured scenes, which are transformed intohyperlinked slides of a consistent and minimalist style.

The above works indicate the significance of using webbrowsers and the requirement to support presentations. For ex-ample, a web presentation enables us to share material throughweb browsers. A native application costs more to introducebecause it demands hardware requirements. We designed oursystem running on the web browser, and the system can beused on many types of devices.

A dynamic presentation requires an architecture that in-dicates a slide page transition, and a relation among slidesor contents. We designed our system for generating AdaptableWeb Presentation architecture. Further, an interactive presenta-tion requires audience feedback. We focused on smart devices,specifically the iPhone. Many people use smart devices, andthe iPhone is the most popular in Japan. To gather feedback,we used the iPhone and other sensors.

2https://slides.com/3https://www.slideshark.com/4http://slidedog.com/

Fig. 2. Editor Screen.

In Adaptable Web Presentation, the presenter has certainactions for responding to the audience feedback, or demandingthe materials adapting the presentation state. If the preparedslides include the slide presenters demands, presenters cantransit from the current slide page to the destination page. Ifnot, the system orders the extra materials from web pages ormaterials used in the past. Needless to say, the state allowingto handling with nothing, the presenters will give an oralexplanation.

Our work developed Adaptable Web Presentation, whichis a combination the web presentation and the interactivepresentation. Moreover, a supprt system, which we call SlideManagement Mechanism, recommends the materials when weprepare slide materials, or during presentation.

III. SLIDE MANAGEMENT MECHANISM

Fig.1. shows the system architecture of Slide ManagementMechanism. Slide Management Mechanism consists of theedit mechanism, Layered Canvas Synchronization Mechanism,editor, screen, iPhone, observer module, event handler, andsensor. Moreover, the edit mechanism consists of the sliderepository, store module, and architecture module. The detailswill be described below.

Slide source files (pptx or pdf) are stored in the sliderepository. The slide repository converts source files intoslide objects that consist of images and texts needed for thepresentation, and is a minimum configuration. Slide objects inthe slide repository is transferred to the store module whenediting. The store module explains and provides objects to theediting part (editor), which consists of the editor screen andLayered Canvas Synchronization Mechanism.

Slide objects are converted into card objects used inLayered Canvas Synchronization Mechanism for rendering anediting screen. Layered Canvas Synchronization Mechanismpremises the HTML5 Canvas element. Card objects can bedrawn in the HTML5 Canvas element. Fig.2. shows the editorscreen. The editor screen shows the slide architecture whosecomponents consist of card objects. The editor’s updated datais transferred to the architecture module. The architecturemodule reducts the editor’s result.

453453454

Fig. 3. Controller(iPhone).

When we create a presentation, we use the observer moduleand event handler. The observer module is a slide provider.The architecture module sends the slide architecture to theobserver module. Based on the slide architecture, the observermodule presents the slide to the shared screen. The observermodule also provides candidates for the slide page transitionon the iPhone, which is the presentation controller. The iPhonecontroller shows the slide page candidates, and the presentercan select the next slide. The selected result is sent to the eventhandler.

The event handler is the module that receives the eventdata from the iPhone or sensor to verify the assigned actionpermissions. Fig.3. shows a part of the controller. On thisscreen, the controller shows the candidates: in the Fig.3., anadditional slide, next slide, and previous slide. Each candidateconsists of a title, description, and thumbnail. The slide istouched to select it. The slide candidate receives notification.The controller notifies the event defined for the particular slide.For example, when a presentation overruns the schedule, thecontroller generates a notification. The event handler verifiesthe notification. If allowed, the event handler generates theevent, and sends it to the observer module. The sensor alsogenerates notifications. In this paper, the sensor includes cam-eras, microphones, Leap Motion, and so on. Event data fromsensors obtains audiences’ behavior, where captures their gaze,pose, or attentions.

IV. RECOMMENDER MECHANISM

In this section, we describe a recommender mechanismof related slides or contents for Adaptable Web Presentation.There are two cases to recommend. First, editing a slidearchitecture: When editing a slide architecture, the editororders the candidates of the page transition destination. Whenediting, it takes time to consider which to select. Second,running a presentation: When running, presenters have littletime to consider. The slides should be filtered with a narrowrange of candidates.

The recommender mechanism refs to a slide architecture as

Fig. 4. Canvas Redrawing Problem.

evidence. We assumed the slide similarity from text, styles, andthe slide relationship. These evidences are extracted by SlideManagement Mechanism and libraries, such as npm packagesor .NET framework. Specifically, we made much account oftext.

We describe how to calculate similarity. We assumed everyslide has text, title, or content. We thought of each slide as adocument part. In this paper, we called the text data of eachslide, a slide corpus. To calculate the similarity, the algorithmuses a feature vector constructed of the term frequency andinverse document frequency (TF-IDF) metrics for each termthat appears in the text. We use the cosine similarity tocompare each slide, following equation (1). In equation (1),the similarity is the value of the cosine similarity betweenterm A vector and term B vector. The term vector is generatedfrom each slide corpus, including title and text.

similarity =A ·B|A||B| (1)

V. SCALABILITY

A slideware application is used to share material amongmany people. Thus, for practical use, we needed to improve thescalability. We assumed the following requirements: multiplepeople can use the application, materials can be shared, andrendering performance is fast and real-time. Existing slide-wares did not require fast rendering because they supportedtypical presentations. However, to support an interactive pre-sentation, it is essential to support communication betweenthe presenter and audience. This significant communicationrequires high performance, which is why we aimed for real-time performance.

We developed Layered Canvas Synchronization Mecha-nism for web collaborative work. This mechanism is a render-ing system using the HTML5 Canvas element. We describethe details as follows:

A. HTML5 Canvas element

The canvas element (Canvas) defined in HTML5 is oneof the most widely used standards for rendering 2D graphicson the Web. Canvas is widely used in complex visualizations,

454454455

Fig. 5. Layered Canvas Architecture

such as graphs, game graphics, and art. People on collaborativeworks require communication with a variety of tools. Canvasis scriptable with HTML or JavaScript, suits the applicationthat uses animation, or updates images frequently, such ascollaborative works. We point out certain potential problemswith Canvas. Generally, web collaborative editing renders ahuge number of Canvas objects. The huge number of objectsworsens the performance of redrawing the canvas.

We need to solve this redrawing problem to achieve a fastweb application. We call this problem the Canvas redrawingproblem. One of the most severe problems in the canvaselements in collaborative web applications is that unnecessaryredraw is required when updating or removing certain drawingson the canvas. This is because the canvas is a bitmap image,and the canvas cannot separate each drawn object. Fig.4. showsthe Canvas Redrawing Problem.

When we move object B on a canvas element, the redraw-ing caused by the moving propagates to object A on the canvas.Moving object B causes object A to vanish because object Boverlaps object A in the bitmap images. When an object isupdated and redrawn, the canvas must be cleared and the otherobjects redrawn to update the canvas correctly. Thus, the moreobjects rendered on a canvas, the more time cost needed torender.

B. Layered Canvas Synchronization Mechanism

To solve the Canvas Redrawing Problem, we proposed amethod to layer canvases. The quantity of objects in the canvascauses the worsening of the rendering performance. Thus, weadopt the strategy to reduce objects in a canvas. We describedthe method to layer. The HTML5 Canvas element can turncolor into clear, such that the canvases overlap and appear tobe one image. To distribute objects, the number of objects eachlayer has decreases, and it suppresses drawing time.

We noted that redrawing correctly requires compliancein keeping the order of rendered objects. Keeping the orderdenotes that objects are rendered from the top to bottom.

We proposed two methods for layering canvases. The firstis a layered canvas architecture, which stacks the group oflayered canvases. Fig.5. shows a layered canvas architecture.

Fig. 6. Dividing a Layer

Fig.5. shows three groups of layered canvas and its update fre-quency. There are many types of objects rendered in the canvas.For example, animation or effects are generated because of achange of the object’s status. Thus, its frequency is higherthan other objects. Moreover, the background or the graphicalarea of the group seldom update. When a layer updates, everyobject on the layer updates. Hence, objects should be separatedon the update frequency.

Layered Canvas Synchronization Mechanism can set theseparation threshold, and allow users to set the threshold astheir aim. If we know the update frequency of objects, wegenerate groups of layered canvases, and assign them on theirfrequency.

The second method layers canvases dynamically. The lay-ered canvas architecture is static and executed before the startstep. To adapt the application status, we considered the cases.Fig.6. shows the cases, cost, and solutions. The cases are timeto add a new object, and to update or delete an object.

First, we described the addition of an object. The layermanagement module, part of Layered Canvas SynchronizationMechanism, controls when to divide a layer. The layer man-agement module divides a layer according to the quantity ofobjects on the layer and canvas size, as the cost of redrawingobjects. We assume that it is high probability the latest objectwill update. If we add a new object to a layer, we should assignit to the latest layer.

The layer management module estimates the cost aftera new object is added. If the cost is over the threshold ofdividing, the system generates a new layer, arranging it on thetop of the layers, and assigns a new object into a new layer.

Second, we described when we update or delete an object.The difference with addition is that the object to be updatedor deleted is on a layer. The strategy for assignment is to splitobjects in half, and assign them into layers. It may be betterto assign a group the includes the updated object into a layerthat has less objects. However, we do not know the order ofthe updated object. We must search the updated object, andthe additional cost of dividing a layer. Therefore, we adoptedthe method to split half. This method is used to divide a layerby the performance of drawing objects on a layer. The layermanagement module measures the drawing time, if it costsover, generates a new layer, and assign objects in half.

Layered Canvas Synchronization Mechanism defines a card

455455456

Fig. 7. Experimental Result

object that is drawn in the canvas. The HTML5 Canvas rendersbitmap images and does not have objects. Canvas performsrendering according to the JavaScript code. Hence, we defineobjects that have script to render or HTML5 Canvas element.

Card objects have many advantages. First, identification.Assigned id, every object is distinct by hitting, mouse click,touch, or collision between two objects. Second, event han-dling. We can design different events on each object. Forexample, if the object hits, change to a different color. If wedrag the object from its corner, its movement is expansion.Finally, arrangement. We can set a mouse event on objects.

In a collaborative application, several objects update at thesame time. When an object updates, we must redraw otherobjects. Hence, it costs less to gather updated objects andrender them simultaneously. We propose a batch algorithm,Algorithm1. The batch algorithm enables us to render objectssimultaneously. We describe the flow. Objects to be updatedare stored in object stack (Stack). Each object in Stack isresisted in Map with the ID of the layer to which the objectbelongs. Map is a key-value store, and defines the ID of thelayer as the key, and stores objects as the value. Each layerknows the parent layer’s id, and notices it to the key-valuestore for clue of updating.

VI. EVALUATION

In this section, we describe our experimental evaluationregarding the scalability and present its results. We evalu-ated first. Here, we explain our experimental setup simu-lating the editing of objects in our system editor. The ex-perimental environment consisted of Google Chrome version54.0.02840.71(64-bit), OS X 10.11, 2.7 GHz Intel Core i5CPU, and 8GB 1867 MHz DDR3 RAM.

A. Experimental Setup

We compared the performance of HTML5 Canvas elementand layered canvases. We investigated the edit time of an objectwhile configuring the drawing frequency. The experimentswere designed to evaluate the scalability of the object editing.For a presentation or a collaborative editing, there will be tensof people and hundreds of objects in practice.

Algorithm 1 Batch Algorithm

Input: Stack : store pending objects,map : key −value store

Procedure: To update objects altogether1: for o ∈ Stack do2: l ← Layer(o)3: key ← l.id4: if map[key].isEmpty() then5: map[key] ← newArray()6: end if7: map[key].add(o)8: update(o)9: end for

10: for key in map.keys() do11: l ← getLayer(key)12: update(l)13: end for

The layered canvas synchronization system can set the ca-pacity of real-time rendering. We compared cases: 100 objects,1,000 objects, and unlimited. We call these cases layered.In the experiments, we generated 10,000 objects layered onan HTML Canvas. Then, a randomly selected object wasmoved to random coordinates 10,000 times and we measuredhow long it took to move all the objects. To simulate theediting of objects in Slide Management Mechanism, we set theprobability of object selection for approximating the discreteuniform distribution and the discrete exponential distribution.We assumed that the uniform distribution explained the simplemodel for what object to update. Moreover, we assumed thatthe exponential distribution predicts that the propensity ofupdated objects, where the latest updated object would havethe most probability to update next.

B. Experimental Results

The experimental results are shown in Fig.7. The hori-zontal axis and vertical axis represent the number of objectsand drawing time (ms), respectively. The updating frequencyof objects in the examination followed the dicrete uniformdistribution. The results show that layered is faster than theHTML5 Canvas. We assumed that to layer a canvas reducedthe redrawing cost per a layered canvas.

C. Additional experiment

We also assessed a batch algorithm and show the resultsin Fig.8. The horizontal axis and vertical axis represent thenumber of simultaneous objects and drawing time (ms), re-spectively. We compared the batch algorithm and a sequentialprocess. The batch algorithm is faster than a sequential process.

VII. DISCUSSION

In this section, we discuss Slide Management Mechanism,specifically, the recommender mechanism, and its scalability.In section of Slide Management Mechanism, we indicate theimprovement of Slide Management Mechanism, specially partsthat we didn’t present in this paper, such as sensor or screen.Further, we consider the algorithm of the recommender mech-anism. Finally, we discuss Layered Canvas SynchronizationMechanism and confirm the factors.

456456457

Fig. 8. Comparison between the sequential and batch.

A. Slide Management Mechanism

We indicated the system architecture in this paper. We havefuture tasks, specifically, event handling. The event modulehas received from the controller or sensor. The sensor includescameras, microphones, and Leap motion. We aim to fire eventsby face recognition or gesture recognition in the presentation.The present system allows presenters to trigger certain events.If we demand a more complex condition, it is better for actionsfiring events to be scriptable. When editing a slide architecture,we would design an action by scripting, and assign the relationof slides. Our system cannot rearrange objects in the slides,such as texts, figures, or images. Niwa et al.[8] studied thatcertain animation (added, deleted, or moved) contents improvethe audience ability to understand, and enable presenters toexpand their expression during a presentation.

B. Recommender Mechanism

The recommender system uses the TF-IDF metric. Beforediscussion of the method to make term feature vectors, wereconsider the similarity. In the recent study, it is popular togenerate the vector with word embedded, such as word2vec[9]or pragraph2vec[10]. As a first step, we will design for thegeneration of the vector expression from only text in the slides.The next step will be the integration of styles or images.Finally, considering the slide context or structure.

C. Scalability

The result of the evaluation experiments shows that Lay-ered Canvas Synchronization Mechanism suppresses a drawingtime, and keeps the real-time rendering. We assumed thatlayered canvases reduced wasted redrawing so that enableda real-time rendering. We used discrete uniform distributionin the experiment. Practical use cases follows approximatelyexponential distribution. The result of examination of usingexponential distribution indicated that the result of exponentialdistribution is superior to discrete uniform distribution. Dy-namic layering canvases is designed for the case which hasthe deviation of number of objects. The utility is depended onfrequency or quantity of objects. Dynamic layering is unsuit-able for video because of the frame rate. Besides, dynamiclayering is robust for increase of objects.

Layered Canvas Synchronization Mechanism can be usedfor web collaborative works. For example, we developed apractical application of editing an album or documents. Theseapplications require fast rendering a lot of objects and smoothanimation for communication.

VIII. CONCLUSION

We developed Slide Management Mechanism for Adapt-able Web Presentation. Adaptable Web Presentation requires aslide relationship of page transitions, which has several slidepages and paths. We resolved the select complication by devel-oping a recommender mechanism that narrows the candidatesof the next slide. Our future works are the consideration ofthe recommender algorithm, developing sensors for detectionduring the presentation, or the method to edit contents in theslide.

Our experimental evaluation regarding the scalabilityshows the improvement of rendering a lot of objects withLayered Canvas Synchronization Mechanism. To layer can-vases dynamically suppressed the drawing time and enabledthe real-time rendering. The result showed Layered CanvasSynchronization Mechanism producted a practical case.

REFERENCES

[1] E. Ito, T. Ozono, T. Shintani, “Layered Canvas Synchronisation Mech-anism for Realtime Web Collaboration,” Proceedings of Special InterestGroup on Web Intelligence and Intaraction(ARG SIG-WI2), Vol.9, pp27–32, 2016.(in Japanese)

[2] R. Inoue, S. Shiramatsu, T. Ozono, T. Shintani, “Visualizing Real-TimeQuestionnaire Results to Promote Participation in Interactive Presenta-tions,” Proccedings of 5th International Conference on E-Service andKnowledge Management, pp-64–69, 2014.

[3] R. Inoue, S. Shiramatsu, T. Ozono, T. Shintani, “An Interactive Pre-sentation System Based on Feedback to a Presentation Material of anOngoing Presentation,” Journal of Information Processing Society ofJapan, Vol.56, No.10, pp.2011-2021, 2015.(in Japanese)

[4] A. Khalili, S. Auer, D. Tarasowa, I. Ermilov, “SlideWiki: Elicitationand Sharing of Corporate Knowledge Using Presentations,” KnowledgeEngineering and Knowledge Management Lecture Notes in ComputerScience, Vol.7603, pp.302–316, 2012.

[5] H. Yamada, Y. Niwa, S. Shiramatsu, T. Ozono, T. Shintani, “A ReactivePresentation Support System based on a Slide Object ManipulationMethod,” Proceedings of the 2014 International Conference on Com-putational Science and Computational Intelligence(CSCI 2014), Vol.2,pp.46–51, 2014.

[6] R. Spicer, Y. Lin, A. Kelliher, H. Sundaram, “NextSlidePlease: Authoringand delivering agile multimedia presentations,” ACM Transactions onMultimedia Computing, Communications, and Applications(TOMM),Vol.8, Issue.4, 2012.

[7] D. Edge, Joan M. Savage, Y. 　 Koji, “HyperSlides: Dynamic Presen-tation Prototyping,” Proceedings of the SIGCHI Conference on HumanFactors in Computing Systems, pp.671–680. 2013.

[8] Y. Niwa, S. Shiramatsu, T. Ozono, T. Shintani, “A Collaborative WebPresentation Support System Using an Existing Presentation Software,”Proceedings of the 2014 IIAI 3rd International Conference on AdvancedApplied Informatics(IIAI-AAI 2014), pp.80–85, 2014.

[9] T. Mikolov, Scott Wen-tau Yih, G. Zweig, “Linguistic Regularitiesin Continuous Space Word Representations,” Proceedings of the 2013Conference of the North American Chapter of the Association forComputational Linguistics: Human Language Technologies(NAACL-HLT-2013), pp.746–751, 2013.

[10] Quoc V. Le, T. Mikolov, “Distributed Representations of Sentencesand Documents,” Proceedings of the 31st International Conference onMachine Learning(ICML-14), pp.1188–1196, 2014.

457457458