Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki:2.-desarrollo-app:2.5.-controles-by-xone:p.-camara:start [2019/09/13 14:18] – [Cámara by XOne] ary
+++ wiki:2.-desarrollo-app:2.5.-controles-by-xone:p.-camara:start [2019/09/16 15:02] – ary
@@ Línea 11: / Línea 11: @@
 Las funciones que brinda este control Cámara se obtienen haciendo
 let control = getControl("MAP_CAMERA");
-donde "MAP_CAMERA" es la propiedad de la cámara.
+donde "MAP_CAMERA" es la propiedad de la cámara.\\
+\\
-Estas funciones son:
+__Estas funciones son:__
   * control.takePicture(params);  para hacer foto
@@ Línea 21: / Línea 22: @@
   * control.stopRecording();  para detener la grabación
-  * Ítem de lista desordenadacontrol.setFlashMode(sFlashMode);   para decirle si el flash está activo, desactivado, automático, etc.
+  * control.setFlashMode(sFlashMode);   para decirle si el flash está activo, desactivado, automático, etc.
+  * control.setCamera("front");   para escoger entre la cámara trasera y la frontal.
+  * control.startPreview(), para iniciar la visualización de la cámara en tiempo real.
+  * control.stopPreview(), para tener la visualización de la cámara en tiempo real.
+  * control.isCameraOpened(), true o false, para saber si la visualización está activada.
+  * control.setAutoFocus, para decir si quieres que se active el auto enfoque o no.
+  * control.isAutoFocus(), true o false, para saber si está activado el auto enfoque.
+  * control.getSupportedAspectRatios(), devuelve un arreglo con las relaciones de aspecto permitidas por la cámara.
+  * control.getSupportedVideoProfiles(), devuelve un arreglo con los perfiles de vídeo permitidos por la cámara.
+  * control.getMaxZoom(), para obtener el mayor valor de zoom permitido.
+  * control.setZoom(nZoom), pone el zoom según el parámetro. (Son números que van desde 1 hasta el mayor valor permitido por la cámara).
+  * control.setOnCodeScanned, es para escanear (En este caso tiene un parámetro que es una función de callback, para lo que se quiera hacer con el código escaneado).
+\\
+Ejemplo:
+\\
+<code javascript>
+<coll name="CustomCamera" title="" notab="true" editmask="0" sql="SELECT * FROM GEN_USUARIOS">
+    <group name="HEADER" id="10" class="groupfixed_header">
+        <frame name="frmtitulo" class="frmsuperior">
+          <prop name="SALIR" type="B" class="btvolversuper" />
+          <prop name="MENU" type="TL" class="tlsuper" title="CAMARA" />
+          <prop name="MAP_COLORACTIVO" type="T" visible="0" />
+        </frame>
+    </group>
+    <group name="FOOTER" id="0" class="groupfixed_footer">
+        <prop name="MAP_GROUP" type="N" visible="0" />
+        <prop name="MAP_TOTAL_PAGES" type="N" visible="0" />
+        <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior">
+          <prop name="MAP_LAST" type="B" img="last.png" title="Anterior" onclick="javascript:prev(self,'ir');" methodx="ExecuteNode(anterior)" forecolor="#FFFFFF" width="45%" height="80%" labelwidth="1" imgsel="last-sel.png" disablevisible="MAP_GROUP=1" />
+          <prop name="MAP_LAST_EMPTY" type="B" bgcolor="#00000000" width="45%" height="80%" labelwidth="1" newline="false" disablevisible="MAP_GROUP&gt;1" />
+          <prop name="MAP_NEXT" type="B" img="next.png" title="Siguiente " onclick="javascript:next(self,'ir');" methodx="ExecuteNode(siguiente)" forecolor="#FFFFFF" width="45%" height="80%" labelwidth="1" newline="false" lmargin="6%" imgsel="next-sel.png" disablevisible="MAP_GROUP=MAP_TOTAL_PAGES" />
+        </frame>
+    </group>
+    <group name="General" id="1">
+        <frame name="group1Frame" class="frmtodo" height="1040p" bgcolor="#FFFFFF" align="top|center">
+            <frame name="frmTop" tmargin="0" width="100%" height="28%" align="center|top" xbgcolor="#FF040E1A">
+                <prop name="MAP_TOGGLE_FLASH_MODE" title="Cambiar Flash"  type="B" visible="1" onclick="javascript:doToggleFlashMode();" class="btnButton" align="center" height="80p" />
+                <prop name="MAP_TOGGLE_CAMERA" title="Cambiar Cámara"  type="B" visible="1" onclick="javascript:doToggleCamera();" lmargin="5%" newline="false" class="btnButton" align="center" height="80p" />
+                <prop name="MAP_TOGGLE_AUTOFOCUS" title="Cambiar Auto Enfoque"  type="B" visible="1" onclick="javascript:doToggleAutoFocus();" class="btnButton" align="center" height="80p" />
+                <prop name="MAP_CAMERA_QUALITY" type="T" visible="1" labelwidth="9" width="700p" height="50p" tmargin="30p" img-height="55p" img-width="60p" linkedto="MAP_CAMERA_QUALITY" linkedfield="DATA" mapcol-values="high,qvga,low,480p,720p,1080p,2160p" title="Calidad de vídeo" showinline="true" text-border="true" />
+            </frame>
+            <prop name="MAP_CAMERA" type="VD" visible="1" width="80%" height="50%" viewmode="camerapreview" Xcode-type="ean13" />
+            <frame name="frmBottom" tmargin="0" width="100%" height="30%" align="center|top" xbgcolor="#FF040E1A">
+                <prop name="MAP_TAKE_PICTURE" title="Hacer Foto" type="B" visible="1"  onclick="javascript:takePicture();" class="btnButton" align="center" height="80p"/>
+                <prop name="MAP_START_RECORDING" title="Grabar Vídeo" type="B" visible="1" newline="false" lmargin="5%" onclick="javascript:record();" class="btnButton" align="center" disablevisible="MAP_RECORDING=1" height="80p" />
+                <prop name="MAP_STOP_RECORDING" title="Detener Vídeo" type="B" visible="1" newline="false" lmargin="5%" onclick="javascript:stopRecording();" class="btnButton" align="center" disablevisible="MAP_RECORDING=0" height="80p" />
+                <prop name="MAP_START_PREVIEW" title="Iniciar" type="B" visible="1" onclick="javascript:startPreview();" class="btnButton" align="center" disablevisible="MAP_RECORDING=1" height="80p" />
+                <prop name="MAP_STOP_PREVIEW" title="Detener" type="B" visible="1" newline="false" lmargin="5%" onclick="javascript:stopPreview();" class="btnButton" align="center" disablevisible="MAP_RECORDING=1" height="80p" />
+            </frame>
+        </frame>
+        <prop name="MAP_RECORDING" type="N" visible="0" />
+    </group>
+    </code>
+<code javascript>
+function takePicture() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    var params = {
+        filename     : "test.jpg",
+        saveToGallery: true,
+        width        : 360,
+        height       : 360,
+        onFinished   : function(sFileName) {
+            if (!sFileName) {
+                ui.showToast("Error de cámara");
+            } else {
+                ui.showToast("Abriendo nueva foto...");
+                ui.openFile(sFileName);
+            }
+        }
+    };
+    control.takePicture(params);
+}
+function record() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    var currentObj = self;
+    let params = {
+        quality     : self.MAP_CAMERA_QUALITY,
+        maxDuration : 10000,    // Milisegundos
+        //maxFileSize : 10485760, // Bytes
+        withMicAudio: true,
+        onFinished  : function(sFileName) {
+            self.MAP_RECORDING=0;
+            ui.refresh("MAP_START_RECORDING,MAP_STOP_RECORDING,MAP_START_PREVIEW,MAP_STOP_PREVIEW");
+            if (!sFileName) {
+                ui.showToast("Error de cámara");
+            } else {
+                ui.showToast("Nuevo vídeo...");
+                ui.openFile(sFileName);
+            }
+        }
+    };
+    control.record(params);
+    self.MAP_RECORDING=1;
+    ui.refresh("MAP_START_RECORDING,MAP_STOP_RECORDING,MAP_START_PREVIEW,MAP_STOP_PREVIEW");
+}
+function stopRecording() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.stopRecording();
+}
+function startPreview() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.startPreview();
+}
+function stopPreview() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.stopPreview();
+}
+function isOpened() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    let bOpened = control.isCameraOpened();
+    ui.showToast("Abierta: " + bOpened);
+}
+function isAutoFocus() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    let bAutoFocus = control.isAutoFocus();
+    ui.showToast("Autofoco: " + bAutoFocus);
+}
+function getSupportedAspectRatios() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    let allAspectRatios = control.getSupportedAspectRatios();
+    let sMessage = "Relaciones de aspecto soportadas: ";
+    for (let i = 0;i < allAspectRatios.length;i++) {
+        sMessage = sMessage + "\n" + allAspectRatios[i];
+    }
+    ui.msgBox(sMessage, "Mensaje", 0);
+}
+function doSetOnCodeScanned() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.setOnCodeScanned(function(evento) {
+        let nResult = ui.msgBox("Valor: " + evento.data + "\nTipo: " + evento.type, "¿Código OK?", 4);
+        if (nResult == 6) {
+            return true;
+        } else {
+            return false;
+        }
+    });
+}
+/**
+ * Modifica el comportamiento de flash de la cámara.
+ *
+ * Valores posibles:
+ * 1) on: Siempre encendido al tomar una foto
+ * 2) off: Siempre apagado al tomar una foto
+ * 3) torch: Siempre encendido
+ * 4) auto: Encendido o apagado al tomar una foto dependiendo de lo que diga el
+ * sensor de luz
+ * 5) red_eye: Encendido o apagado al tomar una foto dependiendo de lo que diga
+ * el sensor de luz, en un modo especial que reduce los ojos rojos
+ */
+function doSetFlashMode(sFlashMode) {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.setFlashMode(sFlashMode);
+}
+function doToggleFlashMode() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    let sFlashMode = control.getFlashMode();
+    if (sFlashMode == "on") {
+        control.setFlashMode("off");
+        self.setFieldPropertyValue("MAP_TOGGLE_FLASH_MODE", "img", "flash-off.png");
+    } else if (sFlashMode == "off") {
+        control.setFlashMode("auto");
+        self.setFieldPropertyValue("MAP_TOGGLE_FLASH_MODE", "img", "flash-auto.png");
+    } else if (sFlashMode == "auto") {
+        control.setFlashMode("torch");
+        self.setFieldPropertyValue("MAP_TOGGLE_FLASH_MODE", "img", "flash-torch.png");
+    } else if (sFlashMode == "torch") {
+        control.setFlashMode("on");
+        self.setFieldPropertyValue("MAP_TOGGLE_FLASH_MODE", "img", "flash-on.png");
+    }
+    ui.refresh("MAP_TOGGLE_FLASH_MODE");
+}
+function doToggleCamera() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    let sCamera = control.getCamera();
+    if (sCamera == "front") {
+        control.setCamera("back");
+    } else if (sCamera == "back") {
+        control.setCamera("front");
+    }
+}
+function doToggleAutoFocus() {
+    let control = getControl("MAP_CAMERA");
+    if (!control) {
+        return;
+    }
+    control.setAutoFocus(!control.isAutoFocus());
+}
+function getControl(sPropName) {
+    let window = ui.getView(self);
+    if (!window) {
+        return null;
+    }
+    let control = window[sPropName];
+    if (!control) {
+        return null;
+    }
+    return control;
+}
+</code>
-  * Ítem de lista desordenadacontrol.setCamera("front");   para escoger entre la cámara trasera y la frontal