{"id":17962287,"url":"https://github.com/richtr/doe","last_synced_at":"2025-10-15T05:38:16.214Z","repository":{"id":34439011,"uuid":"38372969","full_name":"richtr/doe","owner":"richtr","description":"An emulator for building and debugging device orientation and screen orientation based web applications","archived":false,"fork":false,"pushed_at":"2015-07-20T10:13:13.000Z","size":11072,"stargazers_count":49,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"gh-pages","last_synced_at":"2025-04-05T02:22:18.980Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/richtr.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-07-01T13:35:42.000Z","updated_at":"2023-11-06T18:05:12.000Z","dependencies_parsed_at":"2022-09-15T22:44:33.871Z","dependency_job_id":null,"html_url":"https://github.com/richtr/doe","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/richtr/doe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2Fdoe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2Fdoe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2Fdoe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2Fdoe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richtr","download_url":"https://codeload.github.com/richtr/doe/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2Fdoe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279054947,"owners_count":26094437,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-29T11:18:28.985Z","updated_at":"2025-10-15T05:38:16.195Z","avatar_url":"https://github.com/richtr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Doe\n\n##### Doe is a highly precise device and screen orientation emulator for developing and debugging sensor-related web apps on desktop computers\n\nIt can be used to build and debug device orientation and screen orientation aware applications without needing to constantly test on mobile devices.\n\n#### Demos\n\nIn any web browser that does not support device orientation (e.g. Desktop browsers) you can open one of the following pages:\n\n[https://richtr.github.io/threeVR/examples/vr_basic.html](https://richtr.github.io/threeVR/examples/vr_basic.html)\n\n[https://richtr.github.io/Marine-Compass/](https://richtr.github.io/Marine-Compass/)\n\n[https://richtr.github.io/Full-Tilt/examples/vr_interactive.html](https://richtr.github.io/Full-Tilt/examples/vr_interactive.html)\n\n[https://people.opera.com/richt/release/tests/doe/screenorientation.html](https://people.opera.com/richt/release/tests/doe/screenorientation.html)\n\n##### Advanced demo\n\nThe doe emulator can also record key frames and play back those key frames as an animation.\n\nYou can check out an example key framed animation [here](https://richtr.github.io/doe/emulator/?url=https%3A%2F%2Frichtr.github.io%2FFull-Tilt%2Fexamples%2Fvr_test.html#W1sxLDEsMCwwLDkwLDAsMF0sWzEsMSwwLDkwLDkwLDAsMF0sWzEsMSwwLDE4MCw5MCwwLDBdLFsxLDEsMCwyNzAsOTAsMCwwXSxbMSwxLDAsMCw5MCwwLDBdLFsxLDEsMCw0NSw0NSwwLDBdLFsxLDEsMCwzMTUsNDUsMCwwXSxbMSwxLDAsMCw5MCwwLDBdLFsxLDEsMCwwLC0xODAsMCwwXSxbMSwxLDAsMCwtOTAsMCwwXSxbMSwxLDAsMjcwLDAsLTkwLDI3MF0sWzEsMSwwLDE4MCwwLC05MCwyNzBdLFsxLDEsMCwwLDAsLTkwLDI3MF0sWzEsMSwwLDI3MCwwLC05MCwyNzBdLFswLDEsMCwxODAsOTAsMCwxODBdLFsxLDEsMCwwLDkwLDAsMTgwXSxbMCwxLDAsMCw5MCwwLDBdXQ==).\n\n#### Developer Usage\n\nJust add the [Device Orientation Emulator script](https://github.com/richtr/doe/blob/gh-pages/doe.js) to any web page on which you want to enable the doe emulator:\n\n```html\n\u003cscript src=\"https://richtr.github.io/doe/doe.js\"\u003e\u003c/script\u003e\n```\n\nNow open your web page and follow the prompt to open it in the doe emulator.\n\n#### User Interface Guide\n\nWhen you open doe you will be presented with the following screen:\n\n\u003cimg src=\"https://raw.githubusercontent.com/richtr/doe/images/doe-annotated.png\" style=\"max-width: 100%\"\u003e\n\n##### 1. The Web App Viewport\n\nThis is where the web application that is being emulated is displayed.\n\nYou can customize the scale of the viewport and the dimensions of the viewport via tools available in the emulator menu bar.\n\n##### 2. The Device Controller\n\nThe device controller is an interactive model of a real device. As a user of the emulator you can change the physical orientation of the 'device' within space.\n\nTo change the physical orientation of the device just click on the device shown, and drag your mouse in the desired direction of movement. The device should move on screen.\n\nAny changes you make using your mouse in the device controller will produce updated device orientation data within the emulator menu bar.\n\n##### 3. The Emulator Menu Bar\n\nThe doe emulator menu bar lets you refine different important characteristics of your device within real world space. The values displayed or overridden in the menu bar will affect how the Web App Viewport will be oriented on the screen.\n\n\u003cimg src=\"https://raw.githubusercontent.com/richtr/doe/images/menubar-annotated.png\" style=\"max-width: 100%\"\u003e\n\n###### 3.1. Viewport Scaling\n\nUsing the slider you can change the scale of the Web App Viewport. This does not affect the screen dimensions within the Web App Viewport.\n\n###### 3.2. Device type\n\nUsing this part of the menu bar lets you change the screen dimensions within the Web App Viewport to the dimensions that can be found on typical hardware devices.\n\nThe device types currently available in the doe emulator, from left to right, are as follows:\n\n* iPhone\n* Android phone\n* Android tablet\n* iPad\n\nJust select one of these options and the Web App Viewport will update to the device's screen dimensions.\n\n###### 3.3. Device Orientation Data\n\nThis part of the emulator menu bar displays the current device orientation data that is being emitted from the Device Controller.\n\nThe data is as follows:\n\n* 'a' (or `DeviceOrientationEvent.alpha`) in the range (0, 360)\n* 'b' (or `DeviceOrientationEvent.beta`) in the range (-180, 180)\n* 'g' (or `DeviceOrientationEvent.gamma`) in the range (-90, 90)\n\nYou can also manually enter device orientation data here. Just select the value shown next to 'a', 'b' or 'g' and enter a new value. The Device Controller will automatically readjust to orient to the chosen values.\n\nThe button on the right side allows you to reset the device orientation data to its default position.\n\n###### 3.4. Screen Orientation Data\n\nThis part of the emulator menu bar displays the current screen orientation data that is being emitted from the Device Controller.\n\nThe data is as follows:\n\n* 's' (or `window.orientation` and `window.screen.orientation.angle`)\n  * `0` (aka `portrait-primary`): The screen is in its default (natural) orientation.\n  * `90` (aka `landscape-primary`): The screen is rotated 90 degrees clockwise from its natural orientation.\n  * `180` (aka `portrait-secondary`): The screen is rotated 180 degrees clockwise from its natural orientation.\n  * `270` (aka `landscape-secondary`): The screen is rotated 270 degrees clockwise (or, 90 degrees counter-clockwise) from its natural orientation.\n\nYou can change the screen orientation of the device using the button to the right. This rotates the screen in 90 degree increments and simulates the effect of the screen orientation changing from e.g. portrait to landscape.\n\nIf the web app within the Web App Viewport uses the Screen Orientation API to lock the device to a specific screen orientation then the screen rotation button is disabled and is replaced by a lock icon. If or when the emulated web app unlocks the device from a specific screen orientation then the screen rotation button will be enabled again and the lock icon will disappear.\n\n##### 4. The Animation Timeline\n\nThe animation timeline lets you record and share pre-defined movements of the emulated device using key frames to mark the waypoints of that movement.\n\n\u003cimg src=\"https://raw.githubusercontent.com/richtr/doe/images/timeline-annotated.png\" style=\"max-width: 300px;\"\u003e\n\n###### 4.1. Play the current animation timeline\n\nWhen the doe emulator loads it will auto-play any animations that have been included in the emulator URL.\n\nAt any time you want to replay the animation timeline you can click this button and the doe emulator will replay the recorded key frame(s).\n\nWhen the doe emulator is playing a timeline it will disable buttons within the Emulator Menu Bar and also disable the Device Controller. Once animation ends, the emulator will be reset to the position of the first key frame and any disabled controls will be reenabled.\n\n###### 4.2. Key frame(s)\n\nThe current key frames for this animation.\n\nAt any time you can click on one of these items and then, any changes you make to device or screen orientation will be recorded against this key frame.\n\n###### 4.3. Add a new key frame\n\nClicking this button adds a new key frame to the animation timeline.\n\nThe device and screen orientation of the previous frame will be maintained and you can now change the values of this new frame.\n\nBy clicking the play button the doe emulator will interpolate between these frames to create a smooth transition between the device and screen orientation values between the key frames.\n\nYou can add up to a maximum of 20 key frames within the doe emulator.\n\n###### 4.4. Delete all key frames\n\nThis button will remove all key frames, only keeping the first key frame that was created within the animation timeline.\n\n#### License\n\nMIT. Copyright \u0026copy; Rich Tibbett.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichtr%2Fdoe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichtr%2Fdoe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichtr%2Fdoe/lists"}