[SOLUCIONADO] Crear planificador de espacios

jsusarevalo · #1 (**permalink**) 28/09/2013, 07:18

Buenas tardes y feliz sábado a tod@s!

Ya he preguntado por el foro de html pero me ha comentado que lo que busco tendría que hacerse con javascript o canvas. Ahí va mi necesidad.

Necesito crear un planificador de espacios para mi web, no se si se llama así exactamente lo que busco, pero es la definición más cercana que he sido capaz de encontrar, os explico mi idea y me decís si estoy en lo correcto o si debería buscar por otro concepto.

La idea es que el usuario que navegue por la web pueda añadir una imagen de su salón, edificio, habitación...en definitiva un espacio, y que posteriormente una vez aparezca en la pantalla, añada mi producto y lo ubique donde le plazca, teniendo una visión e idea de cómo quedaría el producto en su casa.

Sería algo parecido a lo que hay en esta [URL="http://www.eletubo.com/eletubo-en-tu-casa/"]web[/URL]. Alguien me puede ayudar?

Muchas gracias de antemano por vuestro tiempo y ayuda! Saludos!

maycolalvarez · #2 (**permalink**) 30/09/2013, 07:48

a eso lo llamamos realidad aumentada, en tu caso quizás no necesites canvas, lo que puedes hacer es superponer una capa (div) con CSS position absolute sobre la fotografía del espacio con tu producto, eso si, debe ser una imágen con fondo trasparente, sea gif o png.

además de canvas, puedes usar SVG

jsusarevalo · #3 (**permalink**) 01/10/2013, 14:30

Muchas gracias por tu ayuda! Alguna idea de como crear esta realidad aumentada de una manera fácil y sencilla? Existe alguna aplicación que lo permita?

maycolalvarez · #4 (**permalink**) 01/10/2013, 15:05

Cita:

Iniciado por jsusarevalo

Muchas gracias por tu ayuda! Alguna idea de como crear esta realidad aumentada de una manera fácil y sencilla? Existe alguna aplicación que lo permita?

creo que eso te lo respondí en el post anterior, sólo necesita superponer capas con CSS y usar un código de JS como domDrag

dAvidcA · #5 (**permalink**) 01/10/2013, 16:00

Hola jsusarevalo, toma como idea este ejemplo que hice de una oficina y la silla se puede mover.

Enlace: http://jsfiddle.net/dAvidcA/8jZBB/34/

Saludos.

jsusarevalo · #6 (**permalink**) 01/10/2013, 18:03

Muchísimas gracias dAvidcA!! Es justo lo que estaba buscando. He intentado implementarlo en mi la web, pero la silla (en mi caso he puesto otra imagen de prueba) ni se mueve ni se agranda o disminuye. Sin embargo, si me aparece el cursor encima con las 4 flechas como para moverlo, pero no lo permite. La opción de redimensionar no aparece. ¿Qué puede fallar? Gracias!

dAvidcA · #7 (**permalink**) 02/10/2013, 06:30

Cita:

Iniciado por jsusarevalo

Muchísimas gracias dAvidcA!! Es justo lo que estaba buscando. He intentado implementarlo en mi la web, pero la silla (en mi caso he puesto otra imagen de prueba) ni se mueve ni se agranda o disminuye. Sin embargo, si me aparece el cursor encima con las 4 flechas como para moverlo, pero no lo permite. La opción de redimensionar no aparece. ¿Qué puede fallar? Gracias!

En la página donde está el ejemplo, en la sección del lado izquierdo: "Frameworks & Extensions" puedes ver que se están usando las siguientes librerías (son indispensables para el movimiento):

1. JQuery 1.9.1 -> http://jquery.com/
2. jQuery UI 1.9.2 -> http://jqueryui.com/

Nota: No hay problema si usas versiones superiores.

Si no las deseas descargar (descargarlas es lo recomendable), puedes importar la versión online en tú página, poniendo lo siguiente en el <head></head> de tú página:

Código HTML:

Ver original<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

PS: Te invito a leer sobre el tema en las páginas de cada API.

Saludos

jsusarevalo · #8 (**permalink**) 02/10/2013, 08:57

Cita:

Iniciado por dAvidcA

En la página donde está el ejemplo, en la sección del lado izquierdo: "Frameworks & Extensions" puedes ver que se están usando las siguientes librerías (son indispensables para el movimiento):

1. JQuery 1.9.1 -> http://jquery.com/
2. jQuery UI 1.9.2 -> http://jqueryui.com/

Nota: No hay problema si usas versiones superiores.

Si no las deseas descargar (descargarlas es lo recomendable), puedes importar la versión online en tú página, poniendo lo siguiente en el <head></head> de tú página:

Código HTML:

Ver original<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

PS: Te invito a leer sobre el tema en las páginas de cada API.

Saludos

Muchísimas gracias! Ya está funcionando! Hago mía tu recomendación y leeré las páginas de cada API. Gracias.

