Holistic visual image interactivity engine
Programmatic image interactivity engine retrieves an image filter format and its associated images and image data. Image interactivity engine processes and presents the image filter format via a graphical user interface (GUI). User interactions with an image filter format comprised image, image interactivity engine may cause, based on the image filter format, visually emphasized and deemphasized included and excluded image shapes within the image. The image filter format may include associations (by means of URIs) between image shapes and image data sources to retrieve and display the associated image data in a GUI in response to interactions with an image shape.
1. A system, comprising:
at least one processor; and
at least one memory including instructions that, when executed by the at least one processor, cause the system to:
receive a first image associated with an image filter, the image filter comprising one or more image filter layers, wherein an image filter layer defines a set of outer boundary coordinates associated with included shapes and outer boundary coordinates associated with excluded shapes;
wherein the image filter:
associates the outer boundary coordinates of the first image with an image filter root layer;
associates the outer boundary coordinates of a first shape as an included shape of a first image filter layer;
associates the outer boundary coordinates of the first shape as an excluded shape of the image filter root layer; and
defines an overlay including:
a first portion having a first fill opacity, the first portion corresponding to pixels of the first image within the outer boundary coordinates of included shapes of the image filter root layer and not within the outer boundary coordinates of excluded shapes of the image filter root layer, and
a second portion having a transparent fill opacity, the second portion corresponding to pixels of the first image within the outer boundary coordinates of included shapes of the first image filter layer and not within the outer boundary coordinates of excluded shapes of the first image filter layer;
display the first image via a graphical user interface;
apply the overlay to the first image;
receive an indication via the graphical user interface of an interaction with a location of the first image within the outer boundary coordinates of the first shape; and
update the display of the first image, wherein the updating of the display includes deemphasizing pixels of the first image associated with included shapes in the image filter root layer, and excludes from the deemphasizing pixels associated with included shapes of the first image filter layer.
2. The system of claim 1 , wherein the indication of an interaction with a location associated with the first image filter layer corresponds to one of a hover action or a selection of one or more pixels of the first image within the outer boundary coordinates of an included shape of the first filter layer and not within the outer boundary coordinates of an excluded shape of the first image filter layer.
3. The system of claim 1 , wherein the instructions, when executed by the at least one processor, further include instructions to apply a deemphasizing cascading style sheet (CSS) to the deemphasized pixels of the image filter root layer.
4. The system of claim 1 , wherein the image filter further:
associates the outer boundary coordinates of a second shape corresponding at least in part to pixels within the outer boundary coordinates of the first shape as an excluded shape of the first image filter layer;
associates the outer boundary coordinates of the second shape as outer boundary coordinates of an included shape of the image filter root layer; and
wherein the instructions, when executed by the at least one processor, further cause the system to:
receive an indication via the graphical user interface of an interaction with a location within the outer boundary coordinates of the second shape; and
update the display of the first image, wherein the updating of the display removes the deemphasizing of pixels of the first image.
5. The system of claim 1 , wherein the image filter further:
associates the outer boundary coordinates of a second shape corresponding at least in part to pixels of the first image not within the outer boundary coordinates of the first shape as an included shape of a second image filter layer;
associates the outer boundary coordinates of the second shape as outer boundary coordinates of an excluded shape of the image filter root layer; and
associates the second image filter layer with the first image filter layer;
wherein the instructions, when executed by the at least one processor, further cause the system to:
receive an indication via the graphical user interface of an interaction with a location within the outer boundary coordinates of an included shape in the first or second image filter layer, and not within the outer boundary coordinates of an excluded shape of either the first image filter layer or the second image filter layer; and
update the display of the first image, wherein the updating of the display includes deemphasizing pixels of the first image associated with included shapes in the image filter root layer, and excludes from the deemphasizing pixels associated with included shapes of the first image filter layer and the second image filter layer.
6. The system of claim 1 , wherein the instructions, when executed by the at least one processor, further cause the system to:
alter the hues of the pixels within the outer boundary coordinates of shapes included in the image filter root layer, and not alter the hues of pixels within the outer boundary coordinates of excluded shapes of the image filter root layer.
7. The system of claim 1 , wherein the instructions, when executed by the at least one processor, further cause the system to:
associate the first image filter layer with resource data including content corresponding to at least one of video content, image content, or textual content,
wherein the displaying, via the graphical user interface in response to the receiving an indication of an interaction, further includes displaying the resource data according to an image filter data template.
8. The system of claim 7 , wherein the image filter root layer further comprises a uniform resource identifier (URI) of the first image.
9. The system of claim 7 , wherein the image filter further comprises one or more uniform resource identifiers (URI) of resource data associated with the one or more image filter layers.
10. A computer-implemented method, comprising:
receiving a first image associated with an image filter, the image filter comprising one or more image filter layers, wherein an image filter layer defines a set of outer boundary coordinates associated with included shapes and outer boundary coordinates associated with excluded shapes;
wherein the image filter:
associates the outer boundary coordinates of the first image with an image filter root layer;
associates the outer boundary coordinates of a first shape as an included shape of a first image filter layer;
associates the outer boundary coordinates of the first shape as an excluded shape of the image filter root layer; and
defines an overlay including:
a first portion having a first fill opacity, the first portion corresponding to pixels of the first image within the outer boundary coordinates of an included shape of the image filter root layer and not within the outer boundary coordinates of an excluded shape of the image filter root layer, and
a second portion having a transparent fill opacity, the second portion corresponding to pixels of the first image within the outer boundary coordinates of an included shape of the first image filter layer and not within the outer boundary coordinates of an excluded shape of the first image filter layer;
displaying the first image via a graphical user interface;
applying the overlay to the first image;
receiving an indication via the graphical user interface of an interaction with a location of the first image within the outer boundary coordinates of the first shape; and
updating the display of the first image, wherein the updating of the display includes deemphasizing pixels of the first image associated with included shapes in the image filter root layer, and excludes from the deemphasizing pixels associated with included shapes of the first image filter layer.
11. The computer-implemented method of claim 10 , wherein the indication of an interaction with a location associated with the first image filter layer corresponds to one of a hover action or a selection of one or more pixels of the first image within the outer boundary coordinates of an included shape of the first filter layer and not within the outer boundary coordinates of an excluded shape of the first image filter layer.
12. The computer-implemented method of claim 11 , wherein the deemphasizing further includes applying a deemphasizing cascading style sheet (CSS) to the deemphasized pixels of the image filter root layer.
13. The computer-implemented method of claim 10 , further comprising:
wherein the image filter further:
associates the outer boundary coordinates of a second shape corresponding at least in part to pixels within the outer boundary coordinates of the first shape as an excluded shape of the first image filter layer;
associates the outer boundary coordinates of the second shape as outer boundary coordinates of an included shape of the image filter root layer; and
receiving an indication via the graphical user interface of an interaction with a location within the outer boundary coordinates of the second shape; and
updating the display of the first image, wherein the updating of the display removes the deemphasizing of pixels of the first image.
14. The computer-implemented method of claim 10 , further comprising:
wherein the image filter further:
associates the outer boundary coordinates of a second shape corresponding at least in part to pixels of the first image not within the outer boundary coordinates of the first shape as an included shape of a second image filter layer;
associates the outer boundary coordinates of the second shape as outer boundary coordinates of an excluded shape of the image filter root layer; and
associates the second image filter layer with the first image filter layer;
receiving an indication via the graphical user interface of an interaction with a location within the outer boundary coordinates of an included shape in the first or second image filter layer, and not within the outer boundary coordinates of an excluded shape of either the first image filter layer or the second image filter layer; and
updating the display of the first image, wherein the updating of the display includes deemphasizing pixels of the first image associated with included shapes in the image filter root layer, and excludes from the deemphasizing pixels associated with included shapes of the first image filter layer and the second image filter layer.
15. The computer-implemented method of claim 10 , wherein the deemphasizing further comprises:
altering hues of the pixels within the outer boundary coordinates of shapes included in the image filter root layer, and not altering the hues of pixels within the outer boundary coordinates of excluded shapes of the image filter root layer.
16. The computer-implemented method of claim 10 , further comprising:
associating the first image filter layer with resource data including content corresponding to at least one of video content, image content, or textual content,
wherein the displaying, via the graphical user interface in response to the receiving an indication of an interaction, further includes displaying the resource data according to an image filter data template.
17. The computer-implemented method of claim 10 , wherein the image filter root layer further comprises a uniform resource identifier (URI) of the first image.
18. The computer-implemented method of claim 10 , wherein the image filter comprises one or more uniform resource identifiers (URI) of resource data associated with the one or more image filter layers.