=Paper=
{{Paper
|id=Vol-2386/paper26
|storemode=property
|title=Development of Mobile Application for Choreographic Productions Creation and Visualization
|pdfUrl=https://ceur-ws.org/Vol-2386/paper26.pdf
|volume=Vol-2386
|authors=Antonii Rzheuskyi,Aleksandr Gozhyj,Andrii Stefanchuk,Oksana Oborska,Liliya Chyrun,Olga Lozynska,Khrystyna Mykich,Taras Basyuk
|dblpUrl=https://dblp.org/rec/conf/momlet/RzheuskyiGSOCLM19
}}
==Development of Mobile Application for Choreographic Productions Creation and Visualization==
https://ceur-ws.org/Vol-2386/paper26.pdf
Development of Mobile Application for Choreographic
Productions Creation and Visualization
Antonii Rzheuskyi[0000-0001-8711-4163]1, Aleksandr Gozhyj[0000-0002-2641-5947]2,
Andrii Stefanchuk3, Oksana Oborska4, Liliya Chyrun[0000-0003-4040-7588]5,
Olga Lozynska[0000-0002-5079-0544]6, Khrystyna Mykich[0000-0002-4324-2080]7,
Taras Basyuk[0000-0003-0813-0785]8
1,5-8Lviv Polytechnic National University, Lviv, Ukraine
2Petro Mohyla Black Sea National University, Nikolaev, Ukraine
3-4IT Step University, Lviv, Ukraine
antonii.v.rzheuskyi@lpnu.ua1, alex.gozhyj@gmail.com2,
andy.stef.2512@gmail.com3, oksana949@gmail.com4,
lchirun21@gmail.com5, Olha.V.Lozynska@lpnu.ua6,
khrystyna.i.mykich@lpnu.ua7, Taras.M.Basyuk@lpnu.ua8
Abstract. The task of the work is to develop a mobile application for creating
and visualizing choreographic productions. The application is implemented for
phones and tablets running under the operating system iOS. During the
performance of the work, the process of presenting choreographic productions
was examined and the problems encountered by choreographers in this case
were identified. Specific cases are considered, which clog and complicate the
work of the choreographer. After analyzing existing analogues programs, their
shortcomings and requirements are formed which will cover all problems of
users. The application was developed using the Swift programming language in
the xCode environment. The role of the database is Realm. The architecture of
the system is designed according to the standards of the MVC template offered
by Apple. The result of the work has been successfully tested and prepared for
release on the market. The developed application allows you to visualize
choreographic drawings, view animated transitions between them and save
information about all participants of the statement. In addition, the application
has a functional that is not found in any of the analogues: music support,
configuration of scene sizes, color change of dancers and pattern patterns.
Convenience of the application and additional features make the application
relevant for both choreographers and performers.
Keywords: Information System, Mobile Application, Choreographic
productions.
1 Introduction
Today, mobile devices are very popular and do not stop at getting popular. It will
soon be difficult to imagine a person without a smart device. Such a crazy popularity
is due to the fact that a person in the modern world should always be accessible and in
touch. Twenty years ago, the mobile phone was used only as a communication medi-
um and had a slightly wider functionality than a simple phone. Subsequently, there
was a spare book and some tools for exchanging information. Now, with the help of a
medium-priced mobile phone, you can use the internet, make high-quality photos,
shoot videos, play games that can have better graphics than some computers [1-5].
Due to its compactness and wide-ranging functionality, the mobile device can easily
replace a computer or laptop for many people in everyday life [6-9].
Together with the growing popularity of mobile gadgets, it is gaining momentum
and developing mobile applications that can be applied in completely different
spheres of human activity: business, education, entertainment, finance, food, health,
medicine, music, navigation, news, sports, travel, and communication [10-16]. Most
applications are designed to simplify certain processes in the listed areas of activity
[17-21]. It does not matter whether it is a daily reminder to drink in the morning wa-
ter, or a taxi call, by pressing only one button [22-29]. A mobile application can be a
convenient substitute for everyday affairs, such as entering a repository, and used for
complex processes such as accounting for finances in the bank [30-37].
The aim of the work is to develop an application that will facilitate the work of
choreographers, who often deal with the production of dance numbers, and reduce the
time it takes to create a presentation of productions. The application is intended to
solve the problem of the inconvenience of drawing dance statement on paper. With a
large number of participants in the room, the drawing process becomes complicated
and inconvenient. When changes occur in the production of a choreographer, it is
necessary to repaint and correct many drawings. Changing members of the number
also causes additional problems.
Using a mobile application, the user can easily visualize their staging regardless of
the number of participants and the size of the scene [38-41]. You will also be able to
view all the transitions and tie the particular members of the number to their names.
The application will find its use among choreographers in dance studios and
schools. It will also be useful to dancers and roommates in terms of perception of the
entire production through a visual presentation. Also, the application will help you to
view and remember your position in the room.
2 The Process of Creation of Choreaographic Responses and
the Use of Mobile Applications for Their Representation
The rapid development of mobile devices in recent years has begun a new trend in the
field of software development. And now the global mobile application market is
growing at a fast pace and is one of the most popular. For example, in 2013, the In-
stagram application was redeemed by Facebook for almost $ 1 billion. After that,
Facebook bought WhatsApp, but already for $ 19 billion. [6] Information on the
number of active users who use these products every month on the market for more
than four years is shown in Fig. 1. You can notice that for 4 years of WhatsApp, its
monthly audience reaches the figure of 419 million users [7].
Fig. 1.Number of user accounts active every month
For many people, a mobile phone or tablet is completely capable of replacing a laptop
or a stationary computer at the expense of its power, mobility and a wide range of
functionalities [8-14]. Accordingly, users need a wide range of different software -
from office applications and applications to solve everyday business tasks to enter-
taining applications, games, and more. New programs are an essential element in the
development of commercial, industrial and other spheres of human activity [15-21].
Most companies, besides creating a web page for product presentation or service
delivery, also create a mobile application that sometimes has a wider functionality (for
example, the Instagram web page gives you the opportunity to just comment and view
other people's posts, while the mobile application allows posting their entries to the
social network) or a mobile version of a site that is no different from the original web
page, only optimized for devices with smaller screen sizes [6-9].
In general, mobile applications can be divided into three types [22-28]:
1. Web Applications, Sites. The modern mobile device provides a similar functionali-
ty when working on the Internet, like a regular computer or laptop, thanks to the
support of the HTML 5 technology. In addition, it is one of the best options for fast
start with minimal cost and good functionality. Mobile sites are a universal solu-
tion, since browsers are available for each operating system and adhere to the same
unified standards. The page layout may vary in different browsers, depending on
the kernel on which they are built, but these are minor points that are detected and
corrected during the development process.
2. Native software. The development is conducted in "native" programming lan-
guages, which allows you to take advantage of all the features and benefits of the
OS and provides full access to resources that are open to the programmer. That is
why this type of software is the most functional and shows the greatest productivi-
ty. This kind of software depends on the platform of the platform directly.
3. Hybrid software - guarantees access to all functional mobile devices. It is a combi-
nation of native software with third-party markup languages. Development is done
using various frameworks, CSS, HTML, etc. This type of application is a good so-
lution for those who want to use modern web technologies along with the benefits
of native software [8].
Choreography is the art of dancing as a sequence of steps, motions, figures to create
the best stage effect. The art of creating stage dance is based on the manipulation of
abstract elements of the movements of the human body: space, form, time, energy
within the context of an emotional context in order to express a unique creative voice.
The language of choreography moves is the language of ballet dance technique, mod-
ern or jazz dance, hip hop, folk dance, ritual dance, or routine everyday movements.
Choreography is trying to achieve in a dance composition of organic integrity, rhyth-
mic and nerimetric articulation, themes and variations, repetition and improvisation.
The term choreography is also used to articulate performances in certain sports: artis-
tic and sports gymnastics, figure skating, synchronized swimming [9]. In recent years,
interest in contemporary dance has grown dramatically in Ukraine and in general
around the world - the number of dance centers and studios, amateur and professional
groups has increased. More and more people want to express themselves in dance.
One can distinguish the following cases where the concept of choreographic statement
applies [29-37]:
Production of choreography for clips and commercials;
Preparation of the artist for filming the music video;
massive flash mobs;
performance of the show performance of the dance team / group;
statement of support groups;
Production of choreographic accompaniment for the performance of the artist. [10]
A good dance setting is an easy task and requires experience, musicality and certain
skills, including improvisation, artistic thinking and the ability to express your idea in
dance. First, the director determines the idea of his room, inspired by some source.
Then he selects the musical accompaniment, which will best emphasize the chosen
idea. In order to make the dance the most exciting, voluminous and use the entire
stage space, it is necessary to correctly arrange the drawings, which also requires
imagination, experience and strongly depends on the number of people in the group.
Well-chosen pictures can perfectly complement music, choreographic movements and
much better to convey the idea of the number. The spectacular and distinctive change
in the arrangement of dancers is one of the main techniques that can keep the viewer
in tension and focus on the required areas of the scene.
3 Development of Mobile Application for Creation and
Visualization of the Choreographic Statements
As the main architectural template we decided to use the MVC template (model - a
look - the controller) as recommend to Apple this approach when developing ap-
pliques and it is not heavy in realization [11] especially, at observance of the basic
rules of MVC types it is possible repeatedly perevikoristovuvat in many places.
MVC is one of Cocoa main units of a framework and undoubtedly is most often
used by developers in general. It divides objects depending on their role in the appli-
cation and the zakltka є to divide the code which also depends on roles [32-41]:
the model is an object which contains certain data the appendix describes business
logic and defines how they can be operated. For an example, in a rozroblyuvany
zastosun the classes Choreography, Scene and others are models.
a look is an object which is responsible for visual representation of data of model
and elements with which the user can interact. Usually, all this objects, which
nasl_duyutsya from a class to an uiviye.
the controller is synchronizes all work. It has access to data from model and
submits them by means of types, listens to events, changes and directs to data when
there is a need.
Normal realization of this template design means that each object belongs to one of
these groups. Communication between a look and model by means of the controller
can be presented by the drawing.
Fig. 2. Communication in the MVC template.
The model notifies the controller of changes in its data, and the controller responds
with updates in the form. The view can then notify the controller of the actions being
taken by the user and either update or update the model as needed, or obtain the data
necessary for the user.
All this separation is precisely for the delimitation of the code and the possibility of
its reuse. Ideally, the look must be completely isolated from the model. If it does not
depend on the particular implementation of the model, it can be easily reused with
another model for the presentation of completely different data. MVC on iOS.
To begin with, make sure that each class in the project is either a controller, or a
look, or a model. You should not combine the responsibility of two different roles
into one class. Next, you need to create three groups of projects to group the code,
each for the appropriate category.
One of the benefits of an MVC template is the ability to design parts project inde-
pendently of each other, and then easily combine them. The diploma project will be
divided into several components:
lists that will be responsible for displaying and filtering choreographies;
a scene that will contain all the logic of displaying dancers, their transitions and
manipulations;
audio is a separate component for separating all work with audio files.
The model notifies the controller of changes in its data, and the controller responds
with updates in the form. The view can then notify the controller of the actions being
taken by the user and either update or update the model as needed, or obtain the data
necessary for the user.
All this separation is precisely for the delimitation of the code and the possibility of
its reuse. Ideally, the look must be completely isolated from the model. If it does not
depend on the particular implementation of the model, it can be easily reused with
another model for the presentation of completely different data. MVC on iOS.
To begin with, make sure that each class in the project is either a controller, or a
look, or a model. You should not combine the responsibility of two different roles
into one class. Next, you need to create three groups of projects to group the code,
each for the appropriate category.
One of the benefits of an MVC template is the ability to design parts project inde-
pendently of each other, and then easily combine them. The diploma project will be
divided into several components:
lists that will be responsible for displaying and filtering choreographies;
a scene that will contain all the logic of displaying dancers, their transitions and
manipulations;
audio is a separate component for separating all work with audio files.
Using Design Templates. Design patterns are template approaches to solving certain
common problems that often arise when designing architectural solutions. The ad-
vantage of patterns is that they provide a common understanding of the problem and
its solution for developers. This means that developers can write in completely differ-
ent languages, but understand how to solve a problem with a certain template. Also,
patterns can be built the project is more structured and clear. Therefore, when design-
ing a project structure, I decided to use the following design patterns:
Observer. In the design pattern of Observer (Observer), one object notifies its sub-
scribers of changes in their status. Engaged objects should not know about each other
- thus providing a distinct design. This template is most often used to alert certain
objects about changing properties.
When using the MVC pattern, you must allow the model to communicate with the
look, but without direct links between them. And here the template is useful.
Notifications is often confused with push and local alerts. Notifications are based
on the model "Subscribe-and-publish", which allows an object (publisher) to send
alerts to its subscribers / listeners. Publisher should never know any information about
their subscribers.
KVO is an object may ask to be notified of a change either of its own or of any
other property [12].
For the project, this template will be used to observe changes to objects in the da-
tabase and update the interface according to new values.
Single (singleton). The Singleton Design Pattern (single) guarantees that the class
will only exist in one instance from a common point of access to it. Usually "lazy
boot" is used to create a single one when it was created for the first time. Apple uses
this template very often. For example: NSUserDe-faults.standardUserDefaults (),
NSFileManager.defaultManager(),UIScreen.mainScreen(), UIApplica-
tion.sharedApplication (), all return the object to the same. There are cases in which it
makes sense to have exactly one instance of a class. For example, there is only one
instance of the application and one main screen for the device, so you only need one
for each of them; the class that is responsible for configuring the application – it's
easier to implement stream-safe access to one global resource (such as a configuration
file) than having many classes that can edit it at a time. Within the project, it makes
sense to create only one instance of the class to work with the database.
Decorator. Designer template "decorator" allows you to dynamically add func-
tionality to an object without changing it base code. It is an alternative to creating
subclasses that change class behavior by wrapping it with another object. Swift has
two very common implementations of this template: Extensions and Delegation.
Expansion is an extremely powerful mechanism that allows you to add a new func-
tionality to already existing classes, listed types, structures without the need to create
subclasses. A huge advantage is that you can "expand" the code to which the pro-
grammer has no access and extend its operation without knowledge of the implemen-
tation. For example, new methods that were added during compilation can be per-
formed as standard methods of the extended class. This is slightly different from the
classical definition of the decorator, because the extension does not contain an in-
stance of the class whose function it extends. Classes, of course, can redefine the
methods of their father, but the expansion does not allow it. The methods and proper-
ties of the extension may not have the same name as the methods and properties of the
original class.
Delegation is a mechanism in which one object acts on behalf of another object.
For example, when we use UITableView, one of the methods we are forced to im-
plement is tableView (_: numberOfRowsInSection :).
It is impossible to predict for UITableView how many rows each section will have,
as it depends on the application. Thus, the task of calculating the number of rows in
each section is passed to the delegate UITableViewDelegate, which allows the class
to be independent of the type of data it displays. In Fig. 3. an explanation of the ac-
tions that occur after the creation of the new UITableView is shown.
UITable View displays the table. However, the class needs some information that it
does not have. Then he addresses the delegates, sends them a message asking for
additional information. In Objective-C.
The implementation of this template allows the class to determine obligatory and
optional methods through protocols. This is a very important design template and
Apple uses it in most UIKit classes: UITableView, UITextView, UITextField,
UIPickerView, UICollectionView, etc.
Fig. 3. Messaging between UITable View and the delegate controller
Keeper (Memento). The "Memento" design template is used when there is a need to
save and restore something. This can be to save the state of the game or save the set-
tings in the program. Within the framework of the project, it will be possible to cancel
the actions made by the user. To do this, each user action will be recorded on the
event stack and, if necessary, canceled, the last action will be thrown out of the stack
and the opposite action is applied.
Designing a database. As a result of the work carried out and described in the
previous section, a mobile Realm database was selected. This is a non-relational data-
base that allows you to work hard with objects stored on a disk, as with the usual
objects in the program. Given the specifics of the software being developed, the data-
base structure will not be complicated and will not contain a large number of links. To
meet the needs of the user, only the combination of basic properties will be sufficient
to preserve the choreographic drawings that the user creates. The main things will be
choreography, a template, a dancer, a picture, a scene configuration, a position and a
musical accompaniment. Choreography - stores information about the setting, all the
drawings, from which it is composed, their order and transitions between them, the
dancers, the musical track and the configuration of the scene. Contains the following
fields:
• name - the name of the staging;
•date of creation;
• date when recent changes were made;
• scene configuration;
• Id - a unique identifier for the distribution of choreography in distribution;
• dancers - a list of all dancers participating in the production;
• drawings - a list of all created drawings.
Template - saves information about one specific drawing without being tied to specif-
ic dancers or music. Contains the following fields:
template name;
Positions is a list of positions forming a picture.
Dancer - stores information about the dancer in the production. Contains the follow-
ing fields:
name is identifies the dancer; may be empty, which is not essential for the
choreographer;
color is color to display the dancer on the stage.
Scene Correction - saves information about scene sizes. Contains the following fields:
scene width (number of vertical lines);
length of the scene (number of horizontal lines);
the size of the field on the sides of the stage;
a flag to display or hide space outside the scene.
All these sizes are given in relative units, which will be displayed as one square of the
scene. The scene itself is essentially a set of lines that form a rectangle and allow you
to place dancers at the intersection of these lines.
Drawing - saves information about the arrangement of dancers on the stage. Contains
the following fields:
positions is a list of all positions where dancers are placed;
the duration of the transition to the next picture is given in seconds;
name part of the setting, which includes the picture.
Position -s stores information about placing a specific dance on the stage. Contains
the following fields:
x and y are the relative coordinates of the placement.
musical accompaniment - saves the information needed to synchronize pictures
with music. Contains the following fields:
a list of time frames that indicate the beginning and end of a particular picture or
transition;
the path to which the audio file will be stored.
All of the above entities will be presented as descendants of the base Object class,
which is essential when working with Realm and provides a link between the objects
in the program and the stored data on the disk. Object allows you to define primary
keys, indexed properties, ignored properties. At the same time, all these classes form
the structure of the database - each class is a separate table with the corresponding
name and fields. The schematic of the database is shown in the figure.
The main users of the application will be choreographers of various dance schools
and studios, choreographers, who create stage numbers for singers and support group
trainers. Each of these users will create posts from a certain number of participants, so
it's worthwhile to allocate two groups of users:
a choreographer whose task is to visualize his production;
stage participant, for which you need to know all positions during production.
Fig. 4. Database schema
Choreographer, having created his statement, will be able to share it with his students
or participants of the issue. This will be done through a deep link that the choreogra-
pher will generate and send to others. The link will contain all information about the
created choreography in the binary representation. By going through this link, the user
will be copied this data and he will be able to view the setting on his device.
The user enters the application, goes to the choreography list and chooses what he
wants to do: edit the already created choreography or create a new one. When creating
a new choreography, you must specify the name of the setting and configure the size
of the scene. After that the user will be presented with a choreography editing window
with the first empty picture. On this screen, the user will be able to perform the fol-
lowing operations:
Add new dancers to the scene in the form of points by touching the scene where
the dancer should stand;
change the position of the added dancers by dragging them to a new position;
set or change the color and name of the dancers;
set one of the modes of drawing to the lines of the scene (to the intersection of
lines or to the middle of a particular line);
create a new drawing, which will first be a copy of the last drawing, and then the
transition between the drawings will be set in the way of dragging dancers into
their new positions;
switch between the pictures, which will be accompanied by an animated transition
of all dancers from their old positions to new ones;
view the entire choreography with a certain speed.
open the choreographic detail screen.
On the details screen, we can perform the following operations:
delete a specific drawing;
insert an intermediate drawing;
Change the configuration of the scene;
Generation of the link for the distribution of the created choreography.
All functionalities described above will be accessible to each user. To monetize appli-
cations, certain restrictions will be introduced that can be removed by purchasing a
premium version of the application. Along with removing restrictions, the user will
have an additional functionality available. The limitation will be that the average user
will be able to keep only 5 choreographies saved. After reaching the limit, the user
will need to remove one of the saved choreographies or purchase a premium version.
Also, premium users will be able to add music to choreography.
To work, the user interacts with the system, which in turn generates a query to the
database. After receiving the query results, the database sends a response to the sys-
tem that formats the data and displays it to the user.
4 Prototypes of Interfaces
Based on a certain functionality We have created a basic schema of application
screens and transitions between them. So, the main screens are:
Main menu
Choreography list
List of templates
New choreography / template creation screen
Scene configuration screen
Choreography editing screen
Choreography screen
Screen with details of choreography
The next step was to plan the application navigator and cross-screen navigation. The
home screen will contain buttons to go to the list of all choreographies or templates.
These lists will have the opportunity to go to the new choreography / template screen
or go directly to the choreography / template edit screen. On the screen editing will be
available all the functionality that is required for visualization of the productions, in
particular the transition to the viewing mode. It will also be possible to go to the
screen with details for quick editing and access to specific drawings. To create the
prototype, an online service for inVision prototyping was used. Prototypes of the
above screens are shown in (Fig 5–10).
Fig. 5. Main menu. Fig. 6. List of choreographies.
Fig. 7. List of templates Fig. 8. Configuration of the scene
Fig. 9. View of scene
Fig. 10. Editing dancers.
5 Program Realization of Mobile Applications for Creation And
Visualization of Horeographic Responses
When designing applications, many classes have been created that can be broken into
several groups: data structures, work with a local database, auxiliary general classes,
constants and description of application styles, classes for displaying graphical infor-
mation, class controllers, classes for the operation of the scene. Each class of the
model described in the design section is a descendant of the base class of the Realm-
Object database. Object allows you to work with data recorded on a disk, as with
simple objects. For unified operation with all objects of the database a general man-
ager was created - the RealmService class. This is a wrapper, through which there is
an appeal to the database. If you need to switch to another database, you will simply
need to redefine the logic of all methods in this class.
Template methods allow us to apply basic operations to any type that are descendants
of the Object. These methods include the following:
add () - create / update row / rows in a table;
update () - updates the specific table row properties;
delete () - delete the line;
removeAll () - delete the table;
write () - write any changes to the table, changing the properties of the objects.
Another responsibility of this class is the initial configuration of the database and the
migration between different versions of the database schema.
The specificity of the Realm database is such that it is enough to only get once the
objects of a certain type that will be stored in the Results structure