ar-js-org / studio Goto Github PK
View Code? Open in Web Editor NEWAn authoring platform to build Web Augmented Reality experiences, without coding knowledge
Home Page: https://ar-js-org.github.io/studio/
License: MIT License
An authoring platform to build Web Augmented Reality experiences, without coding knowledge
Home Page: https://ar-js-org.github.io/studio/
License: MIT License
Recent test at https://github.com/arturojreal/ddb50-test-1hur3ri generates the following link:
http://arturojreal.com/ddb50-test-1hur3ri/
However, because the link that's generated is in HTTP instead of HTTPS, when opening on Chrome browser on Android, the visitor receives the following prompt:
Webcam Error
Name:
Message: Web RTC issue-! navigator.mediaDevices not present in your browser
After adding the "s" to "https" in the generated URL, the experience works as expected
Downloading a package with gltf-model (zip-package) as content works great, but when I want to download a package with other content(video/image)I receive the error: "Asset parameters are not valid"
If I'm not mistaken this parameter has to be only set in the case of a 3D-model/gltf-model, right? It's an error in the backend, that's for sure. I guess the easy solution is just by doing this?
Which only handles the error in case of a 3D-asset.
As @le0m pointed out here: AR-js-org/studio-backend#6 (comment)
On the studio frontend side, we should interact with Github APIs to request authorization in order to make some actions (retrieve the token, create repository, push on it).
We should have some logic to enable footer buttons, so they can be clickable only if users has done all of the required actions (uploading content, choosing anchor - location or marker).
I think we should enhance text instructions on the home page and on the location/marker pages.
I will look into this when all functionalities have been implemented.
We should use a language understandable for everyone, teachers, students, artists, passionate users without coding knowledge.
We should link drive docs, whimsical project and the github pages live website Url.
Hi,
I think that for "post-mvp" we should try to refactor the UI in order to make it responsive not only for desktop/tablet environment, but also for mobile devices.
Maybe will be useful to talk with designers and reason about the right "UX experience" that we want to give to our users.
Currently, the application uses a simple router for the HTTP path (ListeningBrowserRouter
). This does not work with GitHub Pages out of the box, as described here. Thus evaluate a solution for that, i.e. either using HashRouter
or redirecting the 404 page to index.html.
When clicking on the footer, on 'Publish on Github', we should navigate to the publication page
The integration of logic should be handled on a separate issue: #8
So this actual issue is more like related to create the page, buttons, UI elements.
Same as marker, in this case we should show the map on final publish stage.
Need also a refactor of location page as done for marker page.
It should be possible to add more places on location based, following the Figma Design:
https://www.figma.com/file/TUjZ2KYsmhA5LUkt9KIhcB/ARjs-Studio?node-id=0%3A1
GitHub pages absolute path starts from https://ar-js-org.github.io/studio/ rather than https://ar-js-org.github.io/. As a result, we get 404 for the resource that are pointing to the root directory (https://ar-js-org.github.io/).
In #29, I changed every relative path to absolute path in order to use same header component for each pages, but I didn't account for /studio/ directory.
Following Figma design, it's required to implement the whole Location based page. On this issue, can be left:
that will be handled on separate issues.
Hi,
I tried to create a marker based experience (with the default marker), uploading an image as content (jpg and then png), but it seems that pubblication on github doesn't work.
In particular, studio stucks on publish page with a strange error in Chrome Inspector.
Attachments:
This is the jpeg image.
](https://user-images.githubusercontent.com/20702863/83628909-89e09e80-a599-11ea-98c3-bfe155096737.jpg)
Would be great to have a short URL connected to our repo which we can use for demos and examples, while also looking a bit more legit.
www.arjs.studio is 30 euros per year on Godaddy.
Find an image to add to the iphone render for the splash screen. Image should be a screen from an AR.js-based app.
See the bug here: https://twitter.com/scottturneruon/status/1272941251881558018
As Designs, we have to add some feedback on current publish page, and create two publish pages that differs (the marker will show the final marker image to be downloaded, the location page will show the locations on the map).
Details at Design Figma file: https://www.figma.com/file/TUjZ2KYsmhA5LUkt9KIhcB/ARjs-Studio?node-id=0%3A1
to be done after: AR-js-org/studio-backend#15
When user uploaded a video, in both marker based / location based page, a preview should be showed. For the video, we can embed it
We have to define constraints for file to be uploaded on the studio project.
This is for the MVP. After the MPV, will be added more.
Actually, for MVP I was thinking of:
Size Limit: 25 MB for EVERY kind of file
Audio: .mp3
Video: .mp4
Images: .jpg, .png, .gif
3D Models: .gltf/.glb
Following Figma design: https://www.figma.com/file/TUjZ2KYsmhA5LUkt9KIhcB/ARjs-Components?node-id=0%3A1
It's required to implement the footer panel, the one where the user can export the project. The two actions to be triggered on the buttons' click will be handled on separate issues.
When user uploaded an audio asset, in both marker based / location based page, a preview should be showed. We can embed a basic audio player, from HTML 5 specifics, on the preview box
We should try to make this web app more accessible.
From screen reader support to keyboard navigation.
I will add a shortlist to check.
This issue will probably be some of the last for the MVP to implement.
Please take a look at Zapworks Studio. It would be great if this studio could offer similar functionalities, such as timeline, etc.
As for marker-based and location based, we should support this feature.
This is the first issue for the design.
Following Figma design, it's required to implement the whole Marker based page. On this issue, can be left:
that will be handled on separate issues.
I was testing location base page and the buttons for publishing and download the project seems not to work. I've tested on browser Firefox and Chrome.
Following Figma design: https://www.figma.com/file/TUjZ2KYsmhA5LUkt9KIhcB/ARjs-Components?node-id=0%3A1
On this issue, it's required to implement the 2D map.
If the marker is customizable, it should be something like the yellow marker on the Figma design.
Clicking on the map, some data are outputed (latitude, longitude), and will appear on a div under the map (see the image).
Since the header is used across the pages, it would be good to have it as a component.
We should define a basic design system, setting
I used ar.js studio to create this:
it should react to the default marker:
https://github.com/AR-js-org/studio/blob/master/assets/default-marker.png
but for some reason, it's not working. (It works on with my notebook browser/camera but not with my pixel 4xl)
Can anybody help?
On marker based page, connect the frontend with backend in order to create html marker based experience
@fcor as we discussed, after merging the Location Based page, we should discuss how to resize the elements of homepage and marker / location pages, because all it's looking 'too big' in respect of the viewport. Should not be difficult but we need to do a consistent work across the pages.
For the MVP, we should change, if possible, the sizes and rotation of GLTF files uploaded (also 2D video and 2D images).
and for every of them, position should be set at "0,0,0" while rotation should be made so the content is perpendicular to the marker.
This changes are not to be done, obviously, on the source file the user uploaded: we should take the sizes, rotation and position of the given content, and knowing the output we want, we should cable the scale, rotation and position properties according to this data.
E.G.
We set '100' as default size for Images.
If the users loads a 200px images, we should call the backend with scale parameters data, in this way:
scale: "0.5, 0.5, 0.5"
We should show the final marker image to be scan on the final step, so the user know what he has to print/display with the generated code. Thanks to @gciandro13 for the suggestion
When user uploaded an image, in both marker based / location based page, a preview should be showed. We can show the image on the preview box, for example
The yellow back button in "marker/index.html" that I see in production does not work as expected.
No error; seems it has to be developed.
I can take it into account @nicolocarpignoli
Hi, in marker-based experience i can not load any mp3 audio content (the message for unsupported format is shown).
Also another bug from the page "Get Your Shareable Link" after github publication: the back button seems not working.
I will try to fix it after the release @nicolocarpignoli
When user uploaded a 3D model, in both marker based / location based page, a preview should be showed. We can embed an aframe scene (or three.js viewer) on the preview box and show the 3D model. Zoom/rotating enabled would be great but not needed as MVP
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.