Versions Compared

Old Version 4

changes.mady.by.user Gergana Lilkova

Saved on

compared with

New Version Current

changes.mady.by.user Gergana Lilkova

Saved on

Key

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

...

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
HAlignmentstart
Columns2repeat(2, 1fr)
Columns3width750px
Columns1repeat(34, 1fr)
Gap30px
Columns1width1700px
Columnsrepeat(45, 1fr)
Columns2width1100px

...

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

What's NewImage Added

Image Modified

Image Modified

Image Modified

Anima Asset BrowserImage Added

Image Modified

Chaos ScatterImage Added

Image Modified

Image Added

Image Modified

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%