Portal Bot Tags
Portal Bot Tags
These tags are used to configure portals. They can be set on the corresponding portal bot.
Some of them are automatically set by the corresponding portal but most of them (like the cameraPositionOffset
tags) can be changed manually.
portalColor
The color of the background of the portal.
Possible values are:
Value | Description |
---|---|
#263238 | (default) |
Any X11 Color | X11 colors are a list of standard colors that web browsers support. |
Any Hex Color | Hex colors are three or six digit numbers that specify a color by its red, green, and blue components. |
portalCursor
The cursor that should be used when the mouse is hovered over the portal.
The portal cursor is overriden when a bot with a #cursor
tag is hovered.
Note that when using a custom cursor image, the image should be 32x32 pixels or smaller. This is because that is the largest cursor image size that some operating systems support.
Possible values are:
Value | Description |
---|---|
auto | The cursor automatically changes its look based on the context. For grid portal bots, this means that the arrow cursor is used. For menu portal bots, this means that the pointer is used when the bot has a @onClick and the arrow is used otherwise. (default) |
default | The cursor looks like the default cursor for the platform. Generally, this means the arrow cursor. |
none | The cursor is invisible. |
wait | wait |
context-menu | context-menu |
help | help |
pointer | pointer |
progress | progress |
cell | cell |
crosshair | crosshair |
text | text |
vertical-text | vertical-text |
alias | alias |
copy | copy |
move | move |
no-drop | no-drop |
not-allowed | not-allowed |
grab | grab |
grabbing | grabbing |
all-scroll | all-scroll |
col-resize | col-resize |
row-resize | row-resize |
n-resize | n-resize |
e-resize | e-resize |
s-resize | s-resize |
w-resize | w-resize |
ne-resize | ne-resize |
nw-resize | nw-resize |
se-resize | se-resize |
sw-resize | sw-resize |
ew-resize | ew-resize |
ns-resize | ns-resize |
nesw-resize | nesw-resize |
nwse-resize | nwse-resize |
zoom-in | zoom-in |
zoom-out | zoom-out |
Any URL | The image at the given URL will be used as the cursor. Images should be 32x32 pixels or smaller otherwise they may not work. |
portalCursorHotspot
The X position of the pixel in the cursor image that is the "hotspot". That is, the pixel which represents the point or tip of the cursor.
The top left of the image is (0, 0).
Possible values are:
Value | Description |
---|---|
➡️0,0 | (default) |
Any Vector > ➡️0,0 | The position that the cursor hotspot should be at. |
portalBackgroundAddress
The URL of the image or video that should be displayed as the background of the portal.
When specified, this tag overrides #portalColor
.
Additionally, this tag does nothing when in VR.
Possible values are:
Value | Description |
---|---|
null | (default) |
Any URL | Specifies that the portal background should use the given image or video. |
"casualos://camera-feed" | Display a feed of the main camera as the background. |
"casualos://camera-feed/rear" | Display a feed of the rear (environment) facing camera as the background. |
"casualos://camera-feed/front" | Display a feed of the front (user) facing camera as the background. |
portalHDRAddress
The URL of the EXR file that should be set an environment map that can be used by physically based materials for lighting calculations.
Possible values are:
Value | Description |
---|---|
null | (default) |
Any URL | Specifies the EXR file that should be set. |
defaultLighting
Sets the default lighting in the gridPortalBot/miniGridPortal
Possible values are:
Value | Description |
---|---|
true | (Default) |
false | Disables default lighting |
portalLocked
Determines if the portal can be loaded.
Possible values are:
Value | Description |
---|---|
true | The portal can be loaded. (Default) |
false | The portal cannot be loaded. |
portalPannable
Whether the player will be able to pan the camera inside the portal.
Possible values are:
Value | Description |
---|---|
true | The camera is pannable in this portal. (Default) |
false | The camera is not pannable in this portal. |
portalPannableMin
The minimum values that the camera can pan to in the portal.
See the documentation on Vectors for more info.
Possible values are:
Value | Description |
---|---|
Any Vector | Minimum X and Y values that the camera can pan to. (Default is Negative Infinity) |
portalPannableMax
The maximum X and Y values that the camera can pan to in the portal.
See the documentation on Vectors for more info.
Possible values are:
Value | Description |
---|---|
Any Vector | Maximum X and Y values that the camera can pan to. (Default is Infinity) |
portalRotatable
Whether the player will be able to rotate the camera inside the miniGridPortal.
Possible values are:
Value | Description |
---|---|
true | The miniGridPortal is rotatable. (Default) |
false | The miniGridPortal is not rotatable. |
portalCameraRotation
The up and down rotation that the camera starts at in the portal. Units are in radians.
Because the bot and miniGridPortals use polar coordinates to orbit around the focus point, we only need two numbers to specify where the camera should be pointing. Polar coordinates work by specifying two angles (X and Y - also known as "phi" and "theta") which position the camera around its focus point. Therefore, these rotation values actually cause the camera to turn around the focus point and not simply turn the camera itself.
The X angle (phi) is used to rotate the camera up and down. Mathematically, a value of 0 means the camera is facing directly down and a value of π / 2
means the camera is perfectly parallel with the ground.
For usability reasons, CasualOS limits this value to between 0 and 58 degrees (~1.01229
radians).
The Y angle (theta) is used to rotate the camera left and right. Mathematically, a value of 0 means the camera is facing the front face of bots and a value of π / 2
means the camera is facing the left face of the bots.
See the documentation on Vectors for more info.
Possible values are:
Value | Description |
---|---|
Any Vector | The X and Y rotation values that should be used for the initial camera rotation. Units are in radians. |
portalZoomable
Whether the player will be able to zoom the camera inside the portal.
Possible values are:
Value | Description |
---|---|
true | The camera is zoomable in this portal. (Default) |
false | The camera is not zoomable in this portal. |
portalZoomableMin
The minimum value that the camera can zoom to in the portal. Does not affect VR/AR sessions. For the mapPortal and miniMapPortal, the value is measured in meters.
Possible values are:
Value | Description |
---|---|
0.4 | (Default for grid portals with |
0 | (Default for grid portals with |
-Infinity | (Default for map portals) |
Any Number > 0 | Minimum value that the camera zoom to. |
portalZoomableMax
The maximum value that the camera can zoom to in the portal. Does not affect VR/AR sessions. For the mapPortal and miniMapPortal, the value is measured in meters.
Possible values are:
Value | Description |
---|---|
80 | (Default for grid portals with |
Infinity | (Default for grid portals with |
EARTH_RADIUS * 4 | (Default for map portals) |
Any Number > 0 | Maximum value that the camera can zoom to. |
portalCameraZoom
The zoom value that the camera starts at in the portal.
Possible values are:
Value | Description |
---|---|
Any Number > 0 | The initial zoom value. (Default is 1) |
portalGridScale
The size of bots in the portal.
Possible values are:
Value | Description |
---|---|
Any Number > 0 | The size of bots in the portal. (Default is 0.025 for wrist portals and 0.2 for all other portals) |
portalSurfaceScale
The scale of surfaces.
Possible values are:
Value | Description |
---|---|
Any Number > 0 | The scale of surface for the dimension. (Default is 2) |
portalCameraControls
The mode that specifies how the camera controls work in the portal.
Possible values are:
Value | Description |
---|---|
"player" | Specifies that the player should be able to control the camera.
Individual options like |
false | Specifies that the player should not be able to control the camera in the portal. |
portalShowFocusPoint
Whether the focus point of the portal camera should be shown as a small sphere.
The focus point is the position that the camera orbits (rotates) around and is always facing.
When a bot is between the focus point and the camera, then focus events will trigger.
Possible values are:
Value | Description |
---|---|
false | Don't show an indicator for the focus point. (Default) |
true | Show an indicator for the focus point. |
portalCameraType
The type of camera that should be used for the portal. The "type" of a camera determines how objects are visualized and how they appear. Conceptually, camera types are similar to camera lenses.
Possible values are:
Value | Description |
---|---|
orthographic | The camera uses an orthographic projection. This camera type preserves parallel lines so lines that are parallel to each other will remain parallel in the 2D image. As a consequence, objects that are the same size always appear the same size no matter how far away they are from the camera. (Default) |
perspective | The camera uses a perspective projection. This camera type makes objects appear larger or smaller based on how far away they are from the camera. |
portalDisableCanvasTransparency
Whether to disable transparency on the canvas element that the 3D content is displayed on.
Set this tag to true
on the grid portal to fix rendering issues with 3D models that use alpha cutoff.
Note that when this value is true
, iframe forms will cease to function properly.
Possible values are:
Value | Description |
---|---|
false | The canvas element is transparent to support iframe forms. (Default) |
true | The canvas element is not transparent 3D models that use alpha cutoff. |
miniPortalHeight
Sets the initial height of the viewport for the miniGridPortal/miniMapPortal.
This should be the percentage of the "available screen height" that the miniGridPortal/miniMapPortal should take.
The "available screen height" is a portion of the full screen calculated such that when there is some space left between the left and right edges of the screen
there will be some space at the bottom of the portal. However, when the #miniPortalWidth
tag is set to 1, there will be no space between the bottom
of the screen and the bottom of the portal.
Possible values are:
Value | Description |
---|---|
Numbers >= 0 and <= 1 | The percentage of the screen height that the portal should take. (Default is 0.2) |
miniPortalWidth
Sets the width of the viewport for the miniGridPortal/miniMapPortal. This should be a percentage between 0 and 1 that specifies how much of the screen width should be taken.
Possible values are:
Value | Description |
---|---|
Numbers >= 0 and <= 1 | The percentage of the screen width that the portal should take. (Default is 0.8) |
miniPortalResizable
Whether the player will be able to resize the viewport for the miniGridPortal/miniMapPortal.
Possible values are:
Value | Description |
---|---|
true | The portal is resizable. (Default) |
false | The portal is not resizable. |
mapPortalBasemap
Sets the style of the bottom layer of the map in the mapPortal/miniMapPortal.
Possible values are:
Value | Description |
---|---|
dark-gray | (Default) |
Any Basemap | See this for a full list. |
wristPortalHeight
The number of grid spaces that the wrist portal should have in the Y direction.
Possible values are:
Value | Description |
---|---|
Numbers >= 1 | The number of of grid spaces that the portal should have in the Y direction. (Default is 6) |
wristPortalWidth
The number of grid spaces that the wrist portal should have in the X direction.
Possible values are:
Value | Description |
---|---|
Numbers >= 1 | The number of of grid spaces that the portal should have in the X direction. (Default is 6) |
meetPortalVisible
Whether the meet portal should be visible. This is useful for hiding the meet portal while still in a meeting.
Possible values are:
Value | Description |
---|---|
true | The meet portal will be visible. (Default) |
false | The meet portal will be hidden. |
meetPortalAnchorPoint
The position on the screen that the meet portal should be anchored to.
Overrides any conflicting properties set by #meetPortalStyle
.
Possible values are:
Value | Description |
---|---|
fullscreen | The meet portal will occupy the entire screen. (Default) |
top | The meet portal will occupy the top of the screen. |
topRight | The meet portal will occupy the top-right corner of the screen. |
topLeft | The meet portal will occupy the top-left corner of the screen. |
bottom | The meet portal will occupy the bottom of the screen. |
bottomRight | The meet portal will occupy the bottom-right corner of the screen. |
bottomLeft | The meet portal will occupy the bottom-left corner of the screen. |
left | The meet portal will occupy the left side of the screen. |
right | The meet portal will occupy the right side of the screen. |
[top, right, bottom, left] | The meet portal will use the given values for the CSS top, right, left, and bottom properties of the container. |
meetPortalStyle
The custom CSS styles that should be applied to the meet portal container.
This is useful for positioning the meet portal in ways that are not possible using #meetPortalAnchorPoint
.
Overridden by conflicting properties set by #meetPortalAnchorPoint
.
When setting this tag via the sheet, it is useful to utilize DNA tags to ensure that the resulting value is considered an object.
Possible values are:
Value | Description |
---|---|
null | No special styling. (Default) |
Any Object | The properties of the object will be applied as special styling to the meet portal container. |
Examples
- Put the meet portal in the center of the screen.
🧬{
"top": "10%",
"bottom": "10%",
"left": "10%",
"right": "10%",
}
meetPortalPrejoinEnabled
Whether the meet portal should have the prejoin screen enabled. The prejoin screen is where the user can setup their display name, microphone, camera, and other settings, before actually joining the meet.
Possible values are:
Value | Description |
---|---|
true | The prejoin screen is enabled. (Default) |
false | The prejoin screen is disabled. |
meetPortalStartWithVideoMuted
Whether the meet portal should start with video muted. Video in this context is equivalent to the user's camera.
Possible values are:
Value | Description |
---|---|
true | The meet portal starts with video muted. (Default) |
false | The meet portal starts with video unmuted. |
meetPortalStartWithAudioMuted
Whether the meet portal should start with audio muted. Audio in this context is equivalent to the user's microphone.
Possible values are:
Value | Description |
---|---|
true | The meet portal starts with audio muted. |
false | The meet portal starts with audio unmuted. (Default) |
meetPortalRequireDisplayName
Whether the meet portal should require the user define a display name.
Possible values are:
Value | Description |
---|---|
true | The meet portal requires a user display name. (Default) |
false | The meet portal does not require a user display name. |
meetPortalDisablePrivateMessages
Whether the meet portal should hide the option to send private chat messages to other participants.
Possible values are:
Value | Description |
---|---|
false | The meet portal allows sending private messages to other participants. (Default) |
true | The meet portal hides the option to start a new private message chat with another participant. Replies to private messages are still allowed. |
meetPortalLanguage
The language that should be used for the meet portal interface by default. Only works if this tag is set before the meet portal is loaded.
Possible Values are:
Value | Description |
---|---|
null | The user-configured value will be used for the meetPortal interface. (Default) |
Any ISO 639-1 Code | The interface will use the given ISO 639-1 language code. Note that not all langauge codes are supported. The full list of supported translations can be found here. |
meetPortalJWT
The JSON Web Token (JWT) that should be used to join the meeting. Used to give the current user moderator permissions.
Possible Values are:
Value | Description |
---|---|
null | The user will be a normal user in the meet portal. (Default) |
Any String | The user will use the JWT for authentication in the meet portal. Depending on the settings used to create the JWT, this may make the user a moderator. |
botPortalAnchorPoint
The position on the screen that the bot portal should be anchored to.
Overrides any conflicting properties set by #botPortalStyle
Possible values are:
Value | Description |
---|---|
fullscreen | The bot portal will occupy the entire screen. (Default) |
top | The bot portal will occupy the top of the screen. |
topRight | The bot portal will occupy the top-right corner of the screen. |
topLeft | The bot portal will occupy the top-left corner of the screen. |
bottom | The bot portal will occupy the bottom of the screen. |
bottomRight | The bot portal will occupy the bottom-right corner of the screen. |
bottomLeft | The bot portal will occupy the bottom-left corner of the screen. |
left | The bot portal will occupy the left side of the screen. |
right | The bot portal will occupy the right side of the screen. |
[top, right, bottom, left] | The bot portal will use the given values for the CSS top, right, left, and bottom properties of the container. |
botPortalStyle
The custom CSS styles that should be applied to the bot portal container.
This is useful for positioning the tag portal in ways that are not possible using #botPortalAnchorPoint
.
Overridden by conflicting properties set by #botPortalAnchorPoint
.
When setting this tag via the sheet, it is useful to utilize DNA tags to ensure that the resulting value is considered an object.
Possible values are:
Value | Description |
---|---|
null | No special styling. (Default) |
Any Object | The properties of the object will be applied as special styling to the bot portal container. |
Examples
- Put the bot portal in the center of the screen.
🧬{
"top": "10%",
"bottom": "10%",
"left": "10%",
"right": "10%",
}
tagPortalAnchorPoint
The position on the screen that the tag portal should be anchored to.
Overrides any conflicting properties set by #tagPortalStyle
.
Possible values are:
Value | Description |
---|---|
fullscreen | The tag portal will occupy the entire screen. (Default) |
top | The tag portal will occupy the top of the screen. |
topRight | The tag portal will occupy the top-right corner of the screen. |
topLeft | The tag portal will occupy the top-left corner of the screen. |
bottom | The tag portal will occupy the bottom of the screen. |
bottomRight | The tag portal will occupy the bottom-right corner of the screen. |
bottomLeft | The tag portal will occupy the bottom-left corner of the screen. |
left | The tag portal will occupy the left side of the screen. |
right | The tag portal will occupy the right side of the screen. |
[top, right, bottom, left] | The tag portal will use the given values for the CSS top, right, left, and bottom properties of the container. |
tagPortalStyle
The custom CSS styles that should be applied to the tag portal container.
This is useful for positioning the tag portal in ways that are not possible using #tagPortalAnchorPoint
.
Overridden by conflicting properties set by #tagPortalAnchorPoint
.
When setting this tag via the sheet, it is useful to utilize DNA tags to ensure that the resulting value is considered an object.
Possible values are:
Value | Description |
---|---|
null | No special styling. (Default) |
Any Object | The properties of the object will be applied as special styling to the tag portal container. |
Examples
- Put the tag portal in the center of the screen.
🧬{
"top": "10%",
"bottom": "10%",
"left": "10%",
"right": "10%",
}
tagPortalShowButton
Whether the tag portal should show a button that allows a custom action. When set to true, the button will be displayed in the lower right hand corner of the tag portal.
Clicking the button will trigger a @onClick
on the tag portal config bot.
Possible values are:
Value | Description |
---|---|
false | No button is shown. (Default) |
true | The button is shown. |
tagPortalButtonIcon
The Material Icon that should be shown on the tag portal button.
Possible values are:
Value | Description |
---|---|
Empty String | No icon. (Default) |
Any Material Icon |
tagPortalButtonHint
The tooltip that should be shown on the tag portal button.
Possible values are:
Value | Description |
---|---|
Empty String | No hint. (Default) |
Any String | The text that should be displayed as a hint when the user hovers their mouse over the button. |
menuPortalStyle
The custom CSS styles that should be applied to the menu portal container. This is useful for positioning the menu portal in ways that are not possible normally.
When setting this tag via the sheet, it is useful to utilize DNA tags to ensure that the resulting value is considered an object.
Possible values are:
Value | Description |
---|---|
null | No special styling. (Default) |
Any Object | The properties of the object will be applied as special styling to the menu portal container. |
Examples
- Make the menu portal
80%
of the screen width.
🧬{
"width": "80%",
}
sheetPortalShowButton
Whether the sheet portal should show a button that allows a custom action. When set to true, the button will be displayed in the lower right hand corner of the sheet portal.
Clicking the button will trigger a @onClick
on the sheet portal config bot.
If there is no @onClick
, then the sheet portal will be closed.
Possible values are:
Value | Description |
---|---|
true | The button is shown. (Default) |
false | No button is shown. |
sheetPortalButtonIcon
The Material Icon that should be shown on the sheet portal button.
Possible values are:
Value | Description |
---|---|
web_asset | The Web Asset icon. (Default) |
Any Material Icon |
sheetPortalButtonHint
The tooltip that should be shown on the sheet portal button.
Possible values are:
Value | Description |
---|---|
Grid Portal | "Grid Portal" (Default) |
Any String | The text that should be displayed as a hint when the user hovers their mouse over the button. |
sheetPortalAllowedTags
The list of tags that should be allowed in the sheet portal.
Possible values are:
Value | Description |
---|---|
null | All tags are allowed. (Default) |
Any Array | Only the specified tags can be shown in the sheet portal. |
sheetPortalAddedTags
The list of tags that should be shown in the sheet even if they do not have a value.
Possible values are:
Value | Description |
---|---|
null | No additional tags are shown. (Default) |
Any Array | The specified tags are shown in the sheet portal. |
pixelWidth
The width of the grid portal in pixels. Because the miniGridPortal is contained by the grid portal, this value also applies to the miniGridPortal.
Note that a device with a larger pixel value is not necessarily physically larger than a device with a smaller pixel value. Additionally, a device with a larger width than height does not necessarily mean that it is in landscape mode.
Finally, #pixelHeight
and #pixelWidth
use CSS pixels which are dependent on the #defaultPixelRatio
specified by the web browser.
You can find the physical pixel width of the device by calculating pixelWidth * defaultPixelRatio
.
pixelHeight
The height of the grid portal in pixels. Because the miniGridPortal is contained by the grid portal, this value also applies to the miniGridPortal.
Note that a device with a larger pixel value is not necessarily physically larger than a device with a smaller pixel value. Additionally, a device with a larger height than width does not necessarily mean that it is in portrait mode.
Finally, #pixelHeight
and #pixelWidth
use CSS pixels which are dependent on the #defaultPixelRatio
specified by the web browser.
You can find the physical pixel width of the device by calculating pixelHeight * defaultPixelRatio
.
pixelRatio
The pixel ratio that should be used to determine how many physical pixels should be used to draw each pixel in the 3D portals. Higher values will make the 3D portals appear smoother but will also cause CausalOS to run slower.
Possible values are:
Value | Description |
---|---|
null | Use the default pixel ratio. (Default) |
Any Number > 0 | The pixel ratio that should be used. |
defaultPixelRatio
The pixel ratio that is used when the #pixelRatio
tag is not set.
This value is determined by the web browser and cannot be changed. High resolution/Retina displays tend to have a pixel ratio of 2 or higher
while devices with lower resolution displays tend to have a pixel ratio of 1.
pointerPixel
The X and Y position (location along width) of the pointer (usually mouse, but can also be the position of the first finger to touch the screen) in the grid portal in pixels.
Larger X values are closer to the right of the screen and lower values are closer to the left part of the screen.
Larger Y values are closer to the bottom of the screen and lower values are closer to the top part of the screen.
cameraPosition
The 3D position of the player's camera in the grid portal.
See the documentation on Vectors for more info.
cameraPositionOffset
The offset that should be applied to the 3D position of the player's camera in the grid portal.
Useful for moving the player around in VR.
See the documentation on Vectors for more info.
cameraRotation
The 3D rotation of the player's camera in the grid portal.
Units are in radians.
See the documentation on Rotations for more info.
cameraRotationOffset
The offset that should be applied to the 3D rotation of the player's camera in the grid portal.
Units are in radians.
See the documentation on Rotations for more info.
cameraZoom
The zoom value that the camera is at. This is an arbitrary value that specifies how far the camera is zoomed in or out.
Larger values indicate that the camera is zoomed in more (objects appear bigger) and smaller values indicate that the camera is zoomed out (objects appear smaller).
cameraZoomOffset
The offset that should be applied to the camera zoom. You can use this to change the zoom of the camera.
Larger values indicate that the camera is zoomed in more (objects appear bigger) and smaller values indicate that the camera is zoomed out (objects appear smaller).
cameraFocus
The 3D position of the focus point for the player's camera in the grid portal.
See the documentation on Vectors for more info.
imuSupported
Whether IMU data is supported on this device.
deviceRotation
The 3D rotation of the device as determined by the IMU.
See the documentation on Rotations for more info.