diff --git a/Images/README-Images/np-credits-print-output.png b/Images/README-Images/np-credits-print-output.png index b1cd50e00e1523f0be3cc8f0be3fa4bd804c05e4..32775abc0b6add0ca1b00b790c20b4a65a1d4276 100644 Binary files a/Images/README-Images/np-credits-print-output.png and b/Images/README-Images/np-credits-print-output.png differ diff --git a/Images/README-Images/np-search-print-output.png b/Images/README-Images/np-search-print-output.png index a66df828f3da5f6795329b7a74160b4a8b166b5f..6030b066fdc97e8158e1b8ed21cef43c74cad63f 100644 Binary files a/Images/README-Images/np-search-print-output.png and b/Images/README-Images/np-search-print-output.png differ diff --git a/Print/Noun-Project-Illustrations/Print-from-API/Noun-Project_print-from-API.webm b/Print/Noun-Project-Illustrations/Print-from-API/Noun-Project_print-from-API.webm new file mode 100644 index 0000000000000000000000000000000000000000..6f5cd34f0034002c6b0539b9c35d26c4d25d3cee Binary files /dev/null and b/Print/Noun-Project-Illustrations/Print-from-API/Noun-Project_print-from-API.webm differ diff --git a/Print/Noun-Project-Illustrations/Print-from-API/README.md b/Print/Noun-Project-Illustrations/Print-from-API/README.md index 6c441a1edc52974b601a08f63312a9d133926f3f..6fb36b0e2c1d0a8f3a6bd143518a9796f4788d7f 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/README.md +++ b/Print/Noun-Project-Illustrations/Print-from-API/README.md @@ -1,17 +1,41 @@ # Using the Noun Project API to make use and attribution of images easier (see Issue #21, [_'Making accurate credits takes a long time'_](https://gitlab.com/cameralibre/cut-copy-and-paste/issues/21) for more context) -I'm trying to make a very simple search interface for the Noun Project, where a workshop participant can type in a word, eg. _bee_, and the top 8 images returned will be immediately printed out, with license, attribution, ID, and a thumbnail (they will likely cut the metadata off the image, so the thumbnail helps them link it back to the image they have used) +![Noun Project Images: Printing from the API](Noun-Project_print-from-API.webm) + +This is a very simple search interface for the Noun Project, designed to be set up on a laptop at the workshop. It uses the Noun Project API and a proxy server on the same computer for authentication. + +In the search interface, a workshop participant can type in a word, eg. _banana_, and the top 8 images returned will be immediately printed out, with license, attribution, ID, and a thumbnail (they will likely cut the metadata off the image, so the thumbnail helps them link it back to the image they have used) ### Current layout: ![](../../../Images/README-Images/np-search-print-output.png) -I'm also trying to make an automated credits page - participants can note down the images they have used (by referring to the commit log) and then type a series of IDs into the connected laptop. Up to 8 IDs can be input, and a credits page is printed. +I would like to prioritize Noun Project images with the 'handdrawn' tag but I haven't worked out how to do that yet. + +There's also an automated credits page - participants can note down the images they have used (by referring to the commit log, or by gluing the 'metadata' info to the back of their work). They then type a series of IDs into the connected laptop. Up to 8 IDs can be input, and a credits page is printed. (for now, if a participant uses more than 8 images, they can print multiple credits pages and hack them together with scissors and glue) ### Current layout: ![](../../../Images/README-Images/np-credits-print-output.png) -The layouts are good enough to work with for now, and they're printing ok (with Beaker Browser) so the next steps are writing the rest of the javascript to correctly populate both pages, and setting it up to work with the Noun Project API directly. \ No newline at end of file +The layouts are printing nicely and have been tested in a workshop at the Mozilla Fellows Winter Summit in San Francisco. + +Many thanks to [Darius Kazemi](https://tinysubversions.com/) for helping me with OAuth authentication and setting up the proxy server! + +### Using the interface +To run this yourself, you'll need a free 'Playground' access key from the Noun Project's [Developers page](https://thenounproject.com/developers/). + +Download this folder! You will need to paste your Noun Project key and secret into lines 47 & 48 of index.js for it to authenticate properly. + +You'll also need to install [node.js](https://nodejs.org/en/) for your system. + + In your terminal, [change directory](https://tutorial.djangogirls.org/en/ +intro_to_command_line/#change-current-directory) to this folder, and type ```node index.js``` to start the server. + +If it's working, you should see a message saying ```Example app running on port 3000!``` + +If you have any trouble, make sure that the ```cors``` module is installed. Still in the terminal, type ```npm install cors``` to install it. + +Once the server is running, you can open ```search-results.html``` with a browser. Although Firefox is my go-to browser, but I found that printing from [Beaker Browser](https://beakerbrowser.com) gave me more reliable results with smaller margins - I assume any Chromium-based browser will perform similarly. \ No newline at end of file diff --git a/Print/Noun-Project-Illustrations/Print-from-API/credits-output.pdf b/Print/Noun-Project-Illustrations/Print-from-API/credits-output.pdf index bd844b254c4e3cb8781565097ed2afdf7bd3a853..3b055c96d2d9ae226e617a617eb7ac52e5d7029c 100644 Binary files a/Print/Noun-Project-Illustrations/Print-from-API/credits-output.pdf and b/Print/Noun-Project-Illustrations/Print-from-API/credits-output.pdf differ diff --git a/Print/Noun-Project-Illustrations/Print-from-API/credits.html b/Print/Noun-Project-Illustrations/Print-from-API/credits.html index c6a983ffcc4b729822d7f47647bb6ab5ff9a4778..bf9a1505a8522d545fbeecd7b1b045430c2135c7 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/credits.html +++ b/Print/Noun-Project-Illustrations/Print-from-API/credits.html @@ -2,7 +2,7 @@ - Noun-project-SVG + CREDITS @@ -202,11 +202,11 @@ -
- -
- + + + + diff --git a/Print/Noun-Project-Illustrations/Print-from-API/index.js b/Print/Noun-Project-Illustrations/Print-from-API/index.js index da0e2d8a007611633cc4c1f4efa5ec650af027f9..950db4b10ed5f5aeec249befec259370891426ad 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/index.js +++ b/Print/Noun-Project-Illustrations/Print-from-API/index.js @@ -16,15 +16,36 @@ app.get('/', cors(), (req, res) => { }); }); +app.get('/icon', cors(), (req, res) => { + console.log(req.query); + let icon = req.query.icon; + getIcon(icon).then((data) => { + res.header("Access-Control-Allow-Origin", "*"); + res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); + res.json(data) + }); +}); + +app.get('/user', cors(), (req, res) => { + console.log(req.query); + let username = req.query.username; + let page = req.query.page; + getUserUploads(username, page).then((data) => { + res.header("Access-Control-Allow-Origin", "*"); + res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); + res.json(data) + }); +}); + app.listen(port, () => console.log(`Example app listening on port ${port}!`)) function getImages(term) { return new Promise((resolve, reject) => { - var twitter = OAuth({ + var nounProject = OAuth({ consumer: { - key: 'xxxxxx', - secret: 'xxxxxx' + key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', + secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // ENTER YOUR NOUN PROJECT KEY & SECRET HERE }, signature_method: 'HMAC-SHA1', @@ -34,7 +55,8 @@ function getImages(term) { }); - twitter.get({ + nounProject.get({ + // url: 'https://api.thenounproject.com/icons/' + term url: 'https://api.thenounproject.com/icons/' + term, qs: { limit: 8 @@ -45,3 +67,54 @@ function getImages(term) { }); }); } + +function getIcon(icon) { + return new Promise((resolve, reject) => { + var nounProject = OAuth({ + consumer: { + key: 'b55cb0b73b784d579415f0e668d3b487', + secret: 'e0fc5d67199f44d7a23b6fc4337aea44' +// ENTER YOUR NOUN PROJECT KEY & SECRET HERE + }, + signature_method: 'HMAC-SHA1', + hash_function: function(base_string, key) { + return crypto.createHmac('sha1', key).update(base_string).digest('base64'); + } + }); + + + nounProject.get({ + // url: 'https://api.thenounproject.com/icons/' + term + url: 'https://api.thenounproject.com/icon/' + icon, + json: true + }, function(err, res, icon) { + resolve(icon); + }); + }); +} + + +function getUserUploads(username, page) { + return new Promise((resolve, reject) => { + var nounProject = OAuth({ + consumer: { + key: 'b55cb0b73b784d579415f0e668d3b487', + secret: 'e0fc5d67199f44d7a23b6fc4337aea44' +// ENTER YOUR NOUN PROJECT KEY & SECRET HERE + }, + signature_method: 'HMAC-SHA1', + hash_function: function(base_string, key) { + return crypto.createHmac('sha1', key).update(base_string).digest('base64'); + } + }); + + + nounProject.get({ + // url: 'https://api.thenounproject.com/icons/' + term + url: 'https://api.thenounproject.com/user/' + username + "/uploads?limit=8&page=" + page, + json: true + }, function(err, res, icon) { + resolve(icon); + }); + }); +} diff --git a/Print/Noun-Project-Illustrations/Print-from-API/populate-credits.js b/Print/Noun-Project-Illustrations/Print-from-API/populate-credits.js index 3d6e79bc7e41a6979ddad10a3d5085dd8c903f43..f44929c2d194ac99ba345174646ab48935665586 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/populate-credits.js +++ b/Print/Noun-Project-Illustrations/Print-from-API/populate-credits.js @@ -1,447 +1,30 @@ -// -// async function getData() -// { -// //await the response of the fetch call -// let response = await fetch('https://gitlab.com/cameralibre/cut-copy-and-paste/raw/master/Print/Noun-Project-Illustrations/Print-from-API/api-response'); -// //proceed once the first promise is resolved. -// let data = await response.json() -// //proceed only when the second promise is resolved -// return data; -// } -// //call getData function -// getData() -// .then(data => console.log(data)); + var creditCounter = 0 +function getCreditInfo() { + let icon = document.getElementById('text').value; +fetch('http://localhost:3000/icon/?icon=' + icon) + .then(function(response) { + return response.json(); + }) + .then(function(iconData) { + console.log(iconData); -var iconData = { "icons": [ - { - "attribution": "bee by Juan Sebastian Rickenmann from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/5673-600.png", - "collections": [], - "date_uploaded": "2012-10-04", - "id": "5673", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/5673", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/5673-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/5673-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/5673-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 1656, - "slug": "fly" - }, - { - "id": 1586, - "slug": "honey" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 1587, - "slug": "nectar" - }, - { - "id": 2218, - "slug": "sting" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "CH", - "name": "Juan Sebastian Rickenmann", - "permalink": "/sebastian.rickenmann", - "username": "sebastian.rickenmann" - }, - "uploader_id": "1656", - "year": 1987 - }, - { - "attribution": "bee by James Keuning from Noun Project", - "collections": [], - "date_uploaded": "2012-10-12", - "icon_url": "https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/6063.svg?Expires=1548922759&Signature=H98F5sMdrh2icccuZyHYwd70cDztXLPmqckqBReNxu7g0mN3JHPIaM88Wuo7F6lVzqjxfyZBQu6uOWbv9iVmvJKzlNrk3rgYBick9jqdn~tSCnEEOHED24Mae8~zTPULNOXaV~m2db3USYNcbbR7Y4BHMuoAYYbry75dS1Z6zQ_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q", - "id": "6063", - "is_active": "1", - "is_explicit": "0", - "license_description": "public-domain", - "nounji_free": "0", - "permalink": "/term/bee/6063", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/6063-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/6063-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/6063-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 2175, - "slug": "colony" - }, - { - "id": 1656, - "slug": "fly" - }, - { - "id": 1585, - "slug": "hive" - }, - { - "id": 1586, - "slug": "honey" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 6667, - "slug": "pollen" - }, - { - "id": 2218, - "slug": "sting" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "Saint Paul, Minnesota, US", - "name": "James Keuning", - "permalink": "/jmkeuning", - "username": "jmkeuning" - }, - "uploader_id": "12121", - "year": 2012 - }, - { - "attribution": "bee by Rosie Hardwick from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/9437-600.png", - "collections": [], - "date_uploaded": "2012-12-30", - "id": "9437", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/9437", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/9437-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/9437-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/9437-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 244, - "slug": "bug" - }, - { - "id": 666, - "slug": "insect" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "Kingston upon Thames, England, GB", - "name": "Rosie Hardwick", - "permalink": "/rosie_h", - "username": "rosie_h" - }, - "uploader_id": "21770", - "year": 2012 - }, - { - "attribution": "bee by Rémy Médard from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/10312-600.png", - "collections": [], - "date_uploaded": "2013-01-22", - "id": "10312", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/10312", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/10312-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/10312-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/10312-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 2218, - "slug": "sting" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "Paris, France, FR", - "name": "Rémy Médard", - "permalink": "/catalarem", - "username": "catalarem" - }, - "uploader_id": "5386", - "year": 2011 - }, - { - "attribution": "bee by Shirley Wu from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/12089-600.png", - "collections": [], - "date_uploaded": "2013-02-23", - "id": "12089", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/12089", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/12089-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/12089-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/12089-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 244, - "slug": "bug" - }, - { - "id": 11698, - "slug": "hornet" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 11699, - "slug": "wasp" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "San Francisco, CA, US", - "name": "Shirley Wu", - "permalink": "/shirleyy_wu", - "username": "shirleyy_wu" - }, - "uploader_id": "37568", - "year": 2013 - }, - { - "attribution": "bee by iconoci from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/13031-600.png", - "collections": [], - "date_uploaded": "2013-03-08", - "id": "13031", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/13031", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/13031-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/13031-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/13031-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 244, - "slug": "bug" - }, - { - "id": 12283, - "slug": "bumble" - }, - { - "id": 1656, - "slug": "fly" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 2860, - "slug": "wings" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "GB", - "name": "iconoci", - "permalink": "/iconoci", - "username": "iconoci" - }, - "uploader_id": "21070", - "year": 2013 - }, - { - "attribution": "bee by David Lopez from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/15518-600.png", - "collections": [], - "date_uploaded": "2013-04-17", - "id": "15518", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/15518", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/15518-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/15518-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/15518-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 244, - "slug": "bug" - }, - { - "id": 1656, - "slug": "fly" - }, - { - "id": 666, - "slug": "insect" - }, - { - "id": 2860, - "slug": "wings" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "Paris, Île-de-France, FR", - "name": "David Lopez", - "permalink": "/davidlopez.fr", - "username": "davidlopez.fr" - }, - "uploader_id": "24959", - "year": 2012 - }, - { - "attribution": "bee by Cassie McKown from Noun Project", - "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/16937-600.png", - "collections": [], - "date_uploaded": "2013-05-20", - "id": "16937", - "is_active": "1", - "is_explicit": "0", - "license_description": "creative-commons-attribution", - "nounji_free": "0", - "permalink": "/term/bee/16937", - "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/16937-200.png", - "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/16937-42.png", - "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/16937-84.png", - "sponsor": {}, - "sponsor_campaign_link": null, - "sponsor_id": "", - "tags": [ - { - "id": 1584, - "slug": "bee" - }, - { - "id": 499, - "slug": "animal" - }, - { - "id": 244, - "slug": "bug" - }, - { - "id": 1656, - "slug": "fly" - }, - { - "id": 666, - "slug": "insect" - } - ], - "term": "bee", - "term_id": 1584, - "term_slug": "bee", - "uploader": { - "location": "Falls Church, VA, US", - "name": "Cassie McKown", - "permalink": "/mckowncr", - "username": "mckowncr" - }, - "uploader_id": "86458", - "year": 2013 - } - ] - } + var icon = iconData.icon -var icons = iconData.icons + var id = icon.id + var thumbnail = icon.preview_url + var license = icon.license_description + var title = icon.term + var author = icon.uploader.name + console.log(author) -for(i = 0; i < 8; i++){ + document.getElementById(( "id-" + creditCounter )).textContent = id + document.getElementById(( "thumbnail-" + creditCounter )).setAttribute("href", thumbnail) + document.getElementById(( "title-" + creditCounter )).textContent = title + document.getElementById(( "author-" + creditCounter )).textContent = author + document.getElementById('text').value = "" - var id = icons[i].id - var thumbnail = icons[i].preview_url - var license = icons[i].license_description - var title = icons[i].term - var author = icons[i].uploader.name - console.log(author) + creditCounter ++ - document.getElementById(( "id-" + i )).textContent = id - document.getElementById(( "thumbnail-" + i )).setAttribute("href", thumbnail) - document.getElementById(( "title-" + i )).textContent = title - document.getElementById(( "author-" + i )).textContent = author - } + }) +} diff --git a/Print/Noun-Project-Illustrations/Print-from-API/search-output.pdf b/Print/Noun-Project-Illustrations/Print-from-API/search-output.pdf new file mode 100644 index 0000000000000000000000000000000000000000..f7cd9dd0475e37a455456dc03b2798590556293d Binary files /dev/null and b/Print/Noun-Project-Illustrations/Print-from-API/search-output.pdf differ diff --git a/Print/Noun-Project-Illustrations/Print-from-API/search-results.html b/Print/Noun-Project-Illustrations/Print-from-API/search-results.html index 1f391d0954261d942e84633fc9dd48f6e5b4c078..5ae73d7d969d92694bdc20fbe54348f4ad3b2aa4 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/search-results.html +++ b/Print/Noun-Project-Illustrations/Print-from-API/search-results.html @@ -2,7 +2,7 @@ - Noun-project-SVG + SEARCH diff --git a/Print/Noun-Project-Illustrations/Print-from-API/styles.css b/Print/Noun-Project-Illustrations/Print-from-API/styles.css index b6e892b6ea50323728068a31b50c6ba2b2d04b39..712a834aaffb4344ab5c81788689173c8ea96a8e 100644 --- a/Print/Noun-Project-Illustrations/Print-from-API/styles.css +++ b/Print/Noun-Project-Illustrations/Print-from-API/styles.css @@ -123,6 +123,6 @@ svg line { border: none; } - button, form, input { + button, form, input, label { display: none; } diff --git a/Print/Noun-Project-Illustrations/Print-from-API/test-output.pdf b/Print/Noun-Project-Illustrations/Print-from-API/test-output.pdf deleted file mode 100644 index 6a5a5536506fd1596594b66503d83a8d373568f8..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/Print-from-API/test-output.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/Print-from-API/user-search-results.js b/Print/Noun-Project-Illustrations/Print-from-API/user-search-results.js new file mode 100644 index 0000000000000000000000000000000000000000..cb19b2ab39c11cc74f1ae9ca8e0b14c4fe3b7b08 --- /dev/null +++ b/Print/Noun-Project-Illustrations/Print-from-API/user-search-results.js @@ -0,0 +1,33 @@ +function getUserIcons() { + let term = document.getElementById('text').value; + let page = document.getElementById('page').value; +fetch('http://localhost:3000/user/?username=' + term + "&limit=8&page=" + page) + .then(function(response) { + return response.json(); + }) + .then(function(userData) { + console.log(userData); + + var icons = userData.uploads + + for(i = 0; i < 8; i++){ + + var id = icons[i].id + var pngImage = icons[i].attribution_preview_url + var svgImage = icons[i].icon_url + var license = icons[i].license_description + + document.getElementById(( "id-" + i )).textContent = id + + if (license === "creative-commons-attribution"){ + document.getElementById(( "license-" + i )).setAttribute("href", "#cc-by") + document.getElementById(( "image-" + i )).setAttribute("href", pngImage) + } + else { + document.getElementById(( "license-" + i )).setAttribute("href", "#cc0") + document.getElementById(( "image-" + i )).setAttribute("href", svgImage) + } + } + +}); +} diff --git a/Print/Noun-Project-Illustrations/Print-from-API/user-search.html b/Print/Noun-Project-Illustrations/Print-from-API/user-search.html new file mode 100644 index 0000000000000000000000000000000000000000..124a29c0281d60b6220ccceb4f902eaadd8ea84a --- /dev/null +++ b/Print/Noun-Project-Illustrations/Print-from-API/user-search.html @@ -0,0 +1,181 @@ + + + + + USER-SEARCH + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Print/Noun-Project-Illustrations/README.md b/Print/Noun-Project-Illustrations/README.md index 8349bae31936ce3307ba630c730856a289f50b4c..79dd3a7795ef3c9bc0bbf12e2cb1075368fe1e87 100644 --- a/Print/Noun-Project-Illustrations/README.md +++ b/Print/Noun-Project-Illustrations/README.md @@ -9,6 +9,13 @@ Here I have laid out a number of images loosely gathered under the broad umbrell In this folder you'll find a number of printable A4 PDFs. In the SVG folder you'll find the multi-layered SVG file used to arrange them, and the source images as downloaded from the Noun Project, all licensed CC-BY. +I've since developed a browser-based interface which can help you find, use and attribute Noun Project images: + + +![Noun Project Images: Printing from the API](./Print-from-API/Noun-Project_print-from-API.webm) + +![Noun Project Search Page](../../Images/README-Images/np-search-print-output.png) + You can print and cut these A4 sheets into separate images (a paper cutter/guillotine helps to do this quickly). The images can be arranged on the remix table before the workshop starts, and you might set a first task such as: > _"choose one or two images from the collection, and use them to create the title page for an imaginary zine. Write a Title and a Tagline to go with the imagery and communicate what the zine is about. This is just an imagination exercise for now - it doesn't have to be the zine that you will work on in this workshop, but instead it should be a zine that you would like to read - the zine ideas can be as complex, unusual or as ridiculous as you like. You can cut the images up, you can draw in anything else you like."_ @@ -16,6 +23,6 @@ You can print and cut these A4 sheets into separate images (a paper cutter/guill Each Noun Project file has a unique number attached to it, which we can write into the 'Builds Upon' column of the Commit Log. If you search for that id on the Noun Project, you'll find the icon and its author info. ![search results - one icon found](../../Images/README-Images/noun-project-id-found.png) -**Note:** currently it is not so easy to reference Noun Project ids and give credit: see issue #21. - +But it is much, much easier to use the credits page that I've set up - see above video or the [Print-from-API](./Print-from-API) folder. +![Noun Project Zine Credits Page](../../Images/README-Images/np-credits-print-output.png) \ No newline at end of file diff --git a/Print/Noun-Project-Illustrations/adamzubin.pdf b/Print/Noun-Project-Illustrations/adamzubin.pdf new file mode 100644 index 0000000000000000000000000000000000000000..f1c71d70e5aee0934c375e8f0b453b12aa1cab72 Binary files /dev/null and b/Print/Noun-Project-Illustrations/adamzubin.pdf differ diff --git a/Print/Noun-Project-Illustrations/annagrossout-01.pdf b/Print/Noun-Project-Illustrations/annagrossout-01.pdf new file mode 100644 index 0000000000000000000000000000000000000000..f4cc14c8c9b6dea6e0f7d8e720f393f73a400102 Binary files /dev/null and b/Print/Noun-Project-Illustrations/annagrossout-01.pdf differ diff --git a/Print/Noun-Project-Illustrations/creativestall.pdf b/Print/Noun-Project-Illustrations/creativestall.pdf new file mode 100644 index 0000000000000000000000000000000000000000..39c1ea8bccb889680557e5bcb92d447120f2a903 Binary files /dev/null and b/Print/Noun-Project-Illustrations/creativestall.pdf differ diff --git a/Print/Noun-Project-Illustrations/jamescottell.pdf b/Print/Noun-Project-Illustrations/jamescottell.pdf new file mode 100644 index 0000000000000000000000000000000000000000..54ab50657a601e0a94a68258e638a6e39c89820e Binary files /dev/null and b/Print/Noun-Project-Illustrations/jamescottell.pdf differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology.pdf b/Print/Noun-Project-Illustrations/noun-project_technology.pdf new file mode 100644 index 0000000000000000000000000000000000000000..744738208a2e79f862dfc6edad5f48c08350e887 Binary files /dev/null and b/Print/Noun-Project-Illustrations/noun-project_technology.pdf differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_01.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_01.pdf deleted file mode 100644 index c81ff1722c13a4532a59261bef80d73bcfa4fae5..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_01.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_02.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_02.pdf deleted file mode 100644 index ec3d7fe27774985d43f8314a52a85c2879d42870..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_02.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_03.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_03.pdf deleted file mode 100644 index 999e99d2481a892a44b1fd0f568ead1fa63ee380..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_03.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_04.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_04.pdf deleted file mode 100644 index 1a995806e5aab8f366de237e60647b46ddf1bc19..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_04.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_05.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_05.pdf deleted file mode 100644 index 5400d2bbe0c697beb9187cf57b2fa17e95ccadd3..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_05.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_06.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_06.pdf deleted file mode 100644 index 927625647581ce011a84e65ba70057a63d1385cc..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_06.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_07.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_07.pdf deleted file mode 100644 index 2f8354c7edf0df9d2087302c22028587a93e3b0c..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_07.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/noun-project_technology_08.pdf b/Print/Noun-Project-Illustrations/noun-project_technology_08.pdf deleted file mode 100644 index fb3ee08ae7785daa2c6027f00122db43b723d66e..0000000000000000000000000000000000000000 Binary files a/Print/Noun-Project-Illustrations/noun-project_technology_08.pdf and /dev/null differ diff --git a/Print/Noun-Project-Illustrations/olgamur.pdf b/Print/Noun-Project-Illustrations/olgamur.pdf new file mode 100644 index 0000000000000000000000000000000000000000..0fd61b97fb51ce760fb4b5caac8eb76c3b0e2c81 Binary files /dev/null and b/Print/Noun-Project-Illustrations/olgamur.pdf differ diff --git a/Print/Noun-Project-Illustrations/sandorsz.pdf b/Print/Noun-Project-Illustrations/sandorsz.pdf new file mode 100644 index 0000000000000000000000000000000000000000..018bce58426416c989e97ec3e186baa3c8cb83ff Binary files /dev/null and b/Print/Noun-Project-Illustrations/sandorsz.pdf differ