This article explains how to create location markers using QR codes in STYLY Mobile.
Types of STYLY Markers
As of August 2021, there are two types of STYLY markers (QR codes) that can be used with STYLY Mobile.
Each is divided into “scene marker” and “location marker” and has different characteristics.
Scene Markers
Scene Marker” is a STYLY marker that reads a QR code containing only the URL of the scene. Scene markers are detected on a flat surface, and users can change the location of the scene marker by themselves.
Examples of scene markers
Plane detection of scene markers
Location Markers
Apart from scene markers, there are “location markers”. These markers are necessary for creating location-based AR.
The digital installation work “Worlds end supernova” on permanent display at Shibuya PARCO uses these location markers.
Location markers installed
Location markers can be used to place AR objects that perfectly match the real space, as shown in the image.
Location markers allow you to specify the location of a scene in real space.
To use location markers, create a scene using the “AR Scene Template (with Location Marker)” template in Studio.
The location and orientation of the “Location Marker” in the scene corresponds to the marker in real space.
How to Create Location Markers
Creating Scenes for Location
First, let’s actually create a scene for a location marker. First, access STYLY Studio and select “AR Scene Template (with Location Marker)” from the Create menu.
AR Scene Template
Studio screen
When selected, the Studio screen switches to this screen.
Let’s create an AR space as it is. There is an object called “Location Marker” in the scene.
By changing the position and orientation of this object, it will be synchronized with the position and orientation of the location marker in the real world. (*For example, to place a printed location marker on a wall, place the “Location Marker” in the scene vertically.)
Once you have completed your scene, you can publish it using the button in the upper left corner.
If you do not want to make the scene public, choose Unlisted.
When the AR scene is complete, select the publish button in the upper left corner.
Set up your scene, making sure the “AR” tag is selected under FeaturedTags. (Note that the markers displayed in Gallery are not location markers.)
Choose “Public,” “Unlisted,” or “Private.” Public is open to the public and will appear in StudioSTYLY’s Gallery.
Unlisted is accessible only to those who know the URL of the scene and will not appear in the Gallery.
Private is not accessible to users. Private means that users will not be able to load the scene.
Once you have finished setting up your scene, click on the “Open in Gallery” button in the upper right corner to jump to the Gallery page.
A new tab will open and the scene’s Gallery page will open. Copy the URL of this page.
Creating a Location ID from a Scene ID
For Pro account holders, please use the STYLY Pro / Pro Unlimited Contact Form to request a Location ID issuance.
For Pro Unlimited account holders, please follow the steps below to issue a Location ID.
After accessing the location page from the URL below, click the “New Location” button.
https://gallery.styly.cc/location
New Location
Set three items on the right side of the page: “Location Name”, “Description”, and “Scene”.
Set 3 items
①Location Name
The name of the location. This will be displayed on the user’s screen during the experience, so set a name that is easy to understand.
②Description
Description of the location. Set a name that is easy to understand what kind of location AR is.
③Scene
Enter the scene URL or scene name in this field.
Enter the URL of the scene
Scene name search is also available
Click on the scene for which you want to set the location and add it to the list.
Click on a scene to add it to the list
When you have entered the information up to this point, click the “Save” button in the lower right corner. The location ID you created will then be displayed in the “Location Page” field.
Copy Location ID
Creating Location Markers from Location IDs
The next step is to create location markers using location IDs, but it is necessary to determine in advance the size of the full-size location marker when printed.
The full-scale size of the location marker at the time of printing is the length and width (m) of the marker portion when actually printed, as shown in the image below.
(*The ratio of ① and ② must always be 1:1)
The location marker must include this real-size information (cm) in the QR code that will be generated later. Internally, Studio adjusts the scene scale based on this information. (*For example, if a location marker with 10cm x 10cm information is printed at full size (30cm x 30cm), the scale in the scene will be off.
Now let’s create location markers.
①Replace the location ID with the part in red below
https://styly.cc/ja/mobile/?location={Location ID}
(e.g. https://styly.cc/ja/mobile/?location=734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e)
②Enter the actual size of the location marker when printed (cm) after the location ID
https://styly.cc/ja/mobile/?location={Location GUID}&size={size at time of printing}
(For 20cm x 20cm:https://styly.cc/ja/mobile/?location=734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e&size=0.2)
③Encode the string you created at the following site.
https://www.tagindex.com/tool/url.html
Enter the text string you just typed in the black box. Click the Encode button in the lower left corner.
This will generate a string such as [https%3A%2F%2F%2Fstyly.cc%2Fen%2Fmobile%2F%3Flocation%3D734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e%26size%3D0.2].
④Replace the generated string with the red text below.
https://stylymr.page.link/?link=https://STYLY_REPLACE&apn=com.psychicvrlab.stylymr&isi=1477168256&ibi=com.psychicvrlab.stylymr
(e.g. https://stylymr.page.link/?link=https%3A%2F%2Fstyly.cc%2Fja%2Fmobile%2F%3Flocation%3D734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e%26 size%3D0.2&apn=com.psychicvrlab.stylymr&isi=1477168256&ibi=com.psychicvrlab.stylymr)
⑤Convert the above string into a QR code using the following site
https://qr.quel.jp/form_bsc_msg.php
Enter text in the “Text” area.
Enter a string
Saves the generated QR Code as an image file to a local drive, etc.
Please change the size of the QR Code, etc. according to the situation, as the appropriate values vary depending on the size of the printout.
⑥Combine a QR code and a location marker.
Combine the QR Code and location marker generated by image editing software, etc.
Click here for ai file of location markers https://drive.google.com/file/d/1hGpowVQjRLTKsoMqtMt6YpAaPvZFj7RT/view?usp=sharing
Regulations for marker generation, etc. are here: https://drive.google.com/file/d/1n42VhofeRKecKskMgmT4RNu4zDkeepS8/view?usp=sharing
Please strictly adhere to the above regulations. Users may not be able to experience AR contents.
This is the end of creating location markers.
Q＆A
Q.1 I have already printed a large number of location markers. Can I change only the actual size portion when printing?
Currently, it is not possible.
In the past, we have had a situation where multiple copies of a QR Code were printed with the wrong setting for the actual size of the STYLY marker, and the content side could not do anything about it.
In this case, unfortunately, the only way is to re-print the QR Code with the correct full-size setting.
Therefore, please make sure to check the original size carefully when printing.