# Gallery

This section contains some examples of visualisation with [POCViP](#pocvip) and some usage of commands for [pre-/post- processing](#tools) of different files.

(tools)=
## Pre-/Post- processing commands usage

### Tidal diagnostics

1. [Harmonic analysis (time serie / models / altimetry)](pre-post-processing/harmonic_analysis.md)
2. [Prediction](pre-post-processing/prediction.md)
3. [Detiding (time serie / models)](pre-post-processing/detiding.md)
4. Vertical mode decomposition (TBD)

### Validation

1. [Colocalization between T-UGOm and observations](pre-post-processing/colocalization.md)
2. Complex tidal harmonic comparition (TBD)

### Operation

1. [Basic statistics](pre-post-processing/statistics.md)
2. [Custom formula](pre-post-processing/formula.md)

### Grid creation and refinement
1. ...
2. ...

### SWOT data processing
1. ...
2. ...

(pocvip)=
## POCViP usage

*For further help on POCViP commands, go to the dedicated page: [POCViP](POCViP/pocvip.md)*

### Basic use

<div class="image-gallery">
  <figure>
    <a href="POCViP/starting.html">
      <img src="../_static/starting_zoom.jpg" alt="Starting with POCViP">
      <figcaption>Starting with POCViP</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/colormap.html">
      <img src="../_static/colormap.jpg" alt="Colormap, Range, and Isolines">
      <figcaption>Colormap, Range, and Isolines</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/quiver.html">
      <img src="../_static/quiver_uv.jpg" alt="Quiver for vector variables">
      <figcaption>Quiver for vector variables</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/cloud.html">
      <img src="../_static/cloud.jpg" alt="Pixel cloud datasets">
      <figcaption>Pixel cloud datasets</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/operations.html">
      <img src="../_static/operation_menu.jpg" alt="Operations">
      <figcaption>Operations</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/tidal_ellipses.html">
      <img src="../_static/tidal_ellipses.jpg" alt="Tidal harmonics and ellipses">
      <figcaption>Tidal harmonics and ellipses</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/grid.html">
      <img src="../_static/external_grid.jpg" alt="External grid and model outputs">
      <figcaption>Dedicated grid/model outputs files</figcaption>
    </a>
  </figure>
</div>

### Advance usage

<div class="image-gallery">
  <figure>
    <a href="POCViP/tidal_validation.html">
      <img src="../_static/validation_color.jpg" alt="Comparison/Validation">
      <figcaption>Comparison/Validation</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/slice.html">
      <img src="../_static/slice_view.jpg" alt="Interactive vertical slicing">
      <figcaption>Interactive vertical slicing</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/recursive_script.html">
      <img src="../_static/animation.jpg" alt="Recursive script and animation">
      <figcaption>Recursive script and animation</figcaption>
    </a>
  </figure>
  <figure>
    <a href="POCViP/multiple_files.html">
      <img src="../_static/swot_cycle.jpg" alt="Multiple files display">
      <figcaption>Multiple files display</figcaption>
    </a>
  </figure>
</div>


<style>
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.image-gallery figure {
  margin: 0;
  text-align: center;
}

.image-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.image-gallery figcaption {
  margin-top: 8px;
  font-size: 1em;
}
</style>

```{toctree}
:maxdepth: 2
POCViP <POCViP/index>
Pre-/Post-processing <pre-post-processing/index>
```