{"componentChunkName":"component---src-templates-work-js","path":"/work/sams/","result":{"data":{"mdx":{"body":"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); }\n\nfunction _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; }\n\nfunction _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; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"SAMS\",\n  \"order\": 70,\n  \"timeFrame\": \"2011 - 2013\",\n  \"type\": \"Freelance work\",\n  \"excerpt\": \"Front-end design and development for an early IoT project.\",\n  \"featuredImage\": \"./sams/cover.jpg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component '\" + name + \"' was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Quote = makeShortcode(\"Quote\");\nvar Gallery = makeShortcode(\"Gallery\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"SAMS is a web application used for remotely monitoring and controlling large engineering type devices.\\nMuch of the application runs as a single page web app that continually and efficiently refreshes data\\nwithout requiring full page reloads. The application works across different browsers on a variety of\\ndevices, allowing it to be used both in the field and from an office. Working as Experience Bureau, I\\ndesigned the interface and built most of the front-end of the SAMS application.\"), mdx(Quote, {\n    attributionText: \"Director of Software Engineering, Acubis\",\n    mdxType: \"Quote\"\n  }, \"When we started working on SAMS we had no idea that we\\u2019d be able to create something so app-like and user-friendly. It\\u2019s clear, fast and it works well on both desktop and mobile devices.\"), mdx(Gallery, {\n    mdxType: \"Gallery\"\n  }, mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"320px\",\n      \"width\": \"300px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDAf/EABYBAQEBAAAAAAAAAAAAAAAAAAMCAf/aAAwDAQACEAMQAAAB7Mp2mIljUYdRFf/EABoQAAIDAQEAAAAAAAAAAAAAAAABAhEiAxL/2gAIAQEAAQUCirK0xSxY6ZyL15TP/8QAGREAAgMBAAAAAAAAAAAAAAAAAAECEBET/9oACAEDAQE/AYPGdKZ//8QAGREAAgMBAAAAAAAAAAAAAAAAAAECEBES/9oACAECAQE/AZLUcDr/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQEQAiIx/9oACAEBAAY/AovFdIZtKtn/xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhUTFB/9oACAEBAAE/IfmXo4KR7CqExwb6Tzv0rtXEh25on9bDCy1n/9oADAMBAAIAAwAAABBg4H3/xAAYEQEBAAMAAAAAAAAAAAAAAAABABEhYf/aAAgBAwEBPxATCOI0QM3/xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAECAQE/ENwk726hb//EAB0QAQEAAgIDAQAAAAAAAAAAAAERACExQVFhgZH/2gAIAQEAAT8QtTFRV5+5qg0k3gyY8fsxUYCb7Sd4BBE0Fijc9BA+uQNAC69YwsBoDxiMNCrM/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Close up of the map view of devices\",\n    \"title\": \"Close up of the map view of devices\",\n    \"src\": \"/static/8c3718193709e858c4d0c18797ec59bf/cb69c/4.jpg\",\n    \"srcSet\": [\"/static/8c3718193709e858c4d0c18797ec59bf/b9e9c/4.jpg 100w\", \"/static/8c3718193709e858c4d0c18797ec59bf/e07e9/4.jpg 200w\", \"/static/8c3718193709e858c4d0c18797ec59bf/cb69c/4.jpg 320w\"],\n    \"sizes\": \"(max-width: 320px) 100vw, 320px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"434.7826086956522px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"69%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIDBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB1CRkrDlf/8QAGhAAAgMBAQAAAAAAAAAAAAAAAhEAARIDE//aAAgBAQABBQKuQZ8whALF5Vwm/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAQUAAAAAAAAAAAAAAAAAATEQIUGRof/aAAgBAQAGPwJW4QtECgxT/8QAHBAAAgICAwAAAAAAAAAAAAAAAAEhMWGREVHB/9oACAEBAAE/IWGNa6E3kE4JpHLDRGDYxT//2gAMAwEAAgADAAAAEN/P/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABYRAQEBAAAAAAAAAAAAAAAAABEBEP/aAAgBAgEBPxCrn//EAB4QAQACAQQDAAAAAAAAAAAAAAEAESExQVFx0eHw/9oACAEBAAE/ELhlN2m3UQpj59cMFOvrEYBRRq3oRdvJ28RYEsHLP//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Desktop dashboard view\",\n    \"title\": \"Desktop dashboard view\",\n    \"src\": \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/066f9/1.jpg\",\n    \"srcSet\": [\"/static/4a44400cb0c6d971cc4fb3db83eed0a4/b9e9c/1.jpg 100w\", \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/e07e9/1.jpg 200w\", \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/066f9/1.jpg 400w\", \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/b4294/1.jpg 600w\", \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/4b190/1.jpg 800w\", \"/static/4a44400cb0c6d971cc4fb3db83eed0a4/0a151/1.jpg 866w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"181px\",\n      \"width\": \"169.49152542372883px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"177%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAjABQDASIAAhEBAxEB/8QAGgABAAMAAwAAAAAAAAAAAAAAAAMEBQECBv/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHIu6czOcrh1pq1hPPuoqTkqaQl/8QAHBAAAwADAQEBAAAAAAAAAAAAAQIDAAQRExIU/9oACAEBAAEFAqFy6W4oqckrmXxTNolbRfkvTN492I3msv0SzdYPsCjDPV8qSz//xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAwEBPwFr/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwFf/8QAIhAAAgIABAcAAAAAAAAAAAAAAAECERIxMmEiQUJRgZGh/9oACAEBAAY/Am7eYlI4WxYcNbnR6KfbkRWGXg0zG9hJypmv4NxyKTNRbP/EAB8QAQACAQQDAQAAAAAAAAAAAAEAESExUWFxQZGx0f/aAAgBAQABPyFFpa8w1CvVxRhHcYRraG9ZsnuiCi6XGXGrcOZh+UwoljDA3hdlcw2jCRXQlmkBfs5UtDbP/9oADAMBAAIAAwAAABAcNs54P//EABoRAAICAwAAAAAAAAAAAAAAAAABEBExUWH/2gAIAQMBAT8QfEO9iGLB/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAEQETFRcf/aAAgBAgEBPxCluFwYh5P/xAAfEAEAAwEAAgIDAAAAAAAAAAABABEhQTFRYXGB0fD/2gAIAQEAAT8Q8mzlvcPkSqOHzBL6eI36mdiWi1vUQdfnykqSnAoupdAdAI6+Y3Dz2jz8xNjimkzsYOJRPUQ5c4L9S8zEIVyFUJYc1P6yMEOGs//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Mobile view of a device detail dashboard screen\",\n    \"title\": \"Mobile view of a device detail dashboard screen\",\n    \"src\": \"/static/2183f19b91ef64124a051307343bfdb9/bcd8a/2.jpg\",\n    \"srcSet\": [\"/static/2183f19b91ef64124a051307343bfdb9/b9e9c/2.jpg 100w\", \"/static/2183f19b91ef64124a051307343bfdb9/bcd8a/2.jpg 181w\"],\n    \"sizes\": \"(max-width: 181px) 100vw, 181px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"483.87096774193543px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAv/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAG9impKZKn/xAAaEAADAQADAAAAAAAAAAAAAAABAgMAEhMh/9oACAEBAAEFAkFCnF85YGbkS7DqeH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAgBAgEBPwFH/8QAHRAAAgIBBQAAAAAAAAAAAAAAAAECIQMREzNBcf/aAAgBAQAGPwJPcdnJIrJqR8Oikkf/xAAbEAADAAMBAQAAAAAAAAAAAAAAARExQdEh8f/aAAgBAQABPyGS2L4lw+cuGASZiFjFgJmhC0smj//aAAwDAQACAAMAAAAQMN//xAAWEQADAAAAAAAAAAAAAAAAAAAAATH/2gAIAQMBAT8QUHT/xAAWEQEBAQAAAAAAAAAAAAAAAAAAMQH/2gAIAQIBAT8Q2of/xAAdEAEBAQACAgMAAAAAAAAAAAABEQAhUTFxgaHR/9oACAEBAAE/EKhRshqYL5+bY7RqQvNejAJwPm9e89H7v3XIFwQtd//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"A typical device dashboard page from SAMS\",\n    \"title\": \"A typical device dashboard page from SAMS\",\n    \"src\": \"/static/b3606921684e2f56b07e30acab44a837/066f9/3.jpg\",\n    \"srcSet\": [\"/static/b3606921684e2f56b07e30acab44a837/b9e9c/3.jpg 100w\", \"/static/b3606921684e2f56b07e30acab44a837/e07e9/3.jpg 200w\", \"/static/b3606921684e2f56b07e30acab44a837/066f9/3.jpg 400w\", \"/static/b3606921684e2f56b07e30acab44a837/f7b81/3.jpg 517w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"h3\", null, \"Features of SAMS\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Single-page app with data updates every minute\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Geolocation (regions, device locations, personal location)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Smooth app-like layout and transitions\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Fully responsive (mobile to desktop)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Video camera integration\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Visual representations of device data (graphs, gauges, status indicators etc).\")), mdx(\"h3\", null, \"My contributions\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"User interface design\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Interaction design\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Front-end development: JavaScript, HTML5, CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Integration with server-side technology\")), mdx(\"h3\", null, \"Technology I used\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"HTML5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS (used compass, scss)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"JavaScript  (including Backbone, JQuery, Underscore and Highcharts)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Google Maps integration\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Play! framework (Java)\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"SAMS","timeFrame":"2011 - 2013","type":"Freelance work","repo":null}}},"pageContext":{"slug":"/work/sams/","prev":{"fields":{"slug":"/work/kaleidoscoper/","isWork":true},"frontmatter":{"title":"Kaleidoscoper"}},"next":{"fields":{"slug":"/work/oomph/","isWork":true},"frontmatter":{"title":"Oomph"}}}}}