Pip-webui2-pictures NPM

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

<pip-picture resize="false" class="square-xl rounded" defaultIcon="tag_faces" backgroundColor="#E53935" 
    foregroundColor="#FFFFFF" foregroundColorOpacity="1">
</pip-picture>

<pip-picture resize="false" class="square-xl" backgroundColor="#2196F3" src="./assets/boy.png"></pip-picture>

Example on the image

Picture edit

Control allows to set a single image and upload it to server

Using

Template:

<pip-picture-edit src="./assets/boy.png" defaultIcon="face" (onImageLoad)="onImageLoad($event)" 
    (onImageDelete)="onImageDelete($event)">
</pip-picture-edit>

Example on the image

Picture list

Control allows to upload a collection of images at once

Using

Template:

<pip-picture-list-edit [srcs]="sources"></pip-picture-list-edit>

Initialized data:

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:

<pip-collage [srcs]="sources"></pip-collage>

Initialized data:

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:

<pip-add-image (onImageLoad)="onImageLoad($event)"></pip-add-image>

Handler:

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

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

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