Mostrar imagen desde una ruta en disco


([N3] pacosatu) #1

Hola.

Tengo una tabla donde uno de sus campos guarda la Ruta de la imagen en formato PNG (el formato PNG es el que permite transparencia).

Solo dispongo del control Edición de Objeto pero tengo que vincularle un campo de una tabla y además pierde la transparencia.

El único control no vinculado a datos y que muestra la imagen es el Botón (con SetIcon()) pero tienes limitaciones para escalar la imagen.

¿Cómo mostráis vosotros esas imágenes en un formulario? No me vale el control HTML.

Saludos
Paco Satué


([N1] pporlan) #2

Buenas Paco,

teóricamente con la nueva clase “VImageEdit” representa un control “Objeto dibujo”, entonces si utilizas VImage para leer la imagen de disco y se la aplicas al VImageEdit con setImage() ya lo tendrías.

Un saludo


([N1] pporlan) #3

He realizado una pequeña prueba, basada en el ejemplo de Velneo, el control “Objeto dibujo” hay que configurarlo como sólo lectura, y en código que carga la imagen activarlo y desactivarlo, así se evita que al interactuar con el control (click, doble click…) se borre la imagen.

importClass("VImage");

var path = theMainWindow.fileDialogGetOpenFileName( "Abrir imagen", "", "*.jpg;*.bmp;*.png");

if ( path.length > 0 )
{
    // Creamos una imagen y cargamos el fichero
    var img = new VImage();
 
    if ( img.load(path) )
    {
        // Cogemos el control "Objeto dibujo" IMG
        var edFoto = theRoot.dataView().control( "IMG" );
	// Lo desprotegemos
        edFoto.readOnly = 0;
        // Insertamos la imagen
        edFoto.setImage( img );
	// Lo volvemos a proteger
        edFoto.readOnly = 1;
    }
    else
        alert("No se ha podido cargar la imagen: " + path);
}

Un saludo
Pedro Porlán


([N3] pacosatu) #4

Hola Pedro.

Como ya te digo el control Objeto Dibujo (clase del API VImageEdit) tiene 2 incovenientes que invalidan para mí su uso en este caso: necesita tener vinculado un campo de una tabla y que solo maneja JPG cuando graba, por lo tanto pierde la transparencia.

Cuando el control Objeto Dibujo no tiene campo vinculado puedes mostrar una imagen pero se pierde en cuanto se refresca el formulario.

Saludos
Paco Satué


([N3] pacosatu) #5

Hola.

La Idea es poder cargar de forma dinámica imágenes con transparencia y mostrarlas en el formulario. La imagen a cargar dependerá del valor de un campo de la Ficha al estilo de lo que ya hacemos con la tabla estática. La pega es que las Tablas estáticas son eso, estáticas, y no podemos cambiar la imagen sin tener que parar Instancias de datos.

Os adjunto una imagen del Casillero donde cada formulario muestra un Sello de acuerdo al valor de un campo. En este caso he utilizado un objeto Botón cuyo icono se rellena desde un maestro a la tabla de sellos. Esta tabla de Sellos es como una Tabla estática pero que podemos editar dinámicamente sin tener que tocar el proyecto de Datos.

Saludos
Paco Satué



([N1] wikan) #6

A lo mejor te sirve @seh
En un cliente uso css para cargar la imagen de fondo de un formulario, quizás te valdría para mostrar el background del formulario en base al estado de la ficha.
Sería como lo tienes pero con la imagen de fondo


([N1] Juan) #7

Para un caso especifico, yo no las guardo en disco, pero si en un campo tipo objeto texto, previamente la imagen la convierto en Hexadecimal, y como se que es png o jpg, la recupero y la muestro en un visor HTML, pero en tu caso necesitas un sello de fondo para todo el formulario, de todas maneras te envio como lo he hecho.
Es una tabla de Pisos (jpg), Mesas y Tipos de Mesa (png).
En la rejilla de pisos editas y en su toolbar puedes definir las mesas de ese piso:

  • arrastrando y soltando dentro del area de la imagen del Piso.
  • para eliminar la mesa arrastrar la misma fuera del area de la imagen y se elimina automaticamente.
  • el texto de cada mesa se genera auto con el id de la tabla mesas pero puede ser editable dandole click y al final Enter.