Ahora solo me faltaría el incorporar un botón para que el usuario final pudiese añadir como fondo la imagen de su casa, salón...etc. Por otro lado, podría hacerse que apareciese la silla únicamente tras pulsar un botón?

Sugerencias? Gracias de antemano.

dAvidcA · #9 (**permalink**) 02/10/2013, 09:37

Con botón la había hecho inicialmente... :P

Aquí con botón: http://jsfiddle.net/dAvidcA/k7VKU/

Saludos.

jsusarevalo · #10 (**permalink**) 02/10/2013, 09:58

Cita:

Iniciado por dAvidcA

Con botón la había hecho inicialmente... :P

Aquí con botón: http://jsfiddle.net/dAvidcA/k7VKU/

Saludos.

Eres un máquina! Muchísimas gracias por tu ayuda.

Para que usuario puede cargar su imagen como background de fondo en lugar de la que tenemos, sabrías como hacerlo? Existe alguna función mediante la cual al pulsar el botón nos permita cambiar el fondo de una capa?

Gracias de nuevo!

jsusarevalo · #11 (**permalink**) 02/10/2013, 10:04

Cita:

Iniciado por dAvidcA

Con botón la había hecho inicialmente... :P

Aquí con botón: http://jsfiddle.net/dAvidcA/k7VKU/

Saludos.

Por cierto dAvidcA, he comprobado que si pulsas varias veces sobre el botón, te aparecen más sillas, pero estas no se pueden mover. A qué se debe? podría solucionarse?

Gracias de antemano

dAvidcA · #12 (**permalink**) 02/10/2013, 10:07

Ten en cuenta que la imagen la va a subir el usuario al servidor por lo que debe hacerse con PHP o algún lenguaje similar y ya una vez se tenga la imagen en el servidor, con Javascript se cambia el background de la clase #fondo en el CSS.

La idea no es "pedir y se concederá", es importante que intentes las cosas y preguntes con algo hecho. Toma éste código como un impulso que te damos.

Saludos.

jsusarevalo · #13 (**permalink**) 02/10/2013, 10:18

Cita:

Iniciado por dAvidcA

Ten en cuenta que la imagen la va a subir el usuario al servidor por lo que debe hacerse con PHP o algún lenguaje similar y ya una vez se tenga la imagen en el servidor, con Javascript se cambia el background de la clase #fondo en el CSS.

La idea no es "pedir y se concederá", es importante que intentes las cosas y preguntes con algo hecho. Toma éste código como un impulso que te damos.

Saludos.

Muchas gracias por los consejos dAvidcA. Se agradece este impulso. Sin duda volveré con algo más basándome en las premisas que me has dado.

Gracias!

dAvidcA · #14 (**permalink**) 02/10/2013, 10:59

Cita:

Iniciado por jsusarevalo

Por cierto dAvidcA, he comprobado que si pulsas varias veces sobre el botón, te aparecen más sillas, pero estas no se pueden mover. A qué se debe? podría solucionarse?

Gracias de antemano

Las sillas se repiten porque se está haciendo un append que inserta un contenido, en este caso un div con id=silla y a su vez a dicho id se están asignando los eventos .resizable() y .draggable() para el manejo de redimensión y arrastre respectivamente.

Por lo que todas las sillas tendrían el mismo id y el evento aplicaría solo a la primera (por eso solo se puede mover y redimensionar una).

Se puede resolver como se muestra en el siguiente enlace:

http://jsfiddle.net/dAvidcA/k7VKU/1/

* Se agrega la variable totalSillas y se incrementa según se agregue una silla, para el manejo individual.
* En la clase css #fondo .silla se cambia el position de relative a absolute para que al agregar muchas sillas no se salgan fuera del fondo.

Espero entiendas todo.

Saludos.

jsusarevalo · #15 (**permalink**) 02/10/2013, 11:35

Cita:

Iniciado por dAvidcA

Las sillas se repiten porque se está haciendo un append que inserta un contenido, en este caso un div con id=silla y a su vez a dicho id se están asignando los eventos .resizable() y .draggable() para el manejo de redimensión y arrastre respectivamente.

Por lo que todas las sillas tendrían el mismo id y el evento aplicaría solo a la primera (por eso solo se puede mover y redimensionar una).

Se puede resolver como se muestra en el siguiente enlace:

[URL="http://jsfiddle.net/dAvidcA/k7VKU/1/"]http://jsfiddle.net/dAvidcA/k7VKU/1/[/URL]

* Se agrega la variable totalSillas y se incrementa según se agregue una silla, para el manejo individual.
* En la clase css #fondo .silla se cambia el position de relative a absolute para que al agregar muchas sillas no se salgan fuera del fondo.

Espero entiendas todo.

Saludos.

Perfectamente explicado y entendido. Muchas gracias. Ya lo he implementado. Al principio no me aparecían las imágenes cuando cambiaba a absolute, pero era debido a que la capa que contiene el fondo no estaba puesta como relative. Ya está funcionando perfectamente.

Voy a darle vueltas a la subida de imágenes mediante php y te comento como va. Gracias

jsusarevalo · #16 (**permalink**) 02/10/2013, 13:06

