{"id":13841878,"url":"https://github.com/anoff/microllaborators","last_synced_at":"2025-05-05T22:38:32.506Z","repository":{"id":75748696,"uuid":"89771798","full_name":"anoff/microllaborators","owner":"anoff","description":"microllaborators 👩‍👦‍👦🔮🔬👩‍🏫 - the revolution in teaching","archived":false,"fork":false,"pushed_at":"2018-08-11T13:43:00.000Z","size":35611,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T00:24:09.862Z","etag":null,"topics":["ar","collaboration","hackathon","javascript","microscopy","zeiss"],"latest_commit_sha":null,"homepage":"https://zeisshack.surge.sh","language":"Max","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/anoff.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-29T07:56:29.000Z","updated_at":"2020-03-03T13:57:42.000Z","dependencies_parsed_at":"2023-06-07T13:45:28.653Z","dependency_job_id":null,"html_url":"https://github.com/anoff/microllaborators","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/anoff%2Fmicrollaborators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoff%2Fmicrollaborators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoff%2Fmicrollaborators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anoff%2Fmicrollaborators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anoff","download_url":"https://codeload.github.com/anoff/microllaborators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252588486,"owners_count":21772687,"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":["ar","collaboration","hackathon","javascript","microscopy","zeiss"],"created_at":"2024-08-04T17:01:23.366Z","updated_at":"2025-05-05T22:38:32.482Z","avatar_url":"https://github.com/anoff.png","language":"Max","funding_links":[],"categories":["Max","Max (1)"],"sub_categories":[],"readme":"# microllaborators 👩‍👦‍👦🔬👩‍🏫\n\n\u003e put microscope images into AR for advanced collaboration 🔮🔬👩‍🏫\n\nTeacher/student classroom scenario for gamified collaboration on three dimensional microscopic images.\nBy opening the website on a device with a camera ([iOS not supported](https://webkit.org/status/#specification-webrtc) 😓) pupils and the teacher can interact visually, from remote locations and in realtime.\n\n![safari fails](./safari-fail.png)\n\nThe idea is that the teacher can ask a question regarding the current image and the students can answer it by placing markers/annotations on the image. The teacher can see all annotations and validate the students response.\n\n\u003e Note: This codebase was created as part of the Zeiss Hackathon 2017-04-29 in Munich. Don't blame us for the ugly code!\n\n## ✏️ authors\n\n* Tim Großmann\n  * [Github](http://github.com/timgrossmann)\n  * [Twitter](https://twitter.com/timigrossmann)\n* Andreas Offenhaeuser\n  * [Website](http://anoff.io)\n  * [Twitter](https://twitter.com/an0xff)\n\n## 👾🦄 usage\n\nTo use the augmented reality feature you need to get your hands on a markerimage of the [zeiss marker](./public/markers/zeiss.jpg). Just print it out or open it on your laptop. After you got a marker just head over to the website, see below.\nCurrently there are two separate views implemented for student and teachers. In a production environment there would be authentication \u0026 authorization concepts in place that automatically route the user to the correct view.\n\n### 👨‍🎓 student\n\n[https://zeisshack.surge.sh](https://zeisshack.surge.sh)\n\n![AR marker](./public/markers/zeiss.jpg)\n\n### 👩‍🏫 teacher\n\n[https://zeisshack.surge.sh/teacher](https://zeisshack.surge.sh/teacher)\n\n### running the server\n\nYou can start a local development server with server-side autorestart and access it at [https://localhost:8083](https://localhost:8083)\n\n```sh\nyarn\nnpm start\n```\n\n### deploying the website\n\nIf you are Tim or Andreas you can deploy the code to surge at [zeisshack.surge.sh](https://zeisshack.surge.sh)\n\n```sh\nnpm run deploy\n```\n\nIf you're someone else just put the `public` folder on any static hosting.\nAll the dynamic features are **client only** and realized over [firebase](http://firebase.com).\n\n## 📽 demo / workflow\n\nThis section describes how the solution would be used in a real environment.\n\n### preparation\n\nTeaching environment e.g. school with a teacher using a microscope that allows digital image capturing. Students use a smartphone with camera and internet/wifi.\n\nThe students open the [student website](https://zeisshackathon.surge.sh) and place the [AR marker](./public/markers/zeiss.jpg) as paper on their desk (might be handed out by teacher).\n\n![teacher image selection](./demo/student_marker.png)\n\n### providing the question\n\nThe teacher goes to the teacher website and uploads/selects and image from his microscope he wants to discuss. He inputs the question in the top of the website and it gets broadcasted to all students.\n\n![teacher image selection](./demo/teacher_image_upload.png)\n\n### gamification\n\nThe students see the new image and an updated question. Each student can place a marker, if he misplaces it he can replace it by clicking the screen again.\nBy moving their phone around they can look at the image from different angles with a 3d effect.\n\n![student places marker](./demo/student_3d.png)\n\n![student AR](./demo/student_ar.gif)\n\n### evaluation of responses\n\nWhile the students place their markers the teacher gets all answers in real time in his view and can select the correct region he expects to be placed. An overview shows him how many students answered correctly. This allows him to get feedback from the whole class without them influencing each other.\n\n![teacher results](./demo/teacher_results.png)\n\n## ⚖️ License\n\n[MIT](./LICENSE)\n\n## 🗂 Used puzzle pieces / Attribution\n\n* [AR.js](https://github.com/jeromeetienne/AR.js): helped us a lot to get off the ground\n* [firebase](firebase.google.com): allowed us to do realtime collaboration without backend\n* [three.js](https://github.com/jeromeetienne/AR.js/tree/master/three.js): used for 3D markers\n* [material design lite](https://getmdl.io/components/index.html): fancy design\n* [Zeiss](https://www.zeiss.com): thanks for hosting and guiding us during the hackathon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanoff%2Fmicrollaborators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanoff%2Fmicrollaborators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanoff%2Fmicrollaborators/lists"}