{"id":13714896,"url":"https://github.com/joshmtucker/OrientationEvents","last_synced_at":"2025-05-07T03:31:02.017Z","repository":{"id":29179049,"uuid":"32709835","full_name":"joshmtucker/OrientationEvents","owner":"joshmtucker","description":"Module for Framer Studio to handle device orientation events.","archived":false,"fork":false,"pushed_at":"2016-07-13T04:33:08.000Z","size":1685,"stargazers_count":102,"open_issues_count":1,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-14T03:34:17.807Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshmtucker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-23T03:49:06.000Z","updated_at":"2021-01-10T22:00:53.000Z","dependencies_parsed_at":"2022-08-02T21:34:28.194Z","dependency_job_id":null,"html_url":"https://github.com/joshmtucker/OrientationEvents","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshmtucker%2FOrientationEvents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshmtucker%2FOrientationEvents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshmtucker%2FOrientationEvents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshmtucker%2FOrientationEvents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshmtucker","download_url":"https://codeload.github.com/joshmtucker/OrientationEvents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806414,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:51.628Z","updated_at":"2025-05-07T03:31:00.631Z","avatar_url":"https://github.com/joshmtucker.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# OrientationEvents\nHandle device orientation events with Framer Studio. **To SEE and USE values, you must run your prototype in a browser or on a device that supports device orientation events.**\n\n![](http://f.cl.ly/items/0w2m1m1z0z1l0a0H3K3O/OrientationEvents.gif)\n\n*Example of device rotation to show larger image, included in repo.* \n\nCode was applied from \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation\"\u003edeviceorientation\u003c/a\u003e and \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion\"\u003edevicemotion\u003c/a\u003e. View the \u003ca href=\"http://www.w3.org/TR/orientation-event/#devicemotion\"\u003eDeviceOrientationEvents Event Specification\u003c/a\u003e for full source.\n\n# Usage\n\nPut the OrientationEvents.coffee file in the /modules folder inside your Framer project. To include in Framer Studio, put the following code at the top of your project:\n\n```coffee\nvariableName = require \"OrientationEvents\"\n```\n\n### Setup\nAdd event listeners for device orientation and motion.\n\n```coffee\nvariableName.OrientationEvents()\n\n# This will print out an error if your device does not support orientation and (or) motion events\n```\n\n### Values\n\nValues are split up between orientation and motion events and are individual properties. Use them in your code as such:\n\n```coffee\n# Orientation variables\nvariableName.orientation.alpha # Current orientation around Z axis (tilt along perpendicular line to device)\nvariableName.orientation.beta # Current orientation around X axis (backward/forward tilt)\nvariableName.orientation.gamma # Current orientation around Y axis (left/right tilt)\n\nvariableName.orientation.absolute # True if orientation is provided as difference between device coordinate frame and the Earth's coordinate frame. Else false\n\n# Motion variables\nvariableName.motion.x # Acceleration along X axis\nvariableName.motion.y # Acceleration along Y axis\nvariableName.motion.z # Acceleration along Z axis\n\nvariableName.motion.gravX # Acceleration along X axis including gravity\nvariableName.motion.gravY # Acceleration along Y axis including gravity\nvariableName.motion.gravZ # Acceleration along Z axis including gravity\n\nvariableName.motion.rotationRate # Rate of change on all axes. Expressed in degrees per second\nvariableName.motion.interval # Interval of time in milliseconds that data is obtained from device\n\n###\nNOTE\n\nWhile the values are updated frequently inside the module, you will need to use a setTimeout/setInterval (or build-in for Framer: Utils.delay/Utils.interval) to grab updated values in your project. See ExampleDeviceOrientationEvents.framer to see how I implemented an interval to grab values.\n\nPotentially extending Framer.Events for better support is on my to-do list (something I need to learn).\n```\n\n## Smoothing\nOrientation and motion values are quite jittery in raw form. If you wish to smooth values, I added a means of doing this for both orientation and motion events using a low-pass filter. \n\nThe way the orientation and motion event properties are computed (with the exception of .absolute, .rotationRate, and .interval) is as follows:\n\n```coffee\n# Let's use variable.orientation.alpha (for example). Each property for orientation and motion are set similarly.\n# Declared as a local variable at top of the code\nfilteredAlpha = 0\n\n# Later in orientation function...\n\n# filteredAlpha = (event.alpha * exports.smoothOrientation) + (filteredAlpha * (1-exports.smoothing)\n```\n\n### Change Smoothing\n\nSet smoothing for orientation and motion event values using the following code.\n\n```coffee\n# Values set should be between 0 and 1. The higher the value, the less smooth it is. \n# Setting to 0 or 1 outputs raw values\n# Setting smoothing values affects all properties for each respective variable (documented above).\n# If not set in your Framer project, defaults for both are = 1\n\nvariableName.smoothOrientation = 1\nvariableName.smoothMotion = .5\n```\n\n## Example\n\nDownload the \u003ca href=\"https://github.com/joshmtucker/OrientationEvents/tree/master/ExampleOrientationEvents.framer\"\u003eExampleDeviceOrientationEvents.framer\u003c/a\u003e project to see how to apply values. I used it to build a Facebook Paper-like pan on a photo.\n\n## Questions?\n\nI am available here on GitHub, the \u003ca href=\"https://www.facebook.com/groups/framerjs/\"\u003eFramerJS Facebook Group\u003c/a\u003e, and \u003ca href=\"https://www.twitter.com/joshmtucker\"\u003eTwitter\u003c/a\u003e.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshmtucker%2FOrientationEvents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshmtucker%2FOrientationEvents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshmtucker%2FOrientationEvents/lists"}