{"id":27,"date":"2007-11-23T12:26:38","date_gmt":"2007-11-23T10:26:38","guid":{"rendered":"http:\/\/enricoros.wordpress.com\/2007\/11\/23\/elements-of-ui-design\/"},"modified":"2009-09-23T19:32:51","modified_gmt":"2009-09-23T17:32:51","slug":"elements-of-ui-design","status":"publish","type":"post","link":"https:\/\/www.enricoros.com\/oldblog\/2007\/11\/elements-of-ui-design\/","title":{"rendered":"Elements of Ui Design &#8211; ColorPicker"},"content":{"rendered":"<p><strong>Update: the source code is included in the <a href=\"http:\/\/www.enricoros.com\/opensource\/fotowall\/\">Fotowall<\/a> project. The <a href=\"http:\/\/www.enricoros.com\/opensource\/fotowall\/source-code\">files you&#8217;re looking for<\/a> are the ColorPickerItem ones.<\/strong><\/p>\n<p>Say you&#8217;re writing an application and you want to let the user to change the color of an item; <em>what will you do?<\/em><\/p>\n<p>The standard approach is to <span style=\"text-decoration: line-through;\">popup a color dialog<\/span> with the standard HSV selector and all the sliders and values and buttons and confusion. Another approach is to <span style=\"text-decoration: line-through;\">pop down a combobox<\/span> with a selection of default colors where the user won&#8217;t find the colour she is looking for (unless it&#8217;s RED, of course :-)).<br \/>\nBoth approaches need you to get shocked by another window appearing right in front of you, so you loose the context and move the mouse far away from where it was.<\/p>\n<p>Let&#8217;s take a look at this <strong>new approach<\/strong>:<\/p>\n<p>[youtube=http:\/\/www.youtube.com\/watch?v=XcLwLQQGiks]<\/p>\n<p>The 2d (yet perspective transformed) dialog smoothly fades in when hovering the color and <em>your favorite hue is just 1 or 2 clicks apart<\/em>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: the source code is included in the Fotowall project. The files you&#8217;re looking for are the ColorPickerItem ones. Say you&#8217;re writing an application and you want to let the user to change the color of an item; what will you do? The standard approach is to popup a color dialog with the standard HSV [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,6],"tags":[12,16],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-computer-graphics","category-software","tag-colorpicker","tag-graphicsview"],"_links":{"self":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":2,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/27\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}