VILNIUS UNIVERSITY

FACULTY OF MATHEMATICS AND INFORMATICS

DEPARTMENT OF COMPUTER SCIENCE II

Semester Project

Real-time pixel placement web application

Done by:
Artūras Sotničenko

Supervisor:
dr. Joana Katina

Vilnius
2019
Preface
This course work was done during the 6th semester of the study program Information Technologies
in the branch of Innovation in applications. The topic Real-time pixel placement web application
was chosen by me because I wanted to study and apply real-time communication technologies in
web applications.

June 24, 2019

Artūras Sotničenko

2
Contents
Preface 2

Abstract 4

Santrauka 5

1 Introduction 6
1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 Analysis 7
2.1 Web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Web Application technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Real-time communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 Related Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4.1 milliondollarhomepage.com . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4.2 reddit.com/r/place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3 Requirements 11
3.1 Functional requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Non-functional requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4 Project Details 12
4.1 System architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.1 Client tier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.2 Server tier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2 Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.3 Activity diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5 Implementation 15
5.1 Back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.1.1 Data models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.1.2 Data models methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2 Front-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3 UI components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.1 Pixel Placement component . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.2 Color Picker component . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3.3 User Management component . . . . . . . . . . . . . . . . . . . . . . . . 19

Conclusions and Recommendations 20

References 21

3
 Abstract
This course work consists of research and implementation details of an interactive real-time
web application where clients can place pixels into HTML5 canvas and receive real-time updates
of such pixels from other user sessions. Course work paper describes the process of development
of such web application with analysis of the field and related work in production, application
system design choices, provides insight into system architecture through diagrams, user interface
drawings, and other UML drawings.

4
 Santrauka
Žiniatinklio aplikacija kurioje realiu laiku gaunami ir siunčiami vaizdo elementai

Šis kursis darbas įvardija detales kaip buvo kuriama tinkliažinio aplikacija kurioje klientai gali
delioti pikseliu į HTML5 canvas elementą ir gauti naujausius atnaujinimus realiu laiku. Šis darbas
apibendrina šios aplikacijos kūrimo procesą - atllikta analizė kas yra web aplickaciją, susijusių
darbų analiė, sistemos architektūrinius sprendimus tiek aprašant juos tiek per UML diagramas,
vartotojo sąsajos komponentus bei priešinius.

5
1 Introduction
With the advent of HTML5 and its API from WHATWG that enables developers to building
content-rich and interactive web applications via accessible manner in various devices ranging
from computers, mobile phones, TV, tablets, IoT devices be consumed by web browsers without
any external dependencies or technologies such as Adobe’s Flash, Microsoft’s Silverlight and Java
applets in order to facilitate rich interactions.
There are quite a few HTML5 APIs worth mentioning. This course work will build only on
a small fraction of it. Mosty new EventStream API and Canvas API. In the context of course
work subject, there is a need for real-time updates. Real-Time communication between server
and client browser - using SSE and EventStream would be one of the fits. An alternative for such
communication would be WS API or ajax long pooling. To facilitate the drawing of the pixels onto
users screen Canvas API will be utilized. Similar APIs are often utilized by internet advertising
firms to place advertisements in web sites, browser-based multiplayer games to propagate game
state changes.
The goal of this course work is to develop a working web application where the main feature
would be a facilitation of pixel placement onto canvas element and real-time canvas updates.

1.1 Motivation
The idea of creating a "Real-time pixel placement application" system came up while thinking
about a simple project that I could complete in my spare time from full-time work that could utilize
the skills that I currently possess and skill set that expand upon it. Receiving academic credits and
the possibility of making a spin-off application to monetize it also was taken into account.

1.2 Goals
The main goal of this project is to develop a sweb application that could facilitate interactions
between application users in real time in an easy, understandable and accessible manner. The
application system itself should extensible in terms of features such as user authentication and
additional functionality.

6
2 Analysis
Developing a web application consists of a few important steps. In this section, the analysis of what
is a web application, techniques, and technologies that can be used to develop web applications.
that can be used to develop as well as studies of similar applications will be made.

2.1 Web applications

A web application is a successor to web sites in means of form content provided. Web applications
are accessible through web browsers on a variety of end-user devices but not limited to that. Web
applications provdie a variety of improvements such as accessibility, semantics, user experience,
rich content delivery such as videos, user-generated content, etc. Web applications usually provide
end user value. Such value could be aggregations of information, entertainment, advertisements,
convenience, social connectivity, etc. [4] From software architechture point of view, web appli-
cations are thin clients that communicate with the remote server with requests over the internet as
2-Tier architectural style [9]

