Device agnostic adaptable user interface for cloud muvis
Naghdi, Sharareh Jr (2015)
2015
Master's Degree Programme in Electrical Engineering
Tieto- ja sähkötekniikan tiedekunta - Faculty of Computing and Electrical Engineering
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2015-01-14
Julkaisun pysyvä osoite on
http://urn.fi/URN:NBN:fi:tty-201501301052
http://urn.fi/URN:NBN:fi:tty-201501301052
Tiivistelmä
In recent years, adaptable user interfaces have been broadly considered as the main interactive parts of a software system because of variety of smart devices. New smart devices with different screen sizes are produced every month. For this reason, adaptability of UIs has become one of the big challenges for developers.
In this thesis, an adaptable web based UI is developed for a Cloud Multimedia Video Indexing and Retrieval System (C-MUVIS). Since C-MUVIS is a content-based image retrieval system and will act as a web service, a wide range of screen sizes should be considered when designing the UI.
The adaptable UI has two applications, DbsEditor and MBrowser. In DbsEditor mode, the users can modify the attributes of a database, for instance, to create a new database, add media to a database, delete existing media from the database, or add or remove visual features. The MBrowser Mode is used for browsing and displaying the media in the database. Also, the users can query for a specific media item. The query operation returns the items most relevant media to the queried media.
In order to make the UI adaptable, we introduced Adaptive Web Design (AWD) and Responsive Web Design (RWD) methods. After comparing the advantages and disadvantages of both approaches, RWD was chosen. RWD is executable with Fluid Grid and Media Queries techniques.
As a result, we show that decreasing the screen resolution from the main width (1280px) and height (1024px) to the breakpoints resolution (width 768px and height 1024px) modified the layout of the UI smoothly. But, the layout of the UI will be changed completely for the breakpoint with different scales, colors and images size.
In this thesis, an adaptable web based UI is developed for a Cloud Multimedia Video Indexing and Retrieval System (C-MUVIS). Since C-MUVIS is a content-based image retrieval system and will act as a web service, a wide range of screen sizes should be considered when designing the UI.
The adaptable UI has two applications, DbsEditor and MBrowser. In DbsEditor mode, the users can modify the attributes of a database, for instance, to create a new database, add media to a database, delete existing media from the database, or add or remove visual features. The MBrowser Mode is used for browsing and displaying the media in the database. Also, the users can query for a specific media item. The query operation returns the items most relevant media to the queried media.
In order to make the UI adaptable, we introduced Adaptive Web Design (AWD) and Responsive Web Design (RWD) methods. After comparing the advantages and disadvantages of both approaches, RWD was chosen. RWD is executable with Fluid Grid and Media Queries techniques.
As a result, we show that decreasing the screen resolution from the main width (1280px) and height (1024px) to the breakpoints resolution (width 768px and height 1024px) modified the layout of the UI smoothly. But, the layout of the UI will be changed completely for the breakpoint with different scales, colors and images size.