{"id":247,"date":"2018-11-06T21:53:23","date_gmt":"2018-11-06T21:53:23","guid":{"rendered":"https:\/\/www.nleby.com\/longform\/?p=247"},"modified":"2019-07-18T20:34:06","modified_gmt":"2019-07-18T20:34:06","slug":"pts-explorer","status":"publish","type":"post","link":"https:\/\/www.nleby.com\/longform\/2018\/11\/06\/pts-explorer\/","title":{"rendered":"Porsche Paint to Sample Explorer (PTS) built with Bootstrap, Photoshop Scripting and AR QuickLook"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Key Technologies: Bootstrap (HTML\/CSS), JavaScript, JSON, and AR QuickLook<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">PTS Explorer is a quick way to find instagram photos of a given PTS (paint to sample) color. A few months ago I noticed there were many Instagram accounts centered around PTS colors \u2013 this worked well to see many examples of different colors, but what if you didn&#8217;t know all the colors, or wanted to see many examples of a certain color? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These questions prompted me to create PTS Explorer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2133\" height=\"1200\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero.jpg\" alt=\"\" class=\"wp-image-253\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero.jpg 2133w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero-300x169.jpg 300w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero-768x432.jpg 768w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/hero-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><figcaption>Responsive layout using Bootstrap. Tap image for larger view.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2133\" height=\"1200\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching.jpg\" alt=\"\" class=\"wp-image-252\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching.jpg 2133w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching-300x169.jpg 300w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching-768x432.jpg 768w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/searching-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><figcaption>Filter colors by name.&nbsp;Tap image for larger view.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2133\" height=\"1200\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort.jpg\" alt=\"\" class=\"wp-image-250\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort.jpg 2133w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort-300x169.jpg 300w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort-768x432.jpg 768w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_sort-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><figcaption>Filter colors by hue. Tap image for larger view.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2133\" height=\"1200\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1.jpg\" alt=\"\" class=\"wp-image-248\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1.jpg 2133w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1-300x169.jpg 300w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1-768x432.jpg 768w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_1-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><figcaption>View instagram photos tagged with color.&nbsp;Tap image for larger view.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2133\" height=\"1200\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2.jpg\" alt=\"\" class=\"wp-image-249\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2.jpg 2133w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2-300x169.jpg 300w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2-768x432.jpg 768w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/11\/color_example_2-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><figcaption>Example 2. Tap image for larger view.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"AR Quick Look Example\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/vUcCLHLTV8o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>On iOS12 via Mobile Safari preview colors in AR QuickLook.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Photoshop scripting\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/A13YbicwaWc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Use photoshop scripting to quickly generate swatches from JSON data file.<br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"340\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/guards_red.jpg\" alt=\"\" data-id=\"331\" data-link=\"https:\/\/www.nleby.com\/longform\/2018\/11\/06\/pts-explorer\/guards_red\/\" class=\"wp-image-331\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/guards_red.jpg 400w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/guards_red-300x255.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"340\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/lizard_green.jpg\" alt=\"\" data-id=\"332\" data-link=\"https:\/\/www.nleby.com\/longform\/2018\/11\/06\/pts-explorer\/lizard_green\/\" class=\"wp-image-332\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/lizard_green.jpg 400w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/lizard_green-300x255.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"340\" src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/mexico_blue.jpg\" alt=\"\" data-id=\"333\" data-link=\"https:\/\/www.nleby.com\/longform\/2018\/11\/06\/pts-explorer\/mexico_blue\/\" class=\"wp-image-333\" srcset=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/mexico_blue.jpg 400w, https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2018\/12\/mexico_blue-300x255.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.ptsexplorer.com\">https:\/\/www.ptsexplorer.com<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>Key Technologies: Bootstrap (HTML\/CSS), JavaScript, JSON, and AR QuickLook PTS Explorer is a quick way to find instagram photos of a given PTS (paint to sample) color. A few months&hellip;<\/p>\n<p> <a class=\"more-link\" href=\"https:\/\/www.nleby.com\/longform\/2018\/11\/06\/pts-explorer\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":253,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[13],"tags":[32,24,26,25,27,29,28,23,30,31,33],"class_list":{"0":"post-247","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-personal","8":"tag-ar-quicklook","9":"tag-bootstrap","10":"tag-css","11":"tag-html","12":"tag-javascript","13":"tag-paint-to-sample","14":"tag-photoshop-scripting","15":"tag-porsche","16":"tag-pts","17":"tag-responsive","18":"tag-website"},"_links":{"self":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":10,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/247\/revisions\/451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media\/253"}],"wp:attachment":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}