2.2 Web Application technologies

Development of web application that is used in the web browser is based on technologies de-
veloped for that purpose. As a successor to web sites, modern web applications mostly uses the
HTML5, CSS3 and JS markup to display information, style it and create user interactions. [4]
There are other technologies like Java applets, Microsofts Silverlight, Adobes Flash that also can
be used to build web applications but it often requires additional software to be present on user
devices.

2.3 Real-time communication

Real-time communication technologies are enabling clients to receive data messages from server
in near real-time fashion There are abundant resources papers studying real-time communication
technologies in web applications on the web as well as quite few web applications that using it
in production. Technologies to achieve this are - ajax long polling, WS, SSE is often utilized to
achieve such web application behavior. [2] [5] In conclusion, most of them achieve similar end-
results but using different methods of communication. All of the methods have their pros and cons
in different areas ( web browser support, implementation difficulty, resource overheads, etc.) In
the context of real-time pixel placement web application server-sent events and EventSource API
are great events as there is no need of bi-directional communication and there’s great turn-key
compatibility with all of the major browsers without

2.4 Related Work

While researching the topic for real-time pixel placement web application few examples of related
work were found.

7
 Figure 1. Screenshot of a similar project (milliondollarhomepage.com)

2.4.1 milliondollarhomepage.com

Web site pictured in 1 Is one of the first successful pixel ad places created by Alex Tew. "The
website of Alex Tew, a 21-year-old entrepreneur, who hopes to pay his way through university by
selling 1 million pixels of internet ad space for $1 each." The main idea behind this web site is to
sell batches of pixels with a minimum order of 100 pixels (10 × 10) square and display it for at
least five years. ( cite from about section [8] )
Analysis of source code 2.4.1 shows that the main image is 1000 × 1000 pixel gif format image
that was constructed from 3306 different graphical ads. Each ad has its metadata such as title href
and coordinates. The metadata of the ad is mapped onto image the using HTML <map> element

8
with each of its child element DOMnode <area> containing the attributes with corresponding
metadata values as shown in a code snippet 1

Code 1. milliondollarhomepage.com area elemnt example

1 < a r e a c o o r d s = " 6 3 0 , 3 1 0 , 6 4 0 , 3 2 0 " h r e f = " h t t p : / / www. g e t p i x e l
. net / " t i t l e =" g e t p i x e l . net , sto ck photography ">

In conclusion, 2.4.1 is an accessible web site that could be used with understandable data
structure, business model and commitment to long term service as it is online since 2005. The
drawback is that quite a few pixel placements leads to 404 pages as the placements are quite old.

2.4.2 reddit.com/r/place

Figure 2. Screenshot of the final canvas of reddit.com/r/place

9
 The reddit.com/r/place was created as a creative April Fools project to explore the way humans
interact at large scales. [7] In a nutshell the /r/place project is similar to 1 by the canvas size figure
1 figure 2 but the difference was that /r/place allowed collaboration and did not require anything
except users account to place pixel onto canvas. Another difference was that the community could
place pixels only for a brief amount of time as the project lived 72 hours and all the changes
to canvas were propagated in real time to all collaborators. The development, technologies and
thought process behind this project is described in well-written blog post [7]

10
3 Requirements
In this section basic funtional and non-functional requirements for the real-time pixel placement
will be defined

3.1 Functional requirements

From analys section plus some aditional creativity, functional requirements are derived as follows:

• Users should be able to authenticate with the server

• Users should be able to pick color with his mouse

• Users should be able to place pixel onto canvas

• To inprove UX users should be able to zoom into specific are of the canvas

• From UX stand-point users should be able to see updated pixels of the canvas in real-time

• Users should be able to lock the pixel so no one else could update them for period of time.

• Users should update or edit personal information such email, password, etc.

3.2 Non-functional requirements

As the users of real-time pixel placement web application will interact with the application thor-
ough theirs web broswers some non-functionals restrictions should be made in order to accomodate
the accesability of such web application for majority of the web browsers.

• Web application should work in any browser supporting JavaScript

• Web application should not depend on any other 3rd party plugins or software

• Web applications source should utilze available HTML5 applications

• Web application should persist its connection to server

• Web application state should always be up-to-date thought other’s users session

