AppCamera/index.html at master · fernando23depaula/AppCamera · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
    <head>
        <title>Camera com PhoneGap</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
        <meta name="Copyright" content="&copy; 2012, Intel Corporation" />
        <!--
           * Copyright (c) 2012, Intel Corporation. All rights reserved.
           * File revision: 04 October 2012
           * Please see http://software.intel.com/html5/license/samples
           * and the included README.md file for license terms and conditions.
        -->

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript" src="cordova.js"></script>
        <link rel="stylesheet" href="css/camera.css" type="text/css">
    </head>

    <body onload="onLoad()">

        <!-- Home Page (menu page) -->
        <div data-role="page" id="home_page" data-theme="a">
            <div data-role="header">
                <h3>Camera com PhoneGap</h3>
                <a href="#settings_page" data-role="button" id="settings_button" data-theme="b" data-mini="true" class="ui-btn-right">Configurações</a>
            </div>
            <div data-role="content">
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
                <a href="#" data-role="button" id="open_camera_button">Capturar foto com camera</a>
                <a href="#" data-role="button" id="open_lib_button">Abrir Biblioteca</a>
                <a href="#" data-role="button" id="open_alb_button">Abrir Album</a>

                <div><a href="http://www.ifc-camboriu.edu.br" ><img src="ifc.jpg" border="1"></a></div>
            </div>
            <div data-role="footer" class="stickbottom">
                <div><a rel="LICENSE" href="http://software.intel.com/html5/license/samples" target="_blank">Licença</a></div>
            </div>
        </div>

        <!-- Settings edit page -->
        <div data-role="page" id="settings_page" data-theme="a">
            <div data-role="header">
                <a href="#home_page" id="settings_cancel_button" data-role="button" data-mini="true" class="ui-btn-left">Cancelar</a>
                <h3>Configurações Imagens</h3>
                <a href="#home_page" id="settings_ok_button" data-role="button" data-theme="b" data-mini="true" class="ui-btn-right">Salvar</a>
            </div>

            <div data-role="content">

                <form name="settings_form" id="settings_form">

                    <div data-role="collapsible-set" data-inset="false" data-mini="true">

                        <div data-role="collapsible" data-collapsed="false">
                            <h3>Editar Configurações de Imagens</h3>

                            <label for="quality_input" data-mini="true">Qualidade Imagem:</label>
                            <input id="quality_input" name="quality_input" type="range" min="0" max="100" step="5" value="40" data-mini="true"/>

                            <label for="width_input" data-mini="true">Largura:</label>
                            <input id="width_input" name="width_input" type="range" min="50" max="1500" step="25" value="500" data-mini="true"/>

                            <label for="height_input" data-mini="true">Altura:</label>
                            <input id="height_input" name="height_input" type="range" min="50" max="1500" step="25" value="500" data-mini="true"/>

                            <p><label data-mini="true">Editar Imagem:</label></p>
                            <div data-role="controlgroup">
                                <label for="edit_input" data-mini="true">Permitir zoom</label>
                                <input id="edit_input" name="edit_input" type="checkbox" checked data-mini="true">

                                <label for="orient_input" data-mini="true">Permitir correção de orientação</label>
                                <input id="orient_input" name="orient_input" type="checkbox" checked data-mini="true">
                            </div>
                    	</div>

                    	<div data-role="collapsible">
                            <h3>Opções de salvar Imagem</h3>

                            <label for="encod_input" data-mini="true">Escolha o tipo de codificação:</label>
                            <select id="encod_input" name="encod_input" data-mini="true">
                              <option value="0" selected="selected">JPEG</option>
                              <option value="1">PNG</option>
                            </select>

                            <label for="save_input" data-mini="true">Salvar foto para álbum</label>
                            <select name="save_input" id="save_input" data-role="slider" data-mini="true" data-theme="a" data-track-theme="a">
                                <option value="false">Não</option>
                            	<option value="true" selected="selected">Sim</option>
                            </select>
                    	</div>

                        <div data-role="collapsible">
                            <h3>Opções de abrir imagem</h3>
                            <label for="media_input" data-mini="true">Escolha Tipo:</label>
                            <select id="media_input" name="media_input" data-mini="true">
                              <option value="0" selected="selected">Imagem</option>
                              <option value="1">Videos</option>
                              <option value="2">Todas mídias</option>
                            </select>
                        </div>
                    </div>
                  </form>
            </div>
        </div>

        <!-- Camera capture result page -->
        <div data-role="page" id="result_page" data-theme="a">
            <div data-role="header">
                <h3>Resultado</h3>
                <a href="#home_page" id="home_button" data-role="button" data-theme="b" data-mini="true" class="ui-btn-right">Voltar para menu</a>
            </div>
            <div data-role="content">
                <h3>Resultado da imagem:</h3>
                <img id="pic" src="" style="display: none; border: 2px black;"/>
            </div>
        </div>
	</body>
</html>