# pip-webui2-pictures
> 
Latest version **1.1.13** (published 2022-09-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install pip-webui2-pictures
pnpm add pip-webui2-pictures
yarn add pip-webui2-pictures
bun add pip-webui2-pictures
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.13 |
| Published | 2022-09-20 |
| First published | 2018-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | pipdevs |
## Links
- npm: https://www.npmjs.com/package/pip-webui2-pictures
- Repository: https://github.com/pip-webui2/pip-webui2-pictures
- Homepage: https://github.com/pip-webui2/pip-webui2-pictures#readme
- Issues: https://github.com/pip-webui2/pip-webui2-pictures/issues
- npm.io page: https://npm.io/package/pip-webui2-pictures
## Dependencies (5)
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [ngx-webcam](https://npm.io/package/ngx-webcam.md) 0.2.5
- [pip-webui2-themes](https://npm.io/package/pip-webui2-themes.md) ^1.1.24
- [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^11.0.1
- [pip-webui2-behaviors](https://npm.io/package/pip-webui2-behaviors.md) ^1.1.23
## Recent versions
- 1.1.13 (latest) — 2022-09-20
- 2.0.0-rc.1 — 2020-10-01
- 1.1.12 — 2019-12-20
- 1.1.11 — 2019-12-10
- 1.1.10 — 2019-11-13
- 1.1.9 — 2019-10-21
- 1.1.8 — 2019-08-09
- 1.1.7 — 2019-07-30
- 1.1.6 — 2019-06-14
- 1.1.5 — 2019-01-30
- 1.1.4 — 2019-01-22
- 1.1.3 — 2019-01-08
- 1.1.2 — 2019-01-06
- 1.1.1 — 2018-12-05
- 1.1.0 — 2018-11-22
- … 3 more at https://npm.io/package/pip-webui2-pictures/versions
## README
# 
Picture controls
Images are essential for any application with graphical user interface. Pip.WebUI.Pictures module provides number of different controls to visualize and edit pictures.
## Components
### Picture view
**Is the simplest control that loads from the server and visualizes a single image**
**Using**
```html
```
**Example on the image**
### Picture edit
**Control allows to set a single image and upload it to server**
**Using**
Template:
```html
```
**Example on the image**
### Picture list
**Control allows to upload a collection of images at once**
**Using**
Template:
```html
```
Initialized data:
```typescript
sources: string[] = [
'./assets/boy.png',
'./assets/girl2.png',
'./assets/boy2.png',
'./assets/girl.png'
];
```
**Example on the image**
### Collage
**Control visualizes a collection of images as random collage**
**Using**
Template:
```html
```
Initialized data:
```typescript
sources: string[] = [
'./assets/boy.png',
'./assets/girl2.png',
'./assets/boy2.png',
'./assets/girl.png'
];
```
**Example on the image (7 pictures)**
### Add image
**Dialog let user add image from different sources: from file, camera or web link. Uses dialogs that described below**
**Using**
Template:
```html
```
Handler:
```typescript
onImageLoad(results) {
imageSource = results.img.url;
imageLoadEvent.emit(results.img);
}
```
**Example on the image**
## Dialogs
### Camera dialog
**Allows to get image from device's camera**
**Using**
```typescript
import { MatDialog } from '@angular/material';
import { PipCameraDialogComponent } from 'pip-webui2-pictures';
constructor(
private dialog: MatDialog
) {
}
onCameraClick() {
let dialogRef = this.dialog.open(PipCameraDialogComponent, {
data: { img: null }
});
dialogRef.afterClosed().subscribe(result => {
});
}
```
**Example on the image**
### Picture url dialog
**Allows to get image from picture's url**
**Using**
```typescript
import { MatDialog } from '@angular/material';
import { PipPictureUrlDialogComponent } from 'pip-webui2-pictures';
constructor(
private dialog: MatDialog
) {
}
onPictureUrlClick() {
let dialogRef = this.dialog.open(PipPictureUrlDialogComponent, {
data: { img: null }
});
dialogRef.afterClosed().subscribe(result => {
});
}
```
**Example on the image**
## Installation
To install this module using npm:
```bash
npm install pip-webui2-pictures --save
```
## License
This module is released under [MIT license](License) and totally free for commercial and non-commercial use."# pip-webui2-pictures"
---
_Source: https://npm.io/package/pip-webui2-pictures · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._