# Camera View Widget

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2Fgit-blob-e979e713531f5651af49fe822eef83614a5812f1%2Fcamera-view.gif?alt=media" alt="Camera View"><figcaption><p>Camera View</p></figcaption></figure>

To utilize an Camera View in your UI, adhere to these steps:

**1.** Drag the Camera View widget from the Insert menu and drop it into your desired location within your UI.

**2.** Customize the appearance and behavior of the Camera view by adjusting its properties in the editing section on the right.

**3.** Enhance the Camera View by adding additional features such as zoom in, zoom out, recent files, and camera direction controls. These features can be implemented using single tick.

### Components of Camera View Widget

| Component                   | Description                                                                                                                                            |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Align Icons**             | Click icons or use shortcut keys to align Camera View Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Camera View Widget. |
| **Postitions**              | Set Camera View Widget positions on the X and Y axis of the mobile canvas.                                                                             |
| **Camera View Widget Size** | Define the width and height of the Camera View Widget by providing values for width (w) and height (h).                                                |
| **Z rotation**              | Rotate the Camera View Widget by specifying a rotation value.                                                                                          |
| **Border Radius**           | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner.        |
| **Margin**                  | Provide margin to the Camera View Widget from any of the four directions by specifying the margin value.                                               |
| **Camera type**             | Specify whether the camera should be used for photos, videos, or both.                                                                                 |
| **Camera Direction**        | Specify the direction of the camera: front, back, or external.                                                                                         |
| **Camera Checkbox**         | Check the checkboxes according to your requirements. For example, enable zoom in/out, select recent files, or show camera direction selector.          |
| **Colors**                  | Specify the color of the camera by selecting it from the toottip or by giving hex color code.                                                          |
| **Icons Color**             | Specify the colors of the icons according to your need.                                                                                                |
| **Text Color**              | Specify the color of the text in the camera.                                                                                                           |
| **Selected Text Color**     | Specify the text color on selected text.                                                                                                               |
| **Video Record Color**      | Give the color of the icon of record when recording a video according to your need.                                                                    |
| **Visible**                 | By checking the checkbox the entire selected list will be hidden.                                                                                      |

If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303)

## Music to go with.

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}