{"id":13559360,"url":"https://github.com/aleph-viewer/aleph","last_synced_at":"2025-04-03T14:32:06.590Z","repository":{"id":56592313,"uuid":"223717441","full_name":"aleph-viewer/aleph","owner":"aleph-viewer","description":"Aleph is a 3D object viewer and annotation/measurement tool built with A-Frame, AMI, StencilJS, and Ionic","archived":false,"fork":false,"pushed_at":"2023-07-08T12:43:58.000Z","size":12303,"stargazers_count":77,"open_issues_count":11,"forks_count":12,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-04T10:44:09.316Z","etag":null,"topics":["a-frame","ami","ionic-framework","stenciljs","threejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aleph-viewer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-24T09:01:53.000Z","updated_at":"2024-10-03T12:10:22.000Z","dependencies_parsed_at":"2024-01-14T02:42:31.994Z","dependency_job_id":"73c4281c-be61-4a7b-b978-35261ad379e3","html_url":"https://github.com/aleph-viewer/aleph","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/aleph-viewer%2Faleph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleph-viewer%2Faleph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleph-viewer%2Faleph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleph-viewer%2Faleph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aleph-viewer","download_url":"https://codeload.github.com/aleph-viewer/aleph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018579,"owners_count":20870028,"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":["a-frame","ami","ionic-framework","stenciljs","threejs"],"created_at":"2024-08-01T13:00:19.906Z","updated_at":"2025-04-03T14:32:05.972Z","avatar_url":"https://github.com/aleph-viewer.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://avatars2.githubusercontent.com/u/54437520?s=200\u0026v=4\" width=\"70\" alt=\"Aleph Logo\" /\u003e\n  \u003ch3\u003eAleph\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-curved)](https://github.com/aleph-viewer/aleph/labels/help%20wanted)\n  ![Build Status](https://github.com/aleph-viewer/aleph/workflows/CI/badge.svg)\n  [![Open questions](https://img.shields.io/badge/Open-questions-blue.svg?style=flat-curved)](https://github.com/aleph-viewer/aleph/labels/question)\n  [![Open bugs](https://img.shields.io/badge/Open-bugs-red.svg?style=flat-curved)](https://github.com/aleph-viewer/aleph/labels/bug)\n\n  **Aleph** is a 3D object viewer and annotation/measurement tool built with [A-Frame](https://aframe.io), [AMI](https://github.com/FNNDSC/ami), [StencilJS](http://stenciljs.com), and [Ionic](https://ionicframework.com)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.morphosource.org/\"\u003e\u003cimg width=\"70px\" src=\"https://avatars3.githubusercontent.com/u/33296362?s=200\u0026v=4\" /\u003e\u0026nbsp;\u0026nbsp;\u003c/a\u003e\n  \u003ca href=\"http://universalviewer.io\"\u003e\u003cimg width=\"65px\" src=\"https://avatars0.githubusercontent.com/u/9430521?s=200\u0026v=4\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv\u003e\n\n![Aleph](https://raw.githubusercontent.com/aleph-viewer/aleph/master/aleph-screenshot.png)\n\n\u003c/div\u003e\n\n- [**Website**](#website)\n- [**Scope**](#scope)\n- [**Getting Started**](#getting-started)\n- [**Contributing**](#contributing)\n- [**Feedback**](#feedback)\n- [**Documentation**](#documentation)\n- [**License**](#license)\n\n## Website \n\n[Visit the Aleph demo page](https://aleph-viewer.com) to try it out.\n\n\u003ca href=\"https://glitch.com/edit/#!/remix/aleph-example\"\u003e\n  \u003cimg src=\"https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"remix this\" height=\"33\"\u003e\n\u003c/a\u003e\n\n## Scope\n- Usable as a web component within any page/framework and has a [Universal Viewer](http://universalviewer.io) integration\n- Has a supporting Control Panel (a separate web component) showing associated settings for a given mesh or volume\n- Straight-forward to debug, using a single source of truth and unidirectional data flow ([redux](https://redux.js.org/))\n- Themable to allow customised colour schemes (css variables)\n- Encapsulates 3D rendering logic in a well-defined component model, with pre-existing community support/adoption (A-Frame)\n- Utilises the component model to extensibly display 3D media file types (GLTF+DRACO, DICOM)\n- Renders 3D scenes declaratively, decoupling the presentation layer from the application layer\n- Permits annotation of points on a 3D mesh or volume with a title and description\n- Permits measurement of lengths and angles, with the potential to be extended to areas and volumes\n- Permits annotation/measurement data to be stored/retrieved as json\n- Permits slice and volume views of volumetric data, with axis/slice selection and point cloud windowing controls\n- Permits panning, rotating, and animated transitions between annotations/measurements\n- Has \"in-scene\" annotation/measurement tools as opposed to overlaid, permitting future AR/VR/XR use cases\n\n## Getting Started\n\nClone the repository and run `npm install`\n\n### Dev Builds\n\nFor development with readable sources and hot reloading run:\n\n    npm run build:dev\n\n### Production Builds\n\nFor minified production builds run:\n\n    npm run build\n\n### View on localhost\n\n    npm start\n\n## Contributing\n\nRead below to learn how to take part in improving Aleph:\n\n- Fork the repository and [run the examples from source](#getting-started)\n- Get familiar with [Code of Conduct](CODE_OF_CONDUCT.md)\n- Read our [guide to contributing](CONTRIBUTING.md)\n- Find an issue to work on and submit a pull request\n  - First time contributing to open source? Pick a [good first issue](https://github.com/aleph-viewer/aleph/labels/good%20first%20issue) to get you familiar with GitHub contributing process.\n  - First time contributing to Aleph? Pick a [beginner friendly issue](https://github.com/aleph-viewer/aleph/labels/beginners) to get you familiar with codebase and our contributing process.\n  - Want to become a Committer? Solve an issue showing that you understand Aleph objectives and architecture. [Here](https://github.com/aleph-viewer/aleph/labels/help%20wanted) is a good list to start.\n- Could not find an issue? Look for bugs, typos, and missing features.\n\n## Feedback\n\nRead below how to engage with Aleph [community](COMMUNITY_TEAM.md):\n- Join the discussion on [Slack](http://universalviewer.io/#contact).\n- Ask a question, request a new feature and file a bug with [GitHub issues](https://github.com/aleph-viewer/aleph/issues/new).\n- Star the repository to show your support.\n\n## Documentation\n\n### Web Components\n\n  - [al-angle-editor](/src/components/al-angle-editor/readme.md)\n  - [al-console](/src/components/al-console/readme.md)\n  - [al-control-panel](/src/components/al-control-panel/readme.md)\n  - [al-edge-editor](/src/components/al-edge-editor/readme.md)\n  - [al-graph-editor](/src/components/al-graph-editor/readme.md)\n  - [al-node-editor](/src/components/al-node-editor/readme.md)\n  - [al-node-list](/src/components/al-node-list/readme.md)\n  - [al-settings](/src/components/al-settings/readme.md)\n  - [al-tabs](/src/components/al-tabs/readme.md)\n  - [al-url-picker](/src/components/al-url-picker/readme.md)\n  - [al-viewer](/src/components/al-viewer/readme.md)\n\n\u003c!-- ### A-Frame Components\n\n  - [al-angle](/src/aframe/components/AlAngleComponent.ts)\n  - [al-background](/src/aframe/components/AlBackgroundComponent.ts)\n  - [al-billboard](/src/aframe/components/AlBillboardComponent.ts)\n  - [al-bounding-box](/src/aframe/components/AlBoundingBoxComponent.ts)\n  - [al-child-hover-visible](/src/aframe/components/AlChildHoverVisibleComponent.ts)\n  - [al-control-lights](/src/aframe/components/AlControlLightsComponent.ts)\n  - [al-cursor](/src/aframe/components/AlCursorComponent.ts)\n  - [al-edge](/src/aframe/components/AlEdgeComponent.ts)\n  - [al-gltf-model](/src/aframe/components/AlGltfModelComponent.ts)\n  - [al-node](/src/aframe/components/AlNodeComponent.ts)\n  - [al-node-spawner](/src/aframe/components/AlNodeSpawnerComponent.ts)\n  - [al-orbit-control](/src/aframe/components/AlOrbitControlComponent.ts)\n  - [al-render-order](/src/aframe/components/AlRenderOrderComponent.ts)\n  - [al-render-overlaid](/src/aframe/components/AlRenderOverlaidComponent.ts)\n  - [al-trackball-control](/src/aframe/components/AlTrackballControlComponent.ts)\n  - [al-volume](/src/aframe/components/AlVolumeComponent.ts) --\u003e\n\nAleph can be used to display GLTF files and DICOM series. GLTF can be used in conjunction with DRACO compression.\n\nTo annotate/measure an object, open the \"Settings\" tab in the control panel and check \"Enable Node Placement\". Clicking on a 3D object will create a node which can be given a title and description. Nodes can be used as points of interest or can be connected via edges. With a node selected, SHIFT + Click to create an edge between that and another node. Edges can be used for measurement and can also be labeled with a title and description. Units of measurement can be changed in the control panel. SHIFT + Click between edges to measure angles.\n\nThe two top-level web components are `\u003cal-control-panel\u003e` and `\u003cal-viewer\u003e`. `\u003cal-control-panel\u003e` wraps a tabs-based interface containing `\u003cal-url-picker\u003e`, `\u003cal-settings\u003e`, `\u003cal-graph-editor\u003e`, and `\u003cal-console\u003e`. `\u003cal-viewer\u003e` contains the A-Frame scene and all 3D rendering logic. It also contains a Redux store that acts as single source of truth for the viewer and control panel. `\u003cal-viewer\u003e` can be used independently of `\u003cal-control-panel\u003e`, which can be lazy loaded to provide additional options. \n\n## License\n\n- [MIT](LICENSE)","funding_links":[],"categories":["List of Awesome Components Made using StencilJS"],"sub_categories":["Component Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleph-viewer%2Faleph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleph-viewer%2Faleph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleph-viewer%2Faleph/lists"}