How We Developed an Interactive Audience Web Scheme
We recently wrote about scrolling diagrams using d3.js, and now we want to share another case. We tell how using Canvas you can develop an interactive diagram of the hall, which is easy to integrate into any web application.
In one of the projects, we developed an interactive scheme of the auditorium with a convenient selection of tickets. The project is based on a fairly standard technology stack: HTML, CSS, JS, React library.
In the application on the diagram of the auditorium, it is necessary to display the location of the stage, seats, ticket prices. So the user can quickly figure out which tickets are right for him.
We had to choose the best technology for the project, taking into account the following needs:
- Smooth zoom and scrolling are necessary for displaying halls with a large number of seats.
- A mini-map for navigating the room at maximum zoom.
- Grouping of seats according to the cost of tickets, with the allocation of price groups using color.
- Tools for displaying information about a place or sector when you hover over.
- The ability to change the names of sectors, places and rows during various events in the same hall.
- Cross-browser and mobile device support.
- Flexible configurability, which allows you to set the necessary parameters for a particular event, for example, settings for the increase and the number of zoom levels.
- A convenient and easy way to embed a scheme in any web application.
Next, we will talk about the stages of the project, about the technical difficulties and how we solved them.
For application development, we chose the React library to increase usability and development speed thanks to modularity, Virtual DOM and JSX. For the assembly we took Webpack, which allows you to use many different plugins to simplify the development process and support a large number of browsers.
To solve the rendering problem, we chose from two technologies:
Svg allows you to create elements of any shape and interact with them, however, according to customer estimates, with the number of nodes more than 40,000, productivity drops significantly.
Canvas It has high performance, but in it interaction with elements of complex shape requires the implementation of rather labor-intensive algorithms. We first tried to solve this problem using the library konva.jsbut on large circuit designs, performance was poor.
Therefore, we chose an alternative option – a combination of SVG and Canvas. The input data for our combined solution are a quota, a list of places, an SVG substrate and a configuration object.
This is a list of places that are not sold and available to the user. The quota contains business data, such as value.
- List of places
JSON file for storing an array of places with their coordinates.
- SVG substrate
An SVG document for storing elements that are responsible for interacting with sectors and various decorative elements.
- Configuration object
The js file for storing the configuration object (we will talk more about this later in the section “Flexible configurability”).
After loading this data, the SVG document is parsed with separation into two separate documents: the first contains elements intended for interaction with sectors, and the second contains decorative elements. The first document is rendered on top of Canvas, and the second is in Canvas.
Rendering the list of places is also carried out on Canvas, taking into account their availability in the quota. Seat availability is displayed based on configuration properties.
After that we get a similar scheme:
Smooth zoom and scrolling
For smooth animation of the zoom on Canvas, it is necessary to carry out many redraws, which is unacceptable with a large number of places, since the application will begin to “slow down”. We found the following solution: animation either reduces or enlarges the canvas. At the same time, the image quality is reduced, since Canvas is a bitmap image, but the animation is fast and the person does not have time to see the distortions. From the user’s point of view, a smooth zoom occurs.
1) Before applying zoom.
2) After applying zoom to the Canvas. The image is a little blurry, but the user almost does not notice it.
3) After redrawing the places (the image is clear again).
When scrolling, Canvas moves with the cursor. Consider what happens when the user releases the left mouse button (cursor) or uses swipe in a smartphone. At this point, the Canvas is re-rendered taking into account the offset and returns to its original position. Since this happens very quickly for the user, it seems to him that the missing elements are simply rendered.
1) Before scrolling.
2) The user scrolled to the right, but did not release the cursor (some places on the left side of the diagram are missing).
3) The user released the cursor (missing places were displayed).
Thus, we turned to phased rendering and implemented smooth animation.
Next, we talk about other tasks that were implemented when creating the application.
A mini-map is needed to navigate the hall layout. The map shows the currently visible area, which helps to understand in which part of the overall scheme the user is currently located. When you click on the minimap, the hall scheme immediately moves to a new position. The application implements the connection between the hall scheme and the mini-map. If the situation has changed in one part, then the changes are instantly applied to the other part.
Grouping places by price, with highlighting groups using color
If the event provides for several types of tickets with different prices, then for the convenience of users, we automatically group seats by price category (based on quotas).
We highlight each group with a pre-selected color. For the convenience of the user, there is a top menu that helps you determine the prices in the group, as well as focus on suitable groups.
In the example below, the user focuses on tickets that cost more than 7,000 rubles.
Tooltips are needed in order to display the user information about the selected sector or place when you hover or click. To do this, we determine all possible options for the location of places and, accordingly, various formats of tooltips.
For example, below is the tooltip of the place, which is located in the corner of the diagram:
Our application provides two types of tooltips: for sectors and for places. Using the configuration file and HTML layouts, you can customize their contents (for example, sector names, tooltip styling).
In the entertainment industry, there are certain difficulties with ticket sales related to naming seats in auditoriums. It happens that in one room different events are periodically held, naming the sectors, ranks and places in different ways. At the same time, due to different names, the elements may not be displayed on the diagram.
In order not to create a new scheme for each event, we used the mapping of places. This is a JS method that takes the names of sectors, rows and places, and then forms the names corresponding to the quota of a specific event. We have implemented special methods in the JS configuration file for sectors, rows and places in order to be able to rename them. As a result, in the appendix all designations can be changed.
To reach the largest number of users, you need to support both new and old versions of browsers, including Internet Explorer, and mobile devices. Now the application supports all the gestures familiar to users, including multi-touch. To do this, the library is connected in the application hammer.js.
We conducted extensive testing on a large number of devices, as well as in the application Browserstack to emulate other types of devices, and made sure that the product works correctly.
Convenience of embedding
In this article, we described a way to create an interactive web layout of a room on Canvas. With the help of such an application, the user can quickly and easily navigate in the hall scheme and choose places (tickets) that suit him.
Thanks for your attention! We hope you find this article useful.