Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HideElements

...

titleWelcome to your new space!

...

Confluence spaces are great for sharing content and news with your team. This is your home page. Right now it shows recent space activity, but you can customize this page in any way you like.

Complete these tasks to get started

  •  Edit this home page - Click Edit in the top right of this screen to customize your Space home page
  •  Create your first page - Click the Create button in the header to get started
  •  Brand your Space - Click Configure Sidebar in the left panel to update space details and logo
  •  Set permissions - Click Space Tools in the left sidebar to update permissions and give others access

 

Recent space activity

Recently Updated
typespage, comment, blogpost
max5
hideHeadingtrue
themesocial

Space contributors

Contributors
modelist
scopedescendants
limit5
showLastTimetrue
orderupdate

cssselector#tocVertical, #tocHorizontal

Chaos Envision is an independent 3D visualization software for photorealistic real-time rendering with rapid animation capabilities. It is a partner to Chaos Enscape and is the endpoint for creating photorealistic animated visualizations. Chaos Envision supports very large scenes, realistic crowds, object manipulation, and unlimited variations for design exploration and creative animations.

Responsivegridmacro
Columns2repeat(2, 1fr)
Columns3width750px
Columns1repeat(4, 1fr)
Gap30px
Columns1width1700px
Columnsrepeat(5, 1fr)
Columns2width1100px


Div
stylepadding:5px; row-gap: 0px;
classdashboard

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added

Image Added


...


Envision User Interface: Click on the highlighted panels to read more about Envision's user interface components.


CSS Stylesheet
.map-area {
  fill: transparent;
  stroke:  rgb(196, 58, 95);
  stroke-width: 2;
}

.map-area:hover {
  fill: rgba(196, 58, 95, 0.2); 
}

.tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      display: none;
      pointer-events: none;
      z-index: 10;
    } 
Section
Column
width15%


Column
width70%
HTML
<div class="tooltip" id="tooltip"></div>

 <svg width="1000" height="600">
  <image href="https://docs.chaos.com/download/attachments/162202143/Envision_Scheme.png?version=4&modificationDate=1747125225793&api=v2" width="1000" />  

<a href="https://docs.chaos.com/display/ENVISION/Menu+Bar">
         <rect x="2" y="2" width="996" height="20" class="map-area" data-tooltip="Menus"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Home+Screen" title="Chaos Envision Home">
         <rect x="7" y="28" width="18" height="17" class="map-area" data-tooltip="Chaos Envision Home"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Toolbar" title="Toolbar">
         <rect x="305" y="26" width="400" height="26" class="map-area" data-tooltip="Toolbar"/>
</a>

  <a href="https://docs.chaos.com/display/ENVISION/Left+Side+Panel" title="Left Side Panel">
      <rect x="2" y="55" width="208" height="510" class="map-area" data-tooltip="Left Side Panel" />
  </a>

  <a href="https://docs.chaos.com/display/ENVISION/Right+Side+Panel" title="Right Side Panel">
    <rect x="790" y="55" width="208" height="510" class="map-area" data-tooltip="Right Side Panel"/>
  </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Bottom+Panel" title="Bottom Panel">
    <rect x="205" y="570" width="590" height="20" class="map-area"  data-tooltip="Bottom Panel"/>
 </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="213" y="56" width="163" height="55" class="map-area" data-tooltip="Current View Quick Settings"/>
  </a>

   <a href="https://docs.chaos.com/display/ENVISION/Full+Screen+Viewport">
    <rect x="691" y="56" width="24" height="23" class="map-area" data-tooltip="Full Scree Mode"/>
  </a>  </svg>  
HTML
<script>
    const tooltip = document.getElementById('tooltip');

    document.querySelectorAll('rect').forEach(rect => {
      rect.addEventListener('mouseenter', (e) => {
        const tooltipText = rect.getAttribute('data-tooltip');
        tooltip.innerText = tooltipText;
        tooltip.style.display = 'block';
      });

      rect.addEventListener('mousemove', (e) => {
        tooltip.style.left = `${e.pageX + 10}px`;
        tooltip.style.top = `${e.pageY + 10}px`;
      });

      rect.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
      });
    });
  </script>
Column
width15%

...