pip-webui/pip-webui-pictures/cordova/www/picture.html

HTML5 UI for LOB applications

<div ng-if="$party">

    <md-card layout="column" flex>
        <h2 class="m16">Picture Edit</h2>
        <md-card-content >
            <div class="app-picture">
                picture enabled/disabled: {{pictureDisabled}} - pictureId: {{pictureEditId}}
                <pip-picture-edit
                        pip-picture-id="pictureEditId"
                        pip-created="onPictureCreated($event)"
                        pip-changed="onPictureChanged($control)"
                        pip-rebind="true"
                        pip-default-text="Change Picture"
                        ng-disabled="pictureDisabled">
                </pip-picture-edit>
            </div>
        </md-card-content>

        <md-card-actions >
            <md-button ng-click="onSaveClick()">Save</md-button>
            <md-button ng-click="onResetClick()">Reset</md-button>
            <md-button ng-click="pictureDisabled = !pictureDisabled">Enable/Disable</md-button>
        </md-card-actions>
    </md-card>

    <md-card layout="column" flex>
        <h2 class="m16">Picture By Id</h2>
        <md-card-content >
            <div class="app-picture">
                <div>
                    <pip-picture class="image-square"  pip-picture-id="'56790b4c60958daa664fd8c7'"></pip-picture>
                </div>
            </div>
        </md-card-content>

        <md-card-actions >
        </md-card-actions>
    </md-card>

    <md-card layout="column" flex>
        <h2 class="m16">Picture By Src</h2>
        <md-card-content >
            <div class="app-picture">
                <div>
                    <h2>Square Images</h2>

                    <pip-picture class="image-square" pip-src="'images/square.jpg'"></pip-picture>
                    <pip-picture class="image-square" pip-src="'images/vertical.jpg'"></pip-picture>
                    <pip-picture class="image-square" pip-src="'images/horizontal.jpg'"></pip-picture>
                    <pip-picture class="image-square" pip-src="'images/nonexisting.jpg'"
                                 pip-default-icon="image"></pip-picture>
                </div>

                <div>
                    <h2>Vertical Images</h2>

                    <pip-picture class="image-vertical" pip-src="'images/square.jpg'"></pip-picture>
                    <pip-picture class="image-vertical" pip-src="'images/vertical.jpg'"></pip-picture>
                    <pip-picture class="image-vertical" pip-src="'images/horizontal.jpg'"></pip-picture>
                    <pip-picture class="image-vertical" pip-src="'images/nonexisting.jpg'"
                                 pip-default-icon="image"></pip-picture>
                </div>

                <div>
                    <h2>Horizontal Images</h2>

                    <pip-picture class="image-horizontal" pip-src="'images/square.jpg'"></pip-picture>
                    <pip-picture class="image-horizontal" pip-src="'images/vertical.jpg'"></pip-picture>
                    <pip-picture class="image-horizontal" pip-src="'images/horizontal.jpg'"></pip-picture>
                    <pip-picture class="image-horizontal" pip-src="'images/nonexisting.jpg'"
                                 pip-default-icon="image"></pip-picture>
                </div>

                <div>
                    <h2>Square Small Images</h2>

                    <pip-picture class="image-square" pip-src="'images/small-square.jpg'"></pip-picture>
                    <pip-picture class="image-square" pip-src="'images/small-vertical.jpg'"></pip-picture>
                    <pip-picture class="image-square" pip-src="'images/small-horizontal.jpg'"></pip-picture>
                </div>

                <div>
                    <h2>Horizontal Small Images</h2>

                    <pip-picture class="image-horizontal" pip-src="'images/small-square.jpg'"></pip-picture>
                    <pip-picture class="image-horizontal" pip-src="'images/small-vertical.jpg'"></pip-picture>
                    <pip-picture class="image-horizontal" pip-src="'images/small-horizontal.jpg'"></pip-picture>
                </div>

                <div>
                    <h2>Vertical Small Images</h2>

                    <pip-picture class="image-vertical" pip-src="'images/small-square.jpg'"></pip-picture>
                    <pip-picture class="image-vertical" pip-src="'images/small-vertical.jpg'"></pip-picture>
                    <pip-picture class="image-vertical" pip-src="'images/small-horizontal.jpg'"></pip-picture>
                </div>
            </div>
        </md-card-content>

        <md-card-actions >
        </md-card-actions>
    </md-card>

</div>