Buenas noches! Para limpiar la capa de sillas he creado el siguiente código:

<script type="text/javascript">
$("#botoneliminar").click(function(){
$("#silla").remove();
});
</script>

y un botoneliminar, sin embargo no elimina :(

alguna ayuda?

jsusarevalo · #17 (**permalink**) 02/10/2013, 16:36

He conseguido que al pulsar el botón eliminar silla, desaparezca toda la div con el fondo, pero no consigo que solo se elimine la silla. Este es el código:

<script type="text/javascript">
var totalSillas=0;
$("#botonSilla").click(function(){
$("#seccion-elevador").append("<div id='silla"+totalSillas+"' class='silla'></div>");
$("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
totalSillas++;
});
</script>

<script type="text/javascript">
$('#btdel').on('click', function(){
$('#seccion-elevador').remove();
});
</script>

También he probado poniendo:

<script type="text/javascript">
$('#btdel').on('click', function(){
$('#silla').remove();
});
</script>

y

<script type="text/javascript">
$('#btdel').on('click', function(){
$("#seccion-elevador").remove("<div id='silla"+totalSillas+"' class='silla'></div>");
});
</script>

Pero no doy con ello.

Gracias!

jsusarevalo · #18 (**permalink**) 03/10/2013, 04:12

He visto que el tema está en estado Solucionado, alguna ayuda el error en el código para eliminar las sillas? Gracias,

dAvidcA · #19 (**permalink**) 03/10/2013, 07:02

Cita:

Iniciado por jsusarevalo

He conseguido que al pulsar el botón eliminar silla, desaparezca toda la div con el fondo, pero no consigo que solo se elimine la silla. Este es el código:

<script type="text/javascript">
var totalSillas=0;
$("#botonSilla").click(function(){
$("#seccion-elevador").append("<div id='silla"+totalSillas+"' class='silla'></div>");
$("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
totalSillas++;
});
</script>

<script type="text/javascript">
$('#btdel').on('click', function(){
$('#seccion-elevador').remove();
});
</script>

También he probado poniendo:

<script type="text/javascript">
$('#btdel').on('click', function(){
$('#silla').remove();
});
</script>

y

<script type="text/javascript">
$('#btdel').on('click', function(){
$("#seccion-elevador").remove("<div id='silla"+totalSillas+"' class='silla'></div>");
});
</script>

Pero no doy con ello.

Gracias!

Hola, tus ideas no están tan descabezadas, aquí las reuno para ayudarte:

Con opción de borrar:http://jsfiddle.net/dAvidcA/k7VKU/3/

* Se agregó en el interior del div de la silla el elemento <div class='sCerrar'>X</div> para cerrar.
* Se agregaron al CSS las clases #fondo .silla .sCerrar y #fondo .silla .sCerrar:hover para hacerlo un poco más "estético".
* Con jQuery se asigna el evento click a la clase sCerrar con instrucción para remover el elemento padre (en este caso el div de la silla): $(this).parent().remove();

Espero ya esté resuelto tu problema y éste ejercicio no te sirva solo a tí sino a mucha más gente.

Saludos.

jsusarevalo · #20 (**permalink**) 03/10/2013, 15:04

Cita:

Iniciado por dAvidcA

Hola, tus ideas no están tan descabezadas, aquí las reuno para ayudarte:

Con opción de borrar:[URL="http://jsfiddle.net/dAvidcA/k7VKU/3/"]http://jsfiddle.net/dAvidcA/k7VKU/3/[/URL]

* Se agregó en el interior del div de la silla el elemento <div class='sCerrar'>X</div> para cerrar.
* Se agregaron al CSS las clases #fondo .silla .sCerrar y #fondo .silla .sCerrar:hover para hacerlo un poco más "estético".
* Con jQuery se asigna el evento click a la clase sCerrar con instrucción para remover el elemento padre (en este caso el div de la silla): $(this).parent().remove();

Espero ya esté resuelto tu problema y éste ejercicio no te sirva solo a tí sino a mucha más gente.

Saludos.

Buenas noches dAvidcA! Muchísimas gracias por toda tu ayuda. Todo funciona a la perfección y tus explicaciones me han servido de mucho. Se agradece tu ayuda. Te mostraré el resultado final, pues aun estoy trabajando sobre cómo subir una imagen de fondo y que ésta se elimine automáticamente al cerrar la página.

Gracias!

jsusarevalo · #21 (**permalink**) 05/10/2013, 12:28

Hola dAvidcA! Ya he conseguido subir la imagen a una carpeta del servidor mediante php. Voy a buscar información sobre cómo cambiar el background de la clase #fondo en el CSS, pero necesito que se haga cuando el usuario pulsa el botón subir, es decir; que a la vez que la imagen se sube al servidor, se cambie en el fondo.

Muchas gracias por tu ayuda y buen fin de semana!

jsusarevalo · #22 (**permalink**) 09/10/2013, 16:00

alguna ayuda por favor? llevo dos días que no he conseguido avanzar nada! muchas gracias a todos!