Versions Compared

Old Version 5

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.

...

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

Image Modified

Chaos ScatterImage Added

Variations TabImage 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%