Control Muestra QML
El formulario QML no tiene representación gráfica en tiempo de diseño. Tenemos que hacer el diseño mediante código o utilizar un editor externo como el que proporciona QT Creator.
El evento Timer del formulario ejecutará el manejador MOSTRAR_IMAGENES.
MOSTRAR_IMAGENES
var oForm = theRoot.dataView();
// Paramos el Timer que ha desencadenado el Evento de refresco
oForm.stopTimer()
// Ponemos a 1 el indicador que provoca en QML el Refresco
theRoot.setVar("LREFRESCAR",1)
Para interactuar con el componente QML y que éste muestre las imágenes ponemos a 1 la variable local LREFRESCAR.
El código QML, mediante un elemento Timer, comprueba cada 100mseg. la variable local LREFRESCAR y si vale 1 refresca los elementos imagen modelo y vestido.
Los elementos image del QML leen la imagen con el esquema 'data:image/png;base64' y de esta forma podemos embeber la imagen codificada en Base64.
MOSTRAR_IMAGENES.QML
// mostrar_imagenes.qml
import QtQuick 1.1
// El elemento principal es un rectángulo transparente
Rectangle {
id: root
width: 150; height: 350
color: "transparent"
// color: "#F0F0F0"
Item {
// Grupo de titulo y muestra
// La altura es la suma de los 2 item's
width: parent.width; height: titulo.height + muestra.height
// Se centra todo en el rectangle id: root
anchors.verticalCenter: parent.verticalCenter
Rectangle {
// Texto con fondo de color
id: titulo
width: parent.width; height: 20
color: "MistyRose"
border.width: 1
border.color: "Gainsboro"
// color: "transparent"
Text {
text: "▼ MUESTRA QML ▼"
anchors.fill: parent
//width: parent.width; height: 20
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "black"
font.family: "TAHOMA"
font.pixelSize: 13
font.bold : true
}
}
Item {
// Recuadro con la Muestra debajo de id: titulo con un espacio superior de 6px
id: muestra
height: fondo.height + 6
anchors.top: titulo.bottom
Item {
// Grupo de imágenes anclado en el bottom de id: muestra
height: fondo.height
anchors.bottom: muestra.bottom
Image {
id: fondo
source: 'data:image/png;base64,' + theRoot.varToString('CFONDO_B64')
}
Image {
id: modelo
source: ''
}
Image {
id: vestido
source: ''
}
}
}
}
Timer {
id: refresco
// Timer que fuerza el refresco de las imágenes
interval: 100; running: true; repeat: true
triggeredOnStart : true
onTriggered: { refrescar() }
}
function refrescar() {
// Esta función JS se ejecuta cada vez que se dispara el Timer QML
// El Timer del formulario contenedor pone a 1 el valor de la variable LREFRESCAR
// Asigna a las imágenes el valor base64
if (theRoot.varToBool("LREFRESCAR")) {
modelo.source = 'data:image/png;base64,' + theRoot.varToString('CNENE_B64');
vestido.source = 'data:image/png;base64,' + theRoot.varToString('CVESTIDO_B64');
}
}
}
Created with the Personal Edition of HelpNDoc: Easy EBook and documentation generator