{"action":"created","issue":{"url":"https://api.github.com/repos/humphd/brackets/issues/466","labels_url":"https://api.github.com/repos/humphd/brackets/issues/466/labels{/name}","comments_url":"https://api.github.com/repos/humphd/brackets/issues/466/comments","events_url":"https://api.github.com/repos/humphd/brackets/issues/466/events","html_url":"https://github.com/humphd/brackets/issues/466","id":106678887,"number":466,"title":"Add automatic colour palette extraction to the Image Viewer","user":{"login":"humphd","id":427398,"avatar_url":"https://avatars.githubusercontent.com/u/427398?v=3","gravatar_id":"","url":"https://api.github.com/users/humphd","html_url":"https://github.com/humphd","followers_url":"https://api.github.com/users/humphd/followers","following_url":"https://api.github.com/users/humphd/following{/other_user}","gists_url":"https://api.github.com/users/humphd/gists{/gist_id}","starred_url":"https://api.github.com/users/humphd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/humphd/subscriptions","organizations_url":"https://api.github.com/users/humphd/orgs","repos_url":"https://api.github.com/users/humphd/repos","events_url":"https://api.github.com/users/humphd/events{/privacy}","received_events_url":"https://api.github.com/users/humphd/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/humphd/brackets/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/humphd/brackets/labels/Good%20First%20Bug","name":"Good First Bug","color":"207de5"},{"url":"https://api.github.com/repos/humphd/brackets/labels/UX","name":"UX","color":"006b75"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-16T01:31:20Z","updated_at":"2015-10-07T15:23:10Z","closed_at":null,"body":"The built-in Image Viewer is cool, and mostly useless.  It shows you the file, and some basic size info:\r\n\r\n![screenshot 2015-09-15 21 26 13](https://cloud.githubusercontent.com/assets/427398/9894322/71f750fe-5bf0-11e5-8fb5-3b6c7ee1afa1.png)\r\n\r\nIt would be nice if it offered some useful tools to the user.  One idea would be to have it show you the main colours in the current image.  We could use http://jariz.github.io/vibrant.js/ to do it.\r\n\r\nThe code for this lives in:\r\n* https://github.com/humphd/brackets/blob/bramble/src/htmlContent/image-view.html\r\n* https://github.com/humphd/brackets/blob/bramble/src/editor/ImageViewer.js\r\n\r\nExtracting the colour swatches looks pretty simple:\r\n\r\n```js\r\nvar img = document.createElement('img');\r\nimg.setAttribute('src', 'examples/octocat.png')\r\n\r\nimg.addEventListener('load', function() {\r\n    var vibrant = new Vibrant(img);\r\n    var swatches = vibrant.swatches()\r\n    for (swatch in swatches)\r\n        if (swatches.hasOwnProperty(swatch) && swatches[swatch])\r\n            console.log(swatch, swatches[swatch].getHex())\r\n\r\n    /*\r\n     * Results into:\r\n     * Vibrant #7a4426\r\n     * Muted #7b9eae\r\n     * DarkVibrant #348945\r\n     * DarkMuted #141414\r\n     * LightVibrant #f3ccb4\r\n     */\r\n});\r\n```\r\n\r\nProbably the code would need to go somewhere in the `onload` for the `img` in here: https://github.com/humphd/brackets/blob/bramble/src/editor/ImageViewer.js#L120-L149"},"comment":{"url":"https://api.github.com/repos/humphd/brackets/issues/comments/146229142","html_url":"https://github.com/humphd/brackets/issues/466#issuecomment-146229142","issue_url":"https://api.github.com/repos/humphd/brackets/issues/466","id":146229142,"user":{"login":"errietta","id":134585,"avatar_url":"https://avatars.githubusercontent.com/u/134585?v=3","gravatar_id":"","url":"https://api.github.com/users/errietta","html_url":"https://github.com/errietta","followers_url":"https://api.github.com/users/errietta/followers","following_url":"https://api.github.com/users/errietta/following{/other_user}","gists_url":"https://api.github.com/users/errietta/gists{/gist_id}","starred_url":"https://api.github.com/users/errietta/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/errietta/subscriptions","organizations_url":"https://api.github.com/users/errietta/orgs","repos_url":"https://api.github.com/users/errietta/repos","events_url":"https://api.github.com/users/errietta/events{/privacy}","received_events_url":"https://api.github.com/users/errietta/received_events","type":"User","site_admin":false},"created_at":"2015-10-07T15:23:10Z","updated_at":"2015-10-07T15:23:10Z","body":"hi @humphd I'm interested - is there a design of how it should look like if we do add this?"}}