HighCharts. Exportar imagen offline


([N3] pacosatu) #1

Hola.

Estoy usando HighCharts desde hace un tiempo y la verdad que es un producto excelente. Te olvidas por completo que Velneo en el campo gráfico es un auténtico erial.

Por supuesto surgen los problemas derivados de la desastrosa integración del Visor HTML con Velneo nativo. En este caso, el más importante es la imposibilidad de usar el menú de exportación de HighCharts, que permite imprimir el gráfico o generar una imagen (png, jpeg, pdf, …). Yo por lo menos no he conseguido que funcione.

He descartado definitivamente esta opción, que además solo funciona Online, porque depende de un servidor externo para generar la exportación.

Ahora estoy intentando ejecutar una exportación del gráfico de manera Offline usando librerías Javascript. Los resultados no son del todo satisfactorios en cuanto a calidad de la imagen.

Mi pregunta es ¿Cómo habéis resuelto vosotros la exportación offLine del gráfico de HihgCharts?

El objetivo es disponer de una imagen PNG/JPEG del gráfico para poder gestionarla de forma nativa con Velneo.

Saludos
Paco Satué


([N1] wikan) #2

Buenas Paco, lo que se me ocurre para que puedas hacerlo es usar http://phantomjs.org/

Tendrías que servir el html y usar el ejemplo rasterize y usar el fichero como necesites. No se si será posible renderizar directamente el código html, seguramente sí.
No se cuanto podría penalizarte en ejecución pero no debería notarse prácticamente.

http://phantomjs.org/screen-capture.html


([N3] pacosatu) #3

Hola Manuel.

Gracias por el aporte. No conocía esta utilidad y tiene muy buena pinta.
Voy a hacer pruebas y os cuento los resultados.

Saludos
Paco Satué


([N1] wikan) #4

Es un webkit embebido usando como javascript.
Sobre todo te permite automatización web, incluso hay un framework para hacer muchas cosas.

Yo lo probe y funciona, lo que no recuerdo si te sirve pasando directamente el fichero html.


([N3] pacosatu) #5

Hola Manuel.

Sí, en cuanto ví que estaba basado en QT5 y el Webkit me lancé a ello.

  • Funciona perfectamente en offline con ficheros HTML o de otro tipo.
  • Es un ejecutable con todo el framework autocontenido.

Tiene alguna pega:

  • El tamaño del fichero (46Mb) que es necesario descargar al cliente (no es grave, solo ocurre una vez).
  • Desgraciadamente, el Webkit ha sido descatalogado por QT, por lo tanto puede haber un futuro incierto para esta herramienta.
  • Me toca aprender otra ristra de comandos. Ya empiezo a estar un poco cansado de recurrir a herramientas externas a Velneo para resolver funcionalidades básicas.

En resumen, un magnífico ejemplo de lo que Velneo podría hacer con su control Visor HTML, integrando Webkit, el API y Javascript.

Saludos
Paco Satué


([N1] wikan) #6

Ya, supongo que al igual que Velneo tiene que buscar alternatias a Webkit, esto hará lo mismo. O harán ellos mismo el mantenimiento, no lo sé.

Me alegro que te haya servido, igualmente te sire para informes complejos que puedes montar en html y generar un pdf.


([N3] pacosatu) #7

Hola Manuel.

Tema resuelto.

Al final he optado por usar la librería javascript canvg.js que renderiza el gráfico de HighCharts en el canvas de HTML5.

Para este caso concreto de enlazar HighCharts con Velneo es la solución más sencilla y limpia que he encontrado.

La herramienta phantomjs la dejo para temas más complejos. Casualmente, es ésta la herramienta que usa HighCharts para la conversión remota de los gráficos, por algo será.

Podéis ver un ejemplo en el apartado “Imprimir HighCharts” de la siguiente aplicación:

   vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp 

Saludos y gracias por tu interés.
Paco Satué


([N1] percyleoncio) #8

Muchas gracias amigo Seh por la aportación


([N1] Manuel) #9

Gran aportación


([N3] frugulletti) #10

Buenos días Paco me parece excelente, entré a verla y tiene muy muy buena pinta, justo estaba buscando info al respecto ya que debo graficar algunas cosas con un desarrollo que estoy montando, ahora esa app la tienes como openapps o la vendes ?

Me gustaría saber para ver si la heredo en ves de sentarme a desarrollar desde cero todo eso…


([N3] pacosatu) #11

Hola frugulletti.

Me alegro que te haya gustado.
HighCharts es una opción perfecta para integrar los gráficos empresariales en las aplicaciones Velneo. El Visor HTML renderiza todos los tipos de gráfico y con los eventos javascript no hay problema.

Con la aplicación solo pretendo mostrar algunos ejercicios que yo realizo en mi aprendizaje de Velneo y de paso comprobar las posibilidades de Velneo. No es posible descargar el vin. En este caso he querido implementar la posibilidad de imprimir el gráfico desde Velneo y sin necesidad de conexión a Internet.

Tienes el código más importante disponible a través de la ayuda (Ctrl+F1).

Con HighCharts, por supuesto, tendrás que tener conocimientos básicos de HTML y javascript para entender el código y poder implementar correctamente la librería.

Cualquier consulta, por el foro, por favor.

Saludos
Paco Satué


([N3] frugulletti) #12

Ok perfecto, mil gracias amigo.


([N1] josemanuel) #13

