pip-webui/pip-webui-pictures/README.md

HTML5 UI for LOB applications

# <img src="https://github.com/pip-webui/pip-webui/raw/master/doc/Logo.png" alt="Pip.WebUI Logo" style="max-width:30%"> <br/> Picture controls

![](https://img.shields.io/badge/license-MIT-blue.svg)

Images are essential for any application with graphical user interface. Pip.WebUI.Pictures module provides number of different controls to visualize and edit pictures.

**Picture view** is the simplest control that loads from the server and visualizes a single image. 

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-simple.png" style="border: 3px ridge #c8d2df; width: 50%; margin: auto; display: block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-simple.png"/>
</a>

**Picture edit** control allows to set a single image and upload it to server.

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-edit-control.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-edit-control.png"/>
</a>

**Avatar view** control is identical to **Picture view**, the only difference is in URL on the server to upload image.

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-avatar-control.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-avatar-control.png"/>
</a>

**Picture list** control allows to upload a collection of images at once. 

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-list-edit.png" style="border: 3px ridge #c8d2df; width: 50%; margin: auto; display: block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-list-edit.png"/>
</a>

**Collage** control visualizes a collection of images as random collage 

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-collage.png" style="border: 3px ridge #c8d2df; width: 50%; margin: auto; display: block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-collage.png"/>
</a>

**Add picture** dialog let user add image from different sources: from file, camera, web link or image library.

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-add-image-directive.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-add-image-directive.png"/>
</a>

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-dialog.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-picture-dialog.png"/>
</a>

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-camera.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-camera.png"/>
</a>

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-weblink.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-weblink.png"/>
</a>

<a href="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-image-library.png" style="border: 3px ridge #c8d2df; margin: auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-pictures/raw/master/doc/images/img-image-library.png"/>
</a>


## Learn more about the module

- [User's guide](https://github.com/pip-webui/pip-webui-pictures/blob/master/doc/UsersGuide.md)
- [Online samples](http://webui.pipdevs.com/pip-webui-pictures/index.html)
- [API reference](http://webui-api.pipdevs.com/pip-webui-pictures/index.html)
- [Developer's guide](https://github.com/pip-webui/pip-webui-pictures/blob/master/doc/DevelopersGuide.md)
- [Changelog](https://github.com/pip-webui/pip-webui-pictures/blob/master/CHANGELOG.md)
- [Pip.WebUI project website](http://www.pipwebui.org)
- [Pip.WebUI project wiki](https://github.com/pip-webui/pip-webui/wiki)
- [Pip.WebUI discussion forum](https://groups.google.com/forum/#!forum/pip-webui)
- [Pip.WebUI team blog](https://pip-webui.blogspot.com/)

## <a name="dependencies"></a>Module dependencies

* [pip-webui-lib](https://github.com/pip-webui/pip-webui-lib): angular, angular material and other 3rd party libraries
* [pip-webui-css](https://github.com/pip-webui/pip-webui-css): CSS styles and web components
* [pip-webui-core](https://github.com/pip-webui/pip-webui-core): localization and other core services
* [pip-webui-rest](https://github.com/pip-webui/pip-webui-rest): REST resources for files
* [pip-webui-pictures](https://github.com/pip-webui/pip-webui-pictures): user avatar control

## <a name="license"></a>License

This module is released under [MIT license](License) and totally free for commercial and non-commercial use.