ar-js-org / studio Goto Github PK

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).

• ask user for project-name
• login with OAuth on Github
• integrate backend
• when backend answers back, show repository url to user as feedback.

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:

• choose content type logic
• map logic

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 png image.

This is the jpeg image.
](https://user-images.githubusercontent.com/20702863/83628909-89e09e80-a599-11ea-98c3-bfe155096737.jpg)

Studio stucks here.

Inspector when studio is stucked.

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.

We should add the possibility to use a pre-defined marker, so the user can replace it if he/her wants to, or leave it as default.

The default marker to be used is the following one:

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

• Define JSON structure
• Create the anchor to download the JSON example file
• Create the button to upload the user JSON file
• Load and show on map the locations

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.

• Try with a screen reader and look for problems with speech synthesis, and fix
• Look for problems with keyboard navigation (missing tabindex, wrong tab order, watch out for traps) and fix
• Be sure that all important actions (such as the creation flow) are doable with keyboard and speech synthesis
• Look for color contrasts issues (e.g. with https://a11ygator.chialab.io/)
• Look for other general a11y issues (e.g. with https://a11ygator.chialab.io/)

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:

• marker upload/creation logic
• choose content type logic

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

• font family and font weights
• colors
• column size
• other variables

I used ar.js studio to create this:

https://ar.3dtwins.de

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).

• for GLTF, we have to change sizes if too big, and define a standard size
• same for 2D videos
• same for 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