update docs

This commit is contained in:
Piotr 'pwh' Hanusiak 2022-04-12 15:02:01 +02:00
parent 480277df60
commit 35964cdb5b
4 changed files with 28 additions and 24 deletions

View File

@ -1,15 +1,15 @@
{.section-title.accent.text-primary} {.section-title.accent.text-primary}
# Working with camera # Working with camera
## Focusable Zones ## Focusable Area
It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Zones". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined zone, like this: It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Area". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined area, like this:
<div class="px-5 card rounded d-inline-block"> <div class="px-5 card rounded d-inline-block">
<img class="document-img" src="images/camera/0_focusable_zone.png" alt="" /> <img class="document-img" src="images/camera/0_focusable_zone.png" alt="" />
</div> </div>
### Adding new **Focusable Zone**: ### Adding new **Focusable Area**:
1. Make sure you are editing an **Object Layer** 1. Make sure you are editing an **Object Layer**
@ -29,7 +29,7 @@ It is possible to define special regions on the map that can make the camera zoo
<img class="document-img" src="images/camera/3_define_new_zone.png" alt="" /> <img class="document-img" src="images/camera/3_define_new_zone.png" alt="" />
</div> </div>
4. Make sure your object is of type "zone"! 4. Make sure your object is of type "area"!
<div class="px-5 card rounded d-inline-block"> <div class="px-5 card rounded d-inline-block">
<img class="document-img" src="images/camera/4_add_zone_type.png" alt="" /> <img class="document-img" src="images/camera/4_add_zone_type.png" alt="" />
@ -53,11 +53,11 @@ It is possible to define special regions on the map that can make the camera zoo
<img class="document-img" src="images/camera/7_make_sure_checked.png" alt="" /> <img class="document-img" src="images/camera/7_make_sure_checked.png" alt="" />
</div> </div>
All should be set up now and your new **Focusable Zone** should be working fine! All should be set up now and your new **Focusable Area** should be working fine!
### Defining custom zoom margin: ### Defining custom zoom margin:
If you want, you can add an additional property to control how much should the camera zoom onto focusable zone. If you want, you can add an additional property to control how much should the camera zoom onto focusable area.
1. Like before, click on **Add Property** 1. Like before, click on **Add Property**
@ -77,7 +77,7 @@ If you want, you can add an additional property to control how much should the c
<img class="document-img" src="images/camera/9_optional_zoom_margin_defined.png" alt="" /> <img class="document-img" src="images/camera/9_optional_zoom_margin_defined.png" alt="" />
</div> </div>
For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300. For example, if you define your area as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire area + margin of 50% of its dimensions, so 450x300.
- No margin defined - No margin defined

View File

@ -9,19 +9,20 @@ On your map, you can define special zones (meeting rooms) that will trigger the
In order to create Jitsi meet zones: In order to create Jitsi meet zones:
* You must create a specific layer. * You must create a specific object.
* In layer properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms) * Object must be of type "`area`"
* In object properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms)
* You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room. * You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room.
You can have this layer (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string). You can have this object (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string).
## Triggering of the "Jitsi meet" action ## Triggering of the "Jitsi meet" action
By default, Jitsi meet will open when a user enters the zone defined on the map. By default, Jitsi meet will open when a user enters the area defined on the map.
It is however possible to trigger Jitsi only on user action. You can do this with the `jitsiTrigger` property. It is however possible to trigger Jitsi only on user action. You can do this with the `jitsiTrigger` property.
If you set `jitsiTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen: If you set `jitsiTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
<figure class="figure"> <figure class="figure">
<img src="images/click_space_jitsi.png" class="figure-img img-fluid rounded" alt="" /> <img src="images/click_space_jitsi.png" class="figure-img img-fluid rounded" alt="" />
@ -32,7 +33,7 @@ If you set `jitsiTriggerMessage: your message action` you can edit alert message
## Customizing your "Jitsi meet" ## Customizing your "Jitsi meet"
Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi layer to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string. Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi object to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string.
For instance, use `jitsiConfig: { "startWithAudioMuted": true }` to automatically mute the microphone when someone enters a room. Or use `jitsiInterfaceConfig: { "DEFAULT_BACKGROUND": "#77ee77" }` to change the background color of Jitsi. For instance, use `jitsiConfig: { "startWithAudioMuted": true }` to automatically mute the microphone when someone enters a room. Or use `jitsiInterfaceConfig: { "DEFAULT_BACKGROUND": "#77ee77" }` to change the background color of Jitsi.
@ -60,7 +61,7 @@ You can grant moderator rights to some of your members. Jitsi moderators can:
* Mute everybody expect one speaker * Mute everybody expect one speaker
* Kick users out of the meeting * Kick users out of the meeting
In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi layer. For instance, if you write a property: In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi object. For instance, if you write a property:
jitsiRoomAdminTag: speaker jitsiRoomAdminTag: speaker
@ -74,7 +75,7 @@ WorkAdventure usually comes with a default Jitsi meet installation. If you are u
You have the possibility, in your map, to override the Jitsi meet instance that will be used by default. This can be useful for regulatory reasons. Maybe your company wants to keep control on the video streams and therefore, wants to self-host a Jitsi instance? Or maybe you want to use a very special configuration or very special version of Jitsi? You have the possibility, in your map, to override the Jitsi meet instance that will be used by default. This can be useful for regulatory reasons. Maybe your company wants to keep control on the video streams and therefore, wants to self-host a Jitsi instance? Or maybe you want to use a very special configuration or very special version of Jitsi?
Use the `jitsiUrl` property to in the Jitsi layer to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use: Use the `jitsiUrl` property to in the Jitsi object to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use:
`jitsiUrl: meet.jit.si` `jitsiUrl: meet.jit.si`
and not and not
`jitsiUrl: https://meet.jit.si` `jitsiUrl: https://meet.jit.si`

