Digital OpenClipArt Frame 4x3

by JayNick - uploaded on December 30, 2015, 10:27 pm

V4 - Added ability to specify an image background by appending ibg=color in the query string of the url where color can be a color name, rgb(r,g,b), or hex. If hex, # must be passed as %23

Added default queries and ids based on the time of year.

Added local storage to save query string as defaults - pass ?x to delete a stored query string



V3 - Added ability to remove frame by passing f=0 in the query string of the url. If the frame is not displayed, the credits are not displayed.

Added ability to remove credits by passing c=0 in the query string of the url - not required if f=0 is passed. Can turn credits on by adding c=1 after f=0 i.e. ?f=0&c=1

Added the ability to bypass 1 second delay required for upload to openclipart by adding d=0 to the query string of the url.



Added keyboard navigation: right arrow - advance, left arrow - go back, down arrow - pause. Clicking on right, left, and bottom of image provides same navigation with or without frame displayed.



V2 - Revised to allow colored backgrounds. Black background was requested - add bg=black to the url query string. Any color can be provided by name, rgb(r,g,b), or hex - hex must be preceded by %23 instead of #. Also added the ability to limit the number of images to something less than 20 by adding the amount to the query string, i.e. a=5 for just 5 images. And fixed issue with just passing an uploader in the query string without a search string.



V1 - Uses the OpenClipArt API to load images and display them in a frame with an aspect ratio of 16:9. Mirror computer, tablet, or phone to your TV via AppleTV, Chromecast, etc and turn the TV into a Digital Art Frame. Works full screen with Apple iphone 6 and apple tv.



The SVG image accepts passed parameters to query Open Clip Art for images. 2 default queries are in the code as examples. Query by openclipart id by apending ?ids=217395,217396 to the SVG image url - 20 max separated by commas.



Or, query openclipart with search terms apending ?q=christmas+card for example. Limit to a specific uploader by adding &u=Almeidah For example, append ?q=christmas+card&u=Almeidah to the SVG url. Add the sort method: &s=downloads (sort limited to date, favorites, downloads). Add a timeout between pictures: &t=60 for a timeout of 60 seconds - defaults to 120 seconds. Combining these parameters the url is appended with ?q=christmas+card&u=Almeidah&s=downloads&t=60 Displays the first 20 images returned or less if the query returns less than 20 images.



Click on the right side of the frame to advance, left side to go back, and bottom to pause on a picture. Click on any image displayed to

view the openclipart image detail.



Code can also be embedded in an HTML5 web page with a few modifications.



Have a favorite query? Share it by adding it to the comments on this image. Thanks for sharing!