architwin 1.6.5 → 1.6.6

package/README.md

@@ -98,6 +98,7 @@ ArchiTwin Library
       - [getCurrentSweep()](#getcurrentsweep)
       - [getCurrentSweepPosition()](#getcurrentsweepposition)
       - [getAllSweeps()](#getallsweeps)
+      - [disableSweeps()](#disableSweeps)
     - [Video](#video)
       - [playVideo()](#playvideo)
       - [pauseVideo()](#pausevideo)
@@ -175,7 +176,12 @@ ArchiTwin Library
       - [createLocalVideoTrack()](#createlocalvideotrack)
       - [createLocalAudioTrack()](#createlocalaudiotrack)
       - [initializeHTMLElements()](#initializehtmlelements)
-
+      - [setupMeetingSession()](#setupMeetingSession)
+      - [sendCommand()](#sendCommand)
+      - [attachParticipantVideo()](#attachParticipantVideo)
+    - [Viewpoint](#viewpoint)
+      - [renderViewpointMarker()](#renderViewpointMarker)
+      - [toggleViewpointVisibility()](#toggleViewpointVisibility)
 ## Installation
 ### Install Using NPM
 To install the latest ArchiTwin package:
@@ -595,7 +601,7 @@ You can subscribe your method to more than one event. Currently, we support subs
 - CLICK
 - HOVER
 - DRAG
-- BRAG_BEGIN
+- DRAG_BEGIN
 - DRAG_END
 - LOADING_PHASE
 - STARTING_PHASE
@@ -609,12 +615,17 @@ You can subscribe your method to more than one event. Currently, we support subs
 - MEDIA_PAUSE
 - MEDIA_MUTE
 - MEDIA_UNMUTE
+- MEDIA_ENDED
+- CURRENT_USER_LOADED
+- CURRENT_USER_CHANGED
+- PARTICIPANT_CHANGED
 - PARTICIPANT_ADDED
 - PARTICIPANT_REMOVED
 - PARTICIPANT_VIDEO_ON
 - PARTICIPANT_VIDEO_OFF
 - PARTICIPANT_AUDIO_STATE
 - MEETING_ENDED
+- MEETING_CLOSED
 - SELECTED_TAG
 - MODEL_RENDERED
 - MODEL_DISPOSED
@@ -627,6 +638,16 @@ You can subscribe your method to more than one event. Currently, we support subs
 - SET_TAG_ICON
 - VIEW_TAG_MESSAGE
 - TOOLBAR_LOADED
+- SWEEP_COLLECTION_UPDATED
+- MINIMAP_SWEEP_CLICK
+- MINIMAP_SWEEPS_RENDERED
+- SCREENSHOT_CAPTURED
+- ON_MOVE_SWEEP
+- ON_CAMERA_MOVE
+- USER_VIEW_POINT
+- TAGPLACER_CREATED
+- ROOM_CHANGED
+- ARRIVED_ON_SWEEP
 
 For more information regarding the loading,starting, and playing phase events. Please refer to [this section](#executing-methods-on-specific-app-phases)
 
@@ -3161,7 +3182,7 @@ export interface IMPConfig {
     embedlyKey: string //for rendering attachments
     meetSdkKey?: string //zoom sdk key
     meetSecretKey?: string //zoom secret key
-    // avatartwinKey?: string //superviz key
+    avatartwinKey?: string //superviz key
     appName?: string // app name / title
   }
   debug?: {
@@ -4332,6 +4353,22 @@ const allSweeps = atwin.getAllSweeps();
 console.log('All Sweeps:', allSweeps);
 ```
 
+#### disableSweeps()
+
+This function disables all Sweeps when the iframeId is passed.
+
+*Function Signature*
+```typescript
+function disableSweeps(iframeId: string)
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'const
+iframeId = "mp-showcase";
+const disableSweeps = atwin.disableSweeps(iframeId) (edited) 
+```
+
 #### Using custom sweep pucks
 
 Custom sweep pucks allow you to place a 2D circle or 3D torus as an additional visual indicator in your sweeps. Do take note that the sweep pucks do not replace the existing sweep markers on the space. To add custom sweep pucks to your space simply add the following to your config object that you pass to `connectSpace`
@@ -5357,10 +5394,8 @@ await atwin.disposeModel(target)
   });
 ```
 
------
-
 
-<!-- ## Meeting #15134: Deactivate superviz
+<!-- ## Meeting
 
 ### createMeeting()
 
@@ -6343,5 +6378,120 @@ const participantCanvas = document.getElementById("at-participant-canvas") as HT
 await atwin.meet.initializeHTMLElements(videoElement, canvasElement, participantCanvas);
 ````
 
------
+### setupMeetingSession()
+
+This method sets up the Meeting Session
+
+*Function Signature*
+```typescript
+async function setupMeetingSession(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.setupMeetingSession();
+````
+
+### sendCommand()
+
+This function will send a command to given userId
+
+*Function Signature*
+```typescript
+async function sendCommand(
+  command: ZOOM_COMMAND,
+  userId?: number
+): Promise<ExecutedFailure | CommandChannelMsg>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| command | ZOOM_COMMAND | yes | null | string from ZOOM_COMMAND enum  |
+| userId | number | optional | null  | Participant userId |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.sendCommand(command, userId);
+````
+
+
+### attachParticipantVideo()
+
+This function will send a command to given userId
+
+*Function Signature*
+```typescript
+async function attachParticipantVideo(userId: number): Promise<boolean>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| userId | number | optional | null  | Participant userId |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.attachParticipantVideo(userId)
+````
+
+## Viewpoint
+
+Viewpoints are pointers composed of a 2 dimensional line and a 2D marker at the opposite that can be used to act as markers of where a user or object is looking at. This can be especially useful for if you plan on implementing multiplayer functionalities in your space. The next few sections will explain how you can render, customize, and manipulate viewpoints.
+
+### renderViewpointMarker()
+
+Function that renders an object with an eye icon that serves as a visual representation of a user's line of sight.
+
+*Function Signature*
+```typescript
+async function renderViewpointMarker(transform:{position:Vector3,rotation?:Vector3},options?:ComponentOptions)
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| position | Vector3 | required | null  |  x,y,z position of the anchor of the marker |
+| rotation | Vector3 | optional | null  | x,y,z rotation of the anchor |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.renderViewpointMarker(position, rotation)
+````
+
+### toggleViewpointVisibility()
+
+Toggle the visibility of a single, group, or all viewpoints. This method requires the object id of the viewpoint
+
+*Function Signature*
+```typescript
+function toggleViewpointVisibility(viewpointIds?:number|Array<number>):void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| viewpointIds | number | optional | null  | number|Array |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// without array[]
+await atwin.toggleViewpointVisibility()
+
+// with array[]
+
+// Replace with actual viewpoint ids
+const ids = [012345, 6789,]
 
+await atwin.toggleViewpointVisibility(ids)
+````

package/lib/atwinui/components/toolbar/tagListPane.d.ts

@@ -5,7 +5,7 @@ export declare let selectedSubCategoryFilterId: any;
 export declare function renderTagListPane(): HTMLElement;
 export declare function isTagPartOfCategory(categoryUUID: string): boolean;
 export declare function renderTags(tags: Array<ITag>, showOwnTagsOnly?: boolean): void;
-export declare function renderTagRow(tag: MpSdk.Tag.TagData): HTMLElement;
+export declare function renderTagRow(tag: MpSdk.Tag.TagData, tagIconUrl: string): HTMLElement;
 export declare function setTagLink(link: string): void;
 export declare function getTagLink(): void;
 export declare function addClickEventToTagRow(tag: MpSdk.Tag.TagData): void;

package/lib/atwinui/components/toolbar/tagListPane.js

@@ -125,12 +125,12 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     tags.forEach(tag => {
         if (showOwnTagsOnly) {
             if (isTagPartOfCategory(tag.category_uuid)) {
-                const row = renderTagRow(tag.json_data);
+                const row = renderTagRow(tag.json_data, tag.tag_icon_url);
                 tagContainer.appendChild(row);
             }
         }
         else {
-            const row = renderTagRow(tag.json_data);
+            const row = renderTagRow(tag.json_data, tag.tag_icon_url);
             tagContainer.appendChild(row);
         }
     });
@@ -222,7 +222,7 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     }));
     initDropdownEventListeners();
 }
-export function renderTagRow(tag) {
+export function renderTagRow(tag, tagIconUrl) {
     const element = document.createElement('tr');
     element.classList.add('at_tag_row'); //this class is not defined and I only use it as an identifier for attaching events
     element.setAttribute('id', `at-tag-row-${tag.id}`);
@@ -230,9 +230,13 @@ export function renderTagRow(tag) {
     // get read only value from mpconfig
     const isTagReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
     console.log("_isTagReadOnly: ", isTagReadOnly);
+    // Displays tag icon with tag color indicator 
+    const thisTagIconURL = tagIconUrl === 'button.png' || tagIconUrl === '' || tagIconUrl === undefined ? "https://cdn.jsdelivr.net/npm/architwin@latest/static/images/button.png" : tagIconUrl;
     element.innerHTML = `
-        <td>
-            <div class="at_colored-indicator" style="background-color:${convertToCssRgb(tag.color)}"></div>
+        <td style="padding-top: 5px;">
+            <div class="at_colored-indicator" style="background-color:${convertToCssRgb(tag.color)}">
+                <div class="at_colored-indicator-img" style="background-image: url(${thisTagIconURL});"></div>
+            </div>
         </td>
         <td id="at-tag-row-${tag.id}" data-cy="at-tag-row-${tag.id}" tag-id="${tag.id}">
             <span>${tag.label}</span>

package/lib/atwinui/events.d.ts

@@ -6,7 +6,7 @@ declare function setActiveToolbarItem(itemId: string): void;
 declare function toggleDisplayPane(targetId: string): Promise<void>;
 declare function toggleActionBar(state: string): void;
 declare function setupIndividualEventListeners(): void;
-declare function handleModelVisibility(objId: string): void;
+declare function handleModelVisibility(objId: string): Promise<void>;
 declare function handleDeleteModel(objId: string): Promise<void>;
 declare function handleShowMinimap(): void;
 declare function handleScrollToView(scrollContainerId: string, targetId: string): void;

package/lib/atwinui/events.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown, clearActiveActionBtn, clearActiveCard, toggleActionBarButtons, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList, toggleModal, setModalAction } from "./components/toolbar";
-import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, actionHistory, get3DXObjects, transformHistory } from "../architwin";
+import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, actionHistory, get3DXObjects, transformHistory, goToModel } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS } from "../types";
@@ -418,12 +418,14 @@ function handlePlaceTag() {
                         iTag = yield renderTag({ tag: tag }, true);
                     }
                     log.info('iTag', iTag);
+                    let targetIconUrl = "";
                     try {
                         // set tag icon
                         const targetSubCat = targetCategory.subcategories.find(subcat => subcat.uuid === payload.tagSubcategoryId);
                         log.info('__@ [onMoveTag] Icon URL: ', targetSubCat.json_data);
                         if (targetSubCat.json_data && targetSubCat.json_data.iconUrl && targetSubCat.json_data.iconUrl !== '' && targetSubCat.json_data.iconUrl.includes('https')) {
-                            yield setTagIcon({ tag: iTag, iconName: (_a = targetSubCat.json_data.icon) !== null && _a !== void 0 ? _a : '', iconUrl: (_b = targetSubCat.json_data.iconUrl) !== null && _b !== void 0 ? _b : '', color: iTag.color });
+                            targetIconUrl = (_a = targetSubCat.json_data.iconUrl) !== null && _a !== void 0 ? _a : '';
+                            yield setTagIcon({ tag: iTag, iconName: (_b = targetSubCat.json_data.icon) !== null && _b !== void 0 ? _b : '', iconUrl: targetIconUrl, color: iTag.color });
                             log.info('__@ [onMoveTag] Tag icon set!');
                         }
                     }
@@ -435,7 +437,7 @@ function handlePlaceTag() {
                         return __awaiter(this, void 0, void 0, function* () {
                             log.info("tag placed");
                             const tagContainer = document.getElementById('at-tag-list-container');
-                            const row = renderTagRow(iTag);
+                            const row = renderTagRow(iTag, targetIconUrl);
                             tagContainer.appendChild(row);
                             addClickEventToTagRow(iTag);
                             if (iTag.attachments && iTag.attachments.length > 0) {
@@ -470,7 +472,7 @@ function handlePlaceTag() {
                         return __awaiter(this, void 0, void 0, function* () {
                             log.info("tag placed");
                             const tagContainer = document.getElementById('at-tag-list-container');
-                            const row = renderTagRow(iTag);
+                            const row = renderTagRow(iTag, '');
                             tagContainer.appendChild(row);
                             addClickEventToTagRow(iTag);
                             yield attachTagMedia({ sdk: _atwin, tag: iTag, attachments: iTag.attachments });
@@ -516,7 +518,7 @@ function handlePlaceTag() {
                         return __awaiter(this, void 0, void 0, function* () {
                             log.info("tag placed");
                             const tagContainer = document.getElementById('at-tag-list-container');
-                            const row = renderTagRow(iTag);
+                            const row = renderTagRow(iTag, '');
                             tagContainer.appendChild(row);
                             addClickEventToTagRow(iTag);
                             if (iTag.attachments && iTag.attachments.length > 0) {
@@ -556,7 +558,7 @@ function handlePlaceTag() {
                         return __awaiter(this, void 0, void 0, function* () {
                             log.info("tag placed");
                             const tagContainer = document.getElementById('at-tag-list-container');
-                            const row = renderTagRow(iTag);
+                            const row = renderTagRow(iTag, '');
                             tagContainer.appendChild(row);
                             addClickEventToTagRow(iTag);
                             yield attachTagMedia({ sdk: _atwin, tag: iTag, attachments: iTag.attachments });
@@ -644,7 +646,7 @@ function handleSaveTag() {
     log.info('handleSaveTag()');
     const saveTagBtn = document.getElementById('at-save-tag-btn');
     saveTagBtn.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         log.info("save clicked");
         const tagFormPayload = getTagFormData();
         log.info('=== tagFormPayload ===', tagFormPayload);
@@ -660,6 +662,15 @@ function handleSaveTag() {
                     currentTag.media_url = tagFormPayload.tagEmbed;
                     currentTag.json_data.label = tagFormPayload.tagName;
                     currentTag.json_data.description = tagFormPayload.tagDescription;
+                    // Add tag icon data
+                    const targetCategory = _tagCategories.find(cat => cat.uuid === tagFormPayload.tagCategoryId);
+                    if (targetCategory) {
+                        const targetSubCat = targetCategory.subcategories.find(subcat => subcat.uuid === tagFormPayload.tagSubcategoryId);
+                        if (targetSubCat.json_data && targetSubCat.json_data.iconUrl && targetSubCat.json_data.iconUrl !== '') {
+                            currentTag.tag_icon_name = targetSubCat.json_data.icon;
+                            currentTag.tag_icon_url = targetSubCat.json_data.iconUrl;
+                        }
+                    }
                     let payload = { tag: currentTag };
                     console.log("@__ handleSaveTag payload ", payload);
                     dispatchSpaceEvent(SPACE_EVENTS.TAG_SAVED, payload);
@@ -707,6 +718,8 @@ function handleSaveTag() {
                 if (selectedTag && tagFormPayload && tagFormPayload.tagName && tagFormPayload.tagCategoryId && tagFormPayload.tagSubcategoryId) {
                     log.info('selectedTag', selectedTag);
                     const targetCategory = _tagCategories.find(cat => cat.uuid === tagFormPayload.tagCategoryId);
+                    let thisTagIconName = "";
+                    let thisTagIconURL = "";
                     if (index !== -1) {
                         // Replace the existing object with the current payload
                         editTagLabel({ tagId: selectedTag.json_data.id, label: tagFormPayload.tagName });
@@ -721,7 +734,11 @@ function handleSaveTag() {
                                 const targetSubCat = targetCategory.subcategories.find(subcat => subcat.uuid === tagFormPayload.tagSubcategoryId);
                                 log.info('__@ [onMoveTag] Icon URL: ', targetSubCat.json_data);
                                 if (targetSubCat.json_data && targetSubCat.json_data.iconUrl && targetSubCat.json_data.iconUrl !== '' && targetSubCat.json_data.iconUrl.includes('https')) {
-                                    yield setTagIcon({ tag: selectedTag.json_data, iconName: (_a = targetSubCat.json_data.icon) !== null && _a !== void 0 ? _a : '', iconUrl: (_b = targetSubCat.json_data.iconUrl) !== null && _b !== void 0 ? _b : '', color: targetCategory.json_data.color.rgb });
+                                    // Set tag icon name and url
+                                    thisTagIconName = (_a = targetSubCat.json_data.icon) !== null && _a !== void 0 ? _a : '';
+                                    thisTagIconURL = (_b = targetSubCat.json_data.iconUrl) !== null && _b !== void 0 ? _b : '';
+                                    // Set tag icon
+                                    yield setTagIcon({ tag: selectedTag.json_data, iconName: thisTagIconName, iconUrl: thisTagIconURL, color: targetCategory.json_data.color.rgb });
                                     log.info('__@ [onSaveTag] Tag icon set!');
                                 }
                             }
@@ -730,6 +747,15 @@ function handleSaveTag() {
                                 notyf.error("Error apply subcategory icon");
                             }
                         }
+                        else {
+                            if (targetCategory) {
+                                const targetSubCat = targetCategory.subcategories.find(subcat => subcat.uuid === tagFormPayload.tagSubcategoryId);
+                                if (targetSubCat.json_data && targetSubCat.json_data.iconUrl && targetSubCat.json_data.iconUrl !== '') {
+                                    thisTagIconName = (_c = targetSubCat.json_data.icon) !== null && _c !== void 0 ? _c : '';
+                                    thisTagIconURL = (_d = targetSubCat.json_data.iconUrl) !== null && _d !== void 0 ? _d : '';
+                                }
+                            }
+                        }
                         _tags[index].category_uuid = tagFormPayload.tagSubcategoryId;
                         _tags[index].json_data.color = targetCategory.json_data.color.rgb;
                         if (tagFormPayload.tagEmbed !== _tags[index].media_url) {
@@ -741,6 +767,9 @@ function handleSaveTag() {
                             yield attachTagMedia({ sdk: _atwin, tag: tagData, attachments: mediaAttachment });
                         }
                         _tags[index].media_url = tagFormPayload.tagEmbed;
+                        // Add tag icon data
+                        _tags[index].tag_icon_name = thisTagIconName;
+                        _tags[index].tag_icon_url = thisTagIconURL;
                         log.info("Object updated successfully:", _tags[index]);
                         notyf.success(`${i18n.t('SuccessUpdateTag')}`);
                     }
@@ -827,27 +856,30 @@ function handleScreenshot() {
     }));
 }
 function handleModelVisibility(objId) {
-    console.log("handleModelVisibility ", objId);
-    const setVisibilityBtn = document.getElementById(objId);
-    if (setVisibilityBtn) {
-        const cardId = setVisibilityBtn.getAttribute('card-id');
-        if (cardId) {
-            const targetId = Number.parseInt(cardId);
-            const target = _3DXObjects.find(obj => obj.object.id === targetId);
-            console.log("_3DXObjects ", _3DXObjects);
-            //@ts-ignore
-            if (target.component.mesh.visible) {
-                setModelVisibility(targetId, false);
-                setVisibilityBtn.classList.remove('mdi-eye-off');
-                setVisibilityBtn.classList.add('mdi-eye');
-            }
-            else {
-                setModelVisibility(targetId, true);
-                setVisibilityBtn.classList.remove('mdi-eye');
-                setVisibilityBtn.classList.add('mdi-eye-off');
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("handleModelVisibility ", objId);
+        const setVisibilityBtn = document.getElementById(objId);
+        if (setVisibilityBtn) {
+            const cardId = setVisibilityBtn.getAttribute('card-id');
+            if (cardId) {
+                const targetId = Number.parseInt(cardId);
+                const target = _3DXObjects.find(obj => obj.object.id === targetId);
+                console.log("_3DXObjects ", _3DXObjects);
+                //@ts-ignore
+                if (target.component.mesh.visible) {
+                    setModelVisibility(targetId, false);
+                    setVisibilityBtn.classList.remove('mdi-eye-off');
+                    setVisibilityBtn.classList.add('mdi-eye');
+                }
+                else {
+                    setModelVisibility(targetId, true);
+                    setVisibilityBtn.classList.remove('mdi-eye');
+                    setVisibilityBtn.classList.add('mdi-eye-off');
+                }
+                yield goToModel(targetId);
             }
         }
-    }
+    });
 }
 function handleDeleteModel(objId) {
     return __awaiter(this, void 0, void 0, function* () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",

package/static/atwinui.css

@@ -347,13 +347,41 @@
     color: var(--bg-secondary)
 }
 
-.at_colored-indicator {
+/* ORIGINAL CSS */
+/* .at_colored-indicator {
     width: 1em;
     height: 1em;
     border-radius: 50%;
     border: solid black 1px;
     display: inline-block;
     margin-right: 0.5em;
+} */
+
+
+.at_colored-indicator {
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    border: solid black 1px;
+    /* display: inline-block; */
+    margin-right: 0.5em;
+}
+
+.at_colored-indicator-img {
+    width: 80%;
+    height: 80%; 
+    border-radius: 50%; 
+    background-size: cover; 
+    background-position: center; 
+    background-repeat: no-repeat;
+    padding: 0.4em; 
+    box-sizing: border-box; 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
 }
 
 .at_table_button_row {