• Web application should follow 2-tier application guidelines

• Web applcations architecture should follow component based architecture style

• Web application should have REST endpoints that comply with openAPI standarts

11
4 Project Details
4.1 System architecture
There are 2-Tiers that web application must implement from a technology stack perspective -
Client application that contains UI layer with its components responsible for graphical represen-
tation to the end user and communication with the server tier that is responsible for serving static
files to client and handling request form front it, hardware [9]. The system architecture layering is
represented in figure 3

4.1.1 Client tier

Our end user will use the application in his web browser through our web facing UI. The problem
are that there is many different web browsing software vendors and every one of them has their
quirks which can influence user experience UX. The same follows for different screen sizes, Inter-
net connection speeds and hardware users are using can that make UX different. The standard way
of implementing web application UI is using HTML, CSS, and JS because all of them have fairly
good support in most modern browsers despite minor differences in the the rendering of newer
document properties. One of the solutions for problems mentioned earlier is using HTML, JS and
CSS properties and attributes that are widely supported through different web browsers.

4.1.2 Server tier

The netwoking between client and server will go through HTTP because its standard support across
different web browsers and easily goes through most network firewalls. For server-side logic
and API endpoints as well as event-stream in for of SSE for application use of LB3 framework
based on [1, Event-driven I/O server-side JavaScript environment node.js] that consistently shows
better performance on server response times compared to alternative Apache web server as were
shown in performance investigation of node.js [6] [3]. The reasoning behind later pick is the use
of the same language for both front-end and back-end so no mental switch is required between
different languages while developing applications while consuming less time and speed up the
system development time. For data store and persistence document based MongoDB document
based database is used for its flexible schema which helps develop applications faster due to the
way, it stores object model and performance [10] Both web application and database is running
inside docker environment as Docker containers communicating through a virtual network and
mounted on host volume for data share.

4.2 Use Cases

As per use-case, UML diagram figure 4 one can observe that there is one actor in the system and
high-level use cases of the web application. [9]

4.3 Activity diagram

In fig. 5 one can observe the activity diagram that is use cases artifact of fig. 4. Pixel placement
activity diagram describes the flow of updating the web applications HTML5 <canvas/> ele-
ment as well the statistics of the mentioned DOM element of as user places pixels and receives

12
Figure 3. Web applications architecture diagram

13
 Figure 4. "Real time pixel placement " Use case diagram

SSE. After the initial load of DOM content, flow branches into two flows - one is responsible for
subscribing HTML5 EventStream Source and listening to change-stream and then updating can-
vas element, while other flow is responsible for displaying the UI and facilitating interactions of
the users pick of color from color picker element and pushing the new pixel with is position to
back-end service. based on [9]

14
 Figure 5. Pixel placement activity diagram

5 Implementation
5.1 Back-end
The back-end of the application is built on LoopBack 3.
"The LoopBack framework is a set of Node.js modules that you can use independently or
together to quickly build REST APIs. A LoopBack application interacts with data sources through
the LoopBack model API, available locally within Node.js, remotely over REST, and via native
client APIs for iOS, Android, and HTML5. Using these APIs, apps can query databases, store
data, upload files, send emails, create push notifications, register users, and perform other actions
provided by data sources and services."

15
 I picked this framework subjectively as it is simple and powerful enough to provide the func-
tionality for requirements, that I have - server-sent events, CRUD operations, and data persistence
abstracted away.

5.1.1 Data models

LB3 provides a way to define data models and connect them to an array of data sources for persis-
tence.
Data in MongoDB has a flexible schema. Collections do not enforce document structure.
This flexibility gives data-modeling choices to match application requirements. As for the initial
data schema only one model code: 2 was attached to data-sources to persist, as there was no
need for user authentication. Models in LB3 usually are defined through CLI tools provided by
LB3. The output JSON shown in code 2 In short line 10 and 15 says that model named Pixel has
two properties: ’l’ (stands for location) and ’c’ (stands for color) both of string attribute and ’a’
(arbitrary property name means lock) that’s is boolean.
Location property attribute is constructed as a strig to reprent coordinates on <canvas/>
element. Exmaple of pixel location attirbute string on canvas would be x : i >= X >= j
y : i >= Y >= j X and Y stands for a integer number in 2D plane between i and j. In the context
of this application, the canvas element is square i and j are between the 0 and square edge length.

Code 2. Pixel Model Schema

