Recent Posts

Highchart – Annotation Plugin

Quick annotation plugin for Highcharts Git Link:

Included features :- 1. Text annotation 2. Line marker 3. Area indicator

Depedency :-
1) Jquery
2) Promise polyfill for some browsers(eg. IE9)

How to Use it:-
Step 1 : Include script and css

          //script src="./highchart.annotation.js"
          //link rel="stylesheet" href="./css/highchart.annotation.css"

Step 2 : Have following Highchart Container HTML Structure
            div id="highchartContainerParent"
              div id-"highchartContainer"

Step 3 : Get highchart refernece chartObj
        var chartObj = new Highcharts.Chart({

Step 4 : Use * chartObj * #highchartContainerParent *enableAnnotationbutton to create HighchartAnnotation object.
  new HighchartAnnotation(chartObj,toggleActionbtn",highchartContainerParent)

3DHTML-Web : UX Design Approach

3D Graphics and VR (virtual reality) has always been a fascinating topic in computer science, but in last decade it has grown exponentially more powerful, realistic and at the same time easy to use too. Growing research in these fields both academics and IT companies have provided a very strong base and opportunities for their usage in various unexplored fields and mobility being one of them.
In current trend all web or desktop applications need to have mobility support due to the advantages that mobile devices themselves provides, small, light and mobile. In order to support mobility, applications need to overcome technical and hardware constraint such as limited memory, slow processing power and small display screens. Limited memory and slow processing powers can be resolved by adopting efficient coding practices, but small screens cause’s applications to compromise on user experience by limiting data details or user interaction capabilities.
This paper proposes a new user experience design approach (3DHTML-Web) to bring 2D and 3D content under a single 3D virtual context environment to provide a wide virtual view to the end user, thus allowing applications to provide large detailed data through the same small screens. Complete 3D virtual environment would also allow applications to be future compatible with touchless VR technologies which majorly reply on content to be in 3D context and provide a very engaging, different and seamless user experience.

There are two problem statements addressed:-
1. Limited viewable area due to small screen sizes in mobility devices.
Web applications adaptation of mobility has caused them to change UI (User Interface) design approach and become dynamically adaptive to various screen sizes, but with complex applications came problem of accommodating and representing the large set of information on these small screens.
2. Fragmented user experience with combination of 2D and 3D objects content.
Representing 3D objects in 2D contextual environment has always resulted in reduced usability and fragmented user experience, where user continuously switch between 2D and 3D user interfaces. To provide a seamless and user friendly UX (User Experience), this fragmentation needs to be eliminated while maintain the advantage that 3D objects/model brings to the end-user.

3DHTML-Web is a user experience design approach to represent HTML elements as 3D/2D objects in a pre-defined controlled 3D virtual environment, which can be made accessible over web through web browsers. It transforms the user experience to three dimensional using modern browser based lightweight 3D rendering technologies such as webGL [4] or CSS3 [5], this allows the application to provide a new enhanced user experience through the existing web browsers.
3DHTML-Web design algorithm:
1. Identifying the Story: Identify the scenario where the end user would be benefited if interacting within a 3Dimentional environment. Generally where end user interacts with combined 2D and 3D data are the prominent candidate, whereas even traditional applications whose majorities of user interaction are based on tables, list and graphs can also be benefited by this design.
2. Objects Classification: Classification of various application intractable objects as 2D or 3D. This classification helps in scene and environment preparation.
3. Environment layout: Environments define the boundaries of the user interaction and the look & feel application want the end user to visualize them in.
4. Define the scene: Scene can be considered as a step by step inaction of a story (Business goal/Scenario).
Scene preparation consists of following 2 steps:-
   4.1 Scene steps extraction: Scene steps are the end user way finding to reach the end goal (success or failure).
   4.2 Scene sequencing: This defines the actual sequencing of steps that user need to complete to finish the story. This can be blocking sequence where the user cannot move forward/backward before performing some operation or Non-blocking that allows the user to move back and forward any time as needed.
5. Define User Interaction: How the User would interact with the environment and the objects inside it. Basic user interaction rules to have a consistent experience for the end user.

3DHTML-Web design can be easily implemented using any light weight browser rendering technologies; among those currently widely used in the industry is THREE.js [6], it internally uses WebGL. THREE provides wide variety of utility and rendering options,in context of 3DHTML-Web design the WebGLRenderer and CSS3Rendereroptions available in THREE can be used for rendering 3D and 2D content respectively.

CASE STUDY 1:Project Management System

In general PMS (Project Management System) is responsible to keep track of single or multiple projects for an organization. This application comprises only of 2D content such as Table, forms and Graphs.
General user Interactions:-
• View Project details
• View Project task list
• View Task properties
Specific Authoring Interaction:-
• Edit Project Details
• Edit task status
Using the current trend for UI designs all above listed use cases are represented as individual screens where the end user need to interact (click or swipe) with the system to move to next screens one at a time as shown in Fig.1.

Proposal is to bring the traditional 2D content into a three dimensional virtual contextual environment. This would allow applications to display large amount of relevant in-depth data details easily to the user and also provide a new engaging experience.
Application of 3DHTML-Web Design:-
TABLE I: PMS(Project Management System) 3DHTML-Web Design

Story User wants to view Project Details and overview graphs Task list Task Details  Change task status
Object Classification All views are 2D.
Environment Layout We would be using hierarchical layout, where Task Details view would be child of Project properties view, since a task will always be under the context of any project.

Scene steps extraction:
a. View Project Details
b. Display Project Task List
c. User select a listed task
d. Display Task Details with overview graphs
e. Display Task actions view
f. User update the task status
Scene Sequencing: Same order as listed above.
Here c is a blocking step, i.e. user cannot proceed without completing it.

User Interaction 1. User is provided with 180 degree FOV (Field of vision).
2. User can easily rotate view on y axis to look at the extended views
We can see the improvement in UX by using 3D contextual environment as user can have large viewability even on small display hardware Fig. 2, here user can perform zoom-in and zoom-out to increase or decrease his viewable area. This setup can be combined with VR devices for complete fluidic experience.

CASE STUDY 2: Online Movie Ticket Booking Portal

Currently all online movie ticket booking portals provide a theater seats layout as an image and expect the user to select his seats as shown in Fig. 3.

Here the customer has to guess the screen visibility from seats, in this scenario a 3D view of the theater would help customer in better seats selection as it can allow user to get the human eye view from those seats and also other details such as nearest exit and floor plan. Whereas if not only the seats selection but the complete booking process can be migrated to 3D that would provide a seamless and enhanced UX.
3DHTML-Web can provide this complete 3D virtual environment where customer can get a 3D view of the theater, additional human eye view from seats and also bring the HTML 2D elements into this same 3D contextual environment.

Application of 3DHTML-Web Design:-
TABLE II: Online Booking System: 3DHTML-Web Design

Story Movie tickets booking : View Movie ListMovie Trailer and reviewsSeats selectionHuman eye view from seatsCheckout
Object Classification 2D objects : Movie list ,Movie Trailer player, Movie review list
3D object : Theater layout, Theater seats
Environment Layout Environment needs to accommodate both 2D content such as Movies List and also the 3D theater model which includes the Movie Trailer player and human eye view from seats.

Scene steps extraction:
a. Display movie list
b. Display theater
c. Seats selection
d. Human eye view from the selected seats
e. View the movie trailer in the human eye view
f. Checkout for payment gateway
Scene Sequencing: Same order as listed above.
Herea and c are blocking steps, i.e. user cannot proceed without completing them.

User Interaction 1. Initially while displaying the movies list the user interaction is constraint to rotation on x-axis.
2. Once the seats selection process is initiated the user can free flow inside the theater model.
3. Quick Human Eye view available.
Movies list is displayed to the left side of the user initial orientation. Once movie selection is completed, a 3D representation of the theater is displayed in the middle, where user can select seats as well as see human eye view from them. Use of theater 3D model while seats selection process would provide user satisfaction and confidence, since he would be able to see the simulated view from his selected seats. Since the complete process is migrated to 3D context the complete user experience is smooth as end user does not switch between 2D and 3D context.

3D Movie Theater : Seats selection Process

All online movie booking portals provide a 2D interface for seats selection process, customer is shown a top view of the theatre's seats layout as an image and is expected to imagine/interpret the actual movie theater hall to perform the selection. This is too much for the customer to imagine, In today's computer aided surroundings this experience can definitely be improved. Here is a solution to display the theater 3D model to the end user, where he can easily visualize the actual theater and confidently perform the seats selection, theater's 3D model also provides the capability that allows the customer to see the human eye view from his selected seats thus improving the overall experience.

Example :

Here user can double click on any seats to have the human eye view from the same. Above example is based on THREE.js (refer. link This same concept can also be extended to Concerts, Restaurant and Stadium seats selection where the actual view from the seats is very important.

Q-UI Suite: Smart Form Engine

Smart Form
Smart Form is not a UI component but a prediction Engine that can be attached to all generic Forms UI. Smart Form Prediction Engine is designed to help create Form that reduces manual data entry redundancy. Smart form algorithm stores the user entered values for form fields and uses them to calculate the appropriate values based on frequency and combinations.

• PredictionTree
• PredictionController
• PredictionModel

How to use Smart Form Prediction Engine ;
It is a 4 step process:-
1. Draw form UI with any custom logic and append below html attributes to the fields:-
   a. data-intel: true; If want the prediction engine to remember/predict this fields value.
   b. data-w: number; Weightage/order for the field prediction.
   c. Id: All form fields should have unique Ids.
input type="textbox" class="form-control" data-intel=true data-w="1" id="desc_01">

2. Setup PredictionTree with unique name: This is a onetime process; Plugin creates a prediction holder in the browser local storage that would hold the form specific learnings.

Sample Code:
var predictionTree = new PredictionTree('userCreateFormUID');

3. Attach PredictionTree:learn() event to form submit : This event invoks the plugins learning process which uses the form submitted values to be stored in the prediction tree.

Sample Code:

4. Attach PredictionController:Predict() event to form fields onChange handler: This event returns the predicted value for the field.

Sample Code:

Q-JSON : Reduced JSON schema

Mobility has already become the mainstream interface requirement for applications and the end users; this is forcing all applications/companies to adopt Web services [1] based architecture. But supporting mobility and the growing demand for better user experience comes with technical constraints such as memory space and lower data transfer rate. This paper proposes a new reduced JSON schema (Q-JSON) that improves data representation efficiency and thus improving on both constraints without any need of extra encoding/decoding.
Proposed Q-JSON schema format normalizes the redundant data key information without compromising the actual business relevant information.

Published Paper Link :

Continue reading