View File

@ -10,8 +10,9 @@ on the right side of the screen)
In order to create a zone that opens websites: In order to create a zone that opens websites:
* You must create a specific layer. * You must create a specific object.
* In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://") * Object must be of type "`area`"
* In object properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
* You may also use "`openWebsiteWidth`" property (of type "`int`" or "`float`" between 0 and 100) to control the width of the iframe. * You may also use "`openWebsiteWidth`" property (of type "`int`" or "`float`" between 0 and 100) to control the width of the iframe.
* You may also use "`openTab`" property (of type "`string`") to open in a new tab instead. * You may also use "`openTab`" property (of type "`string`") to open in a new tab instead.
@ -43,7 +44,7 @@ By default, the iFrame will open when a user enters the zone defined on the map.
It is however possible to trigger the iFrame only on user action. You can do this with the `openWebsiteTrigger` property. It is however possible to trigger the iFrame only on user action. You can do this with the `openWebsiteTrigger` property.
If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen: If you set `openWebsiteTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
<figure class="figure"> <figure class="figure">
<img src="images/click_space_open_website.jpg" class="figure-img img-fluid rounded" alt="" /> <img src="images/click_space_open_website.jpg" class="figure-img img-fluid rounded" alt="" />
@ -52,7 +53,7 @@ If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an
If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'. If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'.
If you set `openWebsiteTrigger: onicon`, when the user walks on the layer, an icon will be displayed at the bottom of the screen: If you set `openWebsiteTrigger: onicon`, when the user walks on the area, an icon will be displayed at the bottom of the screen:
<figure class="figure"> <figure class="figure">
<img src="images/icon_open_website.png" class="figure-img img-fluid rounded" alt="" /> <img src="images/icon_open_website.png" class="figure-img img-fluid rounded" alt="" />
@ -78,6 +79,6 @@ Cowebsites allow you to have several sites open at the same time.
If you want to open a Jitsi and another page it's easy! If you want to open a Jitsi and another page it's easy!
You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same layer. You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same object.
It's done! It's done!

View File

@ -9,8 +9,9 @@ On your map, you can define special silent zones where nobody is allowed to talk
In order to create a silent zone: In order to create a silent zone:
* You must create a specific layer. * You must create a specific object.
* In layer properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer. * Object must be of type "`area`"
* In object properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on the area.
## Playing sounds or background music ## Playing sounds or background music
@ -18,8 +19,9 @@ Your map can define special zones where a sound or background music will automat
In order to create a zone that triggers sounds/music: In order to create a zone that triggers sounds/music:
* You must create a specific layer. * You must create a specific object.
* In layer properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map. * Object must be of type "`area`"
* In object properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map.
* You may use the boolean property "`audioLoop`" to make the sound loop (thanks captain obvious). * You may use the boolean property "`audioLoop`" to make the sound loop (thanks captain obvious).
* If the "`audioVolume`" property is set, the audio player uses either the value of the property or the last volume set by the user - whichever is smaller. This property is a float from 0 to 1.0 * If the "`audioVolume`" property is set, the audio player uses either the value of the property or the last volume set by the user - whichever is smaller. This property is a float from 0 to 1.0