Skip to content

GitLab

N
nutrapharm_producto
Commit 37fbc1ef authored by Cristian Mauricio Diaz Canales's avatar Cristian Mauricio Diaz Canales 💬
Browse files
Options

ajuste css 

Implementación Html Manuel
Sin ultimos ajustes solicitados.
parent 1dbe58a3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1442 additions and 250 deletions
app/Resources/views/producto_final/base_final.html.twig
View file @ 37fbc1ef
......@@ -20,22 +20,46 @@
{% endblock %}
<!-- ================== BEGIN BASE JS ================== -->
<link
href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,700&display=swap"
rel="stylesheet">
<!-- ================== END BASE JS ================== -->
<!-- <h2>COMIENZA TU TRATAMIENTO CON INOVAGE</h2> -->
<div class="header-top">
<img class="img-responsive" src="{{asset('manuel/images/header-i.png')}}" alt="INOVAGE Selfie Nutrapharm" />
</div>
{% block head %}
{% endblock %}
</head>
<body>
</head>
<body>
<!-- end #header -->
<!-- begin #content -->
<div class="responsive-bar">
<div class="logo">
<img src="{{asset('manuel/images/logo-inovage-480x59.png')}}" alt="logo" />
</div>
<div id="menu-mobile" class="menu">
<h4>
<img src="{{asset('manuel/images/hamb-icon.svg')}}" width="28" style="float:right;">
</h4>
</div>
</div>
<nav>
<div class="logo">
<img src="{{asset('manuel/images/logo-inovage-480x59.png')}}"
alt="logo" />
</div>
<ul>
<li><a href="https://www.inovage.cl/selfie-test/">Selfie Test</a></li>
<li><a href="https://www.inovage.cl/como-funciona/">¿Cómo Actúa?</a></li>
<li><a href="https://www.inovage.cl/los-culpables/">Efecto</a></li>
<li><a href="#">
<i class="_mi dashicons dashicons-cart" aria-hidden="true" style="font-size:1.4em;"></i></a>
</li>
</ul>
</nav>
<div id="content" class="content">
{% block body %}
......@@ -45,9 +69,29 @@
<!-- end page container -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="{{ asset('backend/plugins/jquery/jquery-1.9.1.min.js')}}"></script>
{#<script src="{{ asset('backend/plugins/jquery/jquery-1.9.1.min.js')}}"></script>#}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--[if lt IE 9]>
<![endif]-->
<script type="text/javascript">
$(window).on('scroll', function () {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
/*menu button onclick function*/
$(document).ready(function () {
$('#menu-mobile').on("click", function () {
console.log("click");
$("nav ul").toggleClass("active")
})
})
</script>
<!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
......@@ -58,7 +102,7 @@
{% block jsApp %}
{% endblock %}
</body>
{% block docready %}
{% endblock %}
</body>
{% block docready %}
{% endblock %}
</html>
app/Resources/views/producto_final/camera_logic.html.twig 0 → 100644
View file @ 37fbc1ef
<img id="imagen_carga" class="img-responsive img-marco" {%if isMobile == 1 %} src="{{asset('manuel/images/selfie-alto-630px.jpg')}}" {% else %} src="{{asset('manuel/images/selfie-ancho-630px.jpg')}}" {% endif %} />
<div id="tomarFotoContainer" style="display:none;">
<div id="cameraContainer" class="camera" style="display: block">
<button id="startbutton"></button>
<video id="video">No se encuentra disponible una camara</video>
</div>
<canvas id="canvas" width="auto" height="auto">
</canvas>
</div>
<div id="output_img_inovage" class="output" style="display: none">
<img id="photo" width="100%" height="100%" alt="Foto Tomada por camara" src="">
</div>
<div id="subirFotoContainer" style="display:none">
<input type='file' id="imgInp" accept="image/*" />
</div>
<img id="imagenUsuario" width="100%" height="100%" style="display:none" src="#" alt="Imagen subida" />
app/Resources/views/producto_final/camera_logic_2.html.twig 0 → 100644
View file @ 37fbc1ef
<img id="imagen_carga" class="img-responsive img-marco-2" src="{{asset('manuel/images/selfie-p.jpg')}}" />
<div id="tomarFotoContainer" style="display:none;">
<div id="cameraContainer" class="camera" style="display: block">
<button id="startbutton"></button>
<video id="video">No se encuentra disponible una camara</video>
</div>
<canvas id="canvas" width="auto" height="auto">
</canvas>
</div>
<div id="output_img_inovage" class="output" style="display: none">
<img id="photo" width="100%" height="100%" alt="Foto Tomada por camara" src="">
</div>
<div id="subirFotoContainer" style="display:none">
<input type='file' id="imgInp" accept="image/*" />
</div>
<img id="imagenUsuario" width="100%" height="100%" style="display:none" src="#" alt="Imagen subida" />
app/Resources/views/producto_final/landing_comparacion_cambios.html.twig 0 → 100644
View file @ 37fbc1ef
{% extends 'producto_final/base_final.html.twig' %}
{% block head %}
<meta property="fb:app_id" content="{{facebookAppId}}" />
<meta property="og:url" content="{{urlSitio}}{{seccionComparacion}}?idp={{idp}}&us=0" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NutraPharm - Comparación Foto" />
<meta property="og:description" content="{{comentarioFinal}}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}_comparacion.png"/>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
{% endblock %}
{% block body %}
<div class="header-top-adaptable">
<img class="img-responsive desafio-inovage" src="{{asset('manuel/images/desafio-inovage.png')}}" alt="Desafio Inovage" />
<img class="img-responsive fondo-adaptable" src="{{asset('manuel/images/header-compara.jpg')}}" alt="Atrévete al desafío" />
</div>
<div class="app-container">
<div class="container-c">
<div class="marco-foto alargador-marco-foto">
<img class="img-responsive" src="{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}_comparacion.{{extComparacion}}" />
</div>
</div>
<div id="fb-root"></div>
<div id="containerFormulario" class="container-form">
<div>
<p class="control-label b txt-center">{{comentarioFinal}}</p>
<!-- <input id="comentarioFotoUsuario" class="barra-comentario" type="textarea" placeholder="Comentario..." /> -->
<!--<textarea id="comentarioFotoUsuario" class="barra-comentario" name="mytextarea" placeholder="Escribe tu Comentario"></textarea>-->
</div>
{#<div>
<button id="btnGuardar" onclick="iniciarProceso(event)" class="btn-guardar">Registra tu cambio</button>
</div>#}
<div>
<div class="rrss-icons">
<a href="#" id="buttonShare"></a>
</div>
{#<div class="txt-comparte">
Comparte con el hashtag <br><strong>#selfietestinovage</strong>
</div>#}
{#MENSAJES EXITO ERROR#}
{{ include('producto_final/mensaje-exito-error.html.twig') }}
{#MENSAJES EXITO ERROR#}
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
var url = '{{urlSitio}}{{seccionComparacion}}?idp={{idp}}';
var usuarioNutraPharm = "{{idp}}";
window.fbAsyncInit = function () {
FB.init({
appId: '{{facebookAppId}}',
status: true,
xfbml: true,
cookie: true,
version: 'v7.0'
});
}
function countCompartirFacebook(idUsuario) {
var url = "{{ path('nutrapharm_compartir_facebook') }}";
var formData = new FormData();
formData.append("idUsuarioNutrapharm", idUsuario);
$.ajax
({
type: "POST",
url: url,
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
statusCode: {
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
}
},
success: function (data) {
console.log("proceso finalizado...");
//writeMessage(data.msg, "success");
}
});
}
$("#buttonShare").click(function () {
console.log("compartiendo en facebook...");
FB.ui({
xfbml: true,
method: 'share',
href: url
}, function (response) {
console.log(response);
if (typeof response !== 'undefined') {
console.log('Comparación Compartido en Facebook.');
writeMessage("Compartido en Facebook!", "success");
countCompartirFacebook(usuarioNutraPharm);
} else {
console.log('Comparación No Compartido en Facebook.');
writeMessage("No se pudo compartir en Facebook. Intente nuevamente!", "error");
}
});
})
function iniciarProceso(event) {
event.preventDefault();
writeMessage("Iniciando proceso");
window.location.assign("{{path('nutrapharm_homepage')}}");
}
function writeMessage(msg, type) {
if (type === "success") {
$("#error-content-nutrapharm").html("");
$("#error-nutrapharm").hide();
$("#exito-content-nutrapharm").html(msg);
$("#exito-nutrapharm").show();
} else {
$("#exito-content-nutrapharm").html("");
$("#exito-nutrapharm").hide();
$("#error-content-nutrapharm").html(msg);
$("#error-nutrapharm").show();
}
}
</script>
{% endblock %}
app/Resources/views/producto_final/mensaje-exito-error.html.twig 0 → 100644
View file @ 37fbc1ef
<div>
<div id="exito-nutrapharm" class="alert-box success" style="display:none"><img class="icp" src="{{asset('manuel/images/success.png')}}"> <span id="exito-content-nutrapharm">Write your error message here.</span></div>
<div id="error-nutrapharm" class="alert-box error" style="display:none"><img class="icp" src="{{asset('manuel/images/error.png')}}"> <span id="error-content-nutrapharm">Write your success message here.</span></div>
</div>
src/AppBundle/Lib/Utiles.php
View file @ 37fbc1ef
......@@ -27,6 +27,18 @@ class Utiles {
return $log;
}
public static function isMobile($request) {
$useragent = $request->headers->get('User-Agent');
if (!$useragent) {
return false;
}
return (
preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i', $useragent) ||
preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($useragent, 0, 4))
);
}
public static function isMsisdn2($msisdn) {
// if(preg_match("/^[0-9]+$/", $msisdn) && strlen($msisdn) == 11)
if (is_numeric($msisdn) && strlen($msisdn) == 9)
......
src/NutrapharmBundle/Controller/DefaultController.php
View file @ 37fbc1ef
......@@ -30,7 +30,11 @@ class DefaultController extends Controller {
$facebookAppId = Utiles::getParametroConfiguracion("facebook_app_id");
$seccionInicio = Utiles::getParametroConfiguracion("seccion_formulario_inicial");
$dias = Utiles::getParametroConfiguracion("dias_comparacion");
return $this->render('producto_final/landing_producto.html.twig', array("urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "seccionInicio" => $seccionInicio, "dias" => $dias));
$isMobile = Utiles::isMobile($request);
$log->debug("Es Movil : $isMobile");
return $this->render('producto_final/landing_producto.html.twig', array("urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "seccionInicio" => $seccionInicio, "dias" => $dias, "isMobile" => $isMobile));
}
public function subirCambioAction(Request $request) {
......@@ -58,7 +62,7 @@ class DefaultController extends Controller {
$ext = $usuario->getUnuExtInicial();
return $this->render('producto/landing_producto_generar_comparacion.html.twig', array("idp" => $id, "extInicial" => $ext,"seccionGenerarCambios" => $seccionGenerarCambios ,"seccionComparacion" => $seccionComparacion, "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId));
return $this->render('producto_final/landing_producto_generar_comparacion.html.twig', array("idp" => $id, "extInicial" => $ext,"seccionGenerarCambios" => $seccionGenerarCambios ,"seccionComparacion" => $seccionComparacion, "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId));
}
public function comparacionAction(Request $request) {
......@@ -86,7 +90,7 @@ class DefaultController extends Controller {
$ext = $usuario->getUnuExtComparacion();
return $this->render('producto/landing_comparacion_cambios.html.twig', array("idp" => $id, "extComparacion" => $ext ,"seccionComparacion" => $seccionComparacion, "seccionInicial" => $seccionInicial, "comentarioFinal" => $comentarioFinal , "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "us"=>$us));
return $this->render('producto_final/landing_comparacion_cambios.html.twig', array("idp" => $id, "extComparacion" => $ext ,"seccionComparacion" => $seccionComparacion, "seccionInicial" => $seccionInicial, "comentarioFinal" => $comentarioFinal , "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "us"=>$us));
}
public function errorAction(Request $request){
......@@ -100,6 +104,49 @@ class DefaultController extends Controller {
return $this->render('producto/landing_error.html.twig', array("urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "seccionInicio" => $seccionInicio, "seccionError" => $seccionError));
}
public function preUploadAction(Request $request){
$log = Utiles::setLog('NutraPharmBundle\Controller\DefaultController:preUploadAction', 'nutrapharm/index');
$ua = $request->headers->get('User-Agent');
$ip = $request->getClientIp();
$uploadFile = $request->get("upload_file", 0);
$idNutrapharm = $request->get("id", null);
$paso = $request->get("paso",null);
$uploadDir = $this->getParameter('upload_dir');
$log->debug("Ingresando al landing de Nutrapharm... IP : $ip | UA : $ua| UPLOAD FILE : $uploadFile....");
if ($uploadFile == 1) {//foto subida
$log->debug("Creando variable de archivo...");
$file = $request->files->get('imagen');
if (empty($file)) {
$log->debug("No se subio un archivo de imagen válido...");
return new JsonResponse(array("msg" => "No se subio una imagen", "tipo" => UsuarioNutrapharm::ESTADO_FOTO_INICIAL), Response::HTTP_BAD_REQUEST, ['content-type' => 'application/json']);
}
} else {//foto tomada
$log->debug("Creando variable de archivo en base a foto tomada por el usuario...");
$file = $request->get("imagen", null);
}
$log->debug("Iniciando generación de archivo asociado al nuevo usuario...");
if ($uploadFile == 1) {
$log->debug("Procesando archivo fisico subido...");
$filename = $idNutrapharm ."temp_$paso". "." . $file->getClientOriginalExtension();
$file->move($uploadDir, $filename);
} else {
$log->debug("Procesando archivo tomado con dispositivo...");
$data = $this->getBase64Image($file);
$filename = $idNutrapharm ."temp_$paso". "." . $data[1];
$fpc = file_put_contents("$uploadDir/$filename", $data[0]);
}
$log->debug("escalando imagen en registro nuevo...");
$this->scaleAndCrop("$uploadDir/$filename");
$url = Utiles::getParametroConfiguracion("ruta_archivos_url");
$log->debug("Retornando Respuesta a Usuario | Respuesta : " . Response::HTTP_OK);
return new JsonResponse(array("id" => $idNutrapharm ,"url" => $url."".$filename), Response::HTTP_OK, ['content-type' => 'application/json']);
}
public function uploadAction(Request $request) {
$log = Utiles::setLog('NutraPharmBundle\Controller\DefaultController:uploadAction', 'nutrapharm/index');
$ua = $request->headers->get('User-Agent');
......@@ -192,21 +239,26 @@ class DefaultController extends Controller {
$usuarioNutraPharm->setUnuExtInicial($file->getClientOriginalExtension());
$usuarioNutraPharm->save();
$filename = $idNutrapharm . "." . $file->getClientOriginalExtension();
//$filename_temp = $idNutrapharm . "_temp." . $file->getClientOriginalExtension();
$file->move($uploadDir, $filename);
//$file->move($uploadDir, $filename_temp);
} else {
$log->debug("Procesando archivo tomado con dispositivo...");
$data = $this->getBase64Image($file);
$usuarioNutraPharm->setUnuExtInicial($data[1]);
$usuarioNutraPharm->save();
$filename = $idNutrapharm . "." . $data[1];
//$filename_temp = $idNutrapharm . "_temp." . $data[1];
$fpc = file_put_contents("$uploadDir/$filename", $data[0]);
//$fpc_temp = file_put_contents("$uploadDir/$filename_temp", $data[0]);
}
$log->debug("escalando imagen en registro nuevo...");
$this->scaleAndCrop("$uploadDir/$filename");
$log->debug("Retornando Respuesta a Usuario | Tipo : " . UsuarioNutrapharm::ESTADO_FOTO_ACTUALIZADA . " | Usuario : $idNutrapharm | Respuesta : " . Response::HTTP_OK);
return new JsonResponse(array("msg" => "La informacion ha sido ingresada con exito!", "tipo" => UsuarioNutrapharm::ESTADO_FOTO_ACTUALIZADA, "usuario" => $idNutrapharm), Response::HTTP_OK, ['content-type' => 'application/json']);
return new JsonResponse(array("msg" => "La informacion ha sido ingresada con exito! \n En 30 días más recibiras un correo para poder comparar tus cambios. ", "tipo" => UsuarioNutrapharm::ESTADO_FOTO_ACTUALIZADA, "usuario" => $idNutrapharm), Response::HTTP_OK, ['content-type' => 'application/json']);
} else if ($tipo == UsuarioNutrapharm::ESTADO_FOTO_ACTUALIZADA && $idUsuarioNutraPharm != null) {
//Actualizar informacion ya existente
$log->debug("Iniciando Actualizacion de Usuario $idUsuarioNutraPharm...");
......@@ -427,8 +479,12 @@ class DefaultController extends Controller {
$image_x = imagecreatefrompng($filename_x);
} elseif ($fileType_x == "jpeg" || $fileType_x == "JPEG") {
$image_x = imagecreatefromjpeg($filename_x);
}else{
$image_x = imagecreate($filename_x);
}
// Load images and then copy to destination image
if ($fileType_y == "png" || $fileType_y == "PNG") {
$image_y = imagecreatefrompng($filename_y);
......
src/NutrapharmBundle/Resources/config/routing.yml
View file @ 37fbc1ef
......@@ -10,6 +10,10 @@ nutrapharm_comparacion:
path: /muestra/cambio
defaults: {_controller: NutrapharmBundle:Default:comparacion}
nutrapharm_pre_upload:
path: /pre/upload/photo
defaults: { _controller : NutrapharmBundle:Default:preUpload}
nutrapharm_upload:
path: /upload/photo
defaults: { _controller: NutrapharmBundle:Default:upload }
......
web/frontend/js/capture-2.js
View file @ 37fbc1ef
(function () {
var width = 1200; // We will scale the photo width to this
var width = 630; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
......@@ -30,8 +30,30 @@
video.addEventListener('canplay', function (ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
console.log(video.videoHeight);
/*if (video.videoHeight > width) {
console.log("PORTRAIT");
width = 0;
height = 630;
width = video.videoWidth / (video.videoHeight / height);
console.log(width);
if (isNaN(width)) {
width = height / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}else {*/
console.log("LANDSCAPE");
height = video.videoHeight / (video.videoWidth / width);
console.log(height);
if (isNaN(height)) {
height = width / (4 / 3);
}
......@@ -42,6 +64,7 @@
canvas.setAttribute('height', height);
streaming = true;
}
/*}*/
}, false);
startbutton.addEventListener('click', function (ev) {
......@@ -62,6 +85,9 @@
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
//var fotoActual = $("#tomarFotoContainer");
//fotoActual.css("background-image", "url('')");
}
function takepicture() {
......@@ -74,12 +100,24 @@
var data = canvas.toDataURL('image/png');
console.log(data);
photo.setAttribute('src', data);
//var fotoActual = $("#tomarFotoContainer");
//var img = new Image();
//img.src = data;
//fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
var fotoActual = $("#imagen_carga");
var img = new Image();
img.src = data;
fotoActual.attr("src", img.src.replace(/(\r\n|\n|\r)/gm, "") );
fotoActual.show();
$("#tomarFotoContainer").hide();
$("#tomarFoto").html("Repetir Foto");
} else {
clearphoto();
}
$("#cameraContainer").hide();
$("#output_img_inovage").show();
//$("#output_img_inovage").show();
}
function showForm() {
......@@ -87,8 +125,9 @@
}
function hidePhotoButtons() {
$("#tomarFotoContainer").show();
$("#tomarFotoContainer").hide();
$("#subirFotoContainer").hide();
$("#startbutton").hide();
}
window.addEventListener('load', startup, false);
......
web/manuel/css/camera.css
View file @ 37fbc1ef
......@@ -9,50 +9,67 @@ and open the template in the editor.
*/
/* CSS comes here */
#video {
border: 1px solid black;
/* CSS comes here */
#video {
border:6px solid #f5a800; /*N*/
width: 100%;
height: 100%;
}
}
#photo {
#photo {
border: 1px solid black;
width: 100%;
height: 100%;
}
}
#canvas {
#canvas {
display: none;
}
}
.camera {
width: 100%;
display: inline-block;
}
.camera {
/* width: 100%; */
/* display: inline-block; */
margin: 0 auto 2em auto;
display:flex !important;
justify-content: center;
position:relative;
.output {
}
.output {
width: 100%;
display: inline-block;
}
}
#startbutton {
#startbutton {
display: block;
position: relative;
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 36px;
bottom: 1em;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0);
background: url('../images/camera-icon.svg') no-repeat center center;
border: 3px solid rgba(255, 255, 255, 1);
border-radius: 30px;
-ms-border-radius : 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-o-border-radius: 30px;
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
width: 60px;
height: 60px;
z-index: 100;
background-size: 35px;
}
.contentarea {
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
}
web/manuel/css/style.css
View file @ 37fbc1ef
This diff is collapsed.
web/manuel/images/camera-icon.svg 0 → 100644
View file @ 37fbc1ef
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(2.22156,0,0,2.22156,80.6008,69.8371)">
<path d="M0,-14.436L-3.055,-14.436C-3.969,-14.436 -4.703,-15.175 -4.703,-16.082C-4.703,-16.994 -3.969,-17.733 -3.055,-17.733L0,-17.733C0.91,-17.733 1.65,-16.994 1.65,-16.082C1.65,-15.175 0.91,-14.436 0,-14.436M-18.629,2.303C-23.883,2.303 -28.148,-1.96 -28.148,-7.215C-28.148,-12.475 -23.883,-16.739 -18.629,-16.739C-13.369,-16.739 -9.104,-12.475 -9.104,-7.215C-9.104,-1.96 -13.369,2.303 -18.629,2.303M1.314,-19.771L-28.861,-19.771C-30.248,-19.771 -31.375,-18.647 -31.375,-17.261L-31.375,2.824C-31.375,4.211 -30.248,5.335 -28.861,5.335L1.316,5.335C2.703,5.335 3.826,4.211 3.826,2.824L3.826,-17.261C3.824,-18.647 2.703,-19.771 1.314,-19.771" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(2.22156,0,0,2.22156,-1102.68,-1081.27)">
<rect x="504.793" y="494.958" width="7.219" height="2.619" style="fill:white;"/>
</g>
<g transform="matrix(-2.22156,0,0,2.22156,38.9989,63.8893)">
<path d="M0,-9.082C-2.506,-9.082 -4.539,-7.05 -4.539,-4.54C-4.539,-2.034 -2.506,0 0,0C2.506,0 4.539,-2.034 4.539,-4.54C4.539,-7.05 2.506,-9.082 0,-9.082" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>
web/manuel/images/face-icon.png
View replaced file @ 1dbe58a3 View file @ 37fbc1ef
web/manuel/images/face-icon.png

3.67 KB | W: | H:

web/manuel/images/face-icon.png

13.4 KB | W: | H:

web/manuel/images/face-icon.png
web/manuel/images/face-icon.png
web/manuel/images/face-icon.png
web/manuel/images/face-icon.png
  • 2-up
  • Swipe
  • Onion skin
web/manuel/images/hamb-icon.svg 0 → 100644
View file @ 37fbc1ef
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 45 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Mesa-de-trabajo1" serif:id="Mesa de trabajo1" transform="matrix(1,0,0,1,-8,-4)">
<rect x="8" y="4" width="45" height="45" style="fill:none;"/>
<g transform="matrix(1,0,0,1,-1,0.5)">
<g>
<g transform="matrix(1.95,0,0,2.45,-28.95,-24.3437)">
<rect x="21" y="15" width="20" height="2" style="fill:rgb(67,174,247);"/>
</g>
<g transform="matrix(1.95,0,0,2.45,-28.95,-13.2)">
<rect x="21" y="15" width="20" height="2" style="fill:rgb(67,174,247);"/>
</g>
<g transform="matrix(1.95,0,0,2.45,-28.95,-2.0563)">
<rect x="21" y="15" width="20" height="2" style="fill:rgb(67,174,247);"/>
</g>
</g>
</g>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment