Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rand0mc0d3r/aframe-touch-inspector

Touch friendly functional React based Aframe Inspector. Translucent interface with space efficient interface. Various tooling improvements, interactivity and external API available
https://github.com/rand0mc0d3r/aframe-touch-inspector

a-frame a-frame-inspector aframe-inspector inspector inspector-preview

Last synced: about 2 months ago
JSON representation

Touch friendly functional React based Aframe Inspector. Translucent interface with space efficient interface. Various tooling improvements, interactivity and external API available

Awesome Lists containing this project

README 

        
# A-Frame-Touch-Inspector (💣 Experimental)

![](https://badgen.net/bundlephobia/min/aframe-touch-inspector) ![](https://badgen.net/bundlephobia/minzip/aframe-touch-inspector)



Based on A-Frame Inspector ([Original project](https://github.com/aframevr/aframe-inspector))



*👏 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](https://rand0mc0d3r.github.io/aframe-touch-inspector/examples/)**



| Configuration | Scenegraph |

| -      |  ------ |

| ![](/images/configuration.png)   | ![](/images/scenegraph.png) |



---



### 📺 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/[email protected]/dist/aframe-inspector.min.js



// Somewhere in 

// 

```



---



### 📝 Inherited documentation



Previous documentation can be found here: [A-Frame Inspector](https://github.com/aframevr/aframe-inspector/blob/master/README.md)



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



```bash

git clone [email protected]:aframevr/aframe-inspector.git

cd aframe-inspector

npm install

npm start

```



Then navigate to __[http://localhost:3333/examples/](http://localhost:3333/examples/)__



[travis-image]: https://img.shields.io/travis/aframevr/aframe-inspector.svg?style=flat-square

[travis-url]: https://travis-ci.org/aframevr/aframe-inspector



---



### 📦 Package evaluation



```

npm run explorer

```



**NOTE-WIP**: package size is double+ than before, but the refactoring is mid-flight and there are duplicate dependencies



![Explorer stats](/images/explorer.png)



### 😄 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

# 🤗