http://github.com/dylang/node-rssGatsbyJSTue, 03 Dec 2024 17:31:23 GMThttps://justin.isamaker.com/internet-in-a-box/https://justin.isamaker.com/internet-in-a-box/Wed, 30 Jun 2021 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Expanding Internet in a Box's Storage on a Raspberry Pi", "date": "2021-06-30T00:00:00-0500", "teaser": "Running Internet in a Box on a Pi is great until you run out of storage. Check out this post to see how I set up my instance.", "featuredImage": "internet-in-a-box.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "The ", mdx("a", { href: "https://github.com/iiab/iiab", target: "_new" }, "Internet in a Box project"), " provides a suite of tools and knowledge that can be accessed even if you don\u2019t have internet connectivity. Their project page bills it as a \u201Cfree Digital Library of Alexandria.\u201D When I bumped into their project on ", mdx("a", { href: "https://news.ycombinator.com/item?id=27568332", target: "_new" }, "Hacker News"), ", I knew that I had to get one set up. I live in a place that\u2019s frequently affected by hurricanes, and much like the rest of the population in a post-2020 world, preparedness has been more on my mind lately. There is some valuable emergency-related material that you can install on the box, but it\u2019s also just a good source of entertainment and information if the internet does go down for a prolonged period of time. "), mdx("p", null, "IIAB is built to run on any UNIX-based device, which makes the Raspberry Pi a great candidate for a host. I chose to build mine on a Raspberry Pi 4 Model B. This lets me run the IIAB project as a full desktop if I\u2019d like to, or just utilize the option to run the Pi as an access point in order to access it via other devices."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/9953b2efe91e5f104ab8abc2ee361248/c08c5/internet-in-a-box.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABKY8vRYi//8QAGRABAQEBAQEAAAAAAAAAAAAAAgEDAAQS/9oACAEBAAEFArpYh6LOyX0FkVb5lOwKg//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAICAgMAAAAAAAAAAAAAAAARAjEBIhIhQf/aAAgBAQAGPwLg6FmLO7H6ayNrZ//EABwQAAICAwEBAAAAAAAAAAAAAAABEVEhMUGh8P/aAAgBAQABPyFmaPHyGe407HUGGOcYujPzeDB0H//aAAwDAQACAAMAAAAQyP8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQBB/9oACAEDAQE/EEci/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxQf/aAAgBAgEBPxATs7f/xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMVFhocH/2gAIAQEAAT8QmaiUNvRXvBFBAFa8uA3RWHfP3FxZdk3OcbnRs3WBxiF3es//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Internet in a Box running on a Raspberry Pi", "title": "Internet in a Box running on a Raspberry Pi", "src": "/static/9953b2efe91e5f104ab8abc2ee361248/c08c5/internet-in-a-box.jpg", "srcSet": ["/static/9953b2efe91e5f104ab8abc2ee361248/f93b5/internet-in-a-box.jpg 300w", "/static/9953b2efe91e5f104ab8abc2ee361248/b4294/internet-in-a-box.jpg 600w", "/static/9953b2efe91e5f104ab8abc2ee361248/c08c5/internet-in-a-box.jpg 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Internet in a Box running on a Raspberry Pi")), mdx("p", null, "I started by using one of IIAB\u2019s pre-formatted SD images, but quickly realized that I wanted more space to store content than was available on my SD card. High-capacity SD cards exist, but the price skyrockets fairly quickly with the amount of storage, and I was trying to set this project up with stuff that I had laying around. I decided that I\u2019d use a spare external hard drive that I had to expand the storage capacity instead. Sounds easy, right? Nope. Turns out that IIAB will let you copy things over to a drive, but actually letting it use the drive as its base storage was a little more complicated. There is some documentation on their site for how to do this, but that didn\u2019t work for me. I ended up replacing the SD card with the entire system mounted onto the hard drive, which also allowed me to utilize the full 2T for the project\u2019s storage. "), mdx("h3", null, "Booting Your Raspberry Pi from a External Drive"), mdx("p", null, "After I hit the issues with IIAB not wanting to install content anywhere else besides the 16GB SD card, I decided to just run everything from the hard drive. You\u2019ll still need a MicroSD to start, but once you get everything set up, you\u2019ll be able to ditch the SD and run your Pi exclusively off the hard drive."), mdx("p", null, "This portion of the process is specific to Raspberry Pi 4 Model B\u2019s and later, or any other BCM2711-based devices. If you\u2019re using an older Pi, your sequence to complete this step will look different."), mdx("p", null, "To start, you\u2019ll need a SD card with the latest version of Raspbian on it. Do not use NOOBS\u2013it will not work with IIAB. You can get that by using the ", mdx("a", { href: "https://www.raspberrypi.org/software/", target: "_new" }, "Raspberry Pi Imager"), "."), mdx("p", null, "Go through your usual Pi setup, and then attach your hard drive to your Pi and power everything up. You\u2019ll need to be able to get to ", mdx("inlineCode", { parentName: "p" }, "raspi-config"), " on your Pi, which means you\u2019ll either need to be able to SSH/VNC into it, or have access to a screen and keyboard. "), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "Once your Pi is booted up, run ", mdx("code", null, "sudo raspi-config"), " or open the config tool via the GUI if you're using a screen. The specific option that we're looking for is under ", mdx("code", null, "Advanced Options > Boot Order"), ". We want our Pi to boot from the USB, so we select \"USB Boot\".", mdx("br", null), mdx("br", null), mdx("em", null, "Do not reboot your Pi!"), " Before we reboot, we want to copy our Pi's card over to our external hard drive."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c8717da3450bbe4412125788c693e348/d9b5d/usb-boot.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "64.99999999999999%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAABbUlEQVQ4y62Q2U7CQBiF594rERNFTeRtXN7FWCNIEBQTvfAVWKTFSGsjS8tSC3QDJPGpjn9bkFIgauLFl/+cM2f+SYZFYm24bP6RyBrYzqGCGLEfJO6iTrWKven0dNzvxEjv0gzi7mJl4R3lUhtCXoXw1IHAa+CLLU/zBdXTlXLX99R7pvNyXkGJfKmio0j3C25GkyfY5HOMfk2CmEpAuklD5M4gXl1CzqQgk68mL9DIZSDfXqOa4FDLZSGlk6iRV+9zaN5loTw+YOQM8DFxwAzTgt7VoLyIUKsSWqLkzbb06uHmXfmNtOydzXK9Vke/oRBNDJQWjIEJwzDBTNOEZdtwxmOf0Wg+p9qe6QDWcDjHcWBZFtxdbCa+MYxF/wfcXWxV+NvLq7q00EaQXm9Af2EhnC/3+l43nDPH0RFE1xV6WUM4D6NpDa8bztnRyTmCHJ9yxGK2Cr/HLeVsI1rHAltToj+wpse2Dzr4T74ApBOv0o1kvewAAAAASUVORK5CYII=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Selecting USB Boot from Raspi-Config", "title": "Selecting USB Boot from Raspi-Config", "src": "/static/c8717da3450bbe4412125788c693e348/c1b63/usb-boot.png", "srcSet": ["/static/c8717da3450bbe4412125788c693e348/5a46d/usb-boot.png 300w", "/static/c8717da3450bbe4412125788c693e348/0a47e/usb-boot.png 600w", "/static/c8717da3450bbe4412125788c693e348/c1b63/usb-boot.png 1200w", "/static/c8717da3450bbe4412125788c693e348/d9b5d/usb-boot.png 1224w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Selecting USB Boot from Raspi-Config"), "\n ")), mdx("p", null, "I used the ", mdx("a", { href: "https://www.raspberrypi.org/blog/another-update-raspbian/", target: "_new" }, "SD Card Copier tool"), " on Raspbian to clone my SD to my HD. If you are working with a Raspbian without a desktop, or if you don\u2019t have access to something that will let you see the desktop, you may be able to run this part with ", mdx("a", { href: "https://github.com/billw2/rpi-clone", target: "_new" }, "RPI-Clone"), ", but using the visual tool is how I did this for my own instance."), mdx("p", null, "Open the SD Card Copier by going to Accessories in the main Raspberry Pi menu. You want to copy from your Micro SD Card (probably ", mdx("inlineCode", { parentName: "p" }, "/dev/mmcblk0"), ") to your external hard drive (probably ", mdx("inlineCode", { parentName: "p" }, "/dev/sda"), "). Once your card has finished copying, shut down your Pi, remove your MicroSD card, and then turn your Pi back on. It should boot straight from the hard drive now. If something in this process doesn\u2019t work for you, I followed ", mdx("a", { href: "https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb", target: "_new" }, "this guide from Tom\u2019s Hardware"), " the first time I was setting my hard drive up, and there may be an answer for you there."), mdx("h3", null, "Installing IIAB"), mdx("p", null, "Since we did a little bit of configuration on our own to boot from the HD, we aren\u2019t able to use the pre-fab SD image of IIAB. Instead, we\u2019ll use the curl command listed in ", mdx("a", { href: "http://wiki.laptop.org/go/IIAB/FAQ#Is_a_quick_installation_possible.3F", target: "_new" }, "their FAQ"), "."), mdx("p", null, "Run ", mdx("inlineCode", { parentName: "p" }, "curl d.iiab.io/install.txt | sudo bash"), " on the Pi to get the latest pre-release of IIAB. As noted in their docs, this step can take a long time to complete depending on which size of installation you choose when prompted after running the curl command. It\u2019s also strongly recommended to be connected to a fast network via ethernet for this step. I went with a medium-sized installation, which gets you all of the basic tools like WordPress and NextCloud, but leaves off some of the heavier items like the Internet Archive\u2019s Wayback Machine, phpMyAdmin, and VOIP tools. If you\u2019re unsure about which size you want to install, make sure you check out ", mdx("a", { href: "http://wiki.laptop.org/go/IIAB/FAQ#What_services_.28IIAB_apps.29_are_suggested_during_installation.3F", target: "_new" }, "the comparison table"), ". "), mdx("h3", null, "Troubleshooting the One-Line IIAB Install"), mdx("p", null, "They aren\u2019t kidding when they tell you that you may need to run ", mdx("inlineCode", { parentName: "p" }, "sudo iiab"), " multiple times to get the installation to run successfully. Keep an eye on your console output, and make sure that you start the process again with that command if the process dies."), mdx("p", null, "I had a particular error with NextCloud\u2019s installation that required me to jump into MySQL to fix it. "), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/fc9f0e3326286ff6399e0c15c87b5115/2a08f/nextcloud-sql-error.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "9.333333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAeElEQVQI1y3M2w6CMBAEUKRVoiExxsh29KFBxGJB1P//uHG8PJzsfYv1yXEFx+rg6I8lS5P9gr7xtMGIEQy3wJACMSuOkmX4x/ybfWqTojbHrY5rPdzF5ddGvSZW7J7GdgY7PW0zeFbe38H0Aq8P5RN4SRK1I728AaphM6gHgqPyAAAAAElFTkSuQmCC')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "SQL error regarding NextCloud during install", "title": "SQL error regarding NextCloud during install", "src": "/static/fc9f0e3326286ff6399e0c15c87b5115/c1b63/nextcloud-sql-error.png", "srcSet": ["/static/fc9f0e3326286ff6399e0c15c87b5115/5a46d/nextcloud-sql-error.png 300w", "/static/fc9f0e3326286ff6399e0c15c87b5115/0a47e/nextcloud-sql-error.png 600w", "/static/fc9f0e3326286ff6399e0c15c87b5115/c1b63/nextcloud-sql-error.png 1200w", "/static/fc9f0e3326286ff6399e0c15c87b5115/2a08f/nextcloud-sql-error.png 1422w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "SQL error regarding NextCloud during install")), mdx("p", null, "To fix that error, login to MySQL by running ", mdx("inlineCode", { parentName: "p" }, "sudo mysql"), ". Once logged in, check that the NextCloud database exists by running ", mdx("inlineCode", { parentName: "p" }, "SHOW DATABASES;"), ". If it\u2019s there, delete it by running ", mdx("inlineCode", { parentName: "p" }, "DROP DATABASE nextcloud;"), ", exit MySQL, and then run ", mdx("inlineCode", { parentName: "p" }, "sudo iiab"), " to attempt the installation again."), mdx("h3", null, "Logging In and Installing Content"), mdx("p", null, "Once your installation successfully completes, you should be able to access your IIAB by pointing a browser at ", mdx("inlineCode", { parentName: "p" }, "box.local"), ". You can find the ", mdx("a", { href: "http://wiki.laptop.org/go/IIAB/FAQ#What_are_the_default_passwords.3F", target: "_new" }, "default passwords here"), ", and should immediately change them as well as your Pi\u2019s password since this project is connected to the internet. "), mdx("p", null, "Your IIAB dashboard is accessible at ", mdx("a", { href: "http://box.local/admin/", target: "new" }, mdx("a", { parentName: "p", "href": "http://box.local/admin" }, "http://box.local/admin")), ". You can find available content by navigating to the \u201CInstall Content\u201D menu to browse through ZIM files and OER2Go modules. With your external hard drive running the entire installation, you should have ample space to install information to your heart\u2019s content. To verify that your storage is hooked up correctly, you can go to \u201CManage Content\u201D inside the \u201CInstall Content\u201D menu to see your available space."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/6ec882424ec086562d3ca712cfb3942b/6b26f/manage-content.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "34.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAABYklEQVQoz5WRS0vDQBSF80PFggsRdCWurKAbxR/gCxFd6EJRULfahZu2VihWI9KXaU2aNJNHE2tDHjU9zh1rwaUXPs6ZLG6+SSRd11Gr1VCv1wWapqHRaECWZZimCZo0TTEajf6QpmNGY8Znqd1uo1qtgpIWdTodDIdDhGEoFv13JNd1hRUtIluy8jxP0Ov1YNs2HMcRUA8Gn2BegOxpBWsXT9i8fhGsnFWwcSVDMgwDiqIIVFWdQMaU9Jx6q9VCs/mGMBiA+SFm9++xcPSAxeMylk7KmDsoiZQYM6Gp7wLHtkDGZGJZlrBijE0s4zgW17L7ETd8RJZbrZ4/CdNlfl6/5Ib8O6LLXERJCupxkiDh/F4xiiJh6fs+Qt57joWW6SOzW8D0dh4ze0VkdgqY2spj/rAE6Wugw1KKCJiMtK/w9//8LVoQBIEwok6LaWKeH0GEnNzF7bMhMicbuOH97tXEN9+9/CRNqj+eAAAAAElFTkSuQmCC')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Manage content screen showing available space", "title": "Manage content screen showing available space", "src": "/static/6ec882424ec086562d3ca712cfb3942b/c1b63/manage-content.png", "srcSet": ["/static/6ec882424ec086562d3ca712cfb3942b/5a46d/manage-content.png 300w", "/static/6ec882424ec086562d3ca712cfb3942b/0a47e/manage-content.png 600w", "/static/6ec882424ec086562d3ca712cfb3942b/c1b63/manage-content.png 1200w", "/static/6ec882424ec086562d3ca712cfb3942b/6b26f/manage-content.png 1658w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Manage content screen showing available space")), mdx("p", null, "If you\u2019re on an internet plan with data caps, it may make sense to space your usage out over a few billing payments - it\u2019s pretty easy to get carried away and download hundreds of gigs of content. There\u2019s a lot of really great stuff available to install. The medium installation gives you tools like WordPress and NextCloud if you\u2019re using the project for more long-term information sharing. I also grabbed the entirety of Wikipedia, a few medical guides, the CDC\u2019s website, satellite imagery and OpenStreetMap data of North America, Project Gutenberg, a bunch of TED Talks, lots of archived StackOverflow sub-sites, and RadioLab recordings. In reality, this will probably only be used for entertainment during extended power outages, but it\u2019s nice to have on hand if you already have a spare Pi and hard drive that you aren\u2019t using. ")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/sojourn-fare/https://justin.isamaker.com/sojourn-fare/Sun, 02 Sep 2018 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Sojourn Fare", "date": "2018-09-02T00:00:00-0500", "teaser": "Growing gourmet mushrooms can be hard, but it gets easier when you have a data-heavy AgTech startup doing it for you.", "featuredImage": "sojourn.jpg", "externalLink": "http://sojournfare.com" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "Sojourn Fare was an AgTech startup that I co-founded in 2016. The company produced IoT environmental control units that helped make mushroom cultivation approachable and reliable. While growing most mushrooms isn\u2019t very hard on its own, there are lots of things that can go wrong during the growth cycle that will completely ruin a crop. Those bumps in the road are why Roman Titus, my co-founder, came to seek out my help. Roman had a batch of Pleurotus ostreatus, more commonly known as oyster mushrooms, growing in his apartment. He lost an entire container of oysters to trichoderma mold after leaving on some last-minute travel for a few days, and had a hunch that technology may be able to help prevent that from happening again. We set out to create a more user-friendly system that did a lot of the hard work of mushroom cultivation for you."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1080px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/26c92316fc042649d76b0cbcfe9b1cc0/47311/sojourn-2.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "47.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABbvyWEZJD/8QAGxABAAICAwAAAAAAAAAAAAAAAQISAAMEITH/2gAIAQEAAQUCK4nbtiPGWslrt9//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAeEAABAwQDAAAAAAAAAAAAAAAAAQIRAxIxcUJhkv/aAAgBAQAGPwKxG+Tj0Q5ySZKmhNH/xAAcEAEBAQADAAMAAAAAAAAAAAABEQAhMUFhgZH/2gAIAQEAAT8hVVI99j7zopXmbijfiY0iOX3IorBP3DT/2gAMAwEAAgADAAAAEMQf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8QZ//EAB8QAQEAAQIHAAAAAAAAAAAAAAERACExUWFxgZGh0f/aAAgBAQABPxAKkux5Bp2uDIyy3aa35jLZxBTyi+8PDlEEXFRxqWx4MJVBU6vVz//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Pleurotus ostreatus growing in one of the first prototype units", "title": "Pleurotus ostreatus growing in one of the first prototype units", "src": "/static/26c92316fc042649d76b0cbcfe9b1cc0/47311/sojourn-2.jpg", "srcSet": ["/static/26c92316fc042649d76b0cbcfe9b1cc0/f93b5/sojourn-2.jpg 300w", "/static/26c92316fc042649d76b0cbcfe9b1cc0/b4294/sojourn-2.jpg 600w", "/static/26c92316fc042649d76b0cbcfe9b1cc0/47311/sojourn-2.jpg 1080w"], "sizes": "(max-width: 1080px) 100vw, 1080px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Pleurotus ostreatus growing in one of the first prototype units")), mdx("p", null, "Our initial prototypes consisted of an Arduino-controlled timing system that ran a roughly scheduled series of environmental modifiers to maintain the right conditions for mushroom growth. This was a good start, and it did meet the requirements of keeping the crop alive without having someone tending to it every day, but there was a lot of room for improvement. Roman had a lot of ideas about the physical design of the unit, and I had a lot that I wanted to do with the software and hardware side, so we both set off to make a more complete prototype."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "We had been relying on an Arduino Mega to run the environmental modifiers, which included heaters, fans, lights, and humidifiers. That would have been fine If we wanted to keep running everything on a basic schedule, but I knew that we could incorporate sensors into the mix to have more relevant data to work with. Keeping things on a schedule was just replicating the traditional methods of mushroom farming\u2013we could make it better! Another big blind spot was being able to see what the unit was actually doing. We had a lot of data being printed out via the serial port on the Arduino telling us what was on or off, but there wasn\u2019t a good way to see the readings, and we definitely weren\u2019t storing the data for long-term analytics. I decided to scrap the old code and move everything over to a Raspberry Pi, which had been around for four years at that point, but was really starting to pick up steam in 2016."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/59b118b39f74bdf1523652258dd544d0/533dc/sojourn-original.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "100%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAQCAQP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAat49EhUGg4ZQb//xAAZEAEBAQEBAQAAAAAAAAAAAAABAgARAyH/2gAIAQEAAQUC8pMzLqnjNm6b441Li03/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAcEAACAAcAAAAAAAAAAAAAAAAAEQEQICExQVH/2gAIAQEABj8CxEW+OSHZjo//xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMUFxgf/aAAgBAQABPyFZTcBrx9RZLktEXpBu+Td8Slj9EeQWXkOocn//2gAMAwEAAgADAAAAEH//ALz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAgEBPxBj/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFBYf/aAAgBAQABPxBqggn0PrzjC9UtADxR8gi7URCKIaLB2jxZdoiauO624cBi8lHwOFT/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "One of the first iterations of the grow chamber", "title": "One of the first iterations of the grow chamber", "src": "/static/59b118b39f74bdf1523652258dd544d0/e5166/sojourn-original.jpg", "srcSet": ["/static/59b118b39f74bdf1523652258dd544d0/f93b5/sojourn-original.jpg 300w", "/static/59b118b39f74bdf1523652258dd544d0/b4294/sojourn-original.jpg 600w", "/static/59b118b39f74bdf1523652258dd544d0/e5166/sojourn-original.jpg 1200w", "/static/59b118b39f74bdf1523652258dd544d0/d9c39/sojourn-original.jpg 1800w", "/static/59b118b39f74bdf1523652258dd544d0/df51d/sojourn-original.jpg 2400w", "/static/59b118b39f74bdf1523652258dd544d0/533dc/sojourn-original.jpg 4911w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "One of the first iterations of the grow chamber"), "\n ")), mdx("p", null, "The use of the Pi opened up a lot of doors for us. Now we didn\u2019t just have something that could turn the modifiers on or off\u2013we had a whole server that we could run on the unit. After replicating the basic functionality of the timers that we had running with the Arduino, I moved on to integrating sensors into the system. I built an application that ran on Node, Express, and Mongo, and was able to respond in real-time to sensors that measured the carbon dioxide, relative humidity, and temperature inside the unit. I had also been hearing a lot of people praise a new JavaScript framework called React over the previous months\u2013I had done a little work with Angular before the notorious 2.0 split, so I wanted to try out React while everything settled down in the Angular community. I decided to use that to build a super simple front-end that would show the current readings for the unit, and we never turned back from using React. It gave us the same flexibility in componentization that we had on the physical side of the unit, and ended up being perfect for us."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "That initial unit worked well enough for us to regularly produce decent yields of oyster mushrooms with very few issues. We were harvesting a little under a pound a week per substrate block, which was acceptable. At this point we were targeting two main groups\u2013restaurants interested in hyperlocal produce, and mushroom enthusiasts looking to grow their own at home. We started building this unit at a local makerspace, and were connected to Google Chicago\u2019s head chef through a mutual friend. They loved the idea of growing food on-site, and encouraged us to build a unit for their cafeteria. Roman facilitated the grow, and we ended up being able to deliver a few pounds of fresh mushrooms to the Google chefs every week."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1080px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/9bcd9e0aa6489538c1424cf4e094341d/47311/sojourn-prototype.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "100%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAQDAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/aAAwDAQACEAMQAAAB8rTXYKFwsqmCpgx//8QAGRABAAMBAQAAAAAAAAAAAAAAAQACEQMQ/9oACAEBAAEFAhgDLZvPC3R5lWwy1ma+f//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABURAQEAAAAAAAAAAAAAAAAAABAB/9oACAECAQE/ASH/xAAbEAACAgMBAAAAAAAAAAAAAAAAAREiAiAhQf/aAAgBAQAGPwLg5Z6WwgoidP/EAB4QAQACAQQDAAAAAAAAAAAAAAEAESExQVFhEHGB/9oACAEBAAE/IT5X3LlQ1Z28Rmq/EKqw76xI5PUVsGZiRqc67eP/2gAMAwEAAgADAAAAEJvXP//EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/ELeDHH//xAAYEQACAwAAAAAAAAAAAAAAAAABEQAQMf/aAAgBAgEBPxBBMQZb/8QAHhAAAgICAgMAAAAAAAAAAAAAAREAITFBUZGh0eH/2gAIAQEAAT8QFsBxOilQUQE7vrqLQEAYBeYXAMwlcUu+4MhuhbLzwtQxJnkD7iBMVMxICOGJoT//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The prototype unit at Google", "title": "The prototype unit at Google", "src": "/static/9bcd9e0aa6489538c1424cf4e094341d/47311/sojourn-prototype.jpg", "srcSet": ["/static/9bcd9e0aa6489538c1424cf4e094341d/f93b5/sojourn-prototype.jpg 300w", "/static/9bcd9e0aa6489538c1424cf4e094341d/b4294/sojourn-prototype.jpg 600w", "/static/9bcd9e0aa6489538c1424cf4e094341d/47311/sojourn-prototype.jpg 1080w"], "sizes": "(max-width: 1080px) 100vw, 1080px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The prototype unit at Google"), "\n ")), mdx("p", null, "We had a little bit of momentum from the Google project, and we had a lot of chefs and restaurants saying that they were interested in the product. One of our contacts at Google mentioned that they had a large refrigerator that they would be willing to donate to us, which we happily took. The size constraints of the first unit limited us to two substrate blocks per growth cycle, which was not enough to justify purchasing the unit for most restaurants. We retrofitted the refrigerator to be able to maintain the environment just like the smaller units, but now we had the potential to produce almost 200 pounds of mushrooms per week. This got us excited about the potential for other businesses like farms to be able to add mushroom production to the services and goods that they offered."), mdx("p", null, "While working with Google was a great clout builder and an extremely fun experience, we quickly realized that the restaurant-focused mushroom business wasn\u2019t going to do us any favors. Smallhold, our major competitor, was already doing an excellent job producing bespoke mushroom-growing chambers for small restaurants in Brooklyn. It was incredibly fun to work on those one-off projects, but they weren\u2019t paying the bills, and Roman and I were still trying to bootstrap the startup. At this point, Roman and I decided to split our focus on what we thought would be the most likely to have some success\u2013he focused on making a consumer version of the kit that could fit on a kitchen counter, and I focused on building something that could be used in classrooms."), mdx("p", null, "Roman\u2019s consumer-focused venture had a decent strategy that seemed worth pursuing. Consumer\u2019s attitudes around mushrooms were evolving. There was a massive opportunity in the medicinal market for mushrooms like reishis or lion\u2019s manes, and foodies were quickly realizing that there were other kinds of mushrooms besides the white button style that were ubiquitously available. He took the same technology setup that I used for the rest of the products and built a beautiful iteration called the Model A."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "786px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/79ffff620d4594c6cbdd988e0d7ec1e3/28be2/sojourn-model-a.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "61.33333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGlmc+bpIxP/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAECEhAR/9oACAEBAAEFAtSJ+Sqknm2f/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BiP/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/Aar/xAAZEAACAwEAAAAAAAAAAAAAAAAAARAhMUH/2gAIAQEABj8CFSww5P8A/8QAHBAAAwEAAgMAAAAAAAAAAAAAAREhADFBYYGR/9oACAEBAAE/IQBQCHkjIFJ1LY+sfarxm+hkGL5v/9oADAMBAAIAAwAAABCLL//EABURAQEAAAAAAAAAAAAAAAAAAAEA/9oACAEDAQE/EASL/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Qpb//xAAcEAEAAwEBAAMAAAAAAAAAAAABABEhQTFhgZH/2gAIAQEAAT8QO3ESgbTryd300LddszkqU7N1Vhns3sz6Ut/saG0+viKxXeuZ/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Sojourn Model A", "title": "Sojourn Model A", "src": "/static/79ffff620d4594c6cbdd988e0d7ec1e3/28be2/sojourn-model-a.jpg", "srcSet": ["/static/79ffff620d4594c6cbdd988e0d7ec1e3/f93b5/sojourn-model-a.jpg 300w", "/static/79ffff620d4594c6cbdd988e0d7ec1e3/b4294/sojourn-model-a.jpg 600w", "/static/79ffff620d4594c6cbdd988e0d7ec1e3/28be2/sojourn-model-a.jpg 786w"], "sizes": "(max-width: 786px) 100vw, 786px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Sojourn Model A")), mdx("p", null, "While Roman was shopping the consumer level product around, I took on the responsibility of developing something that we could use to work with educators. We had a lot of organic interest from teachers, but we knew that the high price point of individual units wouldn\u2019t be viable for most schools. I worked with a series of schools that already had an agricultural component to them in order to figure out what an educational product would look like. After a lot of market research and convincing, we ended up getting connected to ComEd, the power company for Illinois. ComEd was hosting an event called the Solar Spotlight, and this year they wanted a food-focused product that the students could build. The gist of the event was that ComEd would invite students from underprivileged parts of Chicago to come work with them over two weekends to learn about STEM and solar power. They loved our idea, and were incredibly interested in getting students excited about growing their own food. They asked us if we could make a kit version that high schoolers could assemble, and if we could integrate solar power into the unit."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "I set out to determine what aspects of the unit we could actually power via solar, and Roman took to redesigning the unit with a focus on bringing down the cost and making it accessible to high school students. We ended up modifying a small storage bin to serve as the main compartment for the unit. All of the modifiers, sensors, and other components were consolidated to one central 3D-printed mount that lived on the back of the enclosure. The amount of solar power that we could generate with the nine watt, six volt panel that we sourced wasn\u2019t enough to run everything, but it was enough to power the Raspberry Pi that controlled all of the moving parts."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "500px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/34e1104edf026a5e3314b244d83b8e59/41099/builders-kit.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "63.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABobpmhnyJH//EAB0QAAEDBQEAAAAAAAAAAAAAAAIBAwQAERITFDL/2gAIAQEAAQUCighnzNWL1GJdrrqiOVf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAEBAAEFAAAAAAAAAAAAAAABAFEQEjEyQf/aAAgBAQAGPwJEG6zpux5m4L//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhMf/aAAgBAQABPyHjYB7rROkM8GYkHGe4uV66Mabj/9oADAMBAAIAAwAAABAAP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABYRAAMAAAAAAAAAAAAAAAAAABARQf/aAAgBAgEBPxBwf//EABwQAQACAgMBAAAAAAAAAAAAAAEAESFBUWFxkf/aAAgBAQABPxBFYA1C813HAVduWF7yR4MZ0rr1xBly5AHRUceS6BW3kt+z/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The Builder's Kit", "title": "The Builder's Kit", "src": "/static/34e1104edf026a5e3314b244d83b8e59/41099/builders-kit.jpg", "srcSet": ["/static/34e1104edf026a5e3314b244d83b8e59/f93b5/builders-kit.jpg 300w", "/static/34e1104edf026a5e3314b244d83b8e59/41099/builders-kit.jpg 500w"], "sizes": "(max-width: 500px) 100vw, 500px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The Builder's Kit"), "\n ")), mdx("p", null, "We hosted two events with ComEd\u2013one for Black History Month, and one for the National Hispanic Heritage Month. Each event consisted of groups between sixty and seventy students assembling and testing their mushroom growing unit in small groups over the span of four hours. The work was challenging, but ComEd provided employee mentors to sit with each group to make sure that they could successfully complete their kit. Students were informed at the end of the day that the units they built would be delivered back to the schools for use in their science classes over the next semester. Roman and I had been working on sample curriculum to teach experimental design using the kits\u2013we wanted to make sure that the educators who would be receiving these kits had a clear path forward on how to integrate them into their lesson plans without a ton of extra work."), mdx("div", { "className": "gatsby-resp-iframe-wrapper", "style": { "paddingBottom": "56.09243697478992%", "position": "relative", "height": "0", "overflow": "hidden", "marginBottom": "1.0725rem" } }, " ", mdx("div", { parentName: "div", "style": { "padding": "56.25% 0 0 0", "position": "relative" } }, " ", mdx("iframe", { parentName: "div", "src": "https://abc7chicago.com/video/embed/?pid=5143962", "frameBorder": "0", "allowFullScreen": true, "style": { "position": "absolute", "top": "0", "left": "0", "width": "100%", "height": "100%" } }), " "), " "), mdx("br", null), mdx("p", null, "The Solar Spotlight events were extremely successful, but unfortunately financial circumstances led to us having to shutter the company in the spring of 2019. Roman had always been paying the bills with a mix of freelance and working on the startup, and I had been doing the same after I left my full-time role at Fjord in the summer of 2018. Roman made the tough decision to move back to Ohio, and I decided that I would try to tackle our final Solar Spotlight event the following September on my own. That outcome is obviously not what either of us wanted, but I wouldn\u2019t trade the experience for anything. While Sojourn wasn\u2019t the first startup that I worked on, it was the one that got me hooked. The things that I learned and ideas that I explored there drastically changed my practice as a developer, and I would not be writing the same kind of code or approaching problems in the same way without having worked on those products. ")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/put-to-light/https://justin.isamaker.com/put-to-light/Tue, 10 Jul 2018 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "A.C. Moore Put to Light", "date": "2018-07-10T00:00:00-0500", "teaser": "A custom-built Put to Light system for A.C. Moore's warehouses to increase order processing speed and accuracy.", "featuredImage": "ptl-walls.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "Retailers have their work cut out for them if they\u2019re going to keep up with Amazon. The scale and speed at which they operate has completely transformed consumer expectations\u2013two-day shipping has become the de facto standard for delivered goods. A.C. Moore, a major arts and crafts retailer for the eastern part of the United States, realized that they would have a major problem on their hands if they didn\u2019t adapt to meet that shipping speed. There\u2019s only so much control that they have over an order when it leaves their warehouse, but they can control how quickly they process orders inside their operation."), mdx("p", null, "One of the pieces of their order fulfillment puzzle was a strategy called \u201CPut to Light.\u201D Whenever an order comes into their warehouse it is split into three major phases\u2013picking, sorting, and packing. During the picking phase, items are retrieved from the warehouse floor and sent along conveyors in a series of \u201Cpick waves.\u201D When a pick wave is ready to be sorted, it gets diverted to a put wall. That\u2019s where I come in! A.C. Moore knew that they wanted put walls, but they weren\u2019t happy with the existing options, and they wanted one that would integrate perfectly with their custom-built warehouse management system. They asked if I could build them nine custom put walls, and before I knew it, I was knee deep in warehouse logistics!"), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/64d95373b0eb3bf4163bfb0cb4075088/89513/ptl-walls.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "66.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAVZbsc83I//EABwQAAIABwAAAAAAAAAAAAAAAAABAgMQERIhMf/aAAgBAQABBQJy9wqw6PmKP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAABAgMf/aAAgBAQAGPwIRP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExYf/aAAgBAQABPyGERz0bprPEJXVQt6Jo7Yf/2gAMAwEAAgADAAAAEOjf/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qh//EABYRAQEBAAAAAAAAAAAAAAAAABEAAf/aAAgBAgEBPxBwm//EABsQAQEAAgMBAAAAAAAAAAAAAAERACExQVHw/9oACAEBAAE/ENWKrttDnBRUfa4dUXu40CjXhlAIUlnGDtdvUz//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The completed put walls", "title": "The completed put walls", "src": "/static/64d95373b0eb3bf4163bfb0cb4075088/e5166/ptl-walls.jpg", "srcSet": ["/static/64d95373b0eb3bf4163bfb0cb4075088/f93b5/ptl-walls.jpg 300w", "/static/64d95373b0eb3bf4163bfb0cb4075088/b4294/ptl-walls.jpg 600w", "/static/64d95373b0eb3bf4163bfb0cb4075088/e5166/ptl-walls.jpg 1200w", "/static/64d95373b0eb3bf4163bfb0cb4075088/d9c39/ptl-walls.jpg 1800w", "/static/64d95373b0eb3bf4163bfb0cb4075088/df51d/ptl-walls.jpg 2400w", "/static/64d95373b0eb3bf4163bfb0cb4075088/89513/ptl-walls.jpg 4288w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The completed put walls")), mdx("p", null, "At its core a put wall is a fairly simple technology. We needed to be able to light up a specific location under a bin on a shelf where an item would be placed, and then listen for a button click to confirm that the picker put the item in the bin. While simple from a hardware perspective, there is a lot that needs to happen on the software side of things, and it gets increasingly complex as you try to scale it. Whatever solution I came up with needed to be able to communicate to the endpoints of their warehouse management system (WMS). It also needed to be able to do it for roughly 500 bins at a time, with absolutely no errors, as fast as it possibly could."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "I decided to use a Raspberry Pi for the brain of each put wall. We needed to be able to perform some pretty complex handshakes with the WMS that would have been an absolute nightmare to attempt on an Arduino. While the Pi was better-suited for the networking side, it does not ship with the kind of inputs and outputs that we needed. Each put wall needed to listen to 52 buttons and run approximately six thousand WS2812B LEDs.", mdx("br", null), mdx("br", null), "The first thing to account for were the buttons. We needed twice as many inputs as were available on the Pi, which meant that I\u2019d have to find an external way to expand the I/O capabilities. I sourced an excellent stackable HAT from ModMyPi that gave us access to two MCP23017 port expander chips. By stacking two of these HATs on the Pi we could move all of the inputs from the buttons off of the main GPIO pins. That left enough room for us to drive the extremely long LED strips and account for all the buttons."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c7c17638e588ddb37456820b250c05dc/9568a/gpio-config.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "133.33333333333331%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgH/xAAWAQEBAQAAAAAAAAAAAAAAAAACAwH/2gAMAwEAAhADEAAAAV7xAKVDRyUp4VwhNX//xAAbEAABBAMAAAAAAAAAAAAAAAABAAIRIQMSMv/aAAgBAQABBQLYElzYeLyAQKVrI2tFIBPLuF//xAAYEQEBAAMAAAAAAAAAAAAAAAAAARESQf/aAAgBAwEBPwHixlvX/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEREP/aAAgBAgEBPwGCyH//xAAbEAACAgMBAAAAAAAAAAAAAAAAASExEBEggf/aAAgBAQAGPwIsobhCIa9N4lrj/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFBUWH/2gAIAQEAAT8hULeeiVVGJS+kw3wPfsFkkV6AYZr5JariwGrKuAjGZzP/2gAMAwEAAgADAAAAELvqfP/EABcRAQEBAQAAAAAAAAAAAAAAAAEAETH/2gAIAQMBAT8QMQ5At1kR/8QAGBEBAQADAAAAAAAAAAAAAAAAAAEhMXH/2gAIAQIBAT8Q6VhNLD//xAAeEAEAAwACAgMAAAAAAAAAAAABABEhMUFRcYGh8f/aAAgBAQABPxCp0OWle4sLuFeXiOtFKfbE4jhu2uk998ZxHR2m7cLiHKgBb+QElhSdwBBVWtY0RoFsADr5hi1teY6nC6zkrqs//9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The MCP23017 HAT with everything plugged in", "title": "The MCP23017 HAT with everything plugged in", "src": "/static/c7c17638e588ddb37456820b250c05dc/e5166/gpio-config.jpg", "srcSet": ["/static/c7c17638e588ddb37456820b250c05dc/f93b5/gpio-config.jpg 300w", "/static/c7c17638e588ddb37456820b250c05dc/b4294/gpio-config.jpg 600w", "/static/c7c17638e588ddb37456820b250c05dc/e5166/gpio-config.jpg 1200w", "/static/c7c17638e588ddb37456820b250c05dc/d9c39/gpio-config.jpg 1800w", "/static/c7c17638e588ddb37456820b250c05dc/df51d/gpio-config.jpg 2400w", "/static/c7c17638e588ddb37456820b250c05dc/9568a/gpio-config.jpg 3024w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The MCP23017 HAT with everything plugged in"), "\n ")), mdx("p", null, "The LEDs were split into two long zig-zag strips\u2013one for the putting side on the front, and one for the packing side on the back. The general idea is that when an item is scanned, the bin that it goes in will light up blue on the front of the wall. When a picker places the item in that bin, they hit the button, and then the system checks if anything else needs to go into the bin to complete the order. If the order is ready to ship, then the LEDs on the other side of the wall light up green to let the shipping department know that the bin is ready to be pulled from the wall and packed for shipping. At 3,000 pixels long we were definitely stretching the boundaries of what our Neopixels were capable of. We were, however, able to get great performance out of them thanks to a beefy power supply that was introduced at multiple parts of the circuit and no need for animation along the strips. Ultimately each wall would only have 30 or 40 LEDs turned on at a time in most cases, so we were able to run both strips from two pins on the Pi. We wanted to go with a full RGB LED rather than a solid-colored strip in order to communicate different phases of a pick wave. For instance, if a picker realized that something was wrong after they confirmed an item\u2019s placement, they could flag the location for a QA check from the tablet computer attached to the wall. This would then light up the front and back of the location with orange lights to let both sides know not to proceed with that bin."), mdx("p", null, "After I squared away the physical production side of mounting all the buttons and running all the LEDs, we needed to determine the most efficient way for the Pi to communicate with the WMS. I decided to build a custom API that communicated with the WMS via a MQTT server. MQTT has been around since 1999, but has become increasingly popular because of its usefulness in IoT projects. As its core, MQTT is a super lightweight pub/sub communicator that lets you rapidly send or receive small bits of information. This was perfect for our use case\u2013the wall would subscribe to lighting messages coming from the WMS, and then publish button presses back to the WMS. In addition to the speed of MQTT, you can also set a quality of service. This means that you can say if you want a message to continue trying to send until it receives a confirmation that the message was received. Having the system be able to confirm a message like that was a huge help in making sure that there were zero errors during processing."), mdx("p", null, "We had the luxury of setting up a brand new warehouse for A.C. Moore in Chicago at the start of this project, so we began by only running three of the nine put walls on the new system to make sure that everything worked. There was a fair amount of wear and tear on the shelves since everyone is the warehouse is moving so quickly, but I designed the system to be as modular as possible and to be simple enough for any of the warehouse managers to repair. After a few tweaks to the physical design of the system, we rolled out the other six walls right before Black Friday, where they ran for almost two days solid. Since then A.C. Moore has also installed five of the walls in their main warehouses in Berlin, New Jersey."), mdx("p", null, "The whole process can be a lot to wrap your head around if you aren\u2019t familiar with warehouse logistics. Check out the video below to see what a full pick wave looked like when I was testing it with an A.C. Moore employee."), mdx("video", { src: "/41af92184c63a761f93160b0ff68ccf8/blitsy-pick-wave.mp4", controls: true, muted: true, autoPlay: true, loop: true }), mdx("br", null), mdx("br", null)); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/solar-calculator/https://justin.isamaker.com/solar-calculator/Fri, 30 Jun 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Solar Calculator", "date": "2017-06-30T00:00:00-0500", "teaser": "Using a Raspberry Pi to let homeowners see exactly how much solar potential their house has.", "featuredImage": "solar.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "The first thing we did when I was hired to start the creative technology practice at Fjord Chicago was sit down and establish a few goals. The foremost goal of the entire practice was to get ideas off of a screen and into the real world. When we got a request to revamp the solar installation experience for a major energy provider, we knew that it would be a great opportunity to blend physical and digital experiences to wow their customers."), mdx("p", null, "Our client was located in a state that people thought couldn\u2019t generate enough solar power for it to be worth the effort, but the area actually had a lot of potential for photovoltaic generation. The bulk of the project involved mapping out the entire solar interconnect process and making recommendations about where they could improve their services to be more human-centered, but we also had the opportunity to do extensive research on how their current customers were thinking about solar. We found that customers were often using complicated solar calculators as their first touchpoint in their journey to solar installation, and the current experience left much to be desired."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/6b43bcebe9ba2729b93b457079ffec5d/a2510/solar-2.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "70.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAGaGuuFUNhX/8QAGhAAAwEAAwAAAAAAAAAAAAAAAQIDABITIv/aAAgBAQABBQKp65q5LcN5OMEWm//EABURAQEAAAAAAAAAAAAAAAAAABBB/9oACAEDAQE/Aaf/xAAWEQADAAAAAAAAAAAAAAAAAAABEDH/2gAIAQIBAT8BEX//xAAaEAABBQEAAAAAAAAAAAAAAAABAAIQESIh/9oACAEBAAY/As8QBjQsK2x//8QAGxAAAwACAwAAAAAAAAAAAAAAAAERIVExQWH/2gAIAQEAAT8hXFNFCcDrmh5kw+eOdIuE+mQ//9oADAMBAAIAAwAAABC8D//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8QacQw/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EEC22//EABoQAQADAQEBAAAAAAAAAAAAAAEAESFBMfH/2gAIAQEAAT8QdgJmKpZQ/kl1XyaKuDA3R9mPe6z0smvZ/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The finished prototype", "title": "The finished prototype", "src": "/static/6b43bcebe9ba2729b93b457079ffec5d/a2510/solar-2.jpg", "srcSet": ["/static/6b43bcebe9ba2729b93b457079ffec5d/f93b5/solar-2.jpg 300w", "/static/6b43bcebe9ba2729b93b457079ffec5d/b4294/solar-2.jpg 600w", "/static/6b43bcebe9ba2729b93b457079ffec5d/a2510/solar-2.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The finished prototype")), mdx("p", null, "If you go to an online solar calculator right now, you\u2019ll be asked for all sorts of information like your current monthly energy usage in kilowatt hours, the pitch of your roof, the average duration of sunlight on your property, and all sorts of other questions that the average consumer won\u2019t readily know. In addition to that, calculations can vary wildly based on who is doing the math. We found that some very popular calculators were overly optimistic, while others tried to push the customer to purchase more equipment than they could actually use. With all of the data that this energy provider had about their customers, we knew that we had a chance to make this process a lot more user-friendly."), mdx("p", null, "We wanted our calculator to be a useful tool for getting accurate information about what a solar installation could do for a residential customer, but we also wanted to use it to get folks excited about the solar potential of their home. We came up with the idea of taking the calculator out of the digital space and into the physical world. What better way to excite people than to actually show them a panel at work?"), mdx("p", null, "The prototype needed to be able to collect energy data from an actual panel, then feed that data back into a computer to analyze the data. The first step in that process was to actually get our hands on a few panels and see how they functioned."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "We decided to go with an iPad-sized six watt panel from Voltaic. The panel was designed for rugged use, and came with a connector that we could easily modify to feed into our prototype. We learned our first lesson by testing how long the panel took to charge the USB battery pack that came with the panel. I was on my bike that day, so I decided to strap the unit to my backpack and see if we could charge the battery at all on my ride home."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "500px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/7d2e56d559627aa4343e81aebff17e8c/41099/solar-backpack-1.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "133.33333333333331%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCAwUG/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAF3GtUzehMMoSvgkgD/xAAeEAACAQQDAQAAAAAAAAAAAAABAgMABBEhEBIiMv/aAAgBAQABBQK5lUAPuLyk+TLna3DIs7djWKHyOP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAEDBAMAAAAAAAAAAAAAAAEAAiEQESIxIGFx/9oACAEBAAY/ArDe1kI6WJdbxEuO6BrTCjl//8QAHBAAAgMAAwEAAAAAAAAAAAAAAAERITEQQYFx/9oACAEBAAE/IVtzvSDXovsMkqVtCEtBL8MZggLm6cKiNPTXnH//2gAMAwEAAgADAAAAEAzFz//EABcRAQEBAQAAAAAAAAAAAAAAAAEQESH/2gAIAQMBAT8Q1ORdn//EABgRAAMBAQAAAAAAAAAAAAAAAAABIRAR/9oACAECAQE/EI6US5n/xAAfEAEAAwACAgMBAAAAAAAAAAABABEhMVFBYXGhscH/2gAIAQEAAT8QQbZoRRvMC5SqmPtHl9ILY75iSVXLoK+fX7Dqujmg61ldE4Lxe0eoVZxSpzLXtYAC3RBd/j+JjPSWz//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The Voltaic strapped to my bag", "title": "The Voltaic strapped to my bag", "src": "/static/7d2e56d559627aa4343e81aebff17e8c/41099/solar-backpack-1.jpg", "srcSet": ["/static/7d2e56d559627aa4343e81aebff17e8c/f93b5/solar-backpack-1.jpg 300w", "/static/7d2e56d559627aa4343e81aebff17e8c/41099/solar-backpack-1.jpg 500w"], "sizes": "(max-width: 500px) 100vw, 500px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The Voltaic strapped to my bag"), "\n ")), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "I got home and saw zero charge. I left the panel out in the backyard for two more hours, but still barely got any charge on the battery. The key lesson there was that solar can be extremely slow. We would need to visualize the data in real-time in order to keep a customer engaged."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c3463889d1484f8180554ef63d705f69/a2510/voltaic-test.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAYWbqzqYaD//xAAbEAACAgMBAAAAAAAAAAAAAAABAgADERIhIv/aAAgBAQABBQJnyU9Q1iJVxVUBhrP/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8BoX//xAAaEAACAgMAAAAAAAAAAAAAAAAAIQExAhEi/9oACAEBAAY/AljoYpOmSrLP/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRYUH/2gAIAQEAAT8hLBtzGXzj1EPATArwdQVQ/HkuGNLn/9oADAMBAAIAAwAAABC8H//EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAwEBPxAG3Q3/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QcMhb/8QAHRABAQACAQUAAAAAAAAAAAAAAREAITFBUWFx4f/aAAgBAQABPxCRIKiuvEwiKS0aTqZUp2g+4PJwSunvLHwLCceMUUCS2zP/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Testing the panel from Voltaic", "title": "Testing the panel from Voltaic", "src": "/static/c3463889d1484f8180554ef63d705f69/a2510/voltaic-test.jpg", "srcSet": ["/static/c3463889d1484f8180554ef63d705f69/f93b5/voltaic-test.jpg 300w", "/static/c3463889d1484f8180554ef63d705f69/b4294/voltaic-test.jpg 600w", "/static/c3463889d1484f8180554ef63d705f69/a2510/voltaic-test.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Testing the panel from Voltaic"), "\n ")), mdx("p", null, "I decided to use a Raspberry Pi as the brain for the unit due to its size, cost, and availability. The cable that ran from the solar panel was converted to discharge into a voltage sensor, which was then sent to a database on the Pi. That voltage data was great to see coming through, but we were still missing a part of the puzzle\u2013we needed to know what the sun was doing while we were getting those particular voltage readings. To account for that, I added a TSL2591 luminosity sensor to the project. This sensor lets us measure the amount of visible and infrared light, which helps us get a feel for the external conditions that the prototype was being tested in. After a rough assembly of all of these parts, I went out on a nice summer day to field test the components."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/20568ea1b9fbe8d9bb471c7ce2473ab3/a2510/field-testing-1.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAGTreVImwK//8QAGRAAAgMBAAAAAAAAAAAAAAAAAQIAAxET/9oACAEBAAEFAg4wMHblKa8grVWyf//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AYS//8QAFREBAQAAAAAAAAAAAAAAAAAAABL/2gAIAQIBAT8BtT//xAAcEAABAwUAAAAAAAAAAAAAAAAAAhEhARAxQZH/2gAIAQEABj8ClPRlUkwOPu3/xAAbEAACAwEBAQAAAAAAAAAAAAABEQAhMYFBsf/aAAgBAQABPyFTYTYX5NquLyEng9gAF2bTyJEHqFjP/9oADAMBAAIAAwAAABB/3//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPxCUy//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxBA5bv/xAAeEAACAwABBQAAAAAAAAAAAAABEQAhQTFRYXGxwf/aAAgBAQABPxA+x1IntMhoCKEgoB7PENYta4+RngAUNbhPYNDC5wT18wBG6W9p/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Field testing the sensors", "title": "Field testing the sensors", "src": "/static/20568ea1b9fbe8d9bb471c7ce2473ab3/a2510/field-testing-1.jpg", "srcSet": ["/static/20568ea1b9fbe8d9bb471c7ce2473ab3/f93b5/field-testing-1.jpg 300w", "/static/20568ea1b9fbe8d9bb471c7ce2473ab3/b4294/field-testing-1.jpg 600w", "/static/20568ea1b9fbe8d9bb471c7ce2473ab3/a2510/field-testing-1.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Field testing the sensors")), mdx("p", null, "The field test went well, and I was able to verify that the voltage being sent to the database was accurate with a multimeter. The next step in our process was to start collecting enough data to explore. I took the prototype home and set it outside for two days to start collecting data. The first day I leaned the panel up against a window on the front of my house, which allowed it to get a good stretch of direct sunlight. When noon hit, I realized that I would need to move the unit to simulate a roof-based panel since the sun was now moving over the house. It wasn\u2019t an ideal testing environment, but I went ahead and moved the panel to the backyard for the afternoon."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c41c580c0fce2b453752b943d0e80308/a2510/house-test-1.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQT/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAU2NcSHMR//EABoQAQEAAwEBAAAAAAAAAAAAAAECABESAxP/2gAIAQEAAQUCmugNVrPK+M+qlND/AP/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/Aaf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwFX/8QAGhAAAgIDAAAAAAAAAAAAAAAAABEBIQIQQf/aAAgBAQAGPwJjnJ6RMl9s/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARITFR/9oACAEBAAE/Ib59WXGjM9RjgqOvZT1FPk0S2H//2gAMAwEAAgADAAAAEPPf/8QAFhEBAQEAAAAAAAAAAAAAAAAAAREA/9oACAEDAQE/EJEuu//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/EKp//8QAHxABAQACAQQDAAAAAAAAAAAAAREAMSFBUWFxkcHh/9oACAEBAAE/EHRWtX0YlVdaInzltFrbX7zcPyHYF3LlQiegO+JPG8vBLyHu/mf/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Testing the unit on the front of my house", "title": "Testing the unit on the front of my house", "src": "/static/c41c580c0fce2b453752b943d0e80308/a2510/house-test-1.jpg", "srcSet": ["/static/c41c580c0fce2b453752b943d0e80308/f93b5/house-test-1.jpg 300w", "/static/c41c580c0fce2b453752b943d0e80308/b4294/house-test-1.jpg 600w", "/static/c41c580c0fce2b453752b943d0e80308/a2510/house-test-1.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Testing the unit on the front of my house")), mdx("p", null, "The second day of testing was a little more complicated, but it helped us prove a valuable data point. We had a nice sunny morning that quickly turned into an overcast drizzly day. I was a little bummed as I didn\u2019t think we would get good readings, but the data proved me wrong. It doesn\u2019t matter to the panel if it\u2019s actually clear and sunny outside\u2013it\u2019s looking for infrared light, and there\u2019s still plenty of that on a cloudy day. We were able to show that the panel continued production throughout the rain, which helped us push the point about solar viability in the state that the power company was located in."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/2eda81af1755fd724fa318a0f79ebff3/a2510/house-test-2.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "55.99999999999999%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAF5UWXGKSf/xAAaEAACAwEBAAAAAAAAAAAAAAACAwABIhES/9oACAEBAAEFAliPhw1U7F3huhn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAACAwEAAAAAAAAAAAAAAAAAAQIQIRH/2gAIAQEABj8CjmsVRF2v/8QAHhAAAgEDBQAAAAAAAAAAAAAAAAERITGBUWFxscH/2gAIAQEAAT8hYc5XHG5NohEOcjMC7NU18LWP/9oADAMBAAIAAwAAABAAH//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8QS0p//8QAFhEBAQEAAAAAAAAAAAAAAAAAABFB/9oACAECAQE/EMR//8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBYaH/2gAIAQEAAT8QEqS8hcgibhhK4o7+wfKPopACODnLePG4GyUAeE//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Testing the unit in the drizzle", "title": "Testing the unit in the drizzle", "src": "/static/2eda81af1755fd724fa318a0f79ebff3/a2510/house-test-2.jpg", "srcSet": ["/static/2eda81af1755fd724fa318a0f79ebff3/f93b5/house-test-2.jpg 300w", "/static/2eda81af1755fd724fa318a0f79ebff3/b4294/house-test-2.jpg 600w", "/static/2eda81af1755fd724fa318a0f79ebff3/a2510/house-test-2.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Testing the unit in the drizzle")), mdx("p", null, "Now that we had data, we could start designing the interface that the customer would use to see their data. We knew that the productized unit wouldn\u2019t ship with a display on it, but I went ahead and added a Raspberry Pi touchscreen for the sake of the demo. This screen needed to show how the panel was performing, what our luminosity readings were, and how all of that stacked up against the customer\u2019s usage data."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "The first version of the data dashboard was the bare minimum to make sure that we were getting our readings in. None of the data was normalized, the timestamps were still unformatted, and we didn't have usage data yet."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/5c380da6ff90df978a61cc1fa4ed09cd/a2510/dash-1.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "56.333333333333336%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABuySuXGECf//EAB4QAAAEBwAAAAAAAAAAAAAAAAABAwQCERITISMy/9oACAEBAAEFAm87KnOQ3PStEdBD/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAQMFAAAAAAAAAAAAAAAAAAECERAyUXGh/9oACAEBAAY/AmwLOC/o0dqn/8QAHhABAAEDBQEAAAAAAAAAAAAAAQAhMUERUWFxobH/2gAIAQEAAT8hdME57mGCqC7e0Q0Hf7Lwylk//9oADAMBAAIAAwAAABAL3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABYRAQEBAAAAAAAAAAAAAAAAABEQIf/aAAgBAgEBPxBcn//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExUXHR/9oACAEBAAE/EKHVG30jc9CFaMblg4bgEIH0h+sNHIkXs//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The rough draft of the dashboard", "title": "The rough draft of the dashboard", "src": "/static/5c380da6ff90df978a61cc1fa4ed09cd/a2510/dash-1.jpg", "srcSet": ["/static/5c380da6ff90df978a61cc1fa4ed09cd/f93b5/dash-1.jpg 300w", "/static/5c380da6ff90df978a61cc1fa4ed09cd/b4294/dash-1.jpg 600w", "/static/5c380da6ff90df978a61cc1fa4ed09cd/a2510/dash-1.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The rough draft of the dashboard"), "\n ")), mdx("p", null, "The full dashboard evolved into something much easier to interact with. The first screen shows the averaged voltage every minute in orange, and the total power generated in red. The second screen shows our luminosity readings from the day\u2013this particular screen is showing the rainy day readings. If you cross reference the luminosity readings with the power readings, you\u2019ll see that our power didn\u2019t dip when we bumped into cloudy conditions."), mdx("p", null, "The last screen shows what happens when we take that generation data and extrapolate it out to a full installation size. I figured out how many of our test panels that we could fit on my roof, then multiplied our power generation numbers to reflect that. In addition to that upsizing, I ran a model that calculated how the performance of the panel would change based on average sunlight duration throughout the rest of the year. That data was then graphed against a real customer\u2019s monthly usage data that we were getting from the power company\u2019s API. The solar prediction is shown in orange, and the monthly usage is shown in red."), mdx("p", null, "Lastly, you\u2019ll notice that we added some explainers on the bottom of the screen to help people contextualize this information. The majority of the calculators we researched spit out info in terms that the average customer wouldn\u2019t be familiar with or care about, so we wanted to make sure to make our information relatable."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/0079fc525ecac2f3f34bb80be2b76760/a2510/energy-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "57.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB6q70DU0E/8QAFhABAQEAAAAAAAAAAAAAAAAAAhAB/9oACAEBAAEFAkDCAsv/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwGn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABwQAAEDBQAAAAAAAAAAAAAAAAIAAZERICEzkv/aAAgBAQAGPwLADC1jyquDRZ//xAAdEAACAQQDAAAAAAAAAAAAAAAAAREhMVFhcYHw/9oACAEBAAE/IUHV9BrHvwIMnstEIVj/2gAMAwEAAgADAAAAEDcP/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARQf/aAAgBAwEBPxArhH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/EB//xAAcEAEBAQACAwEAAAAAAAAAAAABEQAhMUFhcdH/2gAIAQEAAT8QcyAsfyypSHus4LFGB19OsCr5zJJuMHW//9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Energy generation screen", "title": "Energy generation screen", "src": "/static/0079fc525ecac2f3f34bb80be2b76760/a2510/energy-screenshot.jpg", "srcSet": ["/static/0079fc525ecac2f3f34bb80be2b76760/f93b5/energy-screenshot.jpg 300w", "/static/0079fc525ecac2f3f34bb80be2b76760/b4294/energy-screenshot.jpg 600w", "/static/0079fc525ecac2f3f34bb80be2b76760/a2510/energy-screenshot.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Energy generation screen")), mdx("br", null), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/ba643779a68683be9a03832ec428c60c/a2510/luminosity-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "57.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB6s6FCLK//8QAGRABAAIDAAAAAAAAAAAAAAAAAgERABIg/9oACAEBAAEFAqG1GMgBcf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAAEBwAAAAAAAAAAAAAAAAABAhESEyAzYZGi/9oACAEBAAY/Amlci2lsEHgLVH//xAAbEAEBAAEFAAAAAAAAAAAAAAABABEhMWFxof/aAAgBAQABPyFHRPMWZW7MF66lgja//9oADAMBAAIAAwAAABA8D//EABYRAQEBAAAAAAAAAAAAAAAAAAEQYf/aAAgBAwEBPxAcn//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EIf/xAAcEAEAAwADAQEAAAAAAAAAAAABABEhMUFRcbH/2gAIAQEAAT8QzBXWFfnEWKjRQue88gVeGQ59ICr3GpKmaHE//9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Luminosity measurement screen", "title": "Luminosity measurement screen", "src": "/static/ba643779a68683be9a03832ec428c60c/a2510/luminosity-screenshot.jpg", "srcSet": ["/static/ba643779a68683be9a03832ec428c60c/f93b5/luminosity-screenshot.jpg 300w", "/static/ba643779a68683be9a03832ec428c60c/b4294/luminosity-screenshot.jpg 600w", "/static/ba643779a68683be9a03832ec428c60c/a2510/luminosity-screenshot.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Luminosity measurement screen")), mdx("br", null), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/9ba81fcf8abfc17376a0c15235242fd3/a2510/usage-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "57.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHSVpCEhP/EABgQAQEBAQEAAAAAAAAAAAAAAAECABIg/9oACAEBAAEFArJwDuIfH//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/Aaf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAdEAAABQUAAAAAAAAAAAAAAAAAAQIDkREgMjOS/9oACAEBAAY/AqE2XI1pgYJiz//EABoQAQEAAgMAAAAAAAAAAAAAAAEAETFRcZH/2gAIAQEAAT8hEvaQ7i3nGDC+CSwRq//aAAwDAQACAAMAAAAQeA//xAAWEQEBAQAAAAAAAAAAAAAAAAAREDH/2gAIAQMBAT8QwE//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCH/8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBkaHB/9oACAEBAAE/ELCszl8ZAgHTW71ERWg1vkBV7jUlTNCf/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Usage and solar potential screen", "title": "Usage and solar potential screen", "src": "/static/9ba81fcf8abfc17376a0c15235242fd3/a2510/usage-screenshot.jpg", "srcSet": ["/static/9ba81fcf8abfc17376a0c15235242fd3/f93b5/usage-screenshot.jpg 300w", "/static/9ba81fcf8abfc17376a0c15235242fd3/b4294/usage-screenshot.jpg 600w", "/static/9ba81fcf8abfc17376a0c15235242fd3/a2510/usage-screenshot.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Usage and solar potential screen")), mdx("br", null), mdx("p", null, "The client absolutely loved the finished product, and it\u2019s been one of our most active showcase pieces at the Chicago studio. The upper leadership connected with the product because it was something tangible that they could walk around and show people, and it clearly communicated some key findings from our research. That excitement is what keeps me excited about the work as we continue to see how we can get digital tools off of a screen and into the real world."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1000px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/2c1ad5b7ab41b2020f859483aa5efc9f/a2510/solar-3.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "66.66666666666666%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIFAwT/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/aAAwDAQACEAMQAAABxZeguSUw3//EABwQAAEDBQAAAAAAAAAAAAAAAAIAASEDEBESE//aAAgBAQABBQIYKqAsPO20YX//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEv/aAAgBAwEBPwGUv//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwG1p//EABwQAAEDBQAAAAAAAAAAAAAAAAECEBEAEiExcf/aAAgBAQAGPwJNx3jlGFAl4gBv/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFBYf/aAAgBAQABPyG1ML68hytpx2KXkS8iMvsJSf/aAAwDAQACAAMAAAAQZA//xAAXEQEAAwAAAAAAAAAAAAAAAAAAESFB/9oACAEDAQE/ELag/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARMf/aAAgBAgEBPxAh5bv/xAAYEAEBAQEBAAAAAAAAAAAAAAABESEAUf/aAAgBAQABPxDOMITj66dSPoDVWOC8gVKt4CoMwpZznnARi8QM7//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The finished prototype", "title": "The finished prototype", "src": "/static/2c1ad5b7ab41b2020f859483aa5efc9f/a2510/solar-3.jpg", "srcSet": ["/static/2c1ad5b7ab41b2020f859483aa5efc9f/f93b5/solar-3.jpg 300w", "/static/2c1ad5b7ab41b2020f859483aa5efc9f/b4294/solar-3.jpg 600w", "/static/2c1ad5b7ab41b2020f859483aa5efc9f/a2510/solar-3.jpg 1000w"], "sizes": "(max-width: 1000px) 100vw, 1000px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The finished prototype")), mdx("br", null)); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/ansible-pi/https://justin.isamaker.com/ansible-pi/Wed, 12 Apr 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Headless Raspberry Pi Startup with Ansible", "date": "2017-04-12T00:00:00-0500", "teaser": "Get your Pi up and ready to go with a few short commands and an Ansible playbook.", "featuredImage": "ansible-pi.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "Getting started on a Raspberry Pi can be a little daunting if you\u2019re brand new to working with the board. The easiest route is to get a monitor and a spare mouse and keyboard to get everything set up, but there are plenty of times when you aren\u2019t going to have access to all of those components. If you\u2019re sitting there with a Pi and wondering how to get set up, this post will help you get the ball rolling. This kind of setup refers to running the Pi \u201Cheadless\u201D, which is just a fancy way to say running it without a monitor."), mdx("p", null, "We\u2019ll walk through the basic steps to get SSH set up, and then we\u2019ll move on to the fun stuff\u2013configuring your Pi via Ansible."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/05ffe39d722e55651f106f8bb88e2027/c08c5/ansible-pi.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEA/9oADAMBAAIQAxAAAAHnToSkf//EABgQAQEBAQEAAAAAAAAAAAAAAAEAIRIi/9oACAEBAAEFAvMHSOWiF//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8BMxf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAACAwEAAAAAAAAAAAAAAAABEQAQIQL/2gAIAQEABj8C1xci8Kr/xAAaEAADAQEBAQAAAAAAAAAAAAAAARExIWFx/9oACAEBAAE/IUmkVewdqJS1Ed+m5zeHHWf/2gAMAwEAAgADAAAAEOTv/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAwEBPxAJFav/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAJ/8QAHRABAQACAwADAAAAAAAAAAAAAREAITFBYXGxwf/aAAgBAQABPxCwTW4489xRQFu8B+9fLj7kr2mSmB6wopo1zjf3hS7FV33n/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Raspberry Pi & Ansible", "title": "Raspberry Pi & Ansible", "src": "/static/05ffe39d722e55651f106f8bb88e2027/c08c5/ansible-pi.jpg", "srcSet": ["/static/05ffe39d722e55651f106f8bb88e2027/f93b5/ansible-pi.jpg 300w", "/static/05ffe39d722e55651f106f8bb88e2027/b4294/ansible-pi.jpg 600w", "/static/05ffe39d722e55651f106f8bb88e2027/c08c5/ansible-pi.jpg 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Raspberry Pi & Ansible")), mdx("h3", null, "Getting your Pi ready"), mdx("p", null, "Let\u2019s start by discussing how to get the Raspbian image on the SD card. We\u2019ll be using the Raspbian Jessie with Pixel distro for this project. Head over to ", mdx("a", { href: "https://www.raspberrypi.org/downloads/noobs/", target: "_new" }, "raspberrypi.org"), " to grab the latest Raspbian download. At the time of this post, the latest version is 4.4, but this should work for pretty much any version. If you can download torrents on your network, the torrent option for downloading the Raspbian distro is trusted and significantly faster than downloading the ZIP file."), mdx("p", null, "I\u2019ll be using a Mac for this tutorial, and a few of the tools we\u2019ll use to make this work are only available for Mac, to my knowledge. While you\u2019re waiting for Raspbian to download, head over and download two additional programs that we\u2019ll need to flash the card. The first is ", mdx("a", { href: "https://www.sdcard.org/downloads/formatter_4/", target: "_blank" }, "SD Card Formatter"), " from the SD Association. We\u2019ll use this to prep our card for imaging. The second is ", mdx("a", { href: "https://www.tweaking4all.com/software/macosx-software/macosx-apple-pi-baker/", target: "_new" }, "Apple Pi Baker"), ", a tool that makes managing your Pi disk images as easy as\u2026pi. Sorry."), mdx("p", null, "Let\u2019s format our SD card first. Open SD Formatter and choose the \u201CQuick Format\u201D option. Make sure you have the right card selected\u2013unless you have any other external media plugged in, the only option should be the micro SD that you\u2019ll use for your Pi. Click format and you should be good to go."), mdx("p", null, "When your Raspbian download has finished, you need to unzip it get access to the .img file. If you double-click the file and use Mac\u2019s native Archive Utility, the ZIP file will unpack to a .cpgz file, which we don\u2019t want. Instead of using Archive Utility, you need to use something like ", mdx("a", { href: "http://unarchiver.c3.cx/unarchiver", target: "_new" }, "The Unarchiver"), " to extract the .img file from the ZIP. Once you have the .img file, we\u2019re ready to make a few edits to the image that will help us with our setup."), mdx("p", null, "Double-click the Raspbian .img file to boot the drive. We\u2019ll get into this new drive to edit and create a few files. When you see the booted drive on your Mac (likely called boot), open a new terminal window. We need to tell the terminal what we\u2019d like to edit, and the easiest way to do this is to type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "cd"), "\u201D for \u201Cchange directory\u201D, and then drag the boot disk onto the terminal window\u2013this will autofill the path for us. Hit enter to change the directory, and then type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ls -a"), "\u201D to show all the files in the directory."), mdx("h3", null, "Enabling SSH on the boot disk"), mdx("p", null, "Due to a security problem a few months back, ", mdx("a", { href: "https://www.raspberrypi.org/blog/a-security-update-for-raspbian-pixel/", target: "_new" }, "the Raspberry Pi Foundation made the decision to not enable SSH by default on new Raspbian images"), ". This is an incredibly smart move as you don\u2019t want SSH enabled with the default username and password\u2013people who don\u2019t change it were leaving their Pi\u2019s open to a world of hurt. We\u2019re going to re-enable it with the knowledge that we\u2019ll be changing our password from the default as soon as we boot up. To enable SSH, you\u2019ll need to create a blank file in the boot disk called \u201CSSH\u201D. To do this, run ", "\u201C", mdx("inlineCode", { parentName: "p" }, "sudo touch ssh"), "\u201D in your terminal window that\u2019s pointed at the boot disk."), mdx("h3", null, "Configuring wi-fi on the boot disk"), mdx("p", null, "SSH isn\u2019t much good to us without a network connection. To make sure that we\u2019re able to connect to wi-fi, we need to add a wpa_supplicant.conf file to our boot disk. Run ", "\u201C", mdx("inlineCode", { parentName: "p" }, "sudo nano wpa_supplicant.conf"), "\u201D in your terminal. This will open a nano editor that will let you write code in the terminal. For our power users out there, feel free to use whatever editor you\u2019d like (looking at you, Vim/Emacs folks). We need to add the following code to this file to connect to a network. You\u2019ll need to replace the \u201CYOUR_NETWORK_NAME\u201D and \u201CYOUR_NETWORK_PASSWORD\u201D with the appropriate credentials for your network. Once you\u2019re done editing the file in nano, hit \u201Cctrl+x\u201D to exit, and then \u201CY\u201D to save."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, "network", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ssid", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token string" }, "\"YOUR_NETWORK_NAME\""), "\n psk", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token string" }, "\"YOUR_NETWORK_PASSWORD\""), "\n key_mgmt", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token constant" }, "WPA"), mdx("span", { parentName: "code", "className": "token operator" }, "-"), mdx("span", { parentName: "code", "className": "token constant" }, "PSK"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("h3", null, "Writing the image"), mdx("p", null, "We\u2019ve got our two pieces of the boot disk that needed editing ready, so now we can move on to actually writing the image to the card."), mdx("p", null, "You can start by ejecting the \u201Cboot\u201D disk image\u2013we won\u2019t need that anymore. Next, open Pi Baker and select the SD card that you just formatted. We\u2019re going to use the \u201Crestore backup\u201D function to write the .img file to the card. Locate the raspbian-jessie.img file that you downloaded, and select it in the \u201Crestore backup\u201D section of Pi Baker. After you have the selected, click \u201CRestore Backup\u201D. This process took around eight minutes to complete, but your mileage will vary based on your computer and the size of your SD card."), mdx("h3", null, "Firing up your Pi"), mdx("p", null, "Now that the card is ready to go with the Raspbian image, we can go ahead and power it on! Plug your Pi in, then open a new terminal window on your Mac. We\u2019ll try one command to SSH in first, and we\u2019ll have a backup for anyone who that doesn\u2019t work for. Depending on your network, you may be able to address the Pi as \u201Craspberrypi.local\u201D. To give this a shot, type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ssh raspberrypi.local -l pi"), "\u201D into your terminal and hit enter. If it asks you about wanting to add the fingerprint, congrats, it worked\u2013type \u201Cyes\u201D and then hit enter to accept. After that, enter the default password of \u201Craspberry\u201D. If you get something along the lines of \u201CCould not resolve hostname raspberrypi.local\u201D, that probably means that your network isn\u2019t going to let us address the Pi with the shortname, provided you got the rest of the steps right. We have a few options to figure out the IP address of the Pi so we can SSH in, the easiest of which is accessing the network router for your wi-fi. Log in to your router\u2019s control panel, look for connected devices, and make a note of the IP address associated with the hostname \u201Craspberry\u201D. If you don\u2019t have access to your router, you can follow ", mdx("a", { href: "https://www.raspberrypi.org/documentation/remote-access/ip-address.md", target: "_new" }, "these instructions from raspberrypi.org"), " to find your IP using other methods. Once you have your Pi\u2019s IP address, type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ssh YOUR_PI_IP_ADDRESS -l pi"), "\u201D and follow the previous instruction to log in with the default credentials."), mdx("h3", null, "Changing your password"), mdx("p", null, "The absolute first thing that we need to do is change the default password. The easiest way to change the password is through \u201Craspi-config\u201D, which you can access by typing ", "\u201C", mdx("inlineCode", { parentName: "p" }, "sudo raspi-config"), "\u201D in your SSH terminal. Hit enter to select \u201CChange User Password\u201D, then enter your password. Back at the raspi-config window, hit tab twice to select \u201CFinish\u201D, then hit enter. The username \u201Cpi\u201D is now associated with whatever password you just set."), mdx("h3", null, "On to Ansible"), mdx("p", null, "Ansible is an automation tool that lets us easily script a series of actions that we\u2019d like to take place on our Pi. It\u2019s big in the devops world, and it\u2019s easy to see why\u2013Ansible is relatively easy to get up and running compared to its alternatives. Its ease-of-use makes it a perfect candidate to set up a Pi."), mdx("p", null, "I created an Ansible Playbook to group all of our actions\u2013you can ", mdx("a", { href: "https://github.com/justinisamaker/ansible-pi", target: "_new" }, "clone it from my Github."), " A playbook, in Ansible parlance, is just a collection of actions and the things that they need in order to run. Start by cloning the repo to your main computer. Once you have the repo cloned, open up the \u201Chosts\u201D file in your code editor. You\u2019ll need to replace the \u201CYOUR_PI_IP_HERE\u201D and \u201Cansible_user\u201D/\u201Cansible_password\u201D sections with, you guessed it, your Pi\u2019s IP and your username and password. If you forgot your IP from earlier, or if you didn\u2019t have to get it because \u201Craspberrypi.local\u201D worked, you can just type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ifconfig"), "\u201D in your SSH window and find the IP address listed under WLAN0 if you\u2019re connected to the wifi. Enter your Pi\u2019s IP and login information in the hosts file, then save."), mdx("h3", null, "Breaking down the Ansible tasks"), mdx("p", null, "The actions that we\u2019ll be taking on our Pi are all located in the ", "\u201C", mdx("inlineCode", { parentName: "p" }, "/roles/common/files"), "\u201D section of the Ansible-Pi repo you just cloned. These are fairly opinionated to what I use the Pi for, but the beauty of open source is that they\u2019re all editable, so you can adjust them to your liking. Let\u2019s walk through what each .sh file does:"), mdx("ul", null, mdx("li", { parentName: "ul" }, "anti-raspbian-bloat: Removes packages that I don\u2019t want on every installation, removes unused folders in /home/pi"), mdx("li", { parentName: "ul" }, "configure-locale: Changes the locale from en_GB to en_US"), mdx("li", { parentName: "ul" }, "set-keyboard-layout: Changes the keyboard layout from GB to US"), mdx("li", { parentName: "ul" }, "set-timezone: Sets the timezone to \u201CAmerica/Chicago\u201D")), mdx("p", null, "You can edit any of these files to better reflect your locale. If you\u2019re comfortable with using English for the Pi and you\u2019re located in the United States, all you should have to update is the timezone file."), mdx("p", null, "The next piece that we\u2019ll look at is the actual list of tasks, which you can find in ", "\u201C", mdx("inlineCode", { parentName: "p" }, "/roles/commons/tasks/main.yml"), "\u201D. Let\u2019s break that routine down:"), mdx("ul", null, mdx("li", { parentName: "ul" }, "Transfer init scripts: Moves everything from ", "\u201C", mdx("inlineCode", { parentName: "li" }, "/roles/common/files"), "\u201D into your Pi"), mdx("li", { parentName: "ul" }, "Thin out Raspbian: Deletes unnecessary files/directories"), mdx("li", { parentName: "ul" }, "Upgrade apt cache: Makes sure we have the latest packages"), mdx("li", { parentName: "ul" }, "Upgrade dist: Step two of making sure our packages are up-to-date"), mdx("li", { parentName: "ul" }, "Configure locale"), mdx("li", { parentName: "ul" }, "Set timezone"), mdx("li", { parentName: "ul" }, "Set keyboard layout"), mdx("li", { parentName: "ul" }, "Install packages: Use this to install any packages you want to that you would usuall install with ", "\u201C", mdx("inlineCode", { parentName: "li" }, "apt-get-install"), "\u201D. Right now I just have it set up to install TightVNC."), mdx("li", { parentName: "ul" }, "Reboot: restart the Pi to make sure our changes are applied")), mdx("p", null, "Before we run this, you\u2019ll need to install Ansible on your Mac. You can do this through ", mdx("a", { href: "https://brew.sh/", target: "_new" }, "Homebrew"), " by running ", "\u201C", mdx("inlineCode", { parentName: "p" }, "brew install ansible"), "\u201C."), mdx("p", null, "Now we\u2019re on to the good stuff\u2013actually running our playbook! On your Mac\u2019s terminal, navigate to the folder that you cloned ansible-pi to, then run ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ansible-playbook -s -i hosts ansible-pi.yml"), "\u201D. This tells Ansible to run our root playbook with sudo access using the hosts file from the repo. You should see the task names start to read out to your terminal. For a brand new Pi, each task should say the task name, and then a status message that should read \u201Cchanged: YOUR_PI_IP_ADDRESS\u201D. The only task that should fail is the final reboot task\u2013the Pi will already be rebooting, so it can\u2019t report back that the task finished successfully."), mdx("h3", null, "Making sure it worked"), mdx("p", null, "After you\u2019ve run the ansible playbook, SSH back into your Pi. If you type ", "\u201C", mdx("inlineCode", { parentName: "p" }, "ls"), "\u201D in the home directory, you should only see the init folder that we transferred over. That means that your configuration worked, and you should be good to start using your Pi!")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/lost-arts/https://justin.isamaker.com/lost-arts/Tue, 14 Mar 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Lost Arts", "date": "2017-03-14T00:00:00-0500", "teaser": "Creating an easily changed WordPress site for the my favorite constantly-evolving makerspace.", "featuredImage": "lost-arts-logo.png" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "One of the advantages of living in Chicago is the amount of options that you have access to. It\u2019s not New York or Los Angeles, but more often than not you\u2019re still going to have choices when it comes to most things. Makerspaces are no exception here\u2013we have a plethora of spaces to choose from, and all of them are extremely different. Out of all of the iterations of spaces that I\u2019ve seen in Chicago, Lost Arts has been my favorite. It struck a nice balance between a traditional makerspace and a coworking space, and it definitely drew the right crowd if you were interested in making awesome things in Chicago."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1080px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c2e7cd4e1d810ffc875f996c3e9d2610/47311/lost-arts-synth.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "66.66666666666666%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwAE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAQzBsLCKT//EABkQAAMBAQEAAAAAAAAAAAAAAAABAhIxM//aAAgBAQABBQKsKVNUaoQvN9//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAQMf/aAAgBAgEBPwGH/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAEQERIxQXH/2gAIAQEABj8CfC5GXDpqP//EABwQAQACAgMBAAAAAAAAAAAAAAEAESExUWGB0f/aAAgBAQABPyGjDbliEJta3PK7jz8iNwFHwn//2gAMAwEAAgADAAAAEJz/AP/EABcRAQADAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8Q2VP/xAAWEQEBAQAAAAAAAAAAAAAAAAABEDH/2gAIAQIBAT8QAxP/xAAbEAEBAAMBAQEAAAAAAAAAAAABEQAhMVFBgf/aAAgBAQABPxANTWdBPX8wwpMrHurlFNqiKI+ZBXQ9NMmQM0I1ftmuZRsL9Xrn/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Synth Workshop and Concert at Lost Arts", "title": "Synth Workshop and Concert at Lost Arts", "src": "/static/c2e7cd4e1d810ffc875f996c3e9d2610/47311/lost-arts-synth.jpg", "srcSet": ["/static/c2e7cd4e1d810ffc875f996c3e9d2610/f93b5/lost-arts-synth.jpg 300w", "/static/c2e7cd4e1d810ffc875f996c3e9d2610/b4294/lost-arts-synth.jpg 600w", "/static/c2e7cd4e1d810ffc875f996c3e9d2610/47311/lost-arts-synth.jpg 1080w"], "sizes": "(max-width: 1080px) 100vw, 1080px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://www.instagram.com/p/BKwVerVgBDg/?taken-by=lostarts", "target": "_new", "className": "image-caption" }, "Synth Workshop and Concert at Lost Arts")), mdx("p", null, "Lost Arts was founded in 2015 by Charles Adler, one of the co-founders of Kickstarter. The first version of the space was a month-long experiment housed in a recently-sold meat processing warehouse in the West Loop. I say experiment because that\u2019s exactly what it was. Charles loves building communities and enabling folks to create, and that first iteration was him dipping his toe in the water to see if he could actually pull it off. The first iteration ran over the summer of that year, and brought together a who\u2019s-who of the creative community in Chicago to make things together. There was no charge for participation or use of the tools\u2013the only constraint was that the building would be torn down at the end of the month to make way for condos. I was able to help by keeping the fleet of 3D printers maintenanced and running, and it was off to the races for us."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "Charles and I clicked, and I started seeking out other ways that I could help make sure that the experiment succeeded. One of the obvious ways that I could help was by creating a website for the space. The website for Lost Arts needed to reflect the vibrant and diverse community that gathers at the space, but it also needed to be easily maintained by folks who never wanted to touch code. As with many of my other projects, we decided that WordPress was the right tool for this job."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1080px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/9b5e6e427b5763faa9267b576f9b7225/47311/lost-arts-wood-shop.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "52.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIFBP/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABZJT49RQDf//EABsQAAIBBQAAAAAAAAAAAAAAAAECEQADBBAT/9oACAEBAAEFApUvKg9Foax1U2P/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGH/8QAGxAAAQQDAAAAAAAAAAAAAAAAEQABAjIQMVH/2gAIAQEABj8CsBxbKq2YmLL/xAAcEAEAAQQDAAAAAAAAAAAAAAABABEhMWFRkdH/2gAIAQEAAT8heumMElPHUoeczjiKKG903P/aAAwDAQACAAMAAAAQkD//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAn/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARITH/2gAIAQIBAT8Qd+y4b//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExQWFx/9oACAEBAAE/EAajIOJQ/A6J6haLPsJ6Ynt3HzcsFXKf/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The wood shop side of Lost Arts", "title": "The wood shop side of Lost Arts", "src": "/static/9b5e6e427b5763faa9267b576f9b7225/47311/lost-arts-wood-shop.jpg", "srcSet": ["/static/9b5e6e427b5763faa9267b576f9b7225/f93b5/lost-arts-wood-shop.jpg 300w", "/static/9b5e6e427b5763faa9267b576f9b7225/b4294/lost-arts-wood-shop.jpg 600w", "/static/9b5e6e427b5763faa9267b576f9b7225/47311/lost-arts-wood-shop.jpg 1080w"], "sizes": "(max-width: 1080px) 100vw, 1080px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://www.instagram.com/p/BN-FHivhARj/?taken-by=lostarts", "target": "_new", "className": "image-caption" }, "The wood shop side of Lost Arts"), "\n ")), mdx("p", null, "The second iteration of Lost Arts reopened in a recently vacated warehouse on Goose Island in 2016. The space was previously used as document storage for Pickens Kane, and had been purchased by R2 Property management\u2013the same company that owned the lot that the first Lost Arts was on. The new space was absolutely massive, and provided a great place to explore what a coworking space would look like if you could also run a table saw in it."), mdx("p", null, "Out of all of my projects, this site has probably seen the most drastic changes over its lifetime. Charles has a drive to always make things better, and the website doesn\u2019t escape that reach. We launched three major versions of the site as the space was evolving and expanding. The design always represented what Lost Arts was about at that particular moment, and it shipped with a water-tight custom fields and post types implementation that let our content editors easily update the site with very little fuss."), mdx("p", null, "Unfortunately Lost Arts closed its second iteration in the fall of 2018. I no longer run the website, and it is now updated to reflect the next phase of Lost Arts, whatever that may be. Here\u2019s to hoping that it comes back somewhere in the near future\u2013I\u2019ve never found a better place to make work in Chicago."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/136a0f9b15713bf9dd35c0da3531033a/b79a5/lost-arts-capture.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "390.33333333333337%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABOCAYAAAAgnDacAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMiklEQVRYw52XB1hUVxbHn6JoLDGWjSluEjsS6QjGblajq9FFRUVjJcma3Zh82d2oITHWmM+NSlSCiCI2jKIiCEqRDkOfYShDF0REVBBQpJf57zkX3wSRjZD3fWfuK/f9Tr3n3ZF8rvgh0D9EiJ9vEK5fC0Z8bDJUiWlQK9ORlqyBJkWDNLUGqoRkqJPUSE5S0XkSzVEiThGLuOgYxCsUiImIgORNwOt+NxAUEIGw0FgoopQ0UYMUVSZSk7MIloXMtCzkZOQhW5OL3MybNGaTojSkq1ORTFAlwZPiEgSYgD7wu+qPoMAwRITFIVahoglpSEkiq5IzoFFnIJuASrI6KUYJRXgMPUtBQU4+3c9ABkFTlfQsPrEV6Od1Gde8vBBw9SpCAgMJGgpFdDQS4uPINSVB1eLFC2c84X70JA7sdYTX+cukIBEpicnQJKdATVYmxsYjNjIKkldkLLyjNfCNy0NMVDayAjS4E5SNEv9s5NxQQk3uZKVqcPWCHw78eBCuh4/Bw90Dx5xdER0SiayUdCTHJyEhOhYx4ZGQLpbVwacSOF8LFN0FmhNagHgAkUDJjTwkkYtpSjW8zvjgl30uOHrwOFydjuHoYRd4e3pBo0qBiuMXpYAijIBnq7TwrNfiVIsWxfe10Ca3oEWpRQtBCwOyEBMQRtrjcPmkD/btcMRPO/fD+YAL9mzfQ6HyRTplPZGsiw2PQlRIOKRTVS04V6fFSa2WLCSgsgXaJBoVQL6vBmE+AVCQawmBakT4xCDMOxKR12MQ7EuxDo6CSkHWRUST+5TUoGBIbo9bcIbcdSNgYbFWuKxNIGAUkHslFYGePgjzv4H08Bxkx9xCZkwu0mKopGI1SIpMRGwowyIQTrDg64EEJAtP1WhxjFwuYGA8AeMISDHMvpwKP49LCPS5jqTANKhuaKAMJhdDVIgLTSILFYgKCkd4YAiCr/kjwMcPklNlM5yrgEOUi9wiSko0nUQA2iAgw0OJC0dPw+vcRURejoPChyC+8Yj0i0X4tUhyOxgB3tcplj6UoEu49OsFSOcf1uJCZRM8appws6gRtcoGNCU2oUnRjNzr6Qi47CtciQtKIsvIulC2jl0lBeQuJyL8BlnoH4ggslKqLC+HLBUV5SivLEfZwzI8KH2A0rJSlJaWoqysDBWVFc9IpZDK50Qqr6iAThhcUYnc3FwkJycjJSVFjHl5eaSs9fmLRCov54m/TWYtGRkZiI+npRRLnSQuDoWFheJ+p4Csua12Pr958yaysrKE8Ll8Xx5/TzoEFhQUIDMzEzk5OUhPTxfXbS3sMlCOoVpNnSY7G/n5+Z22Ump7IU/mmDGELbtz5w7u3r37Qld1wPZBZdc4duwqwxh6+/btTiVEJKVtDcla+PzRo0dCHj9+LKSjmuuwDpubm8HS0kJLrs2hZaEfvi/P6YwIIB9VVVXkYhGK7xZDnaKk7h2GqMgQJCTECkt1ikhLW+GDlcoiNTU10UkznlQ/we3iOyi+V4KMrEwEBPgh6EYgcimGNbW1aKZ57HpDQz1qampobEB9fT2q6T1myELARjQ2Nj41mbSQxnpSUEzwwsI8VD6pQSNNrCWou7s7PD09cfGiJzw8zuLKlSs4ffo0goIChXXMkVgTC9P5qK6rR2SwP34+4IoL587i7p08NDRrdZZxaJ48eSISwCOHgxPJMOZI9QTgC075nZJ7uOZ3DXu3boYLfYj20SczUxlEblWhrq4Ot27d0klRUZEoqZKSEmEMu88i1ZLWRnL1dhZtO6JC4PSLE2ZMsYbDxlU4ddABIV7OuHenAHX1DaI2uXGkpaWJcx55iT58+FDAOCxSdXU16snU4tsFUMaE4tez7vh8gz0cvlqPzV/aw8NlB2054smLJlHoxcXFQrjY7927J9xmBoeDpRVI9KKiQvh4X8Txo4fg+N8dOOG0C9u++QJ7dzsgM11NcxrEGufeyB2Iha95mTKUYcySOMgMvHkzF2fOnsaB/XuxwX4FPl1ri3WrFmPjPz6GSpkoAq4hN1NTU4W7Go1GJ+xyTXWNAEtcWzU1tbhVkA9f2t94X/GGx6njOOvuDI8zx3GaznNzc0h7jYgZd3EGchfiNc8x5c8Ew9g4AeTU8wWbzdmsExlroPN6cS2XSVHRbcpwvohl+7Uvr/kOm0MFtzFZ6MNVUUlN4lEZyvMOoSx7L6oq8smIapLfmoiuObyov5VTfFpbUxlK7+XhQUkuKSqlZ5Ud98O261CW5mZ5bEZHBy/RtvOeWcsdvSB3EQ54QEAAVCoVrdcg8RVUKpW6ZdrRIbVvRzKMDw4ylwXXnII25fyN4cz+v1bGInVkGdclB7rtKuD1ziM/Y0V8vy1UZ2FHQLkVsdy/f1+3OrhcGMj3ZbefA8oXPMpdt+0EPrgWeeHLn4n24XnOwvaArhztoToL2QJeWrzgORHsHt+Tlxe3KXab+5/cwrg+20N1QF783DS5e3Br4qSwq3zOwh9+bgKcKJ7Hy5Dh/F6HFnKw5W7MlvDaZiAnRFbS9PTbwp2ahZXwvLZxfQ7IL/PIZcFAhvM1AxjGAA4L32fggwcPOgay6TxBbp7ckrjuZKu5O/Pil2tU7lBtq+IZINeWvIeRv2ZspWwNQ3lr/KJsP9cc5FrkzQhbw4XN1jGMFclF3To2dq45tD/kzvN7TUFX2G4njuOEW6u4n3CDG42ux1zg6tpOjrIcwVGXVnEhOeLijCNHfhNnZ2dIL/d/Ca/074OBJIMG9MPL/Xqjdy899Oqth5763aDXU0L37hIkqZMy/K03MPLtYRj1zp8xduQ74OuX+/fFAIIPHvwKyQAMHNQf/UhR3z769KwP9PX10bNnT+iTtB179OgBiUGjh7+FMSPexrjRIwS4V68eOo16et0xdOhgjBw5HIbjDARY/+nLenp6ZH13Id26dRMijSGrDEbR5DEjYGw4Bgajh2Poq4Mx7PVXMfRPg/H+zFlYbrsCtovtsHbNx3jjzdfJwh6t0KdAAZJdZqsMx4yE0bjRAjhu1DsYT/CJlmZY/DcbrLPfgCVzFmKWgQmMTYwxZPBA9OndG73Y7R7PWiiAk60t8d4Ec1iYjMfECWYwGPkWRr0xCHNm/QV7du/FZ3//HJZmFhj22mt4k6wePHAA+r70krCw1U0GtoIFcNkSG6xYugi2NguwesUyfDhnFka8OQRTJk3Gjm27sGbVWhiMNcBrBPxy40ZMtLIQL+r36I5+fXqLkePcvTtVBENX2S3FJ2tXY9GCefhw7my8P22yiOlqu+X4dJ09/vrBHKz5aA1+2LUbyqQkqOkP0c8H9oNjzx69TvEe8ko/Krm+6Ne3D6SJ5LKlhQlMxxti2qSJmDdnDr7+5yf44btv8MPOPdj42WfY8PE6uFFhZ2TyPuYB/WMtp3vrYW1hSgo/gJWpEaZZm8HcaCwB35sAmwUf4tP16/EVuXTwgCPcnByxYf1abPt2B7ZuccD3DlsQq4iknZcK4SFBOH/2FNavXolli21oczoJ1pbmBDeDCSVW4uCvsluBb77ehEOOjrj463lcpo358WOucNy3H06HDotdWXRkBFLUKoKdwfbvHHCMlp6X50Xs+n4b1qxcgcULF2DVCjtI61avxc5tO3Ho54P4+qt/4ftvHXDVx4daVj40GRqxfUug/85etPMPCw1BKFno53OFYJ60Md0LO7LSaOxIGIwYhmnvWULavGkLdmzfiV07d2Pb1q0C6HT4EE6dPIlzHh5wpj33L06H4bBlEw4fPIiAQH/6O+GFTf/5N9XpQhjSQhjycm8M7NsTg/rpQ5o0eTKsrK0xffp0zJ49G8bGRjAxNsbEp/dmzpyJ6dOmwcrKCtNonDplCibTO5MmTcKMGTPFfRN6x9TUBObmZpDMzCiYJibiZTuK5bJly7BkyRLxsjGBTU1NhZibm+vOWfg9+b6FpSUsLFioRvmHH06dOhXz58/H3LlzBZzvd1YYKosAsqYZM2Zg+fLlmDdvHmxsbLBo0SIRAlbWFfgzwJUrVworZ82aJSzmWAmX/giQY8YWLl26FBMmTBBxla2T3ekSkONmb28vLGWQpaXlc3HqMtDW1hbyNUNlkWGdgeqyzHXFCZnytM7kkeUPWcgx5KTY2dmJOHI98vgBdZOuZFqStVtZWYvK5wLlguaksBgZGXXNZUtLCwGYP38e9v30I7Zv+w6bN2/Gli1b4ODggI1ffCES1GmXGTjeyJQ+ATNw6YQ9dn37ERYsXELu2gqXFy5c2LUYyhNNKI5jDQwxbty7ePfdVjE0NMT48eO75PL/AL8AEph/677mAAAAAElFTkSuQmCC')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The Lost Arts homepage during the second iteration", "title": "The Lost Arts homepage during the second iteration", "src": "/static/136a0f9b15713bf9dd35c0da3531033a/c1b63/lost-arts-capture.png", "srcSet": ["/static/136a0f9b15713bf9dd35c0da3531033a/5a46d/lost-arts-capture.png 300w", "/static/136a0f9b15713bf9dd35c0da3531033a/0a47e/lost-arts-capture.png 600w", "/static/136a0f9b15713bf9dd35c0da3531033a/c1b63/lost-arts-capture.png 1200w", "/static/136a0f9b15713bf9dd35c0da3531033a/b79a5/lost-arts-capture.png 1372w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The Lost Arts homepage during the second iteration")), mdx("br", null)); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/automating-donations-ifttt/https://justin.isamaker.com/automating-donations-ifttt/Tue, 07 Feb 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Automating Donations with IFTTT and Qapital", "date": "2017-02-07T00:00:00-0500", "teaser": "Automatically put money towards a donation every time something gets mentioned in the news.", "featuredImage": "iftttDonationsScreenshot.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "One of the great trends that has come out of the past few years of technological advancement is the move towards simplifying previously complex tasks for folks who don\u2019t want to write code. This simplification opens the door for people to use technology in new and inventive ways, spanning from DIY home automation all the way over to activism. I\u2019d like to touch a bit on the activism side today."), mdx("p", null, "Supporting organizations like the ", mdx("a", { parentName: "p", "href": "https://aclu.org" }, "ACLU"), " or the ", mdx("a", { parentName: "p", "href": "https://splc.org" }, "Souther Poverty Law Center"), " has been at the top of my list for quite some time, but actually donating always depended on me going to the site and filling out the form when I wanted to provide financial support. A recent conversation about donating every time something gets mentioned in the news spurred me to look for automation alternatives for this task."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/eeb9720670f18ad5ca5f033d494cf27a/c08c5/iftttDonationsScreenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABaujiJTCv/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAERAiH/2gAIAQEAAQUCgxo6Q0o//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAABEg/9oACAEBAAY/ApR//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFxYf/aAAgBAQABPyFZV6iCy9QVvDFD5UcTk5Kf/9oADAMBAAIAAwAAABA4D//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EGf/xAAbEAEAAwEBAQEAAAAAAAAAAAABABEhMUFRYf/aAAgBAQABPxBwXVxoyWJoYfT7cqww6QiiW8m08l+tJj0/YjAGlNcn/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Photo by 401(K) 2012", "title": "Photo by 401(K) 2012", "src": "/static/eeb9720670f18ad5ca5f033d494cf27a/c08c5/iftttDonationsScreenshot.jpg", "srcSet": ["/static/eeb9720670f18ad5ca5f033d494cf27a/f93b5/iftttDonationsScreenshot.jpg 300w", "/static/eeb9720670f18ad5ca5f033d494cf27a/b4294/iftttDonationsScreenshot.jpg 600w", "/static/eeb9720670f18ad5ca5f033d494cf27a/c08c5/iftttDonationsScreenshot.jpg 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://www.flickr.com/photos/68751915@N05/6281020696/in/photolist-az2SCh-bn4oq2-d3koK-7xFCXW-5QKWwC-aFAPtx-7xFvR7-fBsQs-f9ZEG-62QVKf-713m5r-659Rgz-aFDgrH-ad9aU-nTZJp-bjoEy4-ebifU-kyBTGB-fdHEa-6TjBCF-QxcaH-5FPV63-donZN-2abVs-s6895e-biaRHp-snzBqK-s4fksR-s61m4j-s61ncG-JCQG88-cNdyo-bu6pKh-s5ZdWJ-bu6sBd-snzAJp-s61ku3-skhAfL-smQwn4-rqLAHi-s688Fi-s684tk-pYSVGy-snzzza-snxbdk-s685Wv-vFBXwb-chEejy-aYWfHD-aFDkRt", "target": "_new", "className": "image-caption" }, "Photo by 401(K) 2012")), mdx("p", null, "I wanted something that didn\u2019t require a lot of overhead to run, and something that could be easily updated as-needed. The obvious choice was to use IFTTT (If This Then That)\u2013a plug-and-play service that drastically simplifies trigger-based actions."), mdx("h3", null, "You\u2019ll need a few things to get started"), mdx("p", null, "First things first, you\u2019ll need a free IFTTT account to get up and rolling. Head over to ", mdx("a", { href: "https://ifttt.com/join", target: "_new" }, "ifttt.com/join"), " to sign up. Once you\u2019re signed up, you\u2019re ready to create your first applet. \u201CWait, applet sounds pretty \u2018code-y\u2019, and you said no code!\u201D Regardless of the name, there is still no code involved in this\u2013an applet is just a collection of actions that you want to take based on some event happening. What that event is listening for is up to you, and you have a ton of services that can tie into IFTTT that will help you create yours. Some fun examples are having ", mdx("a", { href: "https://ifttt.com/applets/24908p-text-me-the-weather-every-morning", target: "_new" }, "IFTTT text you the weather on your way out every morning"), ", or having ", mdx("a", { href: "https://ifttt.com/applets/152298p-get-an-email-whenever-the-u-s-president-signs-a-bill-into-law", target: "_new" }, "ProPublica send you an e-mail every time the President signs a bill into law"), "."), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "406px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/036cbe6b77145b251543fe524ac753a1/e33ef/iftttWeather.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "148.33333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcElEQVRIx5VW2U5bVxR1XyqlUWMMHq/nEQ+AgQI2nm3AxiOGEAgByhySAI1CSKiiDmkfKlVtpaaqWvU3+gv5j/zK6t77cokNTtI8bN3je/ZdZ+21h2Pd+dcvUKk20F5axkL7tmqLF9b+f7Z4+w7mKlX8/uoP6CYTKfQZTLApTlisdlhtDlgsNphpbbY6Lp7vN5vdhRs39Wi1l6DLF2ZgJjCHPwiHNwCr3QclPAZPcBBujx9uevch8wUGMWCy4u7aBnSpfBF+YpXwBjHsCWBmwo3xlTVYJ+twOVxwEqjrA+bxBWEYMGPl7j3opgkwTKH9G4nidSmONz/E8fPzJD5r/wSv1w+n2/dxgHkC1JMO59EI/iwN4ZtqCM9flBDb2IJDcXV9+C7wLsAsAbKwCm0orKGLNPF5EfI64SIZrurVC7QLMJMrSpb4JQtrJOPs9psU+a1l0mi2wWRRLpl2AndrmM5iMDKEb797iVV6cXD/gaR/7d4G1tY3UZqt4MnpGU6fPqN6rQtLBuiUoGfIXNiPjk6wt39finR1bV3A640FWR+dPKYD19FvtAhbu9NzCdoFmMrk4A+GsU5JaLTaqNVb2Ds4xDEBcAdUa02ks3lU603UGi0BZfbRofgl6BXAvBTmg0fHOHx4JCy3d/axubWDs2fnaC4sotFs4+TxExwdf4V9Ouz7lz8iMZ2GlRpCk+Aa4MbmlrDgjznEzS+3hVF7cVk07us3UaiKhNuZlGshT6eyiMRGRPhd0o8ZMMuDw4fY2t7FX3//g1yhJJnXysbu8r4nKVQ2TJ03FIcbDnJmR35yOQ2NjIpegVCEmMYQjg4hFI6+u2xYcD65UJrFdDonbObKVeTyJYxPJMBJK5Tm5FmcKaNIa/bjhDABxeHpDcg1li/OgqdPlsDSpK0KMke1WAZHkiR58sUZMa4G9ivP1zAy+gVuGYxSx9QpBTkpEhuW0KZoPsbHJmQdHIyooYZjEi4nj/UO0W/NOGFcdtcYTiXTGB2fBGc9MZ0BdxCDabpyiNrzqnl8AQK0dHeKlsHOclBFD3zc+GJACw1Y3lBPdHeYRzLNLJ1uLzFUWapM3/r07OW3zh4qI7pXbDxlFAHi9ed6A/WxmQrcCL1hQN5pxj4S8qoAlmQs8UstBD6ZQRkgRVpu7+xhifqaM16p1qjHl4m1S8DYj/17MtQ0tNmdlwzZOZnKyIAYjo/ROo1EMgXlwoeNv+3qFNaQgdRCdQmgZtxFAyaLsDXR9cprNm1fIY05oQKohcyA2tDkzatZ7HV1du6pdXhRNtwRRrNVssknahf39Yy7JQJmrBn7M2seunrqlOU7q+oVwOEMx0epM8LUv1N0ql+06Q5dFT8QGhS/YCgML/05yOTyNOq28OmNm1heIcD46Dhu9fWL8L5AEBNTSQrFJ2ViGDBJmXSWijp9uE1HCDxMvV+iKtiFTvcJ6s0WdKdPzzAzV5bxX603aF3BfK1Od0mLBmyzw1qyX6b7Rmy+KoNhtlyhcpoV++XX3/Afcyyliu38aKcAAAAASUVORK5CYII=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Weather Applet", "title": "Weather Applet", "src": "/static/036cbe6b77145b251543fe524ac753a1/e33ef/iftttWeather.png", "srcSet": ["/static/036cbe6b77145b251543fe524ac753a1/5a46d/iftttWeather.png 300w", "/static/036cbe6b77145b251543fe524ac753a1/e33ef/iftttWeather.png 406w"], "sizes": "(max-width: 406px) 100vw, 406px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://ifttt.com/applets/24908p-text-me-the-weather-every-morning", "target": "_new", "className": "image-caption" }, "Weather Applet"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "407px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/1e46edc025702a42f4aa6d202a0c8589/0ff56/iftttProPublica.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "159.33333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFqElEQVRIx5VViW/TZRiuBoNRro2t5wYIkaFAEJkcAxnQ3Wt3sa3bYAfbunZj3d3uaHd2WxmMbYyxewwBuQaEIMihENBEiaKAxqDiiMaExMR/AR/f92s7WhDUJk++4/d9z/e8ZyX145cRZh5CdO0oompGEFE9LEaG1nbwPyG+fhxbqgYxdOFLSEJK+jBTa8XbuXuwKNOB5fmdCMrpEPBNaIAPwT0+D/5JjXg5zIzMXcch2Vw5KC5fvHUfV2//hCtf/4jHj//CxM17kG5twrz0VgSmvRgLMtowS2uDofs0JBtKD2BVYQ/uTT7CzXuT+Oy7hzjyyW1Uj1wUhCqd/V/Bj87Q1EHfNQHJejJ5fWkfvvjhVxy89BWu33kg5te+fSAOKlNb/h8h+/D9sgP4/PuHOHnjLvh3/7c/SOmkMMdN6En89CNehEz2rrEbN+7+gm9+/h2Tj/7E8et3xFqR0uLlK77Me0+TehGGW4YwJ65eRJkvcdTkKc3wo8hx9Hzi62mvHrPjbGJvPgXgHxXGughDK/qxOLsDjYeuoKDrNHb2noXGOoaSvnMItwxju+MYCvedQe6ek2KvvP88PdSEABeZgsi9FHJC8osxdaPYQZeYZHPlANJaj+Kdgi4kNByCms6kthxBzu4T2Fjej1mklgnZEiYLSLN7E/JL+XtPoW70Y2RRcm5rPybABKwwv/OUIGKFtoOX6JFx6PdOiDO1dIdj8Gp0rbBwSmE+HWA1MVSCfIEVpTQfFqXIF5fm7UEEqU9v+xChRL6BUo1Htmydaf8TQt7kSnEcu4YMOswK80hR6YFzMA9dEMp5HVs3RuuPoLMfFXv8YCz5+r2ifSJYXL7CZPbXgm3torj5El9Odinb2vQB0smX7Ndgush+tY5dEvuJjYdEA2F1bOEMjYuQfcPmNB2+ihoqt8KeM4KQS69i4LwgLtp3Fkbaz+44jkAKAqfS3MRGocxZ7214PfapoLhf5NpmcEtiJat39iLSpZbPyJObKbmbRYJzlJ/JQzX1Qk7gJTm78QaZHkQ5uXC7g9Au8pNb2lJKenYLJ/VKQxeW5XWSVZ1iFFXkmYfqqiEhO6RkP7iu2VccTS5JbhqrjD3OOX3jrrSavnMggmkeQv5zt7cpH3LSsnS+xA5eQcm8trhXEKw0dIvLmyoGhBt4vpHOMRmLkJH5SnelxHoo5A9cy2/t2O00h+ZLuGuTyWwmVwKD/eWctz6/2wiFRMhlxmRsEvtpFWU/7y0k33EQVKRE+Rx4EfIfFHcTZSrVJkEmouecM5Q6UpP2YniZzIS+lFMBuhYoEmqgiLMQzK7RApnWDDmv451rMRLkcRbnfkKtS6HVg5AV8sdEKxRJNkgjiuCv1sOPoIoqgjTMgDmhufDdnA+fTXkC/uoC+IcViHMqemCGxiYahiSMUsRHWwMlqVOltwvI46shCyeSTXqsyWlAvn0EqTW92GJsg7a8E0nmbsgiCuEfbhSPKaJNVCm1boXD8I23kcIqKJMboaQAyKJMLoUFUEQYsSKtmmDB4sRyLEs1Y1lKlXhQqKRzSm2F0+S9Hj5UJVPr11ZBrqmALLoUshgnpDT3DS+Gb0Qx/CJNYmS4v8vofKCuxYOQTJ6b2ITADDaXco7AoyrtCQLIDc/CeS4ww4EF23cJHzobbEkXZkeWiYhJNZXwiSqjsUqs5VoP0FpGFvjHVk5BSpgTWUoow2tqE/Ich4nQYBcRXK4zCx+F6puxUFtCznb6T04QI/ksILoIQUnlU3gzoQxqox26mh5MW70NevswJMGZVrwUnIGlqRYExBSD134UuWlrMjE9JBvT12URsvHK2izM3JiL+ZoSBMaYME9jgpSirC5sQ1bDACRB8ciw9kGy/8Rl7GgexM6OcRjaR8W8oG0UhY4xGNsJHqOBRn3ryBT4XHbjABH2I6dpEBOf3sLfGBdpcTqymjoAAAAASUVORK5CYII=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "ProPublica Applet", "title": "ProPublica Applet", "src": "/static/1e46edc025702a42f4aa6d202a0c8589/0ff56/iftttProPublica.png", "srcSet": ["/static/1e46edc025702a42f4aa6d202a0c8589/5a46d/iftttProPublica.png 300w", "/static/1e46edc025702a42f4aa6d202a0c8589/0ff56/iftttProPublica.png 407w"], "sizes": "(max-width: 407px) 100vw, 407px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://ifttt.com/applets/152298p-get-an-email-whenever-the-u-s-president-signs-a-bill-into-law", "target": "_new", "className": "image-caption" }, "ProPublica Applet"), "\n ")), mdx("p", null, "The next part that you\u2019ll need is a ", mdx("a", { href: "https://www.qapital.com/", target: "_new" }, "Qapital"), " account, which you\u2019ll need to sign up for via your smartphone. Qapital is a very similar service to IFTTT, but it integrates with your bank account to help automate your savings. I have an applet running on there than automatically rounds up to the nearest dollar for every one of my debit card purchases, and then puts that money into a vacation savings account. Once you\u2019ve set up a Qapital account, you\u2019ll need to connect your bank account to it. This will be the account that it draws out of to put money towards your donation."), mdx("h4", null, "Creating a donation Qapital goal"), mdx("p", null, "Now that you\u2019re up and running on Qapital, you\u2019ll need to set up a goal for your target donation. I started with $50 towards the ACLU, but you can do this for any cause or savings goal. This is probably a good time to point out that you don\u2019t have to use this for donation purposes\u2013this would also be great if you\u2019re just trying to control your savings a little more."), mdx("h4", null, "Connect IFTTT to Qapital"), mdx("p", null, "Jump back over to IFTTT, and then go to the ", mdx("a", { href: "https://ifttt.com/qapital", target: "_new" }, "Qapital Service page on IFTTT"), ". Click connect, and then log in with your Qapital account. Just like that, you\u2019re ready to create your first applet with Qapital and IFTTT."), mdx("h4", null, "Find your news source"), mdx("p", null, "We need a concise text-based source to \u201Clisten\u201D to in order for this applet to run. I chose to use the ", mdx("a", { href: "http://rss.cnn.com/rss/cnn_allpolitics.rss", target: "new" }, "RSS feed from CNN Politics"), ". We\u2019ll stick with RSS feeds for this tutorial\u2013keep in mind that you can use any RSS feed you find. What we\u2019ll be doing is listening for a specific word in the feed that will trigger our applet to run. Once you\u2019ve found your RSS feed, head back over to input your feed\u2019s details in IFTTT."), mdx("h4", null, "Creating your first applet"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "Click ", mdx("a", { href: "https://ifttt.com/create", target: "_new" }, "New Applet"), " on IFTTT to start building your first applet. The formula is as simple as the name\u2013if \"this,\" then \"that.\" For the \"this\" side, we'll be using IFTTT's RSS service. Click \"this\" and select the orange \"feed\" icon. We're listening for a word, so select \"New feed item matches.\" Here, you'll input whatever word you want to listen for, and the link to the RSS feed that it will pull from. Keep in mind that this will only be looking at the headline and a quick intro to the story, so you'll want to keep your trigger word short and specific."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "359px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/28276ff97dda755bc284a2f2c3553ce0/f5eb6/iftttFeedIcon.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "99.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACGElEQVQ4y2N4V8rwHxm/LcHOJhYzYDeQ8f+7cpb/78qYIWwSDGfAZtjbAob/b7KAOAcoVggUK2MCYkaiDEVzIcSwT7Nc/3/b0/T/88KA/++bxP+/zYUZzAw2FJ/BqAaWM/9/k83w//uh/v8w8O/Pz/8/Tsz4/75ZCmwwIUMxw7CY4f/7RtH/H6dY/v+6pfj/n9e3IQZ///D/0xwPFEOJ8zLQax+nWP3/sirx/4dWWTD/y9o0uIsJGYrdywe64Qb8vLQaHCGfptvDXfq+RQoSptAUQNDLH9oU/n9eHPL/142tYEP+vLsPlvu6LhPMB4UpzJXEJZtciMEg+tvWMohLLywHu+rPm7v///3+AYx9CayuRHUhML29zQclG2ew136cnvf/LTAt/rq5A2woKAl921YOZn+e74vVlWgGMoMT89eN+WBNfz8+/f82Dxgpy2PA/C8rE4CWuYDZ3/a2gsMbv4HQMHxXyf7/y5rU/x8nGoMNBMX2t10N/z9OMAQnqW87a/9/mmZL2MuwZAAyFGQ7PCyBGt+kM4ANB2fLTAZw0IDDu4SYwgEUlqDY7tECusoI6GKO/+9qeICuE///oVMVoqacmHSIHDl5DODw+rI66f+37ZXAcM0D05/neYPlwAVGKbEGwlwKKsKA+H298P/3tfz/3zeI/H9XxQUJZ2LLQ5SwhBYCb4ugYQml8ZWP+F1IhhwDqUU8IQwAAgr+jOYJqckAAAAASUVORK5CYII=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "IFTTT Feed Icon", "title": "IFTTT Feed Icon", "src": "/static/28276ff97dda755bc284a2f2c3553ce0/f5eb6/iftttFeedIcon.png", "srcSet": ["/static/28276ff97dda755bc284a2f2c3553ce0/5a46d/iftttFeedIcon.png 300w", "/static/28276ff97dda755bc284a2f2c3553ce0/f5eb6/iftttFeedIcon.png 359w"], "sizes": "(max-width: 359px) 100vw, 359px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "IFTTT Feed Icon"), "\n ")), mdx("p", null, "Now that you\u2019ve got the \u201Cthis\u201D side down, we\u2019ll tackle the \u201Cthat\u201D side. Click on \u201Cthat\u201D and choose your Qapital service. Since this is on the action side, we only have one action available\u2013save towards a goal. This will pull in your list of goals from Qapital. Choose the goal that you set up to save towards your donation. You can choose how much you\u2019d like to save towards your goal every time the applet runs."), mdx("p", null, "$1 is a great place to start out if you\u2019re concerned about this getting out of hand, but remember, the applet will only run until you hit the goal that you set in Qapital. For instace, if you set a $10 goal of saving a dollar towards a donation to the ", mdx("a", { href: "http://www.ctunet.com/", target: "_new" }, "Chicago Teachers Union"), " every time Betsy DeVos gets mentioned in the news, you would quickly hit your limit on a high-traffic day like today, when she was successfuly appointed by the Senate. No need to worry, though, once you hit your goal, your applet will stop running automatically."), mdx("h3", null, "Now actually donate the money"), mdx("p", null, "Automation like this is great because it never sleeps or misses an important news story. Unfortunately, we still have one human-involved step in this process to get the money to the place that you\u2019d like to donate. Once you reach your goal in Qapital, you\u2019ll need to transfer the money over to your bank account and then actually make the donation yourself. This definitely isn\u2019t ideal, but it\u2019s a step in the right direction to regularly donating."), mdx("h4", null, "Next steps and improvements"), mdx("p", null, "I\u2019d love to see a way for IFTTT to automatically make that donation for you, but as of now I haven\u2019t found a way to do that. Qapital is a great service to build your savings, but the money does sit in a Well Fargo account until you actively move it out. The upside of this is that your savings are FDIC-insured, the downside is that it\u2019s through ", mdx("a", { href: "https://en.wikipedia.org/wiki/Wells_Fargo#Controversies", target: "_new" }, "Wells Fargo, a historically shady bank"), ". Because of this, I would suggest moving the money out ASAP after you\u2019ve hit your goal. This can also be aided by setting smaller goals and donating more frequently. Qapital makes their money by keeping your funds in that account and accruing interest on them while it\u2019s there, so really it\u2019s in your best interest (har har) to move it to your own interest-accruing account frequently. The tricky bit is that they won\u2019t let you transfer until you\u2019ve hit your goal\u2013if you decide that you want to move the money before you\u2019ve reached your goal, you can edit the goal to match whatever amount you have in the account, and then go ahead and transfer it. Is it perfect? No. Is it a step in the right direction? I hope so.")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/restful-api-mlab-raspi/https://justin.isamaker.com/restful-api-mlab-raspi/Thu, 02 Feb 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Creating a RESTful API on a Raspberry Pi with mLab", "date": "2017-02-02T00:00:00-0500", "teaser": "Learn how to use mLab's cloud-hosted MongoDB instances to make MERN development on the Pi a lot easier.", "featuredImage": "mlab-logo.png" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "The Raspberry Pi tends to end up in a lot of projects that benefit from collecting, storing, and analyzing data\u2013when you have a full computer that costs 35 bucks, it makes sense to attach it to everything! There are plenty of options of how to store the data you collect, but my absolute favorite so far has been working with MongoDB through mLab. This post will walk you through setting up a basic server in Node that will let you push data from you Pi up to mLab\u2019s cloud-hosted MongoDB instances."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/647875466ca07a743e5cef05b3bc0087/6af66/mlab-logo.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAIAAABr+ngCAAAACXBIWXMAAAsTAAALEwEAmpwYAAABfklEQVQoz2PQz59MNmIYBJr18qbo5E01yJ9EmmaD/MlAbWZFE5zKO7VypwG5+nmTIEgvH2QiUI1hAchQ3fwpEAZUM1Cpbt4U08IJu2dbP1yvGN9cpp4z07B4mkHRdL2iGeZFE+yKu4AK1HNm6OZNtSjqU86ZBTQRrnmSes70kNrGbR0qa5ol2yZGK6ZN048p1YurUo6si6osae1KUM2ZmdlYmFJfsmSyb35TjknBBIh+kGaNnOkB1Y2bW+W3tgnU9sYpRTXresdpeycoeqbHZEY1dGcY509YNMn/yByrNVM9urtjqtvSlLJnGRVMBDlbO3eyQ/nEukl9tZN6YrqmqEXX6EWX6UaXqUZW+6clbZntMbU3dNEkv63TnTdPd5k5IRjoBLWcGUDPQ0J7kn7BdOeOQx7dp8wrl+vl9IFCK3eCfu5Eg7yJLmVt9iWdTqUd1kU9QIZHeYs2OAiRowoYthOhCOQfBNLKnQpUrZU3DRjsEMagSmHkaDYsmEI2AgBhE2yJnor1QAAAAABJRU5ErkJggg==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "mLab Logo", "title": "mLab Logo", "src": "/static/647875466ca07a743e5cef05b3bc0087/6af66/mlab-logo.png", "srcSet": ["/static/647875466ca07a743e5cef05b3bc0087/5a46d/mlab-logo.png 300w", "/static/647875466ca07a743e5cef05b3bc0087/0a47e/mlab-logo.png 600w", "/static/647875466ca07a743e5cef05b3bc0087/6af66/mlab-logo.png 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "mLab Logo")), mdx("h3", null, "Creating a mLab Account"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "mLab has enterprise options for larger companies that use their service, but they also have a 0.5 GB free tier that's great for smaller projects like this. Go ahead and sign up for an account\u2013once you're logged in, we can get you started on what kind of deployment you'll need. We'll be using a sandbox environment. To create a new sandbox, click the \"create new\" button\u2013this will take you to the configuration screen.", mdx("br", null), mdx("br", null), "I prefer to run my instances on AWS, but you can also run on Google Cloud or Microsoft Azure. For this tutorial, let's select AWS. You can pick what region you'd like to run your AWS instance from, but for general-purpose applications, the default of US-East-1 is pretty solid. Click \"single node\" to reveal the smaller options, and then click \"sandbox\" to choose our deployment type. There's only one version of MongoDB available for sandbox accounts, so you can just let the version stay as-is. The last thing we need to do is come up with a name for our database\u2013let's call ours \"pi_test_databse\"."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "594px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/70372643bcaf1ff2932bd98ba8cc8169/5fd3e/mlab-config.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "185.33333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFsElEQVRIx5VW2W9UdRSed6NRllLazr7v+z539mlnhpnpNoVSOiC2QCDiC0ZciBAJsSgoMcEEDKCgPmh89Al9NTHRxAR50WgMvpmof8LnOWfuHae1BXz4eu690/vds3zn/I7O6E/CFMpi1OzCbouX4MGYtW818P24zSd2Mwz/pvNEMphdPIT5/YfQnFtEe34/Ot0D6B0+irl9PXQXe6jU2xgzu+XFzaCRMnQmTwThTBnBVBH+RB4BZQr+fBPhYguR8jQCdB2ka2eiCJsvBnsgIbD54wKLN7qecMLuh9EdgtkdhsEZhDmcgzVegiVWJFuGJVqALVGBhdIyId74Ng15QOgMJhDNVeGNFxHL12D1hPDEtjE8tVMveHrUSHYCTxK2T9gwYfdtGboQjtsDeP3NNVy/cQXXbn+KF89ewCtnz+Pchbfw0plzWH3+FF47fxFvrF3G3t4KRozOft62KJJuxBLEvXt38feDr/Hd9z/gq2++xU8//4LfHjzAj/fv47Mv7+L+r7/jjz//wvvXb2LbuBWcpi09HKXq5RqzaC2tYunoScwur2DfwVX0Vo6TPYJZqvTy4WN0vYJcrS05fGjIZqqyO5wSDQZSJeSqLcQyJSSUKtLFKSQor7FcBZ5oBmbSLHs3ZvVsqUmdg4qSoS/bc3tgybVgTlQxSl6M0AdGzF6x/GWDIwAjqWAdXIyQiqAasskJY+8M7K9+DNfpW6isfY76218gcOYObC9/BMfpm0hUO0gpFcTJ08nWPIl/Cc2ZfZhsz8uzJEXBVk8f1Y2Tm4ZYGUbyzphpwKK0BGby2MTINmHyRGFSvWG9WrwRcKrMnrA8M7GHTtVDjttg88IdiMHlj8IdjIu1OP2wugIC7gir2hVmglgitPiisFL3MNg7ySH/sfri0nqBZAG+WE5eMjhDfbhC0kEG53C+hjD0fCCbaLaMhQPPYYYkMtXuwhVKgYeGN5oVq107g8nNQb3tILACxEM7heMlzzz0EttwuoxQukS2JJ6HCEHynondGxFOS1T828DDmFJDd3kVC70jqHX2olCfIRF3kCw1kCo3kSr1kSjUER8C30dzNXqHKt5ZkNmp4z8BGlsV7pa5JZFCNFsVr6LZCiI02jQ41NA0cLhWynciPwml0iRCN3lIhBxOjfTV6S6jPr2AOHnMBDHqFiaPEDFPJO4ojUgDp0uh7uoTev4lrO6ZQ4sE2yBC/iLnj4vFXoaFvCZ52kjI9wp1GrfpGBNqTc25ZOwy9Ue9SMURHEjmkSAdDorClZxZ6KFDHra7S8iU65IbDkeDbcjyUSBQr7XnQshxc9nLVJRSfRqlxgyylA/OGYcbVfMXUcPn/MboXgPf++OKEA90yLmI0MgKqZrzx/MD7Q2DP+yLKULA12wZrBIW/sBDflAi7TVnF6nac1JhJmQbVgUepg9yAYbTwPecmnSxTpXeo1bZ7KGXWTZdyt8BVTaT/coOha3pcH2F+1UuTk0jp8lm90CHXUzv7YlsmMhHobBnnCNNl3xCbuxjJsxPtpGhrhLZyPhSpzGPIJ7ggYQi4CHBiebfHyUbvSYbPnR4nrkjaXoYxKEjJ3Dx0rtYu3QFK8dfwA6946F7zX/OFA55l8m1TtjDS9O4ui087KRbd+rx9HWGkjLauWJ6CpE3hO16u1gmnrD9D0JefA6unsDhYydxkM7ipWePIl9roTDVpup1RLBM+tiEvFocP3kK77x3FRcvX8HVazdw48M7+ODWbdy6/Qmy5QZ2GhzqefwYOeQe5EnNLz1DawavGlq4W4XMCxN/QINe7FAOa+0FqbJ2bozTKaj9s5AMrWzsxYjRLQ4wdjBICSNU2DGt9co0EAqUry4dVBwiV32zDXU3WbPLj6RSkIGqVBrIV5soTtL6ki2JIzIPd6mS4XyOqquvkGxYJpnQ5PQhkkwjTgQJRq4sW0UwnhXCfwDN3622G4uUKAAAAABJRU5ErkJggg==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Configuration for a Sandbox Deployment", "title": "Configuration for a Sandbox Deployment", "src": "/static/70372643bcaf1ff2932bd98ba8cc8169/5fd3e/mlab-config.png", "srcSet": ["/static/70372643bcaf1ff2932bd98ba8cc8169/5a46d/mlab-config.png 300w", "/static/70372643bcaf1ff2932bd98ba8cc8169/5fd3e/mlab-config.png 594w"], "sizes": "(max-width: 594px) 100vw, 594px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Configuration for a Sandbox Deployment"), "\n ")), mdx("h3", null, "Adding a user to our database"), mdx("p", null, "Once your mLab deployment is created, go ahead and click into it, then click the \u201Cusers\u201D tab. We\u2019ll need to add an admin user to interact with our database. Create a user called \u201Cadmin\u201D with a strong password, and leave the \u201Cread-only\u201D box un-checked."), mdx("h3", null, "Setting up Node on a Pi with NVM"), mdx("p", null, "If you\u2019re running the latest instance of Raspbian Jessie, the Pi should already have Node installed. If you need help getting your Pi set up with Raspbian, ", mdx("a", { href: "/ansible-pi", target: "_new" }, "check out my other blog post about standing up a headless Pi with Ansible"), ". We could certainly run with this pre-installed version of Node, but it\u2019s a very old version, and we want the new shiny stuff. In addition to that, we want to be able to switch between versions for different projects. To handle this switching, we\u2019re going to install something called ", mdx("a", { href: "https://github.com/creationix/nvm", target: "_new" }, "Node Version Manager"), ", or NVM for short. ", mdx("a", { href: "https://github.com/blobsmith/raspberryTestNode/wiki/Node.js-installation-with-nvm-on-Raspberry-pi", target: "_new" }, "Here\u2019s the set of instructions that I\u2019ve followed to accomplish this."), " Feel free to hop over to Blobsmith\u2019s GitHub and follow his guide, or you can just keep reading here to get the gist of it."), mdx("p", null, "First off, we need to download NVM. Do this by running ", mdx("inlineCode", { parentName: "p" }, "git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout v0.33.1"), " on your Pi. This clones the repo to a \u201C.nvm\u201D folder inside our home folder, then checks out the latest code. At the time of this post, the latest is version 0.33.1, but you should change that to the latest stable version when you\u2019re doing this on your own. Next, we need to add the command to source NVM to our .bashrc and .profile files. Do this by executing the following commands on your Pi:"), mdx("ul", null, mdx("li", { parentName: "ul" }, mdx("inlineCode", { parentName: "li" }, "sudo nano ~/.bashrc")), mdx("li", { parentName: "ul" }, "Add ", mdx("inlineCode", { parentName: "li" }, "source ~/.nvm/nvm.sh"), " to the end of the file"), mdx("li", { parentName: "ul" }, mdx("inlineCode", { parentName: "li" }, "sudo nano ~/.profile")), mdx("li", { parentName: "ul" }, "Add ", mdx("inlineCode", { parentName: "li" }, "source ~/.nvm/nvm.sh"), " to the end of the file")), mdx("p", null, "It\u2019s a good idea to leave a comment for yourself so you know why that extra line is there. You can do that by starting a new line with the \u201D#\u201D sign. After you\u2019ve saved those files, reboot your Pi and SSH in again."), mdx("p", null, "When you\u2019re back in, type ", mdx("inlineCode", { parentName: "p" }, "nvm"), " to see if the install worked. You should get the manual page for NVM. We\u2019re going to start by installing the latest stable version of Node\u2013do this by running ", mdx("inlineCode", { parentName: "p" }, "nvm install stable"), ". Once that\u2019s done, if you type ", mdx("inlineCode", { parentName: "p" }, "nvm ls"), ", you should see two versions of Node installed\u2013one for the stable version we just added (v7.7.3 in this case), and one for the system version. Congrats, you\u2019re now able to install multiple versions of Node on your Pi!"), mdx("h3", null, "Creating our project"), mdx("p", null, "In your home directory, make a new directory called \u201Cpimlabtest\u201D and cd into it by running ", mdx("inlineCode", { parentName: "p" }, "mkdir pimlabtest && cd pimlabtest"), ". We\u2019ll start by telling this directory to use the version of Node that we just installed. Run ", mdx("inlineCode", { parentName: "p" }, "nvm use stable"), " to accomplish this. Next, we\u2019ll run ", mdx("inlineCode", { parentName: "p" }, "npm init"), " to get us set up to pull packages from Node Package Manager. Feel free to enter the fields that it asks you for if you\u2019d like, or you can just hit enter a few times to accept the defaults. If we ", mdx("inlineCode", { parentName: "p" }, "ls"), " in that directory, you should see that NPM added a package.json for us to keep track of all of our modules. We\u2019re going to start by installing a few packages\u2013run ", mdx("inlineCode", { parentName: "p" }, "npm install --save express mongoose body-parser ip request node-cron"), ". This will get us set up to start scaffolding our project. It\u2019s worth noting that this will only install these packages in this specific node_modules directory for this specific version of Node that we set with NVM."), mdx("p", null, "Next, create a file called ", mdx("inlineCode", { parentName: "p" }, "server.js"), " by typing ", mdx("inlineCode", { parentName: "p" }, "nano server.js"), ". This will bring you into the nano editor where we can start writing our code. Let\u2019s start with our basic module declaration and server setup. Enter the following code:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " express ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'express'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n mongoose ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'mongoose'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n bodyParser ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'body-parser'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n ip ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'ip'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n request ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'request'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n cron ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'node-cron'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n app ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "express"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n port ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "8000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\napp", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "listen"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "port", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\nconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'server listening on port'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "port", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Now that we have that file created and our packages installed, you should be able to run ", mdx("inlineCode", { parentName: "p" }, "node server.js"), " and get a message back that the server is listening on port 8000."), mdx("h3", null, "Setting up basic routes"), mdx("p", null, "We\u2019ll continue building our database interactions out by scaffolding our basic CRUD operations (create, read, update, delete). If you\u2019ve got all of those bases covered, there isn\u2019t much that you can\u2019t do with this database. Let\u2019s start by creating a few directories to organize our project. Create an app directory, and then inside that create a routes directory. After you\u2019ve created those two folders (", mdx("inlineCode", { parentName: "p" }, "mkdir app && mdkir app/routes"), "), create an index.js file in your routes directory by typing ", mdx("inlineCode", { parentName: "p" }, "nano app/routes/index.js"), ". We need to tell Express to route our index route through something called \u201Cmiddleware\u201D. Middleware exists to help us work with the data between Node and database\u2013the most important this we\u2019ll be using it for is to grab the request and response objects. Enter the following code in this file:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " express ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'express'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n router ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " express", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "Router"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n bodyparser ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'body-parser'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// router middleware"), "\nrouter", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "use"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "req", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " res", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " next"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "next"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\nrouter", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "route"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "post"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "req", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " res"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'Index route is good!'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\nmodule", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "exports ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " router", mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Once that file is good, we need to go back over to server.js and tell it about the work that we just did. It\u2019s a good time to mention that you can certainly test this application through something like ", mdx("a", { href: "https://www.getpostman.com/", target: "_new" }, "Postman"), ", but we\u2019re going to be doing the same thing in our server code by using the Request and IP packages."), mdx("p", null, "To start, let\u2019s tell our server code about our IP address. We\u2019ll use this to route our requests to the Pi\u2019s IP. Add the following code to your server.js file right under our other variable declarations:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " myIp ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token string" }, "'http://'"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ip", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "address"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "':'"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " port", mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" })))), mdx("p", null, "While you\u2019re at it, you can also replace our console.log statement in server to log the full IP and port. Change ", mdx("inlineCode", { parentName: "p" }, "console.log('server listening on port',port);"), " to ", mdx("inlineCode", { parentName: "p" }, "console.log('server listening on',myIp);"), ". Run ", mdx("inlineCode", { parentName: "p" }, "node server.js"), " again and you should get your IP listed out."), mdx("p", null, "Now we need to tell server.js about our index route. Since we exported the module as router at the bottom of the \u201Capp/routes/index.js\u201D file, we can reference that router in other files now. Include the following code in server.js to do so:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token comment" }, "// Include routes"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " indexRoute ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'./app/routes/index.js'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Register routes"), "\napp", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "use"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " indexRoute", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "So we\u2019ve told our server.js about the route, but it still isn\u2019t doing anything. This code won\u2019t actually produce a result until we make a request to ask it to do so\u2013this is where our IP declaration and the request package come in. We\u2019re going to enter the following code in server.js right under our console.log statement to handle that action:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token comment" }, "// request the index route"), "\nrequest", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "post"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "myIp ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Now when you restart your server (", mdx("inlineCode", { parentName: "p" }, "node server.js"), "), you should see the original console.log, along with another that says, \u201CIndex route is good!\u201D This means that our routing is hooked up and ready to go!"), mdx("h3", null, "Telling our app about the database"), mdx("p", null, "We\u2019ve got our main route covered, now we need to tell the app about the database that we\u2019ll be working with. We\u2019ll start by making another directory inside \u201Capp\u201D called \u201Cmodels\u201D. Inside that models directory, we\u2019ll create a file called \u201CpiMlabTestDatabase.js\u201D. In this new file, we\u2019ll use Mongoose, an object modeling package that makes working with MongoDB a lot easier. We\u2019ll need the database URL to get started here\u2013go back over to mLab in your browser, click into your database, and look for a message at the top of the page that says \u201CTo connect using a driver via the standard MongoDB URI\u201D. We need to copy that full URL underneath that line. Now let\u2019s go back over and edit our piMlabTestDatabase.js file that we created on our Pi. Enter the following code\u2013make sure to replace the credentials sections (dbUser, dbPassword, yourDBUrl, yourDBName) with the URL that you just grabbed:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " mongoose ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'mongoose'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " mongoAddress ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token string" }, "'mongodb://<dbUser>:<dbPassword>@<yourDBUrl>/<yourDBName>'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " options ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n server", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n socketOptions", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n keepAlive", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " ", mdx("span", { parentName: "code", "className": "token number" }, "300000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " connectTimeoutMS", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " ", mdx("span", { parentName: "code", "className": "token number" }, "30000"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n replset", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n socketOptions", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n keepAlive", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " ", mdx("span", { parentName: "code", "className": "token number" }, "300000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " connectTimeoutMS ", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " ", mdx("span", { parentName: "code", "className": "token number" }, "30000"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\nmongoose", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "connect"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "mongoAddress", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " options", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n"), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Once we have that file saved, we can go back to server.js and tell the server about our mLab connection. Add the following line to server.js above where you declared your route."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token comment" }, "// Include models"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " db ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'./app/models/piMlabTestDatabase'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Restart your app to make sure everything works\u2013we should still only be getting the two console.log statements."), mdx("h3", null, "Defining a model"), mdx("p", null, "Now that we have our database hooked up, we need to tell it what kind of data we actually want to upload. Let\u2019s start by determining what data we want to store\u2013say that you have a Pi that you\u2019re using as an awesome media player, and it sits on a sunny ledge in your living room. We want to track the temperature of our Pi to make sure that it isn\u2019t getting too hot in the sun, so we\u2019ll create a model to log that temperature. Start by creating another file in your models directory called \u201CpiTempModel.js\u201D, then enter the following code in it:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " mongoose ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'mongoose'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " PiTempSchema ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " mongoose", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "Schema"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n timestamp", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " Date", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n temp", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " Number\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\nmodule", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "exports ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " mongoose", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "model"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'PiTemp'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " PiTempSchema", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "All we\u2019re doing here is telling our MongoDB the name and what kind of data we\u2019ll be storing. We\u2019ll create a timestamp to help us analyze our data, and then ask the system what the current temperature is and return it as a number. Once again, we\u2019ll need to go back to server.js and tell it about this new model file. Enter the following code under the line where you included your database:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " piTempModel ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'./app/models/piTempModel'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" })))), mdx("h3", null, "Creating a model"), mdx("p", null, "We\u2019ve got our model set up, so now we need to actually create the model. We\u2019ll do this in our index route file. First we need to install another NPM package to be able to read the system temp. Run ", mdx("inlineCode", { parentName: "p" }, "npm install --save child_process"), " from the root of your project to install the new package, then navigate back to editing your routes/index.js file. That child_process package will only be used for this index route right now, so we can include that in the variable declarations at the top of the file."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " exec ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'child_process'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "exec", mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" })))), mdx("p", null, "We also need to tell this routes file about the model file we just created. Add the following line in your variable declaractions section of the /routes/index.js file to do that:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " PiTemp ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'../models/piTempModel'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" })))), mdx("p", null, "Now we can get on to actually handling the action and creating a record in the database! We\u2019ll include the code to get the current temperature and send it to the db inside your \u201C.post\u201D function in /routes/index.js. Here\u2019s a quick rundown of how we\u2019ll get the temperature:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, "router", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "route"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "post"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "req", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " res"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'Index route is good!'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n getCurrentTemperature ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " child ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "exec"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'cat /sys/class/thermal/thermal_zone0/temp'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "err", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " stdout", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " stderr"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "err", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'There was an error getting the current temp:'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "error", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " currentTemperature ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "parseInt"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "stdout", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token operator" }, "/"), mdx("span", { parentName: "code", "className": "token number" }, "1000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'Current temp is:'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "currentTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), mdx("span", { parentName: "code", "className": "token string" }, "'\xBAC'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "If you restart your server, you should see the two original console.log statements, plus a new one that\u2019s telling you the current temperature of your Pi in celsius. You\u2019ll notice that we wrapped the getCurrentTemperature in an ", mdx("a", { href: "https://developer.mozilla.org/en-US/docs/Glossary/IIFE", target: "_new" }, "IIFE"), ", which means that the function will run as soon as it gets defined. Now we can move on to actually saving that to the database."), mdx("p", null, "We\u2019ll need to add a timestamp to satisfy our model\u2019s requirements, then all we need to do is actually send it. You can find how to do that in the following code:"), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, "router", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "route"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "post"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "req", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " res"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'Index route is good!'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n getCurrentTemperature ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " child ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "exec"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'cat /sys/class/thermal/thermal_zone0/temp'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "err", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " stdout", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " stderr"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "err", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'There was an error getting the current temp:'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "error", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// add the date"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " thisDate ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "Date"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// add a new instance of our model"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " thisTemperature ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "PiTemp"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " currentTemperature ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "parseInt"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "stdout", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token operator" }, "/"), mdx("span", { parentName: "code", "className": "token number" }, "1000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// tell the model what data we want it to use"), "\n thisTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "timestamp ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " thisDate", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "toISOString"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n thisTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "temp ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " currentTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// save the record to the db"), "\n thisTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "save"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "err"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "err", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n res", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "err", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'New temp recorded in the database as:'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "currentTemperature", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), mdx("span", { parentName: "code", "className": "token string" }, "'\xBAC'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n res", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'new temperature recorded to the db'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Go ahead and restart your server. If everything is working correctly, you should see the console.log output that it saved the DB. Just to make sure, let\u2019s hop back over to our mLab page in the browser. Refresh the page, and you should see that a new collection called \u201Cpitemps\u201D was created, and it now has one document in it. Congratulations, you just coded the first step to creating an API for your Pi! Click into the pitemps collection, and you should see a JSON output of the document with your current temperature reading and timestamp."), mdx("h3", null, "Setting up a cron job to read the temperature"), mdx("p", null, "We\u2019ve got one reading, but what we really want is to have our Pi report the reading every 20 minutes. We\u2019ll use node-cron to do this back over in our server.js file. At the very end of your server file, we\u2019ll add a cron job to use the request model to hit the main index route."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, "cron", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "schedule"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'*/20 * * * *'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n request", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "post"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "myIp ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "'/'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "Now you should get an initial reading when you first start your server, and then an additional reading every twenty minutes as long as the Pi is running your server code.")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/lawton-academy/https://justin.isamaker.com/lawton-academy/Sun, 29 Jan 2017 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Lawton Academy", "date": "2017-01-29T00:00:00-0500", "teaser": "A website redesign for a Lawton Academy, a school that focuses on bringing out the best in its students.", "featuredImage": "lawton-academy-logo.png", "externalLink": "http://lawtonacademy.com" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "Education is hard\u2013there\u2019s no two ways about it. I\u2019ve only dipped my toe into the education arena through a few very limited engagements, but it\u2019s been enough to reinforce the diehard gratefulness that I have for folks who were called to that line of work. My support of educators is also rooted in the fact that I come from a family chock full of them\u2013I\u2019ve got six in my immediate family! The majority of them teach at a small K-12 school in Southwest Oklahoma called the Lawton Academy of Arts and Sciences."), mdx("p", null, "The school was founded by my grandmother in 1999\u2013she had just retired from a fifty-year career in various roles with public schools in Lawton. Her career culminated with her serving as the superintendent of a magnet school. People from the community came to her when she retired and asked her to start a non-religiously-affiliated private school. At the time the only options for private education in Lawton were Catholic or hardline Southern Baptist schools, and the town was losing people like surgeons and engineers that didn\u2019t want to put their kids into that kind of education."), mdx("p", null, "The website for the school had been through a lot of iterations before I took it over. A few of the teachers were trying to rely on that famous Okie stubbornness to make a site generator stretch significantly farther than it was supposed to, but ultimately they were working harder than they needed to. I rebuilt the website for them with a custom WordPress theme and Advanced Custom Fields integration that made it easy for anyone at the school to make sure that the information was up-to-date and relevant."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/c84c92c7b7faf463f757a17a1a460f46/6a5c3/lawton-academy-capture.png", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "88.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAADpElEQVQ4y3WTW2gcVRjH8yT4IvTJJ5/6YKWmGKvGqqQGtYiK6Q1KoMRiXwRRIUUpgUTFYr21RkNUULyk8QLSCFLqjcSCbQm11ly7m2z2vjM7s9nd7M7uTGZ3Z+fnN7NpbtgDf86Z+c75n+/7n//XlHXgurLIpakg18JJNBvSy66ANdhs/PbiK/tUgWLWufZPgHNDIzTlXPg3kmLk9z8589M5kqWqT6ot19Fls267aFbdn9dAI1ZpzBmZtapcIMk1pS2XlJBMRVVmEjpp/zDklh0WSzaZcoVUtojurUvLApusVUM3LH+PVjTJmFVUyTJtOjQ5dZdqzcEomz4KRYOCUSKbL1BxJP2V4a6bN8MbQkOtXqfJ+6hUKszPzxNeWCAajhCLxYiEw/6cSCQESRRFIR5PkEw21qqaJiWzoqqkUgoV2/aJfcJqrUZCUUlkMkQzOuF4nHhKpVAoYpomuVwOJa1RLBbIZrNCHPdJlVRKyFLE5WIvqVXCghw4P/QZox+eJvjJFyyM/8X4L2cZ/vpz+k9/wNhvoyRmpvn+zA9cvnjJP1gUWUoikV2prknhug3CqJR6qHU7r+xs5p0dLRx+vJ2n7t3Bli23cfutt/Bo60MMn/2ZbW3P0v1aH3XRamJykkAw6EsViUY3ZljMpOnt2sv25rvZ3XoXT99zBx177uSFgw9wdM+DHHjsPl7u7qXjwH4GvvyKarXK9PQ0oVBoReMENZFtlTAYCLL3kWbe6tnPka5BujpGOPTit7x0rI83jr/PyVdP8OM3Azy3r5/vLujUa5ZkFSMjeut6A47jrBHOh5Zoe+IPOo+meOZ5eLijyq52ja0to2zdNUhL+6/c3/ou23Ze4b2PF2k8ZJ3NY03DhM2TB69y+MhV9nWeom13JyeODdF/aoyPXh/g0zffZrCnh+GTx5m9eN4/XHPq/qOUTQvPyx5WM7TF2HOZRRJ5nVBG47qqifPL5KsG2YqBbi6RNvIkC0vkLathZCGoiJaedt667q4jdJwaRrGIZS5vKMEsW+K9Eu6m6jyi/+scbpRsWQ2RF8W0uVye/NKSlOCVVCYqpvU6IS8Xjo1fJiQ2yeXzvsHLYnrbMDA1zbfSaoaeh/KyySP2OsODNwzZPDU1xYxYZHZujr7ebi6I4VXpmsmJCWZmZ1Ekpl/5G2d963mv492wHjcII5EISWkvVVXQYmFss+S3XiAQYEH6PS0xQ7JdfWXXdbnZuFnM++/HVuLrNfwPoTn+ioaFMUkAAAAASUVORK5CYII=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The Lawton Academy Website", "title": "The Lawton Academy Website", "src": "/static/c84c92c7b7faf463f757a17a1a460f46/c1b63/lawton-academy-capture.png", "srcSet": ["/static/c84c92c7b7faf463f757a17a1a460f46/5a46d/lawton-academy-capture.png 300w", "/static/c84c92c7b7faf463f757a17a1a460f46/0a47e/lawton-academy-capture.png 600w", "/static/c84c92c7b7faf463f757a17a1a460f46/c1b63/lawton-academy-capture.png 1200w", "/static/c84c92c7b7faf463f757a17a1a460f46/6a5c3/lawton-academy-capture.png 1646w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "http://lawtonacademy.com/", "target": "_new", "className": "image-caption" }, "The Lawton Academy Website"))); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/en-las-tablas/https://justin.isamaker.com/en-las-tablas/Wed, 22 Apr 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "En Las Tablas", "date": "2015-04-22T00:00:00-0500", "teaser": "An easy-to-use custom WordPress site built for a community arts and outreach organization in Chicago.", "featuredImage": "elt-thumbnail.jpg", "externalLink": "http://enlastablas.org" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "En Las Tablas is a wonderful non-profit that operates in the Hermosa neighborhood of Chicago. The organization focuses on providing much-needed arts education to kids in the surrounding area\u2013something that they usually aren\u2019t getting at school due to severe underfunding."), mdx("p", null, "I got involved with En Las Tablas through the Nerdery\u2019s Overnight Website Challenge. I convinced a group of 9 of my colleagues from Critical Mass to stay up for 24 hours attempting to build and launch a website for a non-profit that needed one. We were paired with ELT during the speed dating portion of the event that took place a week before the kickoff\u2013we had an instant connection with the two ladies who run the organization, and we were thrilled to work with them."), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "ELT was a little unique in regards to the event's participants in that they already had a website. The website was built by a relative of one of the organizers, and had not been updated in some time. While they were grateful for the existing site, it was definitely time for a face lift."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("img", { parentName: "div", "src": "/44e276a6a284c9a9ce6ae46d28fe018d/en-las-tablas-old-site.gif", "alt": "ELT's Old Website" }), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "ELT's Old Website"), "\n ")), mdx("p", null, "We built the site on Wordpress in order to make it easy for them update it with the latest courses and events. The more we dug in to their business plan, the more we realized that a good website could make their lives a lot easier."), mdx("p", null, "Before the website, events were announced to the parents who had children enrolled. When they wanted to buy a ticket or pay for a class, they had to come in to the studio and fill out a form that had been xeroxed-to-death, and then pay in cash. This left the studio holding a good amount of cash, which is something that they were considerably stressed about. Everyone knew that they had cash on hand\u2013if they were robbed, there was a good probability that the studio would need to shut down."), mdx("p", null, "We were able to move their event and class scheduling system over to Eventbrite, as well as set up an e-mail blast for them in Mailchimp. This let them easily update and spread the word about their classes, but it also took the onus of charging for the classes off their hands. They were now able to send e-mail blasts letting people know about new offerings, even if the person didn\u2019t have kids currently enrolled in a class."), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/76a5a9b78ff528ad1810a4e6aad7c52f/4b190/en-las-tablas-home.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "195.33333333333337%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAnABQDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAMBBAIFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAYZjyx3sic/ct5tWm3iPI1FTB//EABwQAAICAwEBAAAAAAAAAAAAAAABAgMQERMUIv/aAAgBAQABBQKT3L5E8JI0eesVEDhWaz1memwlbNv/xAAeEQACAQMFAAAAAAAAAAAAAAABAgADEBESExQxUf/aAAgBAwEBPwGqNoZM5KxiW7mlfL//xAAaEQEAAQUAAAAAAAAAAAAAAAABEAACAxEU/9oACAECAQE/ATCtct0bZ//EABwQAAICAgMAAAAAAAAAAAAAAAAyASACkSFBof/aAAgBAQAGPwKORqr6KLR8tnQ07P/EACIQAAICAQEJAAAAAAAAAAAAAAABESExEFFhcYGhscHw8f/aAAgBAQABPyFOBW4dqnyExkWMjisgjY9Y+kepssxpt6U+QKCOwliXwgf/2gAMAwEAAgADAAAAEFv6Q3AP/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAERIWEQQf/aAAgBAwEBPxB3jtxRgxJDytswd//EABoRAQEAAgMAAAAAAAAAAAAAAAEAECExUWH/2gAIAQIBAT8Q1wk9hCnDeuDV/8QAIBAAAgIBBAMBAAAAAAAAAAAAAREAITFBcbHwYZHRof/aAAgBAQABPxAsM0LKHcBLpIc5Es5cUYQePyNSq9VCchjeEAQL6ZgOBQ8/s6PtCRWlpBEAVmxAKsB7TA7G8AFjQTJPmIR0AiB6c//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "En Las Tablas Home Page", "title": "En Las Tablas Home Page", "src": "/static/76a5a9b78ff528ad1810a4e6aad7c52f/4b190/en-las-tablas-home.jpg", "srcSet": ["/static/76a5a9b78ff528ad1810a4e6aad7c52f/f93b5/en-las-tablas-home.jpg 300w", "/static/76a5a9b78ff528ad1810a4e6aad7c52f/b4294/en-las-tablas-home.jpg 600w", "/static/76a5a9b78ff528ad1810a4e6aad7c52f/4b190/en-las-tablas-home.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "En Las Tablas Home Page"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/f84806927c8da4e263da465041d16e7d/4b190/en-las-tablas-classes.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "177%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAjABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAIFAQMEBv/EABYBAQEBAAAAAAAAAAAAAAAAAAACAf/aAAwDAQACEAMQAAABtY9Reh0mRxW7U2CrHnwAf//EAB0QAAIBBAMAAAAAAAAAAAAAAAABAwITFCAEETH/2gAIAQEAAQUCsRFiMx4tGdIXmdQZUY+bQtP/xAAYEQADAQEAAAAAAAAAAAAAAAACElEAIP/aAAgBAwEBPwFyucrz/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwFf/8QAGxAAAgIDAQAAAAAAAAAAAAAAADIBIBBBgZH/2gAIAQEABj8CQQSknMLJr0Waf//EAB8QAAICAQUBAQAAAAAAAAAAAAABETFBIVFxkfAQgf/aAAgBAQABPyF7XsWdPfpJq07Y7fBmsCpG48Gpdbig86NKZoG8S8R9uz//2gAMAwEAAgADAAAAEGAZTAAP/8QAGREAAgMBAAAAAAAAAAAAAAAAAGEBEJER/9oACAEDAQE/EGNGtOk3/8QAFhEBAQEAAAAAAAAAAAAAAAAAEAER/9oACAECAQE/ENY//8QAIBABAAICAQUBAQAAAAAAAAAAAQARITFBUXGhsdEQYf/aAAgBAQABPxAYhgzt9hno7KUhywXr9JTSxnmrnfieNKKEBzDiABFoMtSmBvG4uK5Tu9wU0+hN9prMBlo9y3XH4qrVv9n/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "En Las Tablas Class Listings", "title": "En Las Tablas Class Listings", "src": "/static/f84806927c8da4e263da465041d16e7d/4b190/en-las-tablas-classes.jpg", "srcSet": ["/static/f84806927c8da4e263da465041d16e7d/f93b5/en-las-tablas-classes.jpg 300w", "/static/f84806927c8da4e263da465041d16e7d/b4294/en-las-tablas-classes.jpg 600w", "/static/f84806927c8da4e263da465041d16e7d/4b190/en-las-tablas-classes.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "En Las Tablas Class Listings"), "\n "))); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/sixty8-chicago/https://justin.isamaker.com/sixty8-chicago/Wed, 22 Apr 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Sixty8 Chicago", "date": "2015-04-22T00:00:00-0500", "category": "core-project", "teaser": "A clean website built for an even cleaner grooming product. Sixty8 Chicago makes pomades and other barber-related items for the discerning customer.", "featuredImage": "sixty8-thumbnail.jpg", "externalLink": "http://sixty8chicago.com" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "A clean website built for an even cleaner grooming product. Sixty8 Chicago makes pomades and other barber-related items for the discerning gentleman, and I was lucky enough to build the website for their product launch."), mdx("p", null, "Joe Caccavella, Jr helps run Joe\u2019s Barbershop Chicago with his father, Joe Caccavella, Sr. The shop opened in Logan Square in 1968, and has been turning out quality barbering ever since. For those familiar with Logan Square, the fact that anything has been around that long and withstood the changes to the neighborhood is a testament to the quality that the shop provides."), mdx("p", null, "I actually used to live behind the barbershop before it expanded. If you visit, there\u2019s a pretty good chance that you\u2019ll be getting a haircut where I used to sleep or work. All this goes to say that Joe and I go back and few years, and we\u2019ve had a great business partnership ever since we met each other. Another one of Joe\u2019s longtime customers, Robb Jibson, is the other half of Sixty8 Provisional Co. The two set out to make a line of pomades that could keep up with the standard that the shop holds themselves to, and they\u2019ve since expanded to include a bevy of other high quality grooming items."), mdx("p", null, "The site runs on a built-from-scratch fully-responsive Wordpress theme in order to make it easy for the guys to update it and keep it running. This was the first venture into e-commerce for Joe, who is in charge of keeping the wheels turning on the orders front. I was able to build a full solution for them using WooCommerce that lets Joe get in and out as quick as possible so he can spend more time barbering and less time futzing with inventory and wholesale user management."), mdx("p", null, "In addition to the standard e-commerce needs, the site includes a series of utilities to facilitate wholesale purchasing. Sixty8 needs to vet their wholesalers in order to maintain the reputation of the product, so I built them a system where folks could apply for wholesale priveleges. Once the application is submitted, Joe is able to vet the applicant and see if they cut the mustard. If they\u2019re approved, wholesalers have the option to makes bulk purchases that aren\u2019t available to regular users."), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/7fbae01ba9f4ffc84c7441436cfbecbd/4b190/sixty8-homepage.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "116.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAQBAgUD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAZabPaXnOkK8FmwP/8QAHRAAAgIBBQAAAAAAAAAAAAAAAAECEQQDEhQhQf/aAAgBAQABBQJY07eK2cWRHRhF+dlG0pH/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAcEAACAQUBAAAAAAAAAAAAAAAAAZEQESIxQTL/2gAIAQEABj8CFmoPSguk5rw4aP/EABwQAAICAwEBAAAAAAAAAAAAAAABESFBUZFhcf/aAAgBAQABPyFxE3CedFmoUUYiQR2siXRuidhrhcHxweTh/9oADAMBAAIAAwAAABDYAAD/xAAXEQADAQAAAAAAAAAAAAAAAAAAEBFR/9oACAEDAQE/EJhH/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAECAQE/EGd//8QAHhABAAICAQUAAAAAAAAAAAAAAQARITFhQYHR4fH/2gAIAQEAAT8QIxQug92ZfAgGws5zuBqE5F5m3xrXL5IqMBomodcZjnCOtiU9GfPT/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Sixty8 Home Page", "title": "Sixty8 Home Page", "src": "/static/7fbae01ba9f4ffc84c7441436cfbecbd/4b190/sixty8-homepage.jpg", "srcSet": ["/static/7fbae01ba9f4ffc84c7441436cfbecbd/f93b5/sixty8-homepage.jpg 300w", "/static/7fbae01ba9f4ffc84c7441436cfbecbd/b4294/sixty8-homepage.jpg 600w", "/static/7fbae01ba9f4ffc84c7441436cfbecbd/4b190/sixty8-homepage.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Sixty8 Home Page"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/b3c80d606290b618e5ecc8048c8904b9/4b190/sixty8-product-page.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "116.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQFAv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGanQply20sjB0D/8QAHBAAAgEFAQAAAAAAAAAAAAAAAgMAAQQSExQR/9oACAEBAAEFAiQIFS2zpxnGWomwAxGb1+7wnQuf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAIBAAAgAEBwAAAAAAAAAAAAAAAAEDEjKhAhARITNykf/aAAgBAQAGPwLRxN+osSiLw5CeZpkuVdiuxVY//8QAHRABAAICAgMAAAAAAAAAAAAAAQARITFRcWGRof/aAAgBAQABPyFnjtwhwKo1hRr6YiTnEEgqHJDU2TDtPArtCnP2n//aAAwDAQACAAMAAAAQqwAA/8QAFxEBAAMAAAAAAAAAAAAAAAAAEQEgIf/aAAgBAwEBPxCQyn//xAAWEQADAAAAAAAAAAAAAAAAAAABESD/2gAIAQIBAT8QDj//xAAeEAEBAAEEAwEAAAAAAAAAAAABEQAhMUFRwdHw4f/aAAgBAQABPxDVXoASal7yIgYNQu+u+PKOd/titIEJhCdYCkYIVwwnjGwFcPpyDXifJhdy/HGf/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Sixty8 Product Page", "title": "Sixty8 Product Page", "src": "/static/b3c80d606290b618e5ecc8048c8904b9/4b190/sixty8-product-page.jpg", "srcSet": ["/static/b3c80d606290b618e5ecc8048c8904b9/f93b5/sixty8-product-page.jpg 300w", "/static/b3c80d606290b618e5ecc8048c8904b9/b4294/sixty8-product-page.jpg 600w", "/static/b3c80d606290b618e5ecc8048c8904b9/4b190/sixty8-product-page.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Sixty8 Product Page"), "\n "))); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/nissan-commercial-vehicles/https://justin.isamaker.com/nissan-commercial-vehicles/Tue, 21 Apr 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Nissan Commercial Vehicles", "date": "2015-04-21T00:00:00-0500", "teaser": "Browse through some of the projects I worked on for Nissan Commercial Vehicles with my front-end team.", "featuredImage": "ncv-thumbnail-2.jpg", "externalLink": "http://nissancommercialvehicles.com" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "Nissan Commercial Vehicles is, you guessed it, the commercial branch of Nissan. They manufacture a series of fantastic work vehicles that you\u2019ve undoubtedly seen all over town\u2013as soon as you know what one looks like, you can\u2019t stop seeing it. I had the pleasure of working with a small team from Critical Mass to redesign the site and introduce a lot of new campaigns to showcase how Nissan was making an excellent work vehicle."), mdx("p", null, "The site was run on a Grails back-end, and we utilized a number of different technologies on the front-end. There are a few parts of the site that use Backbone to create a more robust web app experience, and the rest of it is just good old GSPs, Javascript and SASS. I came on to the account in 2013 during a period of major transition. One of the original team members built a framework that was running a lot of the front-end logic on the site. While ambitious, his framework definitely left some things to be desired that could be fixed by refactoring a good chunk of the code and utilizing modern tools. In the time that I was there we implemented a stronger SASS organizational structure, dependency management using Require.js, a component structure utilizing Flight.js, the start of a decent Gulp workflow, and the aforementioned Backbone conversion."), mdx("p", null, "We facilitated a pretty major overhaul of the look and feel of the site in the few years that I was on the account. The brand still retained the grittiness that\u2019s expected of most commercially-oriented sites, but it definitely refined itself over time."), mdx("p", null, "For instance, during the homepage redesign we took the homepage from this:"), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "97.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAATABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAGibMJusJE4NBX/xAAcEAACAgIDAAAAAAAAAAAAAAAAAwETAgQUICH/2gAIAQEAAQUCnVwghXvEUXsLmF7en//EABYRAQEBAAAAAAAAAAAAAAAAABEAEP/aAAgBAwEBPwEjf//EABYRAQEBAAAAAAAAAAAAAAAAABEAEP/aAAgBAgEBPwFnf//EAB4QAAEEAQUAAAAAAAAAAAAAAAABAjKRESAhI0Fh/9oACAEBAAY/AtsicLk9OybrJusm69H/xAAbEAABBAMAAAAAAAAAAAAAAAABABEgIVFh8P/aAAgBAQABPyEdQtMqRhguAmzBP//aAAwDAQACAAMAAAAQc988/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAEDAQE/EBHf/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAECAQE/EFPf/8QAHxABAAECBwEAAAAAAAAAAAAAAQAR8SAhMUFRcYHw/9oACAEBAAE/EK71pRmabEWgVQWFOxSfNzlX3L0l74P/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Old NCV Homepage", "title": "Old NCV Homepage", "src": "/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg", "srcSet": ["/static/758e8da949284ceb4ad41d33dbf6397a/f93b5/ncv-home-old.jpg 300w", "/static/758e8da949284ceb4ad41d33dbf6397a/b4294/ncv-home-old.jpg 600w", "/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Old NCV Homepage"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "97.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAATABQDASIAAhEBAxEB/8QAGAABAQADAAAAAAAAAAAAAAAAAAQCBQb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHdTMC9MOWsCYH/xAAaEAEAAwEBAQAAAAAAAAAAAAABAAIDERMx/9oACAEBAAEFArcCmo3ABvkwtjPXOHzEF3Oa/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAfEAACAQIHAAAAAAAAAAAAAAAAAREzkQIQEiExUZL/2gAIAQEABj8CngjUbFVXKi9FZXyc9GJI/8QAHBAAAwABBQAAAAAAAAAAAAAAAAERIRAxUWHx/9oACAEBAAE/IXzS7MrqWyTcmkiFauLg0ZSPHaa2ShCxEj//2gAMAwEAAgADAAAAEPQIAP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/ELNHH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EABwQAQEAAgMBAQAAAAAAAAAAAAERACExcYEQQf/aAAgBAQABPxCq7xC1griRTafjgwtFnbXD546ABiqc1IHj5ktzvBkiX25aggDwz//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "New NCV Homepage", "title": "New NCV Homepage", "src": "/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg", "srcSet": ["/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/f93b5/ncv-home.jpg 300w", "/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/b4294/ncv-home.jpg 600w", "/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "New NCV Homepage"), "\n ")), mdx("p", null, "Screenshots can only do so much\u2013to fully experience the site, you should definitely go and check it out at ", mdx("a", { href: "http://nissancommercialvehicles.com", target: "_new" }, "nissancommericalvehicles.com"), ". Some of the pages that I had the most involvement with are the ", mdx("a", { href: "http://nissancommercialvehicles.com", target: "_new" }, "home page"), ", the vehicle landing pages for the ", mdx("a", { href: "http://www.nissancommercialvehicles.com/nv-cargo", target: "_new" }, "NV Cargo"), ", the ", mdx("a", { href: "http://www.nissancommercialvehicles.com/nv-passenger", target: "_new" }, "NV Passenger"), ", and the ", mdx("a", { href: "http://www.nissancommercialvehicles.com/nv200-compact-cargo", target: "_new" }, "NV200 Compact Cargo"), ", and the launch of the ", mdx("a", { href: "http://www.nissancommercialvehicles.com/nv200-taxi", target: "_new" }, "NV200 Taxi"), " for its maiden voyage in NYC.")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/joes-barbershop/https://justin.isamaker.com/joes-barbershop/Tue, 31 Mar 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Joe's Barbershop", "date": "2015-03-31T00:00:00-0500", "teaser": "A built-from-scratch WordPress site to show off the best barbershop in the Midwest", "featuredImage": "joes-thumbnail.jpg", "externalLink": "http://joesbarbershopchicago.com" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "People come from far and wide to get their hair cut at Joe\u2019s. The shop has been in Logan Square since 1968 when Joe Caccavella, Sr bought out the barber he was working under after he came back from the Army. Over the past 47 years, Joe Sr and his son Joe Jr have evolved the shop into an empire that completely destroys any competition stupid enough to rear its ugly head."), mdx("p", null, "Joe\u2019s came into my life much, much later than 1968 through my buddy Ralph Holcomb. Ralph is a wonderful barber here in Chicago who helped me find my first apartment, which coincidentally happened to be behind Joe\u2019s. I talked with Joe Jr, and after a quick discussion and a handshake I was moved in to the apartment on the other side of the wall."), mdx("p", null, "Joe Jr led the charge to really put the shop on the map with the younger generation. Joe Sr, aka \u201CPapa Joe\u201D, had a great roster of regulars, but Joe Jr wanted to get the younger guys in the shop. He mounted a full-fledged media campaign to get their name and their outstanding reputation out to a new audience, and boy did he do a good job. The shop has been voted the best in Chicago for five years running now, and with a new expansion into what used to be my apartment, there\u2019s no sign of them slowing down."), mdx("p", null, "While Joe Jr was planning his strategy to overtake the barber world, I was rebuilding their site for them. Joe is a no-nonsense guy, and he wanted a no-nonsense website. Straightforward, clean, and easy to find the info that you need. I wanted Joe to be able to have as much control over the website as he could so that he didn\u2019t have to wait for me when he wanted to make a change. To facilitate that, I built him a custom Wordpress theme from the ground up and rigged everything up with Advanced Custom Fields and Repeaters so that he can edit anything on the site without having to know any code at all."), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "116.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHHbFRIpltwIg//xAAaEAADAQADAAAAAAAAAAAAAAABAgMAERIh/9oACAEBAAEFAptMAUlqkM5ZAlFVTg/A7e7/xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAwEBPwEj/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHxAAAgECBwAAAAAAAAAAAAAAAREAAhIgISIyUXGR/9oACAEBAAY/Ahcptp8jpC6gC1cwWl5Yf//EABwQAAMBAAIDAAAAAAAAAAAAAAABESEQMUFRof/aAAgBAQABPyGBLm1Cdbc/AmgkWJBJuraJqXqMZBV+Gq7z1x//2gAMAwEAAgADAAAAEL8HPP/EABURAQEAAAAAAAAAAAAAAAAAACBR/9oACAEDAQE/EKH/xAAWEQADAAAAAAAAAAAAAAAAAAARIEH/2gAIAQIBAT8QMT//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhQWExUZFx/9oACAEBAAE/EDBQ2UV+ZvrE4E/J5w5B5gUN6xMatpIPQZIMuqTR85xCqYQsod8J0kRuOcWq+8//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Joe's Barbershop Home Page", "title": "Joe's Barbershop Home Page", "src": "/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg", "srcSet": ["/static/3c3a8d48b0871101f2084607a8428fe1/f93b5/joes-home.jpg 300w", "/static/3c3a8d48b0871101f2084607a8428fe1/b4294/joes-home.jpg 600w", "/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Joe's Barbershop Home Page"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "116.33333333333333%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAByVlkTqZfdgmD/8QAHRAAAwABBQEAAAAAAAAAAAAAAQIDABESExQhMf/aAAgBAQABBQKboFFp5Vt7mo6/3DmvkrGYs/LT/8QAFREBAQAAAAAAAAAAAAAAAAAAESD/2gAIAQMBAT8BI//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAECAQE/AWP/xAAfEAACAQIHAAAAAAAAAAAAAAAAARECIRASMTJBkbH/2gAIAQEABj8CU+G1dEoVF5sWpxccmbQ//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IaEnECtVeoKiDAwqawhwrxC+x8Llh0r1BPDDICB0NjLyujtuf//aAAwDAQACAAMAAAAQT8c8/8QAFhEBAQEAAAAAAAAAAAAAAAAAEAEx/9oACAEDAQE/EBlP/8QAFREBAQAAAAAAAAAAAAAAAAAAASD/2gAIAQIBAT8QFH//xAAdEAEAAwEAAgMAAAAAAAAAAAABABEhMVFxYYGx/9oACAEBAAE/EOSuitrfdTfoVc1XyV2HhtwqWG4R5uyahq9+4gVadUp7yBI78iv2AQLoc7BAVQBhiclAOgJYw8z/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Joe's Barbershop History Page", "title": "Joe's Barbershop History Page", "src": "/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg", "srcSet": ["/static/a3358a59f15dc7b75f282cda76951574/f93b5/joes-history.jpg 300w", "/static/a3358a59f15dc7b75f282cda76951574/b4294/joes-history.jpg 600w", "/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Joe's Barbershop History Page"), "\n "))); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/arduino-projection-mapping/https://justin.isamaker.com/arduino-projection-mapping/Wed, 18 Feb 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Arduino-Controlled Projection Mapping", "date": "2015-02-18T00:00:00-0500", "teaser": "Turning a room into a projection-mapped beauty with Resolume, Magic Music Visualizer, and a custom-built cupcake controller running on Arduino.", "featuredImage": "ftloc-teaser.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "I\u2019ve been interested in projection mapping ever since I saw what ", mdx("a", { href: "http://www.lvthn.com/work/wooden-toy/", target: "_blank" }, "Leviathan"), " and ", mdx("a", { href: "http://vsquaredlabs.com/project/amon-tobin/" }, "V Squared Labs"), " came up with for ", mdx("a", { href: "https://www.youtube.com/watch?v=0zMI-qbmIPk", target: "_blank" }, "Amon Tobin\u2019s ISAM tour"), ". I wasn\u2019t able to attend the concert in person, but even just watching the footage inspired a sense of awe in me. The whole project seemed like it was a ", mdx("a", { href: "http://en.wikipedia.org/wiki/Clarke%27s_three_laws", target: "_blank" }, "combination of magic and technology"), ", and I knew that I had to work with it."), mdx("p", null, "My interest stayed dormant for a few years until I recieved a Tweet out of the blue asking if I wanted to collaborate to make something \u201Ccollossal.\u201D How do you say no to that?"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "The message came from an artist named ", mdx("a", { href: "http://georgeberlin.com/", target: "_blank" }, "George Berlin"), ". George's background is in illustration, but he's also well-versed in animation and projection mapping. He explained to me that he was wrestling with how to control his projects with objects in the real world. The software that he uses to control the projections can be mapped to a MIDI controller, but interacting with a controller takes a lot of magic out of the visualization."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "50%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABzROVpMFAH//EABoQAAICAwAAAAAAAAAAAAAAAAABAhESEyH/2gAIAQEAAQUCbSjrZeLLJdf/xAAXEQEBAQEAAAAAAAAAAAAAAAABABEh/9oACAEDAQE/AcSHl//EABcRAAMBAAAAAAAAAAAAAAAAAAABEQL/2gAIAQIBAT8BtHhU/8QAGRABAAIDAAAAAAAAAAAAAAAAAQAxAhEg/9oACAEBAAY/ArFmOy4nH//EABoQAQACAwEAAAAAAAAAAAAAAAEAESExQRD/2gAIAQEAAT8hNtlrsMLN1uZTx8EJSkTYqs//2gAMAwEAAgADAAAAEBfv/8QAFREBAQAAAAAAAAAAAAAAAAAAAQD/2gAIAQMBAT8QQqM6Fv/EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQIBAT8QA+ltX//EABsQAQEAAgMBAAAAAAAAAAAAAAERACEQMUFx/9oACAEBAAE/EKchQSPtMMuCUjoF8yLPZNJrv3hsUOkZMWqHq1z/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Traktor X1 by sebilden", "title": "Traktor X1 by sebilden", "src": "/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg", "srcSet": ["/static/186d05e51e9f7507b1a2fa34742ab5ce/f93b5/midi-controller.jpg 300w", "/static/186d05e51e9f7507b1a2fa34742ab5ce/b4294/midi-controller.jpg 600w", "/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://www.flickr.com/photos/sebilden/13107904853/in/photolist-kYirrx-cMizwA-4ZHL9q-4YDdRY-4ZBGTD-4YDdRj-4YDdSA-7FWaZK-75TB6u-bHqmAZ-buvCk3-buvmKW-buvFcw-bHqcrV-buvuNu-9UCdcZ-etdr3o-4YDdT9-ghNPB-bzyEVx-4ZFXvv-7ig5hv-7ig5bt-7ijYAm-7ig5av-7ijYHd-7ijYHW-7GaRos-8w4FKU-6n1VSX-nPrtTp-o6Q8a1-nPraJj-nPrCqJ-o6Cxhc-nPrgfQ-nPrcjJ-o6PSwJ-nPsbgB-6n5Mb1-c8JyEY-75WLAN-cWDnzf-7uxE2f-fYE3S-oYk5pr-oFQYy2-2zXBBD-dWsJyU-fYDZy", "target": "_new", "className": "image-caption" }, "Traktor X1 by sebilden"), "\n ")), mdx("p", null, "We agreed to get in touch if we bumped into an interesting project that seemed like it would be a good fit, and after a few misses due to scheduling conflicts we got the perfect opportunity. I was contacted by an old friend, ", mdx("a", { href: "http://andreagonzalez.info", target: "_blank" }, "Andrea Gonazalez"), ", who was looking for a piece for a fundraiser. Andrea is an excellent artist who went to ", mdx("a", { href: "http://www.saic.edu/index.html", target: "_blank" }, "SAIC"), " with me\u2013she recently decided to leave the design industry to pursue her passion for French pastries. The fundraiser was an event for the ", mdx("a", { href: "http://frenchpastryschool.com", target: "_blank" }, "French Pastry School"), " called \u201D", mdx("a", { href: "http://www.fortheloveofchocolatefoundation.org/", target: "_blank" }, "For the Love of Chocolate"), ".\u201D The theme for the event was the \u201960s, and she needed a projection to transform a room into a psychedelic landscape. The room that we were in came complete with a sitar band called ", mdx("a", { href: "http://www.thegitacult.com/", target: "_blank" }, "\u201CThe Gita Cult,\u201D"), " and a seemingly endless supply of delicious treats. This seemed like a great opportunity for a collaborative project with the ever-funky George, so we started brainstorming."), mdx("h3", null, "Enough about the backstory.", mdx("br", null), "Here\u2019s how we made it."), mdx("p", null, "Like I mentioned earlier, George has the projection mapping thing down pat, so we just needed to learn how to get an Arduino to talk to our mapping software. The first step on my side of the project was getting familar with the software."), mdx("h4", null, "Resolume"), mdx("p", null, "We used a program called ", mdx("a", { href: "http://resolume.com/", target: "_blank" }, "Resolume"), " to handle the projection mapping and Arduino-controlled effects. Resolume is a pretty amazing piece of software\u2013even just playing around with the examples is impressive."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/a5b85bec5da3fd9dcfabd9dde8f879c9/c58a3/resolume-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "59.00000000000001%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABzVxdEAL/AP/EABgQAAIDAAAAAAAAAAAAAAAAABAhAAEC/9oACAEBAAEFAtRikf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABUQAQEAAAAAAAAAAAAAAAAAACAx/9oACAEBAAY/Aov/xAAZEAEBAQADAAAAAAAAAAAAAAABMQARIaH/2gAIAQEAAT8hCX1lE65ubdQ1yG//2gAMAwEAAgADAAAAEFfP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFxof/aAAgBAQABPxBDsLZWoo1aq0b7CLsj4xoJXR3YLVct4S1z7P/Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "A screenshot of the Resolume Dashboard", "title": "A screenshot of the Resolume Dashboard", "src": "/static/a5b85bec5da3fd9dcfabd9dde8f879c9/e5166/resolume-screenshot.jpg", "srcSet": ["/static/a5b85bec5da3fd9dcfabd9dde8f879c9/f93b5/resolume-screenshot.jpg 300w", "/static/a5b85bec5da3fd9dcfabd9dde8f879c9/b4294/resolume-screenshot.jpg 600w", "/static/a5b85bec5da3fd9dcfabd9dde8f879c9/e5166/resolume-screenshot.jpg 1200w", "/static/a5b85bec5da3fd9dcfabd9dde8f879c9/c58a3/resolume-screenshot.jpg 1500w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "A screenshot of the Resolume Dashboard")), mdx("p", null, "As you can see in the image above, the Resolume dashboard can be a little overwhleming at first. The general idea is that you work in compositions that group clips together for a certain arrangement. Clips are housed in the upper right quarter of the dashboard, and are queued to start playing on the first beat of the music. There are some clips that have audio baked into the file\u2013the visuals of these files react to tempo changes from the attached audio. You set the tempo for a composition the same way that you set it for DJing", "\u2013", "by clicking a tap button along with the count of the music."), mdx("p", null, "Resolume can also add a layer of visual effects to each clip, or to the entire compostion. The effects interface is what we were interested in using it for. The visualizations that we were generating wouldn\u2019t actually be generated in Resolume\u2013we just needed an additional layer of control and the mapping. But before we get to mapping, let\u2019s talk about how we generated the visuals to map."), mdx("h4", null, "Magic Music Visuals"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "George was the brains behind the visuals for this project, but I still wanted to learn how he was generating them to get a better understanding of the piece end-to-end. He introduced me to a program called ", mdx("a", { href: "http://magicmusicvisuals.com/", target: "_blank" }, "Magic Music Visuals"), ". For those of you familiar with ", mdx("a", { href: "https://cycling74.com/products/max/", target: "_blank" }, "Max/MSP"), ", Magic Music Visuals (henceforth to be referred to as \"MMV\") is extremely similar. You interact with a set of modules by patching them together in series to create a visual circuit."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "760px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "62.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABJTbipsV//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAEREiECE//aAAgBAQABBQLaORM9LPm06f/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQIBAT8BF1f/xAAcEAACAgIDAAAAAAAAAAAAAAAAARExEiEyUYH/2gAIAQEABj8C97FdFkYpScjbP//EABsQAQADAQADAAAAAAAAAAAAAAEAESExQWFx/9oACAEBAAE/IRobfqkWJt8GJu32M1aw0ORUVSijJZ6s/9oADAMBAAIAAwAAABCvz//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8QMxf/xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEh/9oACAECAQE/EEjFR//EABoQAQADAQEBAAAAAAAAAAAAAAEAESFRQXH/2gAIAQEAAT8Que1QqYqK9l6699yDArGrFPyPkl1XTmzYTsDQcjiV7VT/2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "A screenshot of Magic Music Visuals", "title": "A screenshot of Magic Music Visuals", "src": "/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg", "srcSet": ["/static/776487b047a8a4279025da182aaa8e6d/f93b5/magic-music-visuals-screenshot.jpg 300w", "/static/776487b047a8a4279025da182aaa8e6d/b4294/magic-music-visuals-screenshot.jpg 600w", "/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg 760w"], "sizes": "(max-width: 760px) 100vw, 760px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "http://magicmusicvisuals.com/screenshots", "target": "_new", "className": "image-caption" }, "A screenshot of Magic Music Visuals"), "\n ")), mdx("p", null, "George has tons of these patches that he uses in his projects. To facilitate the use of the different visuals throughout the evening, we included everything in a playlist to feed the display."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("img", { parentName: "div", "src": "/8dcb03164f649d912b3cc9edcd90c49f/magic-music-visuals.gif", "alt": "Adding patches to the playlist in MMV" }), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Adding patches to the playlist in MMV")), mdx("p", null, "In addition to creating some trippy visuals with George\u2019s graphic assets, MMV also handled the sound-reactive bits for us. Modules in the patch are routed through a sound-reactive module before hitting the endpoint\u2013that module responds to a specific frequency range from a mic input, or to the overall volume. Once it sees a spike in whatever you\u2019re listening to, you can tell it what it should do to your visuals."), mdx("p", null, "You\u2019ll notice that all of the visuals in MMV for our projects have two screens on them. This will be made more clear once we get to the mapping portion, but the short answer is that this was a technique that was employed to get more video with less firepower."), mdx("p", null, "All of these visuals are really cool in MMV, but the software can\u2019t handle projection mapping on its own. In order to get the visuals over to Resolume, we used a program called Syphon."), mdx("h4", null, "Syphon / Spout"), mdx("p", null, "I completed my part of this project on a Mac, and George worked on a PC. When we installed the project, we ended running both OS\u2019s again. The only piece of the project that was different between the two computers was the utility to pass the video from MMV to Resolume. On Mac, we used a tool called ", mdx("a", { href: "http://syphon.v002.info/", target: "_blank" }, "Syphon"), ", and on Windows we used ", mdx("a", { href: "http://spout.zeal.co/", target: "_blank" }, "Spout"), ". Both of these applications are focused on sharing video between windows, and they work with a host of visualization software."), mdx("p", null, "I set this up on my Mac, so I\u2019ll only be able to explain the Mac workflow in detail. The good news is that it looks like Spout is extremely well documented, so you should be able to figure that out on your own."), mdx("p", null, "I downloaded an additonal module to handle Syphon for MMV from the main MMV site. The module is available from the ", mdx("a", { href: "http://magicmusicvisuals.com/resources", target: "_blank" }, "Resources"), " page as a zip file that you can incorporate into your projects."), mdx("p", null, "Once downloaded, any additional modules can be added to a project by going to the \u201CHelp\u201D menu in MMV, and then \u201CAdditional Module Folders.\u201D You\u2019ll then be able to add the Syphon module as a endpoint for your patch. As we were only broadcasting one video at a time, we only needed to set up one Syphon server endpoint."), mdx("h4", null, "Resolume Syphon Source"), mdx("p", null, "Once we had MMV broadcasting to a Syphon server, the next step was to get Resolume listening to that server. Lucky for us, Resolume already had Syphon support built in seamlessly. To enable this feature, we went to the preferences menu, selected video, and then checked the box to enable Syphon input and output. Once that box was checked, we were then able to select \u201CSyphon\u201D from the sources menu, and drag it over to be treated as a clip."), mdx("h4", null, "Resolume Effects"), mdx("p", null, "Getting the visuals together and ported into Resolume was the easy part\u2013now we had to come up with something to do with them. The original plan was to send MIDI signals from the Arduino into Resolume, and then use Resolume MIDI mapping to control the desired effects. George was able to reproduce some simple keymapping from real world objects using the ", mdx("a", { href: "http://makeymakey.com/", target: "_blank" }, "Makey Makey"), ", but what we really wanted was to be able to control the effects with a potentiometer, which is just a ten-dollar word for a slider or a volume knob. After putzing around with sending MIDI signals from the Arduino with irregular success, I decided to switch over to the ", mdx("a", { href: "http://opensoundcontrol.org/introduction-osc", target: "_blank" }, "Open Sound Control"), " (OSC) protocol. OSC ended up being a lot less complicated, and I think that it\u2019s more extensible in the long run."), mdx("h4", null, "Cupcake Time!"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "We had it in our heads from the get-go that we wanted to incorporate cupcakes into the project somehow. A lot of George's past work uses cake as a recurring theme, so the migration over to cupcakes seemed to come pretty natural for him. I snagged six plastic cupcakes from Toys\"R\"Us that ended up being a perfect fit for the project."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "500px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "63.66666666666666%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUBAgME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAW3OwhSpoJ//xAAbEAABBAMAAAAAAAAAAAAAAAACAAEDERASMf/aAAgBAQABBQIy1QySEQk1Pysf/8QAFxEBAAMAAAAAAAAAAAAAAAAAAQIQMf/aAAgBAwEBPwEkBlf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAABIQAQAjFB/9oACAEBAAY/AjkHyJzdCv/EABoQAQADAAMAAAAAAAAAAAAAAAEAEUEhMVH/2gAIAQEAAT8hULRjCBUU0DiJoWppYC08FKw2BXU//9oADAMBAAIAAwAAABBHP//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFh/9oACAEDAQE/EI5Z6M//xAAVEQEBAAAAAAAAAAAAAAAAAAAAIf/aAAgBAgEBPxBH/8QAGhABAQEAAwEAAAAAAAAAAAAAAREAITFRcf/aAAgBAQABPxC6NCdFO3MgrIEfcwTcz0zjhE5J3nnKvwOHTgqArWG//9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "The toy cupcakes we used from Toys'R'Us", "title": "The toy cupcakes we used from Toys'R'Us", "src": "/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg", "srcSet": ["/static/5084bf8976068d15ac7853110b9d74b6/f93b5/toysrus-cupcakes.jpg 300w", "/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg 500w"], "sizes": "(max-width: 500px) 100vw, 500px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "The toy cupcakes we used from Toys'R'Us"), "\n ")), mdx("h4", null, "Enclosure Build and Arduino Wiring"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "I got a small wooden box from a craft store to use as a project enclosure. Once everything was measured out, I drilled a hole through the middle of the plastic cupcakes big enough to fit a potentiometer handle through, then mounted them to the box. Once I had that, I wired my potentiometers, drilled holes in the box, and then mounted them so that only the handle was sticking out the top."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "600px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABVazZxbgD/8QAHRAAAQQCAwAAAAAAAAAAAAAAAQAEERICAwUTFP/aAAgBAQABBQLVjI6rAtEHFV7ChyED/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BV//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAgEBPwHUf//EABkQAQACAwAAAAAAAAAAAAAAAAABETFB4f/aAAgBAQAGPwJUyjSnGH//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRYf/aAAgBAQABPyHIll6ib0nUFEqk1UYADHkp4IarOf/aAAwDAQACAAMAAAAQk+//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUsl//8QAFhEBAQEAAAAAAAAAAAAAAAAAABFR/9oACAECAQE/EIVr/8QAHRABAAICAgMAAAAAAAAAAAAAAQARMUEhUXHB8P/aAAgBAQABPxCyY1VgsIkTdgq9OIKRKg57lZAOLT7hg/LzLpK7xP/Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Project enclosure with measurements", "title": "Project enclosure with measurements", "src": "/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg", "srcSet": ["/static/a7928b21f126e99db3841b7dc65945d8/f93b5/measured-cupcake-box.jpg 300w", "/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg 600w"], "sizes": "(max-width: 600px) 100vw, 600px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Project enclosure with measurements"), "\n ")), mdx("p", null, "With all of my potentiometers ready to go, it was time to start hooking components up to the Arduino. I decided to use an Arduino Micro that that I had sitting around to free up some space inside the box\u2013all that we needed was six analog inputs, and the Micro had more than enough juice to power the project. The potentiometers were connected to the power source and ground from the Arduino, and then each of their outputs was sent to the first six analog inputs on the micro. All we needed the Arduino to do was to read the values from the potentiometers, and then broadcast that value as a string."), mdx("h4", null, "Arduino Code"), mdx("p", null, "The code portion for the Arduino is extremely straightforward. The Arduino reads a few values and then sends them on through the serial port. The only gotcha is that the code needs to send everything as one string, so inside the loop we\u2019re only using ", mdx("inlineCode", { parentName: "p" }, "Serial.print"), " until the last line where we use ", mdx("inlineCode", { parentName: "p" }, "Serial.println"), " to trigger a new line."), mdx("div", { "className": "gatsby-highlight", "data-language": "java" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-java line-numbers" }, mdx("code", { parentName: "pre", "className": "language-java" }, mdx("span", { parentName: "code", "className": "token comment" }, "// Arduino code to read multiple potentiometers, then send"), "\n", mdx("span", { parentName: "code", "className": "token comment" }, "// the values through serial communication"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Define an array of our potentiometer pins"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "const"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "int"), " potentiometer_pins", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "A0", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "A1", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "A2", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "A3", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "A4", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "A5", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Open a serial connection"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "void"), " ", mdx("span", { parentName: "code", "className": "token function" }, "setup"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "begin"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "9600"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Loop over the first five pins,"), "\n", mdx("span", { parentName: "code", "className": "token comment" }, "// read and print the value, and then print a comma."), "\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Then read the sixth pin and print a new line to end the string."), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "void"), " ", mdx("span", { parentName: "code", "className": "token function" }, "loop"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "for"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "int"), " i ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), " i ", mdx("span", { parentName: "code", "className": "token operator" }, "<"), " ", mdx("span", { parentName: "code", "className": "token number" }, "5"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), " i", mdx("span", { parentName: "code", "className": "token operator" }, "++"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "print"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token function" }, "analogRead"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "potentiometer_pins", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), "i", mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "print"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\",\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "println"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token function" }, "analogRead"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "potentiometer_pins", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "5"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n"), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("h4", null, "Processing Code"), mdx("p", null, "The next part of the puzzle was how to convert that analog value coming from the Arduino to an OSC message. This was accomplished by using the OSC library in Processing. The gist of the code is that we\u2019re taking the string that the Arduino\u2019s serial communication is pumping out, splitting it into an array, getting the values from the array, and then sending them to the appropriate port."), mdx("div", { "className": "gatsby-highlight", "data-language": "java" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-java line-numbers" }, mdx("code", { parentName: "pre", "className": "language-java" }, "\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Import the Serial, OSC, and net libraries"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "import"), " ", mdx("span", { parentName: "code", "className": "token namespace" }, "processing", mdx("span", { parentName: "span", "className": "token punctuation" }, "."), "serial", mdx("span", { parentName: "span", "className": "token punctuation" }, ".")), mdx("span", { parentName: "code", "className": "token operator" }, "*"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "import"), " ", mdx("span", { parentName: "code", "className": "token namespace" }, "oscP5", mdx("span", { parentName: "span", "className": "token punctuation" }, ".")), mdx("span", { parentName: "code", "className": "token operator" }, "*"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "import"), " ", mdx("span", { parentName: "code", "className": "token namespace" }, "netP5", mdx("span", { parentName: "span", "className": "token punctuation" }, ".")), mdx("span", { parentName: "code", "className": "token operator" }, "*"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// define your vars"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " redValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " greenValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " blueValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " distortValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " rgbValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), " waveValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Declare Serial"), "\n", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), " myPort", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Declare OSC"), "\n", mdx("span", { parentName: "code", "className": "token class-name" }, "OscP5"), " oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Declare the NetAddress for OSC"), "\n", mdx("span", { parentName: "code", "className": "token class-name" }, "NetAddress"), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token keyword" }, "void"), " ", mdx("span", { parentName: "code", "className": "token function" }, "setup"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// List all the available serial ports"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "println"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "list"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Listen for OSC messages on port 7001"), "\n oscP5 ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscP5"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "this"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), mdx("span", { parentName: "code", "className": "token number" }, "7001"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Broadcast OSC Messages to port 7000"), "\n myRemoteLocation ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "NetAddress"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"localhost\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), mdx("span", { parentName: "code", "className": "token number" }, "7000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Set the port to the correct port from your Serial list (in this case it's 5)"), "\n myPort ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "this"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "list"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "5"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "9600"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// wait until a newline to send a Serial event"), "\n myPort", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "bufferUntil"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'\\n'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n\n", mdx("span", { parentName: "code", "className": "token keyword" }, "void"), " ", mdx("span", { parentName: "code", "className": "token function" }, "draw"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// give us a little black window to remember that this is running"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "background"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "#", mdx("span", { parentName: "code", "className": "token number" }, "000000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Set up a void for a serial event that is triggered at a newline"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "void"), " ", mdx("span", { parentName: "code", "className": "token function" }, "serialEvent"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token class-name" }, "Serial"), " myPort", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// get the message until a newline\u2013that's now our string"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "String"), " inString ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " myPort", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "readStringUntil"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'\\n'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// if we've got a valid message"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "inString ", mdx("span", { parentName: "code", "className": "token operator" }, "!="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "null"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// trim the string"), "\n inString ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "trim"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "inString", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// then split the values at the commas and put it into an array"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), " effects ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "float"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token function" }, "split"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "inString", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token string" }, "\",\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// if we have effects, then start sending OSC messages"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "length ", mdx("span", { parentName: "code", "className": "token operator" }, ">="), " ", mdx("span", { parentName: "code", "className": "token number" }, "4"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// get the value, then map it from the pot input (0-1023) to the value we need (0.0-1.0)"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// RED POT"), "\n redValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// print the value"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "println"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "redValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Make a new message with the correct target"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " redMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect1/opacity/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Add the value to the message"), "\n redMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "redValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Send the message"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "redMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// GREEN POT"), "\n greenValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " greenMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect2/opacity/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n greenMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "greenValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "greenMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// BLUE POT"), "\n blueValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "2"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " blueMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect3/opacity/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n blueMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "blueValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "blueMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// DISTORT POT"), "\n distortValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "3"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " distortMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect4/param1/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n distortMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "distortValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "distortMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// RGB POT"), "\n rgbValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "4"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " rgbMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect5/opacity/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n rgbMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "rgbValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "rgbMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// WAVE POT"), "\n waveValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "map"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "effects", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token number" }, "5"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1023"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "1"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), " waveMessage ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "OscMessage"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"/composition/video/effect6/param2/values\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n waveMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "add"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "waveValue", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n oscP5", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "send"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "waveMessage", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " myRemoteLocation", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("h4", null, "Back to Resolume"), mdx("p", null, "You may be wondering what the parts of the Processing code that set the OscMessage are doing and where we got those values from. Resolume allows you to map OSC values to any number of things inside the software. To edit this map, all you need to do is select \u201CMapping > Edit Application OSC Map.\u201D That should change your screen to look like the screenshot below."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1200px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "60.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAByWpJSIX/xAAZEAADAAMAAAAAAAAAAAAAAAAAARECEiD/2gAIAQEAAQUC2bLkV8f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAXEAADAQAAAAAAAAAAAAAAAAAAIEEy/9oACAEBAAY/AqU0n//EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhkf/aAAgBAQABPyHtR9SrEXvY3a9YOzYhP//aAAwDAQACAAMAAAAQg8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEBAQEAAwAAAAAAAAAAAAABEQAxIUGh/9oACAEBAAE/EBKME9jSpESu9Zo6c4PKPMsV1XPrv//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Resolume ready for OSC mapping", "title": "Resolume ready for OSC mapping", "src": "/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg", "srcSet": ["/static/74cdbf0d274341e3e1e6cde71d36d686/f93b5/resolume-mapping-screenshot.jpg 300w", "/static/74cdbf0d274341e3e1e6cde71d36d686/b4294/resolume-mapping-screenshot.jpg 600w", "/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg 1200w"], "sizes": "(max-width: 1200px) 100vw, 1200px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Resolume ready for OSC mapping")), mdx("p", null, "When you click on a green box that overlays something, a tile will pop up in the lower right-hand side with the title \u201CApplication OSC Map.\u201D In the screenshot, I have the green channel for the composition selected. The piece we need is the \u201COSC Input\u201D string. If you look back at the Processing code now, you\u2019ll see that all we\u2019re doing is setting the new OscMessage parts to equal the correct string from OSC Input in Resolume."), mdx("p", null, "There is a distinction between composition and layer as to what the effects do to your project. If you make these changes while \u201Ccomposition\u201D is selected, the effects will alter then entire piece. If you make changes with just the \u201Clayer\u201D tab selected, it only affects that one layer and leaves everything else alone. We decided to go with composition-wide effects for the project to let folks really remix how they experienced the visualization."), mdx("div", { "className": "gatsby-resp-iframe-wrapper", "style": { "paddingBottom": "56.25%", "position": "relative", "height": "0", "overflow": "hidden", "marginBottom": "1.0725rem" } }, " ", mdx("div", { parentName: "div", "className": "video-wrapper" }, " ", mdx("iframe", { parentName: "div", "src": "https://www.youtube.com/embed/q9AD-J5n9wE?rel=0&showinfo=0", "frameBorder": "0", "allowFullScreen": true, "style": { "position": "absolute", "top": "0", "left": "0", "width": "100%", "height": "100%" } }), " "), " "), mdx("h4", null, "Code Recap"), mdx("p", null, "There are a lot of moving parts with this project, so I ended up making a checklist to make sure that everything was flowing in the correct order."), mdx("ol", null, mdx("li", { parentName: "ol" }, "Visuals are generated in MMV"), mdx("li", { parentName: "ol" }, "MMV Visuals are sent through the MMV Syphon Component"), mdx("li", { parentName: "ol" }, "Resolume listens to MMV via a Syphon clip"), mdx("li", { parentName: "ol" }, "Arduino reads the value of the potentiometers and then sens a string through serial"), mdx("li", { parentName: "ol" }, "Processing picks up that serial string and then creates OSC messages to send to Resolume"), mdx("li", { parentName: "ol" }, "Resolume receives OSC messages and changes composition-level effects")), mdx("h4", null, "Resolume Mapping"), mdx("p", null, "Since I was just projecting on a simple set of shapes in the corner of the room, I used the built-in mapping dialog inside Resolume to handle mapping the projection. It should be noted that this is only a feature in Resolume Arena, and does not come standard with Avenue. If you need more complex mapping, ", mdx("a", { href: "http://visution.com/mapio", target: "_blank" }, "Mapio"), " seems to be an excellent alternative."), mdx("div", { className: "video-wrapper" }, mdx("iframe", { width: "100%", height: "480", src: "https://www.youtube.com/embed/yXI83otRqE4?rel=0&showinfo=0", frameBorder: "0", allowFullScreen: true })), mdx("p", null, "The mapping window is tucked away up in the displays menu under the \u201Cadvanced\u201D option. Once that dialog opens, it shows you the raw output of your Resolume composition. I mentioned previously that George\u2019s MMV pieces showed two different pieces right next to each other as the same source\u2013this is where that comes in handy. In the mapping window in Resolume, you can crop out a specific part of the source, and then assign that to a slice. This allowed us to load twice as many videos even though Resolume only treated it as one source. After the sources were cut out, the only thing left to do was click and drag to start mapping the sources to the projection target."), mdx("h3", null, "Displaying the Project"), mdx("p", null, "George and I knew going in that this would be a fancy event, but I think we both underestimated the party that we were in for. The event was a veritable who\u2019s who of the culinary arts in Chicago. I\u2019d be lying if I said I wasn\u2019t geeking out when Rick Bayless grated chocolate onto a dessert that he handed me\u2013I definitely fanboy\u2019ed out and mumbled something about also being from Oklahoma."), mdx("p", null, "All in all, the event went extremely well. There were hundreds of people who moved through the room during the night, and we even got a special shout-out in the text messages that the event organizers were sending out during the party. People seemed to really enjoy playing with the cupcakes, which definitely caused people to spend more time in the room."), mdx("p", null, "Here are a few photos and videos from the event:"), mdx("div", { className: "video-wrapper" }, mdx("iframe", { width: "100%", height: "480", src: "https://www.youtube.com/embed/x2GhXsxdLtE?rel=0&showinfo=0", frameBorder: "0", allowFullScreen: true })), mdx("div", { className: "video-wrapper" }, mdx("iframe", { width: "100%", height: "480", src: "https://www.youtube.com/embed/G8PFUX36wB0?rel=0&showinfo=0", frameBorder: "0", allowFullScreen: true })), mdx("br", null)); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/cta-train-time-texter/https://justin.isamaker.com/cta-train-time-texter/Sun, 25 Jan 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Chicago Transit Authority Train Time Texter", "date": "2015-01-25T00:00:00-0500", "teaser": "Creating a button to text me how long I have to get to my L stop before I'm late for work.", "featuredImage": "cta.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "I\u2019ve got around a ten minute walk to my closest train station every morning. Depending on how late I\u2019m running and if I\u2019m hustling or not, that time can swing from eight to twelve minutes. It seems like every time I try to do the eight-minute run, I always end up getting to the station right as my train is pulling away. To help better predict how much time I have to catch a train, I made a button that can figure out when the next train arrives. Once it gets the time, it sends me a text to my phone\u2013that way I can hit the button on my way out the door and not worry about it until I make it to the bottom of my stairs."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "640px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/8ff1a4df323f1a68b10d5d4918984dfe/c08c5/cta.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAbLzdWbYUP/EABsQAAICAwEAAAAAAAAAAAAAAAECABIDERMh/9oACAEBAAEFArgDuJYGeWC7Z2XG3//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAwEBAAAAAAAAAAAAAAAAARESISIx/9oACAEBAAY/AtaRmk0R1p7CKn//xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhMUGB/9oACAEBAAE/IfOLIb9fAlYCpbNm9J12RTo6taj/2gAMAwEAAgADAAAAECg//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAEDAQE/EIa//8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAECAQE/ELqv/8QAHBABAQACAwEBAAAAAAAAAAAAAREAIVFhcUGB/9oACAEBAAE/EEYUCkFEeAe8mgHNSB63ksY/FSec+4mWAkr7vGckyCI/MPJQVC7fc//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Photo by Clark Maxwell", "title": "Photo by Clark Maxwell", "src": "/static/8ff1a4df323f1a68b10d5d4918984dfe/c08c5/cta.jpg", "srcSet": ["/static/8ff1a4df323f1a68b10d5d4918984dfe/f93b5/cta.jpg 300w", "/static/8ff1a4df323f1a68b10d5d4918984dfe/b4294/cta.jpg 600w", "/static/8ff1a4df323f1a68b10d5d4918984dfe/c08c5/cta.jpg 640w"], "sizes": "(max-width: 640px) 100vw, 640px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "http://www.flickr.com/photos/clarkmaxwell/", "target": "_new", "className": "image-caption" }, "Photo by Clark Maxwell")), mdx("p", null, "Making a button that can talk to the Internet sounds kind of involved, but it\u2019s actually pretty easy when you use a microcontroller like the Intel Edison. When the Edison hears a click from a button that\u2019s attached to it, it uses JavaScript to make a call to the Chicago Transit Authority\u2019s API, and then another call to Twilio to send me a text. Let\u2019s take a look at how to make it!"), mdx("h4", null, "Set Up Your Edison"), mdx("p", null, "Full disclosure", "\u2014", "I\u2019m working on a Mac, so these instructions will skew that way. To get started, you should have a ", mdx("a", { href: "https://communities.intel.com/docs/DOC-23193", target: "_blank" }, "freshly-flashed Edison"), ". After you board is flashed, you can try to find the IP address and enter all the additional commands, or you can just \u201Cnpm install bloop\u201D on the machine that you\u2019re trying to SSH in from. ", mdx("a", { href: "http://rexstjohn.com/introducing-bloop-cli-commands-for-working-with-intel-edison/", target: "_blank" }, "Bloop is a tool"), " from ", mdx("a", { href: "http://rexstjohn.com/", target: "_blank" }, "Rex St. John"), ", and it\u2019s an absolute lifesaver when you\u2019re working with the Edison. Instead of running \u201Cscreen /dev/cu.usbserial-XXXXX 115200 -L\u201D, all you have to do is run \u201Cbloop c\u201D it will connect to the Edison it finds on your network. Once you\u2019re in, run \u201Cconfigure_edison \u2014setup\u201D to get your wi-fi and user creds defined."), mdx("p", null, "While all this is happening, you can start downloading the Edison Yocto Image from ", mdx("a", { href: "https://communities.intel.com/docs/DOC-23242", target: "_blank" }, "this site"), ". You want the link that says, \u201CEdison Yocto Complete Image.\u201D Once downloaded, you\u2019ll need to load the files onto a micro SD card\u2013you can read up on Yocto and how to get those files onto the SD card ", mdx("a", { href: "https://software.intel.com/en-us/html5/documentation/getting-started-with-intel-xdk-iot-edition", target: "_blank" }, "here"), ". After you load the files, power down your Edison, insert the SD card, and the power it back up. To test your install is working, bloop in to your Edison and type \u201Cnode -v\u201D. If that returns the version of Node that you have installed you\u2019re good to go. If it says \u201CCommand not found,\u201D you\u2019re going to need to try loading Yocto onto the SD card again, because something went wrong."), mdx("h4", null, "Hook Up Your Button"), mdx("div", { className: "paragraph-with-picture" }, mdx("p", null, "If you read any of my other Edison posts, you know that I've been working with a ", mdx("a", { href: "http://www.seeedstudio.com/depot/Grove-Starter-Kit-p-709.html", target: "_blank" }, "Grove Starter Kit"), " that I got from Intel and Instructables. I used the small pushbutton from the starter kit for this project, but you can use any button\u2013the bigger, the better.", mdx("br", null), mdx("br", null), "If you need help figuring out how to hook up the button, the Arduino website has a really ", mdx("a", { href: "http://arduino.cc/en/tutorial/button", target: "_blank" }, "great tutorial"), " to get you pointed in the right direction. Whatever button you end up using, all you need to do is hook it up so that it's outputting to a digital pin on the Edison. I used D2 for my program. Once that is connect, you can go ahead and power on your Edison."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "599px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/252b87342f6919007921e84823c05339/d533d/sparkfun-big-red-button.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "80%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAQABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAQb/xAAVAQEBAAAAAAAAAAAAAAAAAAACBP/aAAwDAQACEAMQAAABoIPSzR0Rop//xAAZEAADAQEBAAAAAAAAAAAAAAABAgMEEgD/2gAIAQEAAQUC01KeSzgq3S64moTPZmA5H//EABcRAAMBAAAAAAAAAAAAAAAAAAECAxD/2gAIAQMBAT8Bm0wpDZ//xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8BNX//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIRMlESQZH/2gAIAQEABj8CUU6sy9FLYnHJFOPFbEl0f//EABkQAQADAQEAAAAAAAAAAAAAAAEAEWExIf/aAAgBAQABPyFi+hVl+U56uEZwXMa3ZrhKHxQon//aAAwDAQACAAMAAAAQMA//xAAWEQADAAAAAAAAAAAAAAAAAAABECH/2gAIAQMBAT8QGRV//8QAFxEAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxAKxf/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQWFxgf/aAAgBAQABPxDHDJc0cPq7jCrZuR48mgVn9LiuhfR4dkMXhp3O1ncKiiB4FT//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Sparkfun's Big Red Button", "title": "Sparkfun's Big Red Button", "src": "/static/252b87342f6919007921e84823c05339/d533d/sparkfun-big-red-button.jpg", "srcSet": ["/static/252b87342f6919007921e84823c05339/f93b5/sparkfun-big-red-button.jpg 300w", "/static/252b87342f6919007921e84823c05339/d533d/sparkfun-big-red-button.jpg 599w"], "sizes": "(max-width: 599px) 100vw, 599px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "https://www.sparkfun.com/products/9181", "target": "_new", "className": "image-caption" }, "Sparkfun's Big Red Button"), "\n ")), mdx("h3", null, "Code Time"), mdx("p", null, "We\u2019re going to be using MRAA, Node.js, the Chicago Transit Authority\u2019s API, and Twilio to handle the communication for this project. MRAA is the C library that lets us talk to the Edison through JavaScript. It works with a lot of different flavors of Intel products, and has a similar syntax to \u201Cregular\u201D Arduino code. We could write this code as a regular Arduino program, but this puppy can run Node, so why not?"), mdx("p", null, "Chicago has been making a huge effort to make a lot of resources available to developers over the past few years. We\u2019ve got the ", mdx("a", { href: "https://data.cityofchicago.org/", target: "_blank" }, "Data Portal"), " at our fingertips, ", mdx("a", { href: "https://arrayofthings.github.io/", target: "_blank" }, "the Array of Things"), " on the horizon, and fairly comprehensive access to the ", mdx("a", { href: "http://www.transitchicago.com/developers/", target: "_blank" }, "CTA\u2019s API"), ". We\u2019ll be using the CTA API to ask for arrival times for a specific station."), mdx("h4", null, "API Prep"), mdx("p", null, "In order to use the CTA\u2019s API, you\u2019re going to need to apply for an API key. I\u2019ve never heard of them turning someone down for a key, but it does take around a day to turn around. You can ", mdx("a", { href: "http://www.transitchicago.com/developers/traintrackerapply.aspx", target: "_blank" }, "apply for an API key here"), "."), mdx("p", null, "Once you have your API Key, you\u2019re going to want to find out the station ID for your home station. You can find the ", mdx("a", { href: "http://www.transitchicago.com/developers/ttdocs/default.aspx#_Toc296199909", target: "_blank" }, "station listings here"), ". It\u2019s worth mentioning that this whole thing would also work for the ", mdx("a", { href: "http://www.transitchicago.com/developers/bustracker.aspx", target: "_blank" }, "CTA\u2019s Bus Tracker API"), ", as well as a slew of other transit APIs from other cities."), mdx("p", null, "In addition to the CTA API key, you\u2019ll also need a Twilio key. If you aren\u2019t already familiar with it, Twilio is a service that lets you send calls or texts programmatically. To get your Twilio API Keys, you\u2019ll need to sign up for their free trial ", mdx("a", { href: "https://www.twilio.com/try-twilio", rel: "nofollow" }, "here"), ". The trial lets you send thousands of texts before you have to decide if you want to pay for your use, so you should be in the clear for this and many other projects."), mdx("h4", null, "Write the Code"), mdx("p", null, "Now that you\u2019ve got your API stuff all sorted out, we can actually write the code that\u2019s going to be running this stuff. Code be found on GitHub, but come on, write it out yourself and get a good understanding of it."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token comment" }, "// Require Node libraries"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " mraa ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'mraa'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " request ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'request'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " xml2js ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'xml2js'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// We get the data back from the CTA API in XML, so we'll set up a parser to get it over to JSON"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " parser ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "xml2js", mdx("span", { parentName: "span", "className": "token punctuation" }, "."), "Parser"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// CTA vars"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " json", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\tmessageBody", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\tloganId ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token string" }, "'41020'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\tapiKey ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token string" }, "'[ INSERT CTA API KEY ]'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "//TWILIO"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " twilio ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'twilio'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " client ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "twilio", mdx("span", { parentName: "span", "className": "token punctuation" }, "."), "RestClient"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "\n\t", mdx("span", { parentName: "code", "className": "token string" }, "'[ INSERT TWILIO PUBLIC KEY ]'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\t", mdx("span", { parentName: "code", "className": "token string" }, "'[ INSERT TWILIO PRIVATE KEY ]'"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Use MRAA to declare a new input on digital pin 2"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " buttonPin ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "mraa", mdx("span", { parentName: "span", "className": "token punctuation" }, "."), "Gpio"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "2"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\nbuttonPin", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "dir"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "mraa", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token constant" }, "DIR_IN"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Log the MRAA version for a sanity check"), "\nconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'MRAA Version: '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " mraa", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "getVersion"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Set up the init function"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), " ", mdx("span", { parentName: "code", "className": "token function" }, "init"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t", mdx("span", { parentName: "code", "className": "token function" }, "getArrTime"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t", mdx("span", { parentName: "code", "className": "token function" }, "checkButtonPress"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Set up the function to query the CTA API using request"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), " ", mdx("span", { parentName: "code", "className": "token function" }, "getArrTime"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t", mdx("span", { parentName: "code", "className": "token function" }, "request"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "\n\t\t", mdx("span", { parentName: "code", "className": "token string" }, "'http://lapi.transitchicago.com/api/1.0/ttarrivals.aspx?key='"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// include the api key"), "\n\t\tapiKey ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t", mdx("span", { parentName: "code", "className": "token string" }, "'&mapid='"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// and the station id"), "\n\t\tloganId ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// only return two results\u2013we just need the next train in a certain direction"), "\n\t\t", mdx("span", { parentName: "code", "className": "token string" }, "'&max=2'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "error", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " response", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " body"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// parse the XML response"), "\n\t\t\tparser", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "parseString"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "body", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "err", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " result"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t\tjson ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token constant" }, "JSON"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "stringify"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "result", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\tjson ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token constant" }, "JSON"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "parse"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "json", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "return"), " json", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "for"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "i", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " l", mdx("span", { parentName: "code", "className": "token operator" }, "="), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "json", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token string" }, "'ctatt'"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "eta", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "length", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), " i ", mdx("span", { parentName: "code", "className": "token operator" }, "<"), " l", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), " i", mdx("span", { parentName: "code", "className": "token operator" }, "++"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// format the time to AM/PM"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " arrTime ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "String"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "json", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token string" }, "'ctatt'"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "eta", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), "i", mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "arrT", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "slice"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "9"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " ", mdx("span", { parentName: "code", "className": "token constant" }, "H"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " arrTime", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "slice"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), mdx("span", { parentName: "code", "className": "token number" }, "2"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " h ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token constant" }, "H"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "%"), " ", mdx("span", { parentName: "code", "className": "token number" }, "12"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "||"), " ", mdx("span", { parentName: "code", "className": "token number" }, "12"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " ampm ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token constant" }, "H"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "<"), " ", mdx("span", { parentName: "code", "className": "token number" }, "12"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "?"), " ", mdx("span", { parentName: "code", "className": "token string" }, "\"AM\""), " ", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " ", mdx("span", { parentName: "code", "className": "token string" }, "\"PM\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " formattedArrTime ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " h ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " arrTime", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "substr"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "2"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "3"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "' '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ampm", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// pull the response for the direction of train that we're looking for. The Blue Line runs North towards O'Hare, or South towards Forest Park\u2013I want Forest Park for my morning commute"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "json", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token string" }, "'ctatt'"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "eta", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), "i", mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "destNm", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "=="), " ", mdx("span", { parentName: "code", "className": "token string" }, "'Forest Park'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// give us a nice message to text"), "\n\t\t\t\t\tmessageBody ", mdx("span", { parentName: "code", "className": "token operator" }, "="), "\n\t\t\t\t\t\t", mdx("span", { parentName: "code", "className": "token string" }, "'A Forest Park-Bound '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t\t\t\t\tjson", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token string" }, "'ctatt'"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "eta", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), "i", mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "rt ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t\t\t\t\t", mdx("span", { parentName: "code", "className": "token string" }, "' Line train will arrive at '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t\t\t\t\tjson", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), mdx("span", { parentName: "code", "className": "token string" }, "'ctatt'"), mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "eta", mdx("span", { parentName: "code", "className": "token punctuation" }, "["), "i", mdx("span", { parentName: "code", "className": "token punctuation" }, "]"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "staNm ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t\t\t\t\t", mdx("span", { parentName: "code", "className": "token string" }, "' at '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), "\n\t\t\t\t\t\tformattedArrTime", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t\tconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'set: '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " messageBody", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "return"), " messageBody", mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token comment" }, "// END DEST CHECK"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token comment" }, "// END FOR LOOP"), "\n\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), " ", mdx("span", { parentName: "code", "className": "token comment" }, "// END REQUEST"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token comment" }, "// END GET ARRIVAL TIME"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// code to listen for a button press"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), " ", mdx("span", { parentName: "code", "className": "token function" }, "checkButtonPress"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " buttonPushed ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " buttonPin", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "read"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n\t", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "buttonPushed", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t", mdx("span", { parentName: "code", "className": "token function" }, "getArrTime"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\tconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'ret: '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " messageBody", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// tell the text where to go"), "\n\t\tclient", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "sms", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "messages", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "create"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\tto", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token string" }, "'[ INSERT TARGET PHONE NUMBER ]'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\t\t\tfrom", mdx("span", { parentName: "code", "className": "token operator" }, ":"), mdx("span", { parentName: "code", "className": "token string" }, "'+[ INSERT TWILIO PHONE NUMBER ]'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), "\n\t\t\tbody", mdx("span", { parentName: "code", "className": "token operator" }, ":"), " messageBody\n\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "error", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " message"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token operator" }, "!"), "error", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t\tconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "message", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t\tconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "error", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t", mdx("span", { parentName: "code", "className": "token comment" }, "// wait two seconds before we start checking for presses again to prevent lingering clicks"), "\n\t\t", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t\t\t", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "checkButtonPress", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "100"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "2000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n\t", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "checkButtonPress", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "100"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\t", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token comment" }, "// END CHECK BUTTON PRESSED"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// call the init function"), "\n", mdx("span", { parentName: "code", "className": "token function" }, "init"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("h4", null, "Run Your Code"), mdx("p", null, "In the terminal window that has your Bloop session open, type \u2018node traintracker.js\u2019 in the root of your project folder. This should start the JS running. Check your terminal to see if the Edison gave back the MRAA version\u2013if it did, you\u2019re all good to go. Go ahead and press the button, and then wait for your text."), mdx("p", null, "If you don\u2019t receive a text, take a look at the output in the terminal. The code will return an error telling you what you\u2019re missing. Make sure that you replaced all the CTA and Twilio API keys, as well as the Twilio numbers."), mdx("p", null, "If your button is working, now you can hit it on the way out your door and have you marching orders texted to you right away. Yay, Internet!")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/bark-tracking/https://justin.isamaker.com/bark-tracking/Sun, 18 Jan 2015 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Bark Tracking with the Intel Edison", "date": "2015-01-18T00:00:00-0500", "teaser": "Listening for loud dog barks in my apartment and then logging the data to Phant.io through Node.js on an Edison.", "featuredImage": "king.jpg" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "A couple of years ago my landlord informed me that the shop that I was living behind would be expanding in to my apartment. He wasn\u2019t sure of the exact timeline, but he was sure of the fact that we would need to move in the near future. This was the first apartment that my girlfriend and I rented together", "\u2014", "and our first \u201Creal\u201D Chicago apartment", "\u2014", "you can imagine how bummed we were. To soften the blow, we decided that we would start looking for an apartment that would allow a dog."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/80c0b208db0683b901474f01cb2db763/4b190/king-2.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "71.33333333333334%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB1bJkcJI//8QAGhAAAQUBAAAAAAAAAAAAAAAAAQACEBESIf/aAAgBAQABBQLVIu5tOBqP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAQUAAAAAAAAAAAAAAAAAABARITFx/9oACAEBAAY/AtGKIX//xAAaEAACAwEBAAAAAAAAAAAAAAABEQAQIUFh/9oACAEBAAE/IVFHxGZVHarewuv/2gAMAwEAAgADAAAAEDMv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QV//EABoQAAMBAAMAAAAAAAAAAAAAAAABESFBYfD/2gAIAQEAAT8Qxzgr7jIGEm08UQ0hod1gmG2in//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "A Photo of King by Ashley Fischer for the Warm Noses Project", "title": "A Photo of King by Ashley Fischer for the Warm Noses Project", "src": "/static/80c0b208db0683b901474f01cb2db763/4b190/king-2.jpg", "srcSet": ["/static/80c0b208db0683b901474f01cb2db763/f93b5/king-2.jpg 300w", "/static/80c0b208db0683b901474f01cb2db763/b4294/king-2.jpg 600w", "/static/80c0b208db0683b901474f01cb2db763/4b190/king-2.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "http://www.aefischer.com/pets/", "target": "_new", "className": "image-caption" }, "A Photo of King by Ashley Fischer for the Warm Noses Project")), mdx("p", null, "A few weeks later, we ended up with King, the big lug of a dog that you see pictured above. He\u2019s a pit mutt that we managed to pick up from the ", mdx("a", { href: "http://www.cityofchicago.org/city/en/depts/cacc.html", target: "_new" }, "Chicago Animal Care and Control"), " kennel 48 hours before he was set to be euthanized. The decision, albeit rushed, was a good one in the long run\u2013King is a great dog."), mdx("p", null, "With that said, one of King\u2019s favorite pastimes is barking in the house while we\u2019re out. Squirrels, cars, people in the hallway\u2013if it makes a noise while we\u2019re out, King is on it. I decided to run a few experiments by tracking his barking to see what we could do to quiet him down a bit."), mdx("p", null, "I ended up using the ", mdx("a", { href: "http://www.intel.com/content/www/us/en/do-it-yourself/edison.html", target: "_new" }, "Intel Edison"), " to log King\u2019s barking patterns. My thinking was that the Edison would use a small mic to listen to the room for loud noises, and then when it registered a noise, it would send that data to a feed on ", mdx("a", { href: "https://data.sparkfun.com/", target: "_new" }, "data.sparkfun.com"), "."), mdx("h3", null, "Here\u2019s how to make your own bark tracker"), mdx("p", null, "The Edison is really good at a lot of things, and one of the things that excites me the most about it is its ability to run Node.js. The only big downside of the Edison is that it\u2019s a little tricky to get started if you\u2019re still a greenhorn, but it\u2019s nothing that you can figure out with a little persistence."), mdx("h4", null, "Setting Up the Edison"), mdx("p", null, "Full disclosure", "\u2014", "I\u2019m working on a Mac, so these instructions will skew that way. To get started, you should have a ", mdx("a", { href: "https://communities.intel.com/docs/DOC-23193", target: "_new" }, "freshly-flashed Edison"), ". After you board is flashed, you can try to find the IP address and enter all the additional commands, or you can just \u201Cnpm install bloop\u201D on the machine that you\u2019re trying to SSH in from. ", mdx("a", { href: "http://rexstjohn.com/introducing-bloop-cli-commands-for-working-with-intel-edison/", target: "_new" }, "Bloop is a tool"), " from ", mdx("a", { href: "http://rexstjohn.com/", target: "_new" }, "Rex St. John"), ", and it\u2019s an absolute lifesaver when you\u2019re working with the Edison. Instead of running \u201Cscreen /dev/cu.usbserial-XXXXX 115200 -L\u201D, all you have to do is run \u201Cbloop c\u201D it will connect to the Edison it finds on your network. Once you\u2019re in, run \u201Cconfigure_edison \u2014setup\u201D to get your wi-fi and user creds defined."), mdx("p", null, "While all this is happening, you can start downloading the Edison Yocto Image from ", mdx("a", { href: "https://communities.intel.com/docs/DOC-23242", target: "_new" }, "this site"), ". You want the link that says, \u201CEdison Yocto Complete Image.\u201D Once downloaded, you\u2019ll need to load the files onto a micro SD card\u2013you can read up on Yocto and how to get those files onto the SD card ", mdx("a", { href: "https://software.intel.com/en-us/html5/documentation/getting-started-with-intel-xdk-iot-edition", target: "_new" }, "here"), ". After you load the files, power down your Edison, insert the SD card, and the power it back up. To test your install is working, bloop in to your Edison and type \u201Cnode -v\u201D. If that returns the version of Node that you have installed you\u2019re good to go. If it says \u201CCommand not found,\u201D you\u2019re going to need to try loading Yocto onto the SD card again, because something went wrong."), mdx("h4", null, "Hook Up Your Sensor"), mdx("div", { className: "paragraph-with-picture left" }, mdx("p", null, "At this point in the build, you'll need to hook up whatever kind of sensor you're using. I was fortunate enough to receive a ", mdx("a", { href: "http://www.seeedstudio.com/depot/Grove-Starter-Kit-p-709.html", target: "_new" }, "Grove Starter Kit"), " from Intel and Instructables, so I'll be talking about my experience with that. First pro-tip is that the connector shield is located on the back of the red anti-static foam, under the LCD screen. I may or may not have made it all the way to ordering a connector shield on Amazon before errantly knocking the starter kit case over and realizing that there was a shield already in the kit. It was early. I hadn't made coffee yet."), mdx("div", { "className": "image-container small-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "768px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/2f930a0b5934694ea04e46b4d4c98c9c/212bf/grove-shield-packaging.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "133.33333333333331%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAwADAAAAAAAAAAAAAAAAAAMEAQIF/8QAFwEAAwEAAAAAAAAAAAAAAAAAAQIDAP/aAAwDAQACEAMQAAABSxbp1Cg0pmxZZu4bgH//xAAdEAACAQQDAAAAAAAAAAAAAAABAgMAERMxEjRD/9oACAEBAAEFAsgspDUVpowrRrIWffFsIW0rb8G7Ff/EABcRAAMBAAAAAAAAAAAAAAAAAAACEBL/2gAIAQMBAT8BY1f/xAAXEQEAAwAAAAAAAAAAAAAAAAABABAS/9oACAECAQE/ASaL/8QAHxAAAQMDBQAAAAAAAAAAAAAAAQACIgMQETFBUnGB/9oACAEBAAY/ArxYSVMYWik7GTyTZN2tT7KHlv/EAB8QAQADAAIBBQAAAAAAAAAAAAEAESExUUGBobHB8f/aAAgBAQABPyEcZvUGK94g19wRiu7IbweJnMFgBaNJZW/XOuVBAHF+0B6Pxls//9oADAMBAAIAAwAAABAQyQP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EGWxDjB6Q//EABgRAQADAQAAAAAAAAAAAAAAAAABETEh/9oACAECAQE/EOsTAxT/xAAcEAEAAwEBAQEBAAAAAAAAAAABABEhMWFBcbH/2gAIAQEAAT8QdMrvGxGoLhov0zkWgCodPlmT9lKDjzx/sDSrnY+0NEBowvn3nkGixoW5aBynsG7Q2DFAhBad2hLFRZR5iFXeT//Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Finding the Grove connector shield", "title": "Finding the Grove connector shield", "src": "/static/2f930a0b5934694ea04e46b4d4c98c9c/212bf/grove-shield-packaging.jpg", "srcSet": ["/static/2f930a0b5934694ea04e46b4d4c98c9c/f93b5/grove-shield-packaging.jpg 300w", "/static/2f930a0b5934694ea04e46b4d4c98c9c/b4294/grove-shield-packaging.jpg 600w", "/static/2f930a0b5934694ea04e46b4d4c98c9c/212bf/grove-shield-packaging.jpg 768w"], "sizes": "(max-width: 768px) 100vw, 768px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Finding the Grove connector shield"), "\n ")), mdx("p", null, "I 3D printed a case for my Edison using ", mdx("a", { href: "https://www.thingiverse.com/thing:457434", target: "_new" }, "a design from Thingiverse"), ". The case uses the screws for the struts to secure the lid, and has two slots for the shield pins to go through. I did have to drill an extra hole in the lid for the ISP pins, but other than that everything fits great."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1024px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/ca0517baa940328a99f4632617304b18/72e01/edison-case.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIFAwb/xAAXAQADAQAAAAAAAAAAAAAAAAAAAgME/9oADAMBAAIQAxAAAAFnn55m6Ajlj//EABsQAAMAAgMAAAAAAAAAAAAAAAABAgMEERMU/9oACAEBAAEFAiWzqTK2JJz1z6c5/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAEDAQE/AcV//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECEf/aAAgBAgEBPwFxYtw//8QAGhAAAgIDAAAAAAAAAAAAAAAAAAECIRAigf/aAAgBAQAGPwLFmqZUUU0uH//EABsQAAMAAgMAAAAAAAAAAAAAAAABESExUXGh/9oACAEBAAE/Ia9jMy+miKpWXe2EQLc8FwP/2gAMAwEAAgADAAAAEE8v/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAEDAQE/EBFi/8QAFREBAQAAAAAAAAAAAAAAAAAAAQD/2gAIAQIBAT8QQqQAFv/EABwQAQADAAIDAAAAAAAAAAAAAAEAESFBcWHB0f/aAAgBAQABPxCt0y0UD5BK4qGply2U9R9luzN6vqJHhoDR2z//2Q==')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "3D Printed Intel Edison Case by Michael Jassowski", "title": "3D Printed Intel Edison Case by Michael Jassowski", "src": "/static/ca0517baa940328a99f4632617304b18/72e01/edison-case.jpg", "srcSet": ["/static/ca0517baa940328a99f4632617304b18/f93b5/edison-case.jpg 300w", "/static/ca0517baa940328a99f4632617304b18/b4294/edison-case.jpg 600w", "/static/ca0517baa940328a99f4632617304b18/72e01/edison-case.jpg 1024w"], "sizes": "(max-width: 1024px) 100vw, 1024px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "href": "http://www.thingiverse.com/thing:457434", "target": "_new", "className": "image-caption" }, "3D Printed Intel Edison Case by Michael Jassowski")), mdx("p", null, "Power down your Edison, and then attach the Grove Connector Shield. Once you have your shield attached, grab a connector and attach your sound sensor to the pin marked \u201CA0\u201D (analog 0). Once that is securely connected, go ahead and power up your Edison again."), mdx("div", { "className": "image-container large-image" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "1024px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/9c35b9d082628d54b428ac86b809f34a/72e01/edison-with-sound-sensor.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "75%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAaCU51qCIv8A/8QAGRABAAMBAQAAAAAAAAAAAAAAAQACAxEU/9oACAEBAAEFArWCuNCwHI7jDfk92k//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/AcXD/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAESIf/aAAgBAgEBPwGLNf/EABwQAAICAgMAAAAAAAAAAAAAAAABAhESMSEiof/aAAgBAQAGPwLQ8VRTRpnWHpxGJ//EABsQAAICAwEAAAAAAAAAAAAAAAERACFBUWFx/9oACAEBAAE/Icy4UCoS9hgSY1cqnCV6bfUXQY0p/9oADAMBAAIAAwAAABCr7//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EID/xAAWEQEBAQAAAAAAAAAAAAAAAAAAIRH/2gAIAQIBAT8QhWH/xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAhMVFhkaHB/9oACAEBAAE/EFTFwJg3Ha1qW/OMpQ1KtvA5f7JUMMgIC3NOsmcUbgKHvP/Z')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "My Edison with the mic hooked up to A0", "title": "My Edison with the mic hooked up to A0", "src": "/static/9c35b9d082628d54b428ac86b809f34a/72e01/edison-with-sound-sensor.jpg", "srcSet": ["/static/9c35b9d082628d54b428ac86b809f34a/f93b5/edison-with-sound-sensor.jpg 300w", "/static/9c35b9d082628d54b428ac86b809f34a/b4294/edison-with-sound-sensor.jpg 600w", "/static/9c35b9d082628d54b428ac86b809f34a/72e01/edison-with-sound-sensor.jpg 1024w"], "sizes": "(max-width: 1024px) 100vw, 1024px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "My Edison with the mic hooked up to A0")), mdx("p", null, "It should be noted that while the Grove Starter Kit is a nice to have, you don\u2019t really need to worry about not having it. Get a sensor, solder some wires on, and hook it up straight to the pins on the Arduino\u2013it\u2019s all the same thing."), mdx("h4", null, "Create a Feed on data.sparkfun.com"), mdx("p", null, "Before we start writing the code, we\u2019re going to need some place to put all this tasty, tasty data that we\u2019ll be collecting. I decided to use ", mdx("a", { href: "https://data.sparkfun.com/", target: "_new" }, "data.sparkfun"), " for its ease of use. You\u2019ll need to create a feed\u2013", mdx("a", { href: "https://data.sparkfun.com/streams/make", target: "_new" }, "follow this link to do that"), "."), mdx("p", null, "While you\u2019re setting up your feed, you need to decide what it is that you\u2019ll be tracking. You can add these items in the fields section. For my build, all I need to track is the level of noise. Sparkfun automatically adds a timestamp for you, which is the other piece of data that I\u2019d like to collect."), mdx("p", null, "Once you\u2019ve created your feed, keep the window open so you have easy access to your public and private keys\u2013you\u2019ll need those in the next step."), mdx("h4", null, "Set Up Your Dev Environment"), mdx("p", null, "Now that your sensor is plugged in, power your Edison is powered on again. Once it\u2019s booted up, run \u201Cbloop c\u201D from Terminal on your computer to SSH into your Edison. Once you\u2019re in, make a new directory for your project in your root folder. Grab the contents of my ", mdx("a", { href: "https://github.com/justinisamaker/arduino/blob/master/barkTracker/package.json", target: "_new" }, "package.json file"), ", and then run \u201Cnpm install\u201D from the root directory. This will install Forever, Moment, Moment Timezone, and Request, as well as any dependencies that they have."), mdx("h3", null, "Time to write some code!"), mdx("p", null, "The code we\u2019re writing is fairly simply. All we\u2019re going to do is listen to the sensor, and when we hear a noise above a certain level, send the data off to our feed. You can find the code on my ", mdx("a", { href: "https://github.com/justinisamaker/barktracker", target: "_new" }, "GitHub"), ", but I\u2019d much rather you read through the code below and see what\u2019s going on."), mdx("div", { "className": "gatsby-highlight", "data-language": "javascript" }, mdx("pre", { parentName: "div", "style": { "counterReset": "linenumber NaN" }, "className": "language-javascript line-numbers" }, mdx("code", { parentName: "pre", "className": "language-javascript" }, mdx("span", { parentName: "code", "className": "token comment" }, "// Require libraries"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " m ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'mraa'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " request ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'request'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " moment ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'moment'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " momentTimezone ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "require"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'moment-timezone'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Do a sanity check to make sure that MRAA is loaded"), "\nconsole", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'MRAA Version: '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " m", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "getVersion"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Declare your sensor as an analog input"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " soundSensor ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "new"), " ", mdx("span", { parentName: "code", "className": "token class-name" }, "m", mdx("span", { parentName: "span", "className": "token punctuation" }, "."), "Aio"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token number" }, "0"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Set the sound threshold"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " threshold ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token number" }, "800"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Run the function to start out"), "\n", mdx("span", { parentName: "code", "className": "token function" }, "checkSoundLevels"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n", mdx("span", { parentName: "code", "className": "token comment" }, "// Declare the sound check function"), "\n", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), " ", mdx("span", { parentName: "code", "className": "token function" }, "checkSoundLevels"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// read the value to start off"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " soundValue ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " soundSensor", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "read"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Log the value to see where you need to set the threshold\u2013uncomment this line to debug"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "//console.log(soundValue);"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// If the sound is higher than the threshold, make the request"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "soundValue ", mdx("span", { parentName: "code", "className": "token operator" }, ">="), " threshold", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Set the current time with my timezone, format the date and time"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "var"), " currentTime ", mdx("span", { parentName: "code", "className": "token operator" }, "="), " ", mdx("span", { parentName: "code", "className": "token function" }, "moment"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "tz"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "\"America/Chicago\""), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "format"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'HH:mm:ss\u2013MM/DD/YYYY'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// Use the request library to hit the Sparkfun URL\u2013make sure you replace the applicable parts with your data"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "request"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'http://data.sparkfun.com/input/[INSERT PUBLIC KEY]?private_key=[INSERT PRIVATE KEY]&soundlevel='"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " soundValue ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "'&localtime='"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " currentTime", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token parameter" }, "error", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " response", mdx("span", { parentName: "span", "className": "token punctuation" }, ","), " body"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "response", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "statusCode", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// If the response is good, wait 10 seconds before we start checking again"), "\n ", mdx("span", { parentName: "code", "className": "token keyword" }, "if"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "response", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "statusCode ", mdx("span", { parentName: "code", "className": "token operator" }, "==="), " ", mdx("span", { parentName: "code", "className": "token number" }, "200"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'posted successfully with a sound value of '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " soundValue ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "' at '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " currentTime", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token keyword" }, "function"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "checkSoundLevels", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "100"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "10000"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), mdx("span", { parentName: "code", "className": "token string" }, "'oops, there was an error'"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n console", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), mdx("span", { parentName: "code", "className": "token function" }, "log"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "response", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "statusCode ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " ", mdx("span", { parentName: "code", "className": "token string" }, "' :::: '"), " ", mdx("span", { parentName: "code", "className": "token operator" }, "+"), " response", mdx("span", { parentName: "code", "className": "token punctuation" }, "."), "body", mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "checkSoundLevels", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "100"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), " ", mdx("span", { parentName: "code", "className": "token keyword" }, "else"), " ", mdx("span", { parentName: "code", "className": "token punctuation" }, "{"), "\n ", mdx("span", { parentName: "code", "className": "token function" }, "setTimeout"), mdx("span", { parentName: "code", "className": "token punctuation" }, "("), "checkSoundLevels", mdx("span", { parentName: "code", "className": "token punctuation" }, ","), " ", mdx("span", { parentName: "code", "className": "token number" }, "100"), mdx("span", { parentName: "code", "className": "token punctuation" }, ")"), mdx("span", { parentName: "code", "className": "token punctuation" }, ";"), "\n ", mdx("span", { parentName: "code", "className": "token comment" }, "// console.log(soundValue);"), "\n ", mdx("span", { parentName: "code", "className": "token punctuation" }, "}"), "\n", mdx("span", { parentName: "code", "className": "token punctuation" }, "}")), mdx("span", { parentName: "pre", "aria-hidden": "true", "className": "line-numbers-rows", "style": { "whiteSpace": "normal", "width": "auto", "left": "0" } }, mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" }), mdx("span", { parentName: "span" })))), mdx("p", null, "When you look at the code, you\u2019ll need to find the spot that says \u201D", "[YOUR PRIVATE KEY]", "\u201D and \u201D", "[YOUR STREAM ID]", "\u201D and replace those with the info that you got from Sparkfun when you set up your stream."), mdx("h4", null, "Run Your Code"), mdx("p", null, "Once everything is loaded and configured, navigate to the root folder of your project, and run \u201Cnode whateverYouNamedYourFile.js\u201D. If you left the console.logs in, you\u2019ll see the data start to come through the terminal. Adjust your threshold to your liking, then make a loud noise and go check to see that it updated on Sparkfun. If you see the data on Sparkfun\u2019s website after a refresh, you got it right. If you don\u2019t see the new data coming in, double check that you entered your stream\u2019s ID, private key, and data fields correctly. Also take a look at the console output after your run node on your file\u2013the logs there may help you debug your code."), mdx("h4", null, "Experiment Results"), mdx("p", null, "I was constantly refreshing the data.sparkfun feed the first few days that I was running the tracker. Much to my dismay, the tracker was logging a noise almost every five minutes. I came home ready to go apologize to my neighbors for my unruly dog and swear to them that he doesn\u2019t do this while we\u2019re home. The third day that I ran it, I left it running while I took King out for a walk when I got home. When I came back in, the tracker had been registering the entire time that we were gone. After a little threshold adjusting, I was able to hone in on the right values and get a good read. Turns out that he was only barking a few times a day, and a little white noise in the apartment reduced that even more.")); } ; MDXContent.isMDXComponent = true;https://justin.isamaker.com/gigity-tv/https://justin.isamaker.com/gigity-tv/Sat, 28 Jan 2012 05:00:00 GMTvar _excluded = ["components"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /* @jsxRuntime classic */ /* @jsx mdx */ var _frontmatter = { "title": "Gigity.tv", "date": "2012-01-28T00:00:00-0500", "teaser": "The project that got me serious about web development. Check out how I helped a small startup completely redesign their brand and website.", "featuredImage": "gigity-thumbnail.jpg", "externalLink": "http://gigity.tv" }; var layoutProps = { _frontmatter: _frontmatter }; var MDXLayout = "wrapper"; return function MDXContent(_ref) { var components = _ref.components, props = _objectWithoutProperties(_ref, _excluded); return mdx(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout" }), mdx("p", null, "When I was first getting in to building websites, Gigity.tv gave me the chance that I needed to start getting serious and actually build out a production-ready site. Gigity is a small startup based in Chicago that provides streaming services for venues all around the nation. When I started my internship there, the entire company consisted of two guys, one permanent installation at the Double Door, and one mobile installation that we would cart around to different venues. Five years later it\u2019s still just two guys running the whole operation, but they\u2019ve grown their reach drastically, and are now installed in 18 venues in Chicago, Hollywood, Nashville, and Austin."), mdx("p", null, "I\u2019m a very firm believer that experience is the best teacher. If I could go back and do my college education over again, I would have gotten an internship every semester after my freshman year. With that said, we all have to start somewhere, and when I started at Gigity I was barely functional in regards to front-end development. Luckily Oliver Holmberg, the sole developer on Gigity, took me under his wing and showed me the ropes\u2013the man has the patience of a saint."), mdx("p", null, "During my internship, I produced a new logo for the company, helped overhaul the styles on the front-end of the site, produced a new page to help them win VC pitches, and collaborated with Oliver to laser cut a few pieces to clean up the mobile rig and make it look more professional. More recently, I helped them out with the front-end of the mobile version of their app that lets users broadcast live from events to the Gigity platform with their smartphones."), mdx("p", null, "The experience that I had with Gigity was invaluable. I\u2019ve maintained a relationship with the guys to this day picking up the spare freelance project for Rich Seng, the owner and dreamer who comes up with a slew of crazy ideas to keep everyone busy. Needless to say, I wouldn\u2019t be the developer that I am today if they hadn\u2019t given me a shot way back when."), mdx("p", null, "Check out the site at ", mdx("a", { href: "http://gigity.tv", target: "_blank" }, "Gigity.tv"), " and catch a broadcast or two\u2013you can see what\u2019s live tonight or watch an archived broadcast. It\u2019s hard to beat watching a live show from the comfort of your couch if you\u2019re spending the night in."), mdx("div", { "className": "image-container half-image" }, "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/5db5f340c33861b0b08549b85833d14e/4b190/gigity-home.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "111.66666666666667%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAWABQDASIAAhEBAxEB/8QAGQABAQEAAwAAAAAAAAAAAAAAAAQBAgUG/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/2gAMAwEAAhADEAAAAYqOWpK9MHosKrBf/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIAAxESFCP/2gAIAQEAAQUCFVsJt157oXbKH0zGIaLqIt1Sj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB8QAAICAQQDAAAAAAAAAAAAAAACAREyEBMigTNxkf/aAAgBAQAGPwLx32VsrE9GBPBxbV9M2+GTTHoqmP/EAB8QAQACAgICAwAAAAAAAAAAAAEAESFxQVExoWGx8P/aAAgBAQABPyGx5rSVR0tormzrECY2e/nUdcXF3j6gKI82J+dxMXzhy9ynPXP/2gAMAwEAAgADAAAAEMQgf//EABcRAAMBAAAAAAAAAAAAAAAAAAABERD/2gAIAQMBAT8QWVlP/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERECH/2gAIAQIBAT8Q6V5Ef//EAB0QAQEAAgIDAQAAAAAAAAAAAAERACExYUFRcbH/2gAIAQEAAT8QIYAiVrH1cfTDbvdS4lyW9AHXOSZrDwnlhJ6okmK86Exkm66ymEaACbuQwpzDT1fvKVi2pX7n/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Gigity.tv Home Page", "title": "Gigity.tv Home Page", "src": "/static/5db5f340c33861b0b08549b85833d14e/4b190/gigity-home.jpg", "srcSet": ["/static/5db5f340c33861b0b08549b85833d14e/f93b5/gigity-home.jpg 300w", "/static/5db5f340c33861b0b08549b85833d14e/b4294/gigity-home.jpg 600w", "/static/5db5f340c33861b0b08549b85833d14e/4b190/gigity-home.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Gigity.tv Home Page"), "\n "), "\n ", mdx("div", { parentName: "div" }, "\n ", mdx("span", { parentName: "div", "className": "gatsby-resp-image-wrapper", "style": { "position": "relative", "display": "block", "marginLeft": "auto", "marginRight": "auto", "maxWidth": "800px" } }, "\n ", mdx("a", { parentName: "span", "className": "gatsby-resp-image-link", "href": "/static/ec9eb2c9ceb81b2d8c1303029a186d37/4b190/gigity-broadcast.jpg", "style": { "display": "block" }, "target": "_blank", "rel": "noopener" }, "\n ", mdx("span", { parentName: "a", "className": "gatsby-resp-image-background-image", "style": { "paddingBottom": "88.99999999999999%", "position": "relative", "bottom": "0", "left": "0", "backgroundImage": "url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAASABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIGBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHlXpYsy7YJeOCQf//EABsQAAMAAgMAAAAAAAAAAAAAAAABAgMTISIy/9oACAEBAAEFAoJfa/Vxbax5BLjZZss2Wf/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAECAQE/AWP/xAAdEAABBAIDAAAAAAAAAAAAAAAAAQIhkQMyECIx/9oACAEBAAY/AvCWoLB1ciE5Erjd1m7rN3Wf/8QAHBABAAICAwEAAAAAAAAAAAAAAQARIVFBYcHx/9oACAEBAAE/IWljbVkY5g5MSy2HQTAFrVyzmGpcA5YUeifQRt9E/9oADAMBAAIAAwAAABA8xzz/xAAWEQEBAQAAAAAAAAAAAAAAAAARICH/2gAIAQMBAT8QNY//xAAXEQADAQAAAAAAAAAAAAAAAAABESAh/9oACAECAQE/ENhR/8QAHRABAAMAAgMBAAAAAAAAAAAAAQARIVHwMYGR4f/aAAgBAQABPxDAFVrwP7A4koNwcs0jdvCETLGlN18wpwdIBfuIyAahRG9F9nl5O2y06Xuf/9k=')", "backgroundSize": "cover", "display": "block" } }), "\n ", mdx("img", { parentName: "a", "className": "gatsby-resp-image-image", "alt": "Gigity.tv Broadcast", "title": "Gigity.tv Broadcast", "src": "/static/ec9eb2c9ceb81b2d8c1303029a186d37/4b190/gigity-broadcast.jpg", "srcSet": ["/static/ec9eb2c9ceb81b2d8c1303029a186d37/f93b5/gigity-broadcast.jpg 300w", "/static/ec9eb2c9ceb81b2d8c1303029a186d37/b4294/gigity-broadcast.jpg 600w", "/static/ec9eb2c9ceb81b2d8c1303029a186d37/4b190/gigity-broadcast.jpg 800w"], "sizes": "(max-width: 800px) 100vw, 800px", "style": { "width": "100%", "height": "100%", "margin": "0", "verticalAlign": "middle", "position": "absolute", "top": "0", "left": "0" }, "loading": "lazy" }), "\n "), "\n "), "\n ", mdx("a", { parentName: "div", "className": "image-caption" }, "Gigity.tv Broadcast"), "\n "))); } ; MDXContent.isMDXComponent = true;