1 {
2 " name " : " P i x e l " ,
3 " plural " : " Pixels " ,
4 " base " : " PersistedModel " ,
5 " idInjection " : true ,
6 " options " : {
7 " validateUpsert " : true
8 },
9 " properties " : {
10 "l": {
11 " type " : " s t r i n g " ,
12 " required " : true ,
13 " index " : t r u e
14 },
15 "c" : {
16 " type " : " s t r i n g " ,
17 " required " : true
18 },
19 "a" : {
20 " type " : " boolean " ,
21 " required " : false ,
22 " default " : false
23 }
24 },
25 }

16
5.1.2 Data models methods

LB3 framework provides API to add ’Remote methods’ to existing data models. Each remote
method can be invoked in different stages of HTTP request handling. In this course work, I imple-
mented a new remote method called ’patchByLocation’ to facilitate an activity that is described in
fig 5 and is described in code snippet 3. The mentioned method, patchByLocation, takes three ar-
guments shown on code 3 lines 27 to 29, described in subsection 5.1.1. To process the request the
script first queries the model data source with find query by location property (l). Then it checks
whether the model has ’locked’ property set value and branches the response path depending on
the result. The response is provided as a callback method that resolves to either error or updated
Pixel instance as implemented in code 3.

Code 3. Implemented code of Pixel remote method

1 ’ use s t r i c t ’ ;
2 module . e x p o r t s = f u n c t i o n ( P i x e l ) {
3 Pixel . patchByLocation = function ( l , c , a , callback ) {
4 P i x e l . f i n d O n e ( { where : { l : l } } ) . t h e n ( r e s u l t => {
5 i f ( r e s u l t && r e s u l t . a == t r u e ) {
6 c a l l b a c k ( ’ P i x e l i s locked ’ ) ;
7 } else {
8 r e s u l t . update ( { l : l , c : c , a : a} )
9 . t h e n ( r e s u l t => {
10 c a l l b a c k ( n u l l , JSON . s t r i n g i f y ( r e s u l t ) ) ;
11 })
12 . c a t c h ( e r r o r => {
13 callback ( error ) ;
14 }) ;
15 }
16 }) ;
17 };
18 P i x e l . remoteMethod ( ’ patchByLocation ’ , {
19 http : {
20 path : ’/ patchByLocation ’ ,
21 verb : ’ patch ’ ,
22 },
23 accepts : [
24 { arg : ’ l ’ , type : ’ string ’ } ,
25 { arg : ’c ’ , type : ’ string ’ } ,
26 { arg : ’a ’ , type : ’ boolean ’ } ,
27 ],
28 returns : {
29 arg : ’ pixel ’ ,
30 type : ’ string ’ ,
31 },
32 }) ;
33 };

17
5.2 Front-end
User Interface is implemented using the most popular web browser technology stack - HTML5,
CSS, and JS. Upon initial HTTP request, only static files are served (index.html and assets). The
rest of the communication is conducted via an HTTP request to REST API endpoints. The in-
dex.html contains all the markup needed to load the JavaScript files and minimal structure inside
<body/> DOM element for three UI components that will be displayed. [9] [4]

5.3 UI components
The web application is composed of three main components - the Pixel Placement component, the
Color Picker component and the User Management component as per component architeture syle
[9]

5.3.1 Pixel Placement component

Pixel Placement UI component contains Canvas DOM node and functionality to enable Users
interaction with it such as ’Zoom effect’ as the user hovers over the canvas and mouse click han-
dlers which captures the user’s mouse position and sends that information to back-end server after
converting into an acceptable data structure. On initial Web application load Pixel Placement com-
ponent Canvas Element is initialized by filling it with values from Pixel data structure code 2 that
was received upon initial GET HTTP API request to api/Pixels/ endpoint. After that Event listen-
ers are attached to components div element that listens to mouse events such as click, move and
EventSource API that listens to Event-stream coming from the back-end. Each click and mouse
movement over component is handled by invoking its handler.
On the mouse move event over Pixel Placement component, custom Magnifying glass appears
that creates a zoom effect for the area of the mouse pointer is over.
On every mouse click inside the Pixel Placement component a custom click handler is invoked.
The sequence of the mouse click - it gets the mouse position on the canvas relative to users window,
then gets the color value from the Color Picker component and uses Fetch API to send an HTTP
POST to back-end API /Api/P ixels/patchByLocation endpoint with a body containing Pixel
data structure.
Event-stream events originated from back-end are handled by EventSource. EventSource sub-
scribes to event-stream by initializing new EventStream with Event-Stream endpoint
/Api/P ixels/change − stream?_f ormat = event − stream as an argument.
Each EventSource emitted event is handled by custom handlers that parse the data and decides
if and how it needs to update to updated the Canvas element.

