Jump to content

Search for Clipart SVGs from openclipart.org

Recommended Posts

Alfred OpenClipart.org Search


A simple workflow which allows you to search for clipart vector files from https://openclipart.org/ - While searching it provides a thumbnails for all results as well as a quicklook with a larger variant. Default action simply opens the openclipart.org page, command would open SVG in finder, while alt copies it into the clipboard so the result can directly be pasted into an image application.





Installation & Requirements


* Requires node.js >= 7.6 to be installed in the system

* Download from https://github.com/hpoul/alfred-openclipart/releases


Source code & more infos on github: https://github.com/hpoul/alfred-openclipart


Link to comment

This is cool. I do lots of site wireframes/mockups and this will come in useful. Any way to change the amount of results it pulls in? For example, searching for "arrow" should render many many results, but only the top 10 are available.

Link to comment

Yeah, chaging that shouldn't be a problem, as @deanishe said, just adding the number of items fetched from the server should do the trick.. I'll probably update it to 30 or something. If you like to change it right away just look into index.js:


    fetchCliparts(query) {
        const url = `https://openclipart.org/search/json/?${querystring.stringify({ query: query })}&amount=30`;

adding this `&amount=30` should do the trick.


BUT: I wouldn't go too far, because right now *all* thumbnail previews are loaded for all items which are returned by this query. This can take some time, especially with search as you type.. because the thumbnail download is currently a very dumb FIFO queue.. ie. if you search for 'arrow' in the worst case, if you have amount=200 it will try to download 200 thumbnails for each character..

Link to comment

Oh shit, you fork the downloader, don't you. Yeah, 200 would be a really bad idea. 


Perhaps you could write a file to a "queue" directory for each URL to download, then have the forked downloader process (then delete) those files?


Ideally also ensure that only one downloader is running at a time.


I mean, it's quite likely the workflow is already making multiple, redundant requests for the same file, which is not super polite.


(Correct me if I'm wrong: I'm no JS guru.)


Link to comment

I have ensured that every thumbnail is only downloaded once, even when queued multiple times.. if everything works as intended, even if multiple downloaders are forked at the same time, while an image is downloaded the queue item is "locked", and the other downloaders should work on another thumbnail. so it is not *that* bad.. but it's still bad.. 


(for each invocation of the script one background process is forked.. each processing the queue from the beginning and only quitting once the queue is empty.. but it it is ensured, that each thumbnail is only downloaded once...) but yes, it would make sense to 1. not have too many download processes in parallel, and 2. cancel old queue entries, when a new search term comes in, or at least prioritise the new ones..)

maybe it would also make sense to only display 20 items and have a 21th 'Load More' item? shouldn't be too hard either i guess..

Link to comment

Sure, i am using a library called file-queue (which tbh i only audited very roughly) where i'm reading the downloadable items from the queue using `tpop` (transactional pop) .. file-queue uses a maildir structure with a 'tmp', 'cur', 'new' path, to get new data from the queue the 'cur' path is used, during a pop "transaction" the file is moved into the 'cur' directory, once it is committed it is deleted, when an error happens it will be reverted into the 'new' directory.


From my code: https://github.com/hpoul/alfred-openclipart/blob/master/lib/QueueWorker.js#L20-L31 (tpop makes it imediately invisible for all other download processes), ie "locked"

From file-queue documentation: https://github.com/threez/file-queue#transactional-popping

From file-queue implementation: https://github.com/threez/file-queue/blob/master/lib/maildir.js#L115-L139 "this.fs.rename(newPath, curPath," (file-queue tpop (https://github.com/threez/file-queue/blob/master/queue.js#L57) uses tryPop (https://github.com/threez/file-queue/blob/master/queue.js#L76) which calls maildir#process


Hope that makes sense..

Link to comment

Ah, right, thanks. It's in one of the libraries. That explains why I couldn't find it in the code.


I guess it also works more or less the same as the "solution" I suggested. Good to know my idea wasn't that daft, as someone else has also done something similar.


(When I wrote a workflow that does something similar, I ensured that only one downloader was running, so I didn't need such a smart queue.)


Link to comment
  • 2 weeks later...
22 hours ago, Acidham said:

Is there a way to change output to PNG instead of SVG?


@Acidham right now only the thumbnail PNG is fetched.. so if you hit command to reveal the SVG in the finder you will also have the PNG *thumbnail* right next to it. Which size do you need? I think the thumbnail would bei 250px wide.. other sizes openclipart provide would be 800px and 2400px

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...