Overview

From Fitnect
Jump to: navigation, search

Fitnect comes with a seamlessly integrated Flash based user interface system that is responsible for overlaying menus, messages, graphics elements, branding and provide an interaction layer between the user and the virtual fitting room software. It comes with a full featured, easy to use online WYSIWYG editor what makes possible to customize the look and feel of the whole try on experience. The editor is accessible from our back-end admin pages under the skin menu.

The user interface is built of widgets, and screens.

Start screen.jpg

Resolution

User interface resolution is 1920x1080 (landscape mode) or 1080x1920 (portrait mode). If the display resolution is different, the user interface will be scaled accordingly.

16:9 (or 9:16) resolutions are highly recommended as display resolution, otherwise the UI will be distorted because of non uniformal scaling!

Widgets

All the elements on the user interface are so called "widgets".

All widgets have some common parameters:

  • X position
  • Y position
  • width
  • height
  • background image (png or jpg) or background color with alpha chanel
  • scale
  • border (size / color )
  • corner radius
  • padding
  • rotation


They are draggable, and clickable inside the editor.

Widgets can be hidden by clicking it's hide parameter. Hidden widgets are semitransparent red items in the editor only.

Widget types

  • menus
    - item selection menu
    - categories menu
    - share menu
    - send menu
    - top menu (actions menu)
    - size adjustment menu
    - shopping cart
    - virtual keyboard
  • message boxes
    - instructions
    - messages
    - disclaimer
  • countdown (on photo page)
  • logo
  • photo preview
  • depth indicator
  • pose

Interaction

In editor mode, it is possible to trigger buttons, and interacting with menus. Press CTRL (cursor changes to hand) and move the mouse over the button. It will behave just like in the application.

Screens

Widgets are grouped on screens, and displayed according to user actions.

Main toolbar

Widget parameters are accessible on the left side using the main toolbar. Just click on the widget and the toolbar updates to the selected widges's properties.

Stage

The main menu of the skin is called the "Stage" (it's name comes from Flash's root level container). To access the stage menu just click on any empty grey area. or the stage toolbar button in widget properties on the top.

Save changes

To save changes click on the save button located in the stage toolbar menu under general section.