---
sidebar_position: 3
---

# Image properties

Actions for modifying various properties of the image. In the following examples, we assume that an image is loaded as

```javascript
const file = await app.openFile("my_image.fits");
```

## Changing field of view

The field of view can be adjusted using various functions within <ApiLink path="/.-stores/class/FrameStore">`FrameStore`</ApiLink>.

<ApiLink path="/.-stores/class/FrameStore/#setCenter">`setCenter`</ApiLink> and <ApiLink path="/.-stores/class/FrameStore/#setCenterWcs">`setCenterWcs`</ApiLink> set the center of the image.

```javascript
// image coordinate
file.setCenter([x position], [y position]);

// world coordinate
file.setCenterWcs("[x position, ex: 0:00:00.0615838925]", "[y position, ex: 29:59:59.1999990820]");
```

<ApiLink path="/.-stores/class/FrameStore/#fitZoom">`fitZoom`</ApiLink> zooms the image to fit the widget size.

```javascript
file.fitZoom();
```

<ApiLink path="/.-stores/class/FrameStore/#zoomToSizeX">`zoomToSize...`</ApiLink> functions zoom the image to a specific scale.

```javascript
// image coordinate
file.zoomToSizeX([size in x direction]);
file.zoomToSizeY([size in y direction]);

// world coordinate
file.zoomToSizeXWcs('[size in x direction, ex: 2.56"]');
file.zoomToSizeYWcs('[size in y direction, ex: 2.56"]');
```

## Changing the channel and Stokes

<ApiLink path="/.-stores/class/FrameStore/#setChannel">`setChannel`</ApiLink> changes the channel of the image.

```javascript
file.setChannel([channel]);
```

<ApiLink path="/.-stores/class/FrameStore/#setStokes">`setStokes`</ApiLink> and <ApiLink path="/.-stores/class/FrameStore/#setStokesByIndex">`setStokesByIndex`</ApiLink> change the stokes of the image using <ApiLink path="/.-models/enum/POLARIZATIONS">
    `POLARIZATIONS`
</ApiLink> enum or the index.

```javascript
file.setStokes(2); // Stokes Q
file.setStokesByIndex(2); // The third polarization shown in the animator widget
```

## Changing render configuration

Render configuration can be modified using <ApiLink path="/.-stores/class/RenderConfigStore">`renderConfig`</ApiLink> within <ApiLink path="/.-stores/class/FrameStore">`FrameStore`</ApiLink>.

<ApiLink path="/.-stores/class/RenderConfigStore/#setCustomScale">`setCustomScale`</ApiLink> and <ApiLink path="/.-stores/class/RenderConfigStore/#setPercentileRank">`setPercentileRank`</ApiLink> change the rendering range.

```javascript
file.renderConfig.setCustomScale([clip min], [clip max]);
file.renderConfig.setPercentileRank(90); // Change to 90%
```

<ApiLink path="/.-stores/class/RenderConfigStore/#setScaling">`setScaling`</ApiLink> changes the scaling functions using <ApiLink path="/.-stores/enum/FrameScaling">`FrameScaling`</ApiLink> enum.

```javascript
file.renderConfig.setScaling(1); // Log
```

<ApiLink path="/.-stores/class/RenderConfigStore/#setColorMap">`setColorMap`</ApiLink> changes the color map using options in <ApiLink path="/.-stores/class/RenderConfigStore/#COLOR_MAPS_ALL">`COLOR_MAPS_ALL`</ApiLink> list, and <ApiLink path="/.-stores/class/RenderConfigStore/#setInverted">
    `setInverted`
</ApiLink> inverts the color map.

```javascript
file.renderConfig.setColorMap("gray");
file.renderConfig.setInverted(true);
```
