Systems, media, and methods for improving responsiveness of spotlight tours in a dynamic viewport environment
Described are methods, systems, and media for improving the responsiveness and efficiency of a spotlight tour in an environment with a dynamic viewport and bandwidth constraints.
1. A computer-implemented method of improving the responsiveness of a spotlight tour in a dynamic viewport environment comprising:
a) maintaining, in a computer storage, configuration data for the spotlight tour, the configuration data comprising a plurality of spotlight tour navigation steps, each navigation step associated with a spotlight tour object, a shape property, and tour controls data;
b) defining, by a computer, a mask element comprising an Scalable Vector Graphics (SVG) rect element with a fill color of white based on a current viewport size;
c) drawing, by the computer, an SVG clip element with a fill color of black for the current navigation step based on the current viewport size, the shape property, and offset coordinates calculated from the spotlight tour object;
d) appending, by the computer, the SVG clip element to the mask element, wherein the SVG clip element is rendered as a transparent region in the mask by alpha blending compositing to create a spotlight effect over the spotlight tour object;
e) rendering, by the computer, tour controls for the navigation step based on the viewport size;
f) positioning, by the computer, the tour controls based on offset coordinates calculated from the tour controls data; and
g) initializing, by the computer, a resize listener for the viewport, wherein the resize listener, upon resize of the viewport, removes and re-draws the mask element and the SVG clip element for the current navigation step by re-executing steps b)-e) without refreshing the viewport environment.
2. The method of claim 1 , wherein the computer storage is a local file.
3. The method of claim 1 , wherein the computer storage is a local database.
4. The method of claim 1 , wherein the computer storage is an external database.
5. The method of claim 1 , wherein the configuration data comprises an array of spotlight tour objects and navigation steps.
6. The method of claim 1 , wherein the viewport is a browser window.
7. The method of claim 1 , wherein the viewport is a mobile native interface.
8. The method of claim 1 , wherein each navigation step is further associated with tour copy and wherein the method further comprises positioning the tour copy based on offset coordinates calculated from the spotlight tour object.
9. The method of claim 1 , wherein the method further comprises instantiating, in a memory of the computer, the mask element comprising the SVG rect element at the full size of the viewport.
10. The method of claim 1 , wherein the method further comprises re-executing steps b)-d) for each of the plurality of spotlight tour navigation steps.
11. A computer-implemented system comprising: a digital processing device comprising: at least one processor, an operating system configured to perform executable instructions, a memory, and a computer program including instructions, residing in the memory, executable by the digital processing device to create a spotlight tour application comprising:
a) configuration data, in an computer storage, for the spotlight tour, the configuration data comprising a plurality of spotlight tour navigation steps, each navigation step associated with a spotlight tour object, a shape property, and tour controls data;
b) a software module defining, by a computer, a mask element comprising an Scalable Vector Graphics (SVG) rect element with a fill color of white based on a current viewport size;
c) a software module drawing an SVG clip element with a fill color of black for the current navigation step based on the current viewport size, the shape property, and offset coordinates calculated from the spotlight tour object;
d) a software module appending the SVG clip element to the mask element, wherein the SVG clip element is rendered as a transparent region in the mask by alpha blending compositing to create a spotlight effect over the spotlight tour object;
e) a software module rendering tour controls for the navigation step based on the viewport size;
f) a software module positioning the tour controls based on offset coordinates calculated from the tour controls data; and
g) a software module initializing a resize listener for the viewport, wherein the resize listener, upon resize of the viewport, removes and re-draws the mask element and the SVG clip element for the current navigation step by re-executing steps b)-e) without refreshing the viewport environment.
12. The system of claim 11 , wherein the computer storage is a local file.
13. The system of claim 11 , wherein the computer storage is a local database.
14. The system of claim 11 , wherein the computer storage is an external database.
15. The system of claim 11 , wherein the configuration data comprises an array of spotlight tour objects and navigation steps.
16. The system of claim 11 , wherein the viewport is a browser window.
17. The system of claim 11 , wherein the viewport is a mobile native interface.
18. The system of claim 11 , wherein each navigation step is further associated with tour copy and wherein the spotlight tour application further comprises a software module positioning the tour copy based on offset coordinates calculated from the spotlight tour object.
19. The system of claim 11 , wherein the system further comprises a software module instantiating, in a memory of the computer, the mask element comprising the SVG rect element at the full size of the viewport.
20. The system of claim 11 , wherein the system further comprises a software module re-executing steps b)-d) for each of the plurality of spotlight tour navigation steps.
21. Non-transitory computer-readable storage media encoded with a computer program including instructions executable by a processor to create a spotlight tour application comprising:
a) configuration data, in an computer storage, for the spotlight tour, the configuration data comprising a plurality of spotlight tour navigation steps, each navigation step associated with a spotlight tour object, a shape property, and tour controls data;
b) a software module defining, by a computer, a mask element comprising an Scalable Vector Graphics (SVG) rect element with a fill color of white based on a current viewport size;
c) a software module drawing an SVG clip element with a fill color of black for the current navigation step based on the current viewport size, the shape property, and offset coordinates calculated from the spotlight tour object;
d) a software module appending the SVG clip element to the mask element, wherein the SVG clip element is rendered as a transparent region in the mask by alpha blending compositing to create a spotlight effect over the spotlight tour object;
e) a software module rendering tour controls for the navigation step based on the viewport size;
f) a software module positioning the tour controls based on offset coordinates calculated from the tour controls data; and
g) a software module initializing a resize listener for the viewport, wherein the resize listener, upon resize of the viewport, removes and re-draws the mask element and the SVG clip element for the current navigation step by re-executing steps b)-e) without refreshing the viewport environment.
22. The media of claim 21 , wherein the computer storage is a local file.
23. The media of claim 21 , wherein the computer storage is a local database.
24. The media of claim 21 , wherein the computer storage is an external database.
25. The media of claim 21 , wherein the configuration data comprises an array of spotlight tour objects and navigation steps.
26. The media of claim 21 , wherein the viewport is a browser window.
27. The media of claim 21 , wherein the viewport is a mobile native interface.
28. The media of claim 21 , wherein each navigation step is further associated with tour copy and wherein the spotlight tour application further comprises a software module positioning the tour copy based on offset coordinates calculated from the spotlight tour object.
29. The media of claim 21 , wherein the media further comprises a software module instantiating, in a memory of the computer, the mask element comprising the SVG rect element at the full size of the viewport.
30. The media of claim 21 , wherein the media further comprises a software module re-executing steps b)-d) for each of the plurality of spotlight tour navigation steps.