Etiqueta sobre una imagen (label)

Hola!

Recien vi una imagen de una app en Appsheet donde colocan una etiqueta roja con una cantidad sobre una imagen (red label)

Imagino que esta insertada con un codigo SVG, alguien sabe como puedo aplicarlo?

Gracias

Any help?

Alguien con conocimientos de SVG?

Puedes cargar tu imagen original en un programa gratis como InkScape, añadir la etiqueta con un número, exportar el código SVG, buscar la parte del código que incluye la etiqueta, reemplazar el número con la expresión de AppSheet y concatenarla con el resto del código SVG.

1 Like

Gracias @Joseph_Seddik

Ya tengo el codigo SVG de la etiqueta, lo que necesito es agregarla a una columna de tipo IMAGE.
Cada imagen es un producto distinto, necesitaria saber donde agregar el codigo SVG de la etiqueta en esa columna.

En la app formula:

data:image/svg+xml;utf8, <svg xmlns=‘http://www.w3.org/2000/svg


Gracias @Joseph_Seddik

Quizas no me explique bien, lo voy a hacer paso a paso con imagenes.

Tengo una Tabla INVENTARIO con la columna [IMAGEN] que me permite subir una foto del producto cuando doy de alta un producto nuevo.

Dentro de la columna [IMAGEN] en la opcion APP FORMULA coloque el siguiente codigo SVG (imagen de una etiqueta - Tag)

data&colon;"image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>"

y la idea es que muestre las imagenes de esta manera (imagen editada)

Algo estoy haciendo mal ya que no muestra el SVG en la imagen de cada producto. Ademas me anula la carga de imagenes en el formulario de agregar productos.

OK. Entiendo que quieres dejar a los usuarios la posibilidad de cargar un imagen, luego al mismo imagen quieres añadir la etiqueta.

AppSheet no ofrece ninguna funcionalidad de procesamiento de imágenes, por lo tanto no existe una manera sencilla para hacerlo. Pero se puede hacer con Apps Script.

Yo lo haría de la siguiente manera:

  1. Después de cada carga de un imagen en la tabla, lanzo un script.

  2. El script hará lo siguiente:

    1. Identificar si el archivo de imagen añadido se trata de un imagen vector (svg, etc.) o bitmap (jpeg etc.). Se puede hacer de varias maneras, yo utilizaría el método getBlob() de la clase Image buscando “svg” en los primeros 50 caracteres por ejemplo.
    2. Si se trata de un bitmap, habrá que convertirlo en base64 utilizando los métodos de la clase Utilities. Si es un vector guardaría el código svg como tal.
    3. Después, el script generaría un código completo de svg, concatenando el texto de la imagen subida (en base 64 o vector), con el código svg de la etiqueta, y lo registrará en una nueva columna en la tabla.
  3. En todas las vistas de tu app (salvo el formulario), mostrarás está nueva columna generada por Apps Script.

Espero que esto te ayude.

Gracias @Joseph_Seddik

Muy interesante la idea, nunca aplique scripts en Appsheet.
Me podrias mandar alguna guia como hacerlo?

En mi caso, se sube una imagen bitmap y luego se agregaria el SVG (tag)

Aquí lo tienes:

Apps Script Tasks are now available: Call Apps Scr… - Page 6 - Google Cloud Community
Return Values in Apps Script Tasks - Page 3 - Google Cloud Community

Gracias como siempre @Joseph_Seddik

1 Like