\n
\n );\n\n const loadView = (\n \n
\n \n AHAP Output
\nHere is your AHAP file.
\n \n\n Copied!\n \n Copy\n \n
\n \n
\n );\n\n const modalView = (\n \n
\n Load from JSON
\nLoad a previous AHAP file:
\n\n \n\n \n { this.state.loadError ?
\n {this.state.loadError}
: null }\n \n Load\n
\n \n
\n );\n\n return (\n \n
\n Share options
\nYou can test your new pattern with our Moby App
or directly in your own app with a single line of code:
\n {}} readOnly />\n \n \n \n \n \n \n
\n\n \n\n \n { this.state.permalink ?
\n \n Permalink:\n
\n \n {}} readOnly />\n \n \n \n \n \n \n
\n\n JSON Format:\n \n {}} readOnly />\n \n \n \n \n \n \n
\n \n \n {/* Capture move and leave events */}\n \n \n ) : (\n \n { /* The transparent rect receives the taps */ }\n \n )\n );\n } else if (e.Event.EventType === Transient && showTransient) {\n return (\n parameter === Intensity\n ? \n { /* The transparent rect receives the taps */ }\n \n )\n );\n }\n return null;\n })\n }\n\n {/* Ghost for a new event */}\n {\n (state === State.NEW && mouse.x > padding && mouse.x < (screen.width - padding - (plotXOffset * 2) - 10 - TransientWidth) && mouse.y > (plotYOffset + padding) && mouse.y < (plotYOffset + height - padding))\n ? (\n \n \n ) : null\n }\n\n {/* Plot lines */}\n \n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport './icomoon.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(
\n })
\n
\n \n \n \n Apple introduced in iOS 13 the ability to design your own haptic experiences using the new AHAP file.
This tool provides a quick and easy way to graphically design your own patterns.\n \n
\n This tool provides a quick and easy way to graphically design your own patterns.\n \n
\n CoreHaptics Docs\n Moby App\n
\n \n \n FANCY PIXEL PROJECTS\n \n
\n
\n \n this.setState({ selected: null })} ref={(e) => { this.stage = e; }}>\n \n \n \n ) : (\n
\n \n \n
\n \n \n { this.hintForCurrentState() }\n
\n { !this.state.fetching ? (\n \n
\n )}\n\n \n
\n\n \n this.setState({ showTransient: !this.state.showTransient })}>
\n \n Duration\n 0s\n \n 30s\n
\n \n
\n\n this.setState({ plotState: State.NEW })}>
\n this.setState({ plotState: State.EDIT })}>
\n this.setState({ plotState: State.DELETE })}>
\n \n Code\n
\n \n Load from JSON\n
\n \n { this.state.permalink ? (\n
\n \n { this.state.saving ?\n
\n { this.state.lastUpdate ? this.state.lastUpdate.fromNow() : moment().fromNow() }\n \n )\n }\n
\n ) : (\n \n { this.state.lastUpdate ? this.state.lastUpdate.fromNow() : moment().fromNow() }\n \n )\n }\n
\n Save this configuration to get the permalink
and share the json file to our App\n
\n )\n }\n and share the json file to our App\n
\n { this.state.permalink ? (\n Share Options\n ) : (\n { this.state.saving ?
\n \n
\n\n\n - \n
- Moby App \n
- Documentation \n
- Feedback \n
{ this.toggleModal(false); this.toggleCodeView(false); }} style={{ display: this.state.isModalOpen || this.state.isCodeViewVisibile || this.isLoadModalOpen ? 'flex' : 'none' }} />\n\n { modalView }\n\n { outputCodeView }\n\n { loadView }\n\n
\n );\n }\n}\n\n/*\n x: plot's X position\n y: plot's Y position\n screen: whole screen dimensions\n padding: padding relative to x and y\n duration: haptic duration in seconds\n pattern: the data\n parameter: either intensity or sharpness\n mouse: mouse coorinates reltive to the canvas\n state: the editing state\n selected: the selected event\n continuousSelection: determines if a new continous event is being dragged\n showTransient: the plot filter (to hide a certain type of event)\n showContinuous: the plot filter (to hide a certain type of event)\n onMouseDown: handle the mouse down event\n onMouseUp: handle the mouse up event\n onMouseLeave: handle the mouse leave event\n onMouseMove: handle the mouse move event\n onNewTransient: handle the click to insert a new transient\n onDeleteEvent: handle the event deletion\n*/\nconst Plot = ({ x, y, screen, padding, height, duration, pattern, parameter, mouse, state, showContinuous, selected, showTransient, continuousSelection, onMouseDown, onMouseUp, onMouseLeave, onMouseMove, onNewTransient, onDeleteEvent }) => {\n const plotXOffset = 15;\n const axisWidth = screen.width - (padding * 2) - (plotXOffset * 2) - 10;\n const axisHeight = height - (padding * 2);\n const textMarginTop = 10;\n const plotYOffset = parameter === Sharpness ? height : 0;\n\n // New Transient data\n const hoverValue = -(mouse.y - plotYOffset - axisHeight - padding);\n const hoverTime = x + padding + mouse.x - padding;\n\n return (\n \n \n
\n \n \n })
\n
\n \n FANCY PIXEL PROJECTS\n \n \n