aframe-touch-inspector v1.1.4
A-Frame-Touch-Inspector (💣 Experimental)
Based on A-Frame Inspector (Original project)
👏 Project is detached clone from the original A-Frame Inspector that honors the same engine and lib model, but it has been refactored partly & carefully to ensure backwards compatibility while improving the structure and functionality. It aims to not replace, but offer itself as an alternative to the original dual panel interface, by offering a more Whiteboard tool driven approach based on transparency and decoupled interfaces.
Please note that to my best abilities i try to keep an eye on the original project issues and reported bugs and to keep fixing it on this project.
⏰ Current state: The project is as of now not ready for prime-time and time cannot be allocated as for a 09:00-18:00 job, but it's a dear project and I will keep improving it and one day release the first version.
🪀 Screenshots & Preview Demo
Below is the demo and some screenshots of different menus and panels
👀 DEMO
| Configuration | Scenegraph |
|---|---|
 |  |
📺 JsFiddle example (native JS + 📡)
NOTE: Mind the console that can be hidden.
https://jsfiddle.net/s3x4nmhj/
💻 Local Installation
// with npm
npm i aframe-touch-inspector
// with yarn
yarn add aframe-touch-inspector📡 Remote fetching
https://unpkg.com/aframe-touch-inspector@1.0.1/dist/aframe-inspector.min.js
// Somewhere in <head>
// <script src="https://unpkg.com/aframe-touch-inspector@1.0.1/dist/aframe-inspector.min.js"></script>📝 Inherited documentation
Previous documentation can be found here: A-Frame Inspector
The foundation, event sending and mechanics along with processing and exporting functions were mainly preserved, yet refactored to feature components described as functional entities.
🗺️ Usage & Documentation
The inspector, once instantiated adds to the current scene a custom camera over the existing A-Frame camera, and a few controls along with a grid structure.
The UI features in the bottom side, form left to right:
- 📷 a camera controller with zoom in / reset / out;
- ♻️ a panel for rotate / translate and scale
- 👁️ a preview panel that based on the raycaster's target offers an overview of the selected
a-entity. - 🎚️ a switch to turn off / on the inspector mode (upon clicking the enhancements are removed or added back)
- 2 x 📰 panels for properties
- 📑 a listing module that represents the entities
- 🎛️ a control box for a selected entity to adjust
For most panels further documentation is not needed as the functionality aims to be self-explanatory and guided. Along various panels, tooltips, documentation links and further explanations are provided on the spot if needed.
🔨 Changed feature set
- Installed Material-UI
- Installed Styled-Components
- Added a full-screen toggle
- Added font-awesome to the build-chain (removed as injection)
- Made the elements able to deselect
- De-constructed the menu to be more tablet friendly
- Added visual effects to allow moving over surfaces
- Added guidance cursors for predictable actions
- Refactored the component adding to be a modal
- Refactored checkboxes as switches
- Added iconography to component properties
- Added component specific documentation links to A-Frame relevant page
- Added iconography to component descriptors and enhanced preview mechanic
- Added default zoom view, and zoom in and out. In a transparent format
- Updated transparency and borders for better clarity over various contrast tests
- Refactored components of entities to represent their icons more compact in the preview hover
- Refactored preview hover nesting and cursor / selection functionality
🗑️ Removals:
- For now removed the camera/perspective switcher
🔧 Practical:
- Refactored example to feature more groups and consistent naming
- Removed environment library usage as it's model is not stable but generative
- Disabled WebPack WDS logging from socket in DevTools
- Removed Package-Name-Generator due to entire lodash dependency. Replaced with random string generator;
📐 Technical:
- Refactored most components to functional files
- Refactored components to use the atomic-design pattern
- Consolidated lifecycle Event listener removal
- Enabled parallel (4 core) building WebPack specifically for Terser
- Updated toolchain
- Added scripts for webpack bundle explorer (deprecated)
- Added BundleAnalyzerPlugin for better analysis
- Converted thread-blocking bundleAnalyzer to non blocking block chain
- Added for all functional-hook oriented components correct teardowns on Event listeners
- Added flagging on entity conversion flags to differentiate behavior where relevant
🐞 Known bugs:
- Scenegraph cannot re-expand a collapsed group
- Visibility of an entity cannot be restored once disabled
💡 ToDo:
- Make selection bounding box toggle-able
- Refactor 3 way transform toolbar to be similar to MsPaint in Windows10
🧱 Local Development
git clone git@github.com:aframevr/aframe-inspector.git
cd aframe-inspector
npm install
npm startThen navigate to http://localhost:3333/examples/
📦 Package evaluation
npm run explorerNOTE-WIP: package size is double+ than before, but the refactoring is mid-flight and there are duplicate dependencies
😄 You
If you find it useful but buggy, file an issue. -- Would try to honor it in a quick span of time.
If you have ideas, still file a new issue and explain how you envision it. -- Will gladly consider all submissions and if not on the spot try to consier it during refactoring and architecture updates
If you rely on it and i broke it.. -- Sorry, please file an issue and help me patch it
Cheers