Systems and methods of providing enhanced product visualization on a graphical display
Systems and methods of providing enhanced product visualization on a graphical display include generating a visual frame having a first set of frame dimensions and comprising an inner border and an outer border; receiving a selection of a graphical object to be displayed at least within the outer border of the visual frame on the graphical display; identifying a set of object dimensions of the graphical object; determining an appropriate proportion between the set of frame dimensions and the set of object dimensions such that the graphical object is displayable at least within the outer border of the visual frame on the graphical display; manipulating the set of frame dimensions and/or the set of object dimensions such that the graphical object is displayable within the outer border of the visual frame; and displaying the graphical object at least within the outer border of the visual frame.
1. A computer-implemented method for providing a visual representation of a graphical object in a web page, the method comprising:
receiving, by one or more processors, input corresponding to a selection of the graphical object to be displayed in a container of the web page;
calculating a set of container dimensions for the container, wherein the container has a constant size and wherein the container is a visual frame container representing a three-dimensional container;
rendering a set of optimized dimensions for a subarea element of the container, wherein the set of optimized dimensions maximize the subarea element's size within the container;
determining a set of object dimensions for the graphical object;
rendering the graphical object within the subarea element;
automatically generating a semi-transparent layer over the graphical object within the subarea element using the set of object dimensions, wherein the semi-transparent layer modifies an appearance of the graphical object to conform with an appearance of the container; and
automatically causing the container, the graphical object, and the semi-transparent layer to be displayed in the web page.
2. The computer-implemented method of claim 1 , wherein the subarea element is a visual frame.
3. The computer-implemented method of claim 1 , wherein the container is a HyperText Markup Language (HTML) Content Division (div) element.
4. The computer-implemented method of claim 1 , wherein the subarea element is a HyperText Markup Language (HTML) Image Embed (img) element.
5. The computer-implemented method of claim 1 , wherein rendering the subarea element includes stretching the subarea element to fit the container.
6. The computer-implemented method of claim 1 , wherein rendering the subarea element includes adding some padding to the subarea element to fit the container.
7. The computer-implemented method of claim 1 , wherein the semi-transparent layer matches a drop shadow effect to the appearance of the graphical object to provide a three-dimensional effect to match a three-dimensional appearance of the container.
8. The computer-implemented method of claim 1 , wherein the semi-transparent layer darkens the appearance of the graphical object to match a shading of the appearance of the graphical object to a shading of the container.
9. The computer-implemented method of claim 1 , wherein the one or more processors have no editing ability over the graphical object.
10. A network device for providing a visual representation of a graphical object in a web page, the network device comprising:
one or more processors; and
a non-transitory computer-readable medium including instructions which, when executed by the one or more processors, cause performance of operations including:
receiving, by the one or more processors, input corresponding to a selection of the graphical object to be displayed in a container of the web page;
calculating a set of container dimensions for the container, wherein the container has a constant size and wherein the container is a visual frame container representing a three-dimensional container;
rendering a set of optimized dimensions for a subarea element of the container, wherein the set of optimized dimensions maximize the subarea element's size within the container;
determining a set of object dimensions for the graphical object;
rendering the graphical object within the subarea element;
automatically generating a semi-transparent layer over the graphical object within the subarea element using the set of object dimensions, wherein the semi-transparent layer modifies an appearance of the graphical object to conform with an appearance of the container; and
automatically causing the container, the graphical object, and the semi-transparent layer to be displayed in the web page.
11. The network device of claim 10 , wherein the subarea element is a visual frame.
12. The network device of claim 10 , wherein the container is a HyperText Markup Language (HTML) Content Division (div) element.
13. The network device of claim 10 , wherein the subarea element is a HyperText Markup Language (HTML) Image Embed (img) element.
14. The network device of claim 10 , wherein rendering the subarea element includes stretching the subarea element to fit the container.
15. The network device of claim 10 , wherein rendering the subarea element includes adding some padding to the subarea element to fit the container.
16. A computer program product tangibly embodied in a non-transitory machine-readable storage medium including instructions which, when executed by one or more processors, cause performance of operations including:
receiving, by the one or more processors, input corresponding to a selection of a graphical object to be displayed in a container of a web page;
calculating a set of container dimensions for the container, wherein the container has a constant size and wherein the container is a visual frame container representing a three-dimensional container;
rendering a set of optimized dimensions for a subarea element of the container, wherein the set of optimized dimensions maximize the subarea element's size within the container;
determining a set of object dimensions for the graphical object;
rendering the graphical object within the subarea element;
automatically generating a semi-transparent layer over the graphical object within the subarea element using the set of object dimensions, wherein the semi-transparent layer modifies an appearance of the graphical object to conform with an appearance of the container; and
automatically causing the container, the graphical object, and the semi-transparent layer to be displayed in the web page.
17. The computer program product of claim 16 , wherein the subarea element is a visual frame.
18. The computer program product of claim 16 , wherein the container is a HyperText Markup Language (HTML) Content Division (div) element.
19. The computer program product of claim 16 , wherein the subarea element is a HyperText Markup Language (HTML) Image Embed (img) element.
20. The computer program product of claim 16 , wherein rendering the subarea element includes stretching the subarea element to fit the container.