Jump to content
hpoul

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.

 

alfred-openclipart-search.gif.6471d87e8ad673a776639925e3ce8fd6.gif

 

 

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

 

Share this post


Link to post

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.

Share this post


Link to post

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..

Share this post


Link to post

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.)

 

Share this post


Link to post

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..

Share this post


Link to post
On 18/07/2017 at 10:40 PM, hpoul said:

while an image is downloaded the queue item is "locked"

 

That's interesting. Could you point me to the bit of code that does that (as I said, JS isn't really my strong suit)?

 

Share this post


Link to post

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..

Share this post


Link to post

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.)

 

Share this post


Link to post

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
×