Home    >    Case Studies    >    HTML5 Based Online Lens Shopping System

Case Study: HTML5 Based Online Lens Shopping System

TECHNOLOGY: HTML5, MVC

In order to protect the private information of our client and for the security of the business affair, not all features are included in this article.

The application was first built with Silverlight, but since gradually the application cannot meet all requirements from the client and Microsoft declared that they would discontinue support for Silverlight, our client decided to migrate this application to MVC with the new features of HTML5. With this more competitive and advanced system, the client aimed to win more customers from his niche market.

The Home Page

The Landing Page

Requirements

Technologies: Flash & JavaScript

  1. Progress the lens order (include the order creation, edit, save and check out etc.)
  2. Order confirmation and reporting generating
  3. Bulk order functionally
  4. Order dashboard overview
  5. Online try-on and preview
  6. Order status query
  7. The administrator management system
  8. Code obfuscate and code security
  9. Globalize market oriented and the localized capability
  10. Compatibility for iOS platform

Our solution

  1. Making full use of the mature MVC pattern to construct the main web site. Use the Entity framework to manage the data access.

  2. Use the Telerik reporting plugin to generate all the reporting and send confirmation emails to let user confirm the orders which include the order number and corresponding QR-Code as well. By scanning the QR-Code, users can to view the order status.
  3. As the most important part, the front end of the application contains most of the business logic and cool visualize effects Here we manipulate the image pixel by pixel to get varies effects such as pinch effect, the fish-eye effect, the image distortion and blur effect, etc. We also implemented the lens dragging effect and the lens tint effect on video. All these advanced requirements justify the choice of HTML 5. The canvas tag of HTML 5 can handle most of the image effects while the video part, we take each frame form it as an image and finally convert it to an image manipulating work. Thus we get the video effect then.

Required technologies

  • Platform: .Net 4
  • Data access: Entity framework 4
  • Database : SQL Server 2012 Express
  • Server-side language : C#
  • Design pattern: MVC
  • Front side: HTML5 + CSS 3, jQuery 1.9, jQuery UI 1.10
  • Third-part controls: SmartWizard SmartWizard 3£¬Kendo UI 2013 Q1£¬Telerik Reporting£¬Luxand FaceSDK(face recognition)£¬MaxMind ¨C GeoIP (IP and address mapping)£¬.Net QRcode(generate the QR-code)

Why HTML 5

The reason to immigrate the original application from Silverlight to MVC+HTML5 is to achieve splendid effects and improve the user experience. Some of the goals are hard to achieve in the old days however with HTML 5 we can get it done more easily. What¡¯s the most important is that as a new web standard, the HTML5 will be supported on most of the modern devices and platforms. So we don't have to worry about the platform compatibility by using HTML5 while other techs like Adobe flash, Microsoft¡¯s Silverlight are not that widely accepted by varies of platforms.

The following are several reasons that why HTML 5 is the best choice:

  • HTML5 is the new stand of web and will be the trend of the next generation of all web applications. There are many new concept and new techs are being introduced into HTML 5. The early you use it in your application the most possibility you will gain to win among other similar applications. In addition, by using HMTL5, we can achieve many cool splendid effects to improve the user experience.
  • The better compatibility for all platforms. Thought right now HTMl5 is not well supported by all web browsers, it¡¯s good to see each browser vender is moving forward the step and speed up to hung HTML5. Flash are not supported in iOS platform while the main terminal device of our application is the iPad, so many functions originally implemented with Flash are need to replace by HTML5.
  • The newest HTML5 canvas tag and video tag meet the requirements of our client. For instance, to make the construct effect of with lens and without lens, we can use the HMTL5 canvas tag to implement it. In order to give a better result, we also make use of the video tag to implement the same effect on videos.

Features

Imitate the blur effect of a lens

With this application, users can preview the lens effect by adjusting the attributes of a lens. The application will give the imitated result into a canvas with several images that shows different environment.

Users can control the parameters by click on the UI to preview the effect. All depends on your choice.

The Lens Design Page

What¡¯s worth to mention is that while switch to video mode, it allows users to preview the same affects they saw on a static image on the real-time video.

The Lens Design in Video Mode

Lens tint effect

Except the blur effect of a lens in the lens design part of this application, you can also experience the awesome lens tint effect in the lens tint section.

Here the colored circle lenses are dynamically created from the data form the database.

The Lens Tint Page

Try on a lens

What¡¯s more, in the try on page, you can select a frame you like to try it on and see the picture wearing a glass neither of a model pre-pared for you or your own photo taking from this page!

The Try On Page

Here we display all available frames in stock and users can pick any of them just with one click to see the result.

Summary

With the efforts of the team member and by using the new features of HMTL5, we finally made it. We published a stable and rich effects equipped modernized lens shopping system. Also the process co-operating with our client is happy.

As for the tech, we solved many advanced tough problems in the project and we found many optimized solutions to meet the requirements of our client. Finally we reach a point where made each other success!