Dejame intentar si puedo ponerlo por js como fondo del formulario.
Respecto a la solucion de css como es estatica y tienes 3 opciones podria ser la mas rapida.

imagen.rar (181 KB)


([N3] pacosatu) #8

Hola Manuel, Juan. Gracias por los aportes.

Bueno, lo que necesito es un tampón o sello y por lo tanto debe estar por encima de cualquier objeto del formulario. Así que descartamos tanto la imagen de fondo del formulario como el control HTML. Juan, si con Velneo nativo ya pierdo horas en estos temas, imagínate con QML que no hay absolutamente nada de documentación.

Como ya os he comentado el que mejor se comporta y más versátil es el control Botón. Se puede fijar una imagen tanto por CSS (background-image: url(“imagen.png”)) como por código JavaScript (función setIcon()).

Yo no comprendo al equipo de diseño de Velneo cuando para mostrar una simple imagen transparente en un formulario hay que recurrir a soluciones peregrinas.

Bien, manos a la obra.

  • Tenemos una tabla con los sellos guardados en codificación Base64.
  • Una función BYTEARRAY_TO_IMAGEN que coge la cadena Base64 y la convierte en una Imagen que mostraremos en el Botón.
  • El Botón CMD_SELLO tiene la propiedad Plano activada, Tamaño de Icono = Original y en diseño le asignamos un Icono temporal del mismo tamaño que la imagen a mostrar (esto es necesario para que la imagen se muestre bien).

Función BYTEARRAY_TO_IMAGEN


importClass("VImage");
importClass("VByteArray");
// Desde una cadena Base64 obtenemos una imagen en memoria
var oTexto = new VByteArray();
var oByteArray = new VByteArray();
var oImage = new VImage();
// Formulario contenedor
var oForm = theRoot.dataView();
// Cadena Base64 con la imagen
var cBase64 = theRoot.varToString("IMAGEN_BASE64");

// Cargamos el Texto en Base64
oTexto.setText(cBase64);
// Obtenemos el ByteArray con el contenido original de la imagen
oByteArray.fromBase64(oTexto);
// Objeto Botón
var oBoton = oForm.control("CMD_SELLO");
// Obtenemos el objeto Imagen
if (oImage.loadFromData(oByteArray,'PNG')) {
  // Mostramos la imagen en el Botón que hace de soporte
  oBoton.setIcon(oImage);
  if (false) {
    // Guardamos la imagen a disco si lo hacemos con CSS
    // Path de la imagen que grabamos en disco
    var cPathImagen = theRoot.varToString("CIMAGEN_BOTON_PATH");
    return oImage.save(cPathImagen);
  };
};

Con esta simple función ya tenemos un control Botón en el que podemos mostrar de forma dinámica cualquier imagen (jpg y png) con transparencia, que se superpone a los controles del formulario, no usamos imágenes en disco temporales, todo es en memoria y por último tenemos todos los eventos del Botón a nuestra disposición y de forma nativa. Es una “tabla estática” dinámica en tiempo de ejecución.

Allí donde podamos superponer un Botón tendremos una imagen transparente.

Es necesario ya un control Edición de Dibujo (VImageEdit) cuyo contenido podamos fijarlo desde un campo Objeto Dibujo (como ahora) o una Variable de tipo String con la cadena codificada en Base64.

Saludos
Paco Satué



([N3] GSI) #9

Para los ignorantes de js como se aplicaría esto en v7, un pequeño ejemplo por favor.


([N3] pacosatu) #10

Hola GSI.