5.3.2 Color Picker component

Color Picker Component allows User to pick 24bit RBG color with a mouse and place it as a Pixel
with color onto the Pixel Placement component. The component’s source was borrowed from the
Mozilla developer network and modified to fit the needs of the application. The Color Picker
Component provides User Interface to select a 24bit color as well as exposes API to query the
selected color by other components.

18
5.3.3 User Management component

User Managemet component provides UI forms for the user to log in, register and manage it’s
user’s profile when logged in. User Managemet component facilitates communication with back-
end to call Users API endpoints to send and retrieve users data. The User Management component
implements an authentication protocol with an Access Token. The authentication protocol se-
quence to get users infomation from back-end server is simple - User provides his login username
and password submits the form. If the credentials were correct he receives users ID and Access
Token as a response. Then using using users ID and access token another request is made to re-
trieve User Profile information such as password and other details. The Access Token is saved as
cookie to Users browser to persist. Access Token has time-to-live timestamp that describes how
long the Access Token can be used for in order for user to be authenticated.

19
Conclusions and Recommendations
Developing a real-time pixel placment web application was defined by analysis of what is web
appliaction, its technologies and related work. Requirements section was derived from analysis
section. The analysis showed that there are similar web applcations and substatial interest in
such web applications from markets perspective. The requirements were defined similar to those
projects that were found in related projects. The implementation itself followed 2-Tier system
architecture design style that had Client tier that is composed from user interface components that
lives inside the web browser. The Server tier was implemented to comply with the requirements
from system architecture stand point - REST api, with protocols for authentication, model classes
with its attributes and methods. The changes to canvas were propogated in real-time between
Client(s) and servers.
For future references such web application could be made as widget to include in popular
content managment systems, blogs, or web site builder to make sites more interactive as they are
now.

Acronyms
API Application Programming Interface. 12, 17

CLI Command Line Interface. 16

CSS Cascading Style Sheets. 12

DOM Document Object Model. 12

HTML Hyper Text Markup Language. 12

HTML5 Hyper Text Markup Language 5th revision. 12

HTTP Hyper Text Transfer Protocol. 12, 17

JS JavaScript. 12

JSON JavaScript Object Notation. 16

LB3 LoopBack3. 12, 16, 17

SSE Server-Sent Events. 7, 12, 14

UI User Interface. 3, 12, 18

UML Unified Modeling Language. 12

UX User Experience. 12

WS WebSocket. 7

20
References
[1] Ganesh Iyer. Node.js: Event-driven concurrency for web applications. 01 2013.

[2] Salvatore Loreto and Simon Pietro Romano. Real-time communications in the web: Issues,
achievements, and ongoing standardization efforts. Internet Computing, IEEE, 16:68--73, 09
2012.

[3] Brad Peobody. Server-side i/o performance: Node vs. php vs. java vs. go. https://www.
toptal.com/back-end/server-side-io-performance-node-php-java-go, 2017.

[4] L. Shklar and R. Rosen. Web Application Architecture: Principles, Protocols and Practices.
Wiley, 2003.

[5] Vivek Kumar Singh. Long polling vs websockets vs server-sent events. https://medium.
com/system-design-blog/long-polling-vs-websockets-vs-server-sent-events-c43ba96df7c1,
2019.

[6] Vivek Kumar Singh. Node js versus python 3 fastest programs. https:
//benchmarksgame-team.pages.debian.net/benchmarksgame/fastest/node-python3.html,
2019.

[7] Reddit Staff. How we built r/place. https://redditblog.com/2017/04/13/how-we-built-rplace/,

2017.

[8] Alex Tew. What is the idea? http://web.archive.org/web/20070227072701/http://www.

milliondollarhomepage.com/faq.php/, 2007.

[9] NET application architecture guide. Microsoft, Redmond, Wash, 2009.

[10] Claudius Weinberger. Nosql performance benchmark 2018 – mongodb, post-

gresql, orientdb, neo4j and arangodb. https://www.arangodb.com/2018/02/
nosql-performance-benchmark-2018-mongodb-postgresql-orientdb-neo4j-arangodb/,
2018.

21