Buenas, justamente llevo dos dias pegandome con el ejemplo de Paco y no se porque me devuelve un error de json.
Con el código :

importClass(“VImage”)
importClass(“VByteArray”)

var oByteArray = new VByteArray()
var oForm = theRoot.dataView()
var oImage = new VImage()
var oRegistro = new VRegister(theRoot)
oRegistro.setTable(“2c117rcg.vcd/GRAFICOS_SEL”)

// La URL del visor HTML -> CHREF_LINK contiene el string base64 de la imagen
// Mediante la clase VByteArray obtenemos el objeto Imagen
// Guardamos la Imagen en un campo Objeto de la tabla temporal GRAFICOS_SEL

cBase64 = theRoot.varToString(“CHREF_LINK”).replace(“data:image/jpeg;base64,”,"")

// Cargamos el Texto en Base64
var oTexto = new VByteArray()
oTexto.setText(cBase64)

// Obtenemos el ByteArray original del JPEG
var oByteArray = new VByteArray()
oByteArray.fromBase64(oTexto)
alert( oByteArray.toLatin1String() );

el alert me devuelve “ÿØÿà”.

Pensando y pensado que la culpa podria se mia y mirando el ejemplo de la documentacion hice este mismo con un jpg muy pequeño. Un dibujo solo rojo de pocos pixeles

importClass(“VImage”);
importClass(“VByteArray”);

// --------------------------------------------------------------------------------
// Convertir texto en base64 a Latin-1
// ------------------------------------

var ba64 = new VByteArray();
ba64.setText( “/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAAMAAkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==”);

var ba4 = new VByteArray();
ba4.fromBase64(ba64);

alert( ba4.toLatin1String() );

y el alerta me devuleve otra vez “ÿØÿà”.

¿Que puedo estar haciendo mal?

Muchas gracias.


([N3] pacosatu) #14

Hola josemanuel.

No veo cuál es el problema. El string Base64 es correcto y el ByteArray ba4 contiene los Bytes (0’s y 1’s) de la imagen jpeg.

Lo que no tiene sentido es hacer un alert(ba4.toLatin1String()) porque estás intentando mostrar como texto el contenido binario de una imagen. Los caracteres ÿØÿà son los 4 primeros bytes de cualquier jpeg que por supuesto no es texto legible.
Así que por favor, quita esos alert().

Además no veo JSON por ningún lado para que te devuelva un error de json.

Solo te queda:
if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API
—oRegistro.setFieldImage(“IMAGEN”,oImage) // guardar la imagen en un campo Objeto de Velneo
}

Saludos
Paco Satué


([N4] tecnico) #15

([N1] josemanuel) #16

1-importClass(“VImage”);
2-importClass(“VByteArray”);

// --------------------------------------------------------------------------------
// Convertir texto en base64 a Latin-1
// ------------------------------------

8-var ba64 = new VByteArray();
9-ba64.setText( “/9j/4AAQSkZJRgABAQEAYABgAAD10/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAAMAAkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==”);
10-
11-var ba4 = new VByteArray();
12-ba4.fromBase64(ba64);
13-
14-if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API
15-alert(“dentro”) // guardar la imagen en un campo Objeto de Velneo
16-}

me sale este error:
"Uncaught exception at /FIC1/GUARDAR_IMAGEN1:14: SyntaxError: Parse error
14 if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API
"

Gracias.


([N3] pacosatu) #17

Hola josemanuel.

Vamos a ver, el código no está completo, por eso da error.
El código completo lo tienes aquí o a través de Ctrl+F1 en la aplicación de ejemplo.

Coged uno de los miles de manuales que hay de javascript y dedicarle cuatro días, de lo contrario programar estas cosas se convierte en una pesadilla, a pesar de que son muy sencillas.

Saludos
Paco Satué


([N1] josemanuel) #18

Vale y muchas gracias.


([N3] ereitmann) #19

Hola paco, he reproducido tu ejemplo que tienes en la nube, el problema es que no puedo importar la imagen a la tabla y viendo el escript del manejador de evento “Guardar imagen” el cual he copiado y pegado como tu lo tienes, reproduciendo las variables y la tabla en memoria, pero cuando paso el depurador me salta un error en ese script (que no se como subsanarlo por que de java script no se nada y ando al tanteo de ensayo error) te paso la imagen del error que me da tu escript. tal vez puedas revisarlo si es que esta mal escrito, se que al apretar el boton del control html de exportar jpg, crea la imagen por que control html cambia al formato definido de la imagen y si quiero con el boton derecho me permite copiar esa imagen, pero al parecer no guarda el string base 64 en la variable CHREF_LINK por que he puesto un control de texto estatico para ver su contenido y este siempre esta vacio.
Gracias



([N3] pacosatu) #20

Hola ereitmann.

Para realizar estos ejercicios tienes que aprender primero Javascript y HTML como hemos hecho todos, de lo contrario escribir aplicaciones se convierte en una pesadilla. A esto se añade que Velneo no facilita en absoluto la depuración de código fuera del propio código nativo.

Revisa la sintaxis del código Javascript, le falta un paréntesis. En cuanto al código HTML que he utilizado es muy sencillo de entender.

Hay infinidad de manuales en Internet tanto de HTML como de Javascript. Empieza con ejemplos sencillos y siempre comprueba que son compatibles con el Visor HTML de Velneo.

Saludos
Paco Satué