Search for Clipart SVGs from openclipart.org

[hpoul]

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

 

[flome]

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.

[deanishe]

Add "amount=200" to the search URL. 

 

https://openclipart.org/developers

[hpoul]

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

[deanishe]

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

 

[hpoul]

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

[deanishe]

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

 

[hpoul]

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

[deanishe]

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

 

[flome]

On 7/18/2017 at 0:03 PM, hpoul said:

@deanishe @hpoul your suggestions worked beautifully. Thanks!

 

[Acidham]

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

[hpoul]

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

[Acidham]

@hpoul good question!  E.g. when using clipart with Power Point, SVG is not supported. Why  not implementing further steps if required to convert svg to png and enter size or presets?