Si quieres ver el efecto del Sello encima del formulario no es necesario JS.

  • Crea una tabla estática SELLOS con los Sellos (PNG y transparencia)
  • Vincula la tabla estática a un campo de cualquier tabla TBL
  • En el formulario de la tabla TBL coloca un control Objeto dibujo DIB encima de los controles (practica con los layouts para conseguirlo).
  • Asigna al contenido de DIB el valor #SELLOS.ICON

Y ya lo tienes, un sello encima del formulario que cambia con cada ficha.

Saludos
Paco Satué


([N1] VictorGT) #11

La verdad, el sello queda muy chulo, me apunto la idea para un futuro…

Solo me preocupa “un poco” :wink: la frase de Paco “practica con los layouts para conseguirlo”. Miedo me da…

Yo con los layouts se hacer algunas cosas (después de emplear mucha horas en pelearme con ellos), pero poner objetos uno encima del otro NO. Me parece que me estoy perdiendo algo…

¿Cuál es el truquillo? En un formulario con layout nunca podre amontonar objetos, el layout los “esparcirá”… ¿Hay que usar formularios sin layout? La verdad, ni siquiera lo he probado porque pensé que no se podía. Amontonar objetos sin layouts es fácil, ¿pero con layouts?.


([N2] AyudaVelneo) #12

Hola Víctor:

En este vídeo tutorial de mi canal de youtube explico paso a paso como dominar el control layout.

Un saludo


([N3] veldevelop) #13

Paco muy buen aporte y fantástico que nos facilites el como hacerlo. +10


([N2] ramiro) #14

Buenos días:

Aún no veo donde podría usarlo, pero esta idea es muy interesante y me he puesto a probarla. El caso es que no consigo que el sello se muestre por encima de los controles (ver imagen)

¿Cuál debe ser la disposición de los Layouts para conseguirlo…?

Saludos. Ramiro



([N3] pacosatu) #15

Hola Ramiro.

Las aplicaciones son infinitas, simplemente estamos hablando de superponer los controles en un formulario, alfo trivial en otros entornos.

Para que el Sello se muestre encima de los controles coloca éstos en un Layout de tipo Grid y enciérralo junto con el Sello en otro Layout de tipo Grid. El Sello debe superponerse un poco encima del Layout de los controles para que aparezcan apilados. Acompaño un adjunto con la forma de hacerlo.

Esto no está documentado por Velneo, así que como siempre a prueba y error.

Si te gustan los recortables, pongo otro adjunto con un ejemplo de modelos (niños) y vestidos para una típica aplicación de pedidos y venta textil.
A la derecha se han superpuesto 3 botones: 1º un fondo azul, 2º la selección del casillero de Niños y 3º la selección del casillero de Vestidos.

Otra aplicación sería aquella que necesita mostrar el despiece de los artículos y cómo quedan ensamblados.

Optimizando al máximo las imágenes para que el ByteArray sea lo más pequeño posible, podemos tener todos los gráficos guardados en campos Texto y de esta forma no trabajar con ficheros en disco, disponer de transparencia y añadir dinamismo a nuestra aplicación al no depender de los objetos estáticos de los proyectos.

Ahora solo falta que Velneo se dé cuenta que necesitamos YA un control Dibujo al que podamos asignar una imagen en formato ByteArray codificada en Hexadecimal o Base64.

Saludos
Paco Satué




([N4] carlitos) #16

+1


([N1] lsmsusvilla) #17

Buenos dias N3 estoy implementando en una aplicacion una marcha de sellos asi como pendiente, finalizado, aprobado etc. Podrias decirme los sellos que presentas en la imagen de donde los sacaste si son propios o estan disponibles en alguna web Gracias.


([N3] pacosatu) #18

Hola lsmsusvilla.

Los Sellos efectívamente son de diseño propio y de uso interno.
Me imagino que podrás localizarlos en alguna librería gráfica de Internet.
También es sencillo crearlos a tu gusto con cualquier herramienta gráfica.

Saludos
Paco Satué