agorum.docFormView

Dieses Widget liest den Dokumententext pro Bereich aus einem Dokument aus, um den Dokumententext in einer eigenen Oberfläche zu verwenden.

Verwendung

let aguila = require('common/aguila');

let docFormView = aguila.create({
  type: 'agorum.docFormView',
  height: 800,
  width: 600    
});

docFormView;

Events

marked (Propertystruktur)

Löst aus, sobald ein Benutzer auf dem angezeigten Dokument einen Bereich wählt.

Der übergebene Wert ist eine Propertystruktur, bestehend aus Informationen bezüglich der Markierung auf dem Dokument.

Wert in der Propertystruktur
confidence	Definiert die Qualität der extrahierten Informationen des markierten Bereichs. Je höher der Wert, desto besser das Ergebnis und die Qualität. Der Wertebereich reicht von 0 (ungenügende Qualität) bis 100 (perfekte Qualität).
text	Definiert extrahierte Informationen aus dem markierten Bereich. Sie können diesen Wert auch über das Event markedText auslesen.
region	Definiert tiefergehende Informationen über die Position und Größe des markierten Bereichs. Sie können diesen Wert auch über das Event markedRegion auslesen.

Beispiel

docFormView.on('marked', marked => {
  // TODO Implement marked logic
});

markedText (String)

Löst aus, sobald ein Benutzer auf dem angezeigten Dokument einen Bereich wählt.

Der übergebene Wert ist der Text, den das System in dem markierten Bereich auslesen kann.

Beispiel

docFormView.on('markedText', marked => {
  // TODO Implement marked text logic
});

markedRegion (Propertystruktur)

Löst aus, sobald ein Benutzer auf dem angezeigten Dokument einen Bereich wählt.

Der übergebene Wert ist eine Propertystruktur, bestehend aus Informationen bezüglich des markierten Bereichs.

Wert in der Propertystruktur
startPage	Definiert die Seitennummer, auf der der markierte Bereich beginnt.
endPage	Definiert die Seitennummer, auf der der markierte Bereich endet.
height	Definiert die Höhe des markierten Bereichs.
width	Definiert die Breite des markierten Bereichs.
top	Definiert den Startpunkt des markierten Bereichs, gesehen von der Startseite aus oben.
left	Definiert den Startpunkt des markierten Bereichs, gesehen von der Startseite aus links.

Beispiel

docFormView.on('markedRegion', markedRegion => {
  // TODO Implement marked region logic
});

mouseDown/mouseUp (Propertystruktur)

Löst aus, sobald ein Benutzer auf dem angezeigten Dokument eine Maustaste drückt oder loslässt.

Das System übergibt als Parameter eine Struktur mit folgenden Werten.

Wert in der Struktur	Beschreibung
x/y	Definiert die docform-Koordinaten des Mauszeigers auf dem Dokument (Ursprung links oben, Wertebereich von 0 bis 1).
page	Definiert die Seite, auf der das Ereignis stattgefunden hat.
button	Definiert die Maustaste, die gedrückt / losgelassen wurde. 0 Linke Maustaste 1 Mittlere Maustaste 2 Rechte Maustaste

Beispiel

docFormView.on('mouseDown', event => {
  // TODO: handle the mouseDown event
});

docFormView.on('mouseUp', event => {
  // TODO: handle the mouseUp event
});

Parameter

id (String)

Definiert die Id des Dokuments, das das System über die DocFormView anzeigt und ausliest.

Die Id direkt beim Erstellen des Widgets mitgeben

let docFormView = aguila.create({
  type: 'agorum.docFormView',
  height: 800,
  width: 600,
  id: ObjketId
});

Die Id nach dem Erstellen des Widgets setzen

let docFormView = aguila.create({
  type: 'agorum.docFormView',
  height: 800,
  width: 600
});
docFormView.id = ObjektId;

page (Numeric)

Definiert die dargestellten Seiten des geladenen Dokuments.

Wenn Sie die Seite zu Beginn des Dokuments nicht näher spezifizieren, lautet die Seite beim Abfragen des Parameters 0.
Wenn Sie eine Seitenanzahl angeben, geben Sie vorzugsweise 1 an. Das bedeutet, dass das System die Seite 1 mit 1 und Seite 2 mit 2 angibt.
Standard: 0

Die anzuzeigende Seite direkt beim Erstellen des Widgets mitgeben

let docFormView = aguila.create({
  type: 'agorum.docFormView',
  height: 800,
  width: 600,
  id: objectId,
  page: 2
});

Die anzuzeigende Seite nach dem Erstellen des Widgets setzen

let docFormView = aguila.create({
  type: 'agorum.docFormView',
  height: 800,
  width: 600,
  id: objectId
});

docFormView.page = 2;

highlights (Propertystruktur)

Hebt die übergebenen Bereiche in der DocFormView farblich hervor.

Das System erwartet als übergebenen Wert ein Array mit Elementen folgenden Formats.

Wert	Beschreibung
height	Definiert die Höhe des zu markierenden Bereichs.
width	Definiert die Breite des zu markierenden Bereichs.
top	Definiert den oberen Punkt des zu markierenden Bereichs, gesehen vom oberen Rand der Startseite.
left	Definiert den linken Punkt des zu markierenden Bereichs, gesehen vom linken Rand der Startseite.
startPage	Definiert die Seite, auf der die Markierung beginnt.
endPage	Definiert die Seite, auf der die Markierung endet.
primary	Legt ein Highlight-Element als das primäre Element fest. Nach einer Änderung an diesem Parameter springt die Ansicht automatisch auf die Seite des primären Highlights und scrollt es so weit wie möglich in die Bildmitte. Sie können eine Navigation durch mehrere Highlights ermöglichen, etwa für die Behandlung von mehreren Treffern bei der Suche innerhalb eines Dokuments.

Beispiel

docFormView.highlights = [
  {
    startPage: 1,
    endPage: 1,
    height: 0.05,
    width: 0.22,
    top: 0.08,
    left: 0.09
  },
  {
    startPage: 2,
    endPage: 2,
    height: 0.08,
    width: 0.3,
    top: 0.61,
    left: 0.12,
    primary: true
  }
];

Funktionen

keine

Beispiel

let aguila = require('common/aguila');

// AON
let aon = {
  type: 'agorum.hbox',
  height: 800,
  width: 1250,
  items: [
    {
      type: 'agorum.docFormView',
      flexible: true,
      name: 'docFormView'
    },
    {
      type: 'agorum.vbox',
      border: true,
      items: [
        {
          type: 'agorum.single',
          title: 'Extracted information',
          height: 400,
          width: 500,
          items: [
            {
              type: 'agorum.textArea',
              name: 'markedText',
            }
          ]
        },
        {
          type: 'agorum.vbox',
          title: 'Marked area information',
          items: [
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionStartPage',
              label: 'Start page:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionEndPage',
              label: 'End page:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionHeight',
              label: 'Height:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionWidth',
              label: 'Width:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionTop',
              label: 'Top:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'markedRegionLeft',
              label: 'Left:'
            },
            {
              type: 'agorum.textDisplay',
              name: 'confidence',
              label: 'Confidence:'
            }
          ]
        },
        {
          type: 'agorum.hbox',
          title: 'Page handling',
          items: [
            {
              type: 'agorum.spacer',
              flexible: true
            },
            {
              type: 'agorum.button',
              name: 'previousPage',
              text: 'Previous page'
            },
            {
              type: 'agorum.textDisplay',
              name: 'currentPage',
              label: 'Current page:'
            },
            {
              type: 'agorum.button',
              name: 'nextPage',
              text: 'Next page'
            },
            {
              type: 'agorum.spacer',
              flexible: true
            }
          ]
        }
      ]
    }
  ]
};

// Dialog
let dialog = aguila.create(aon);

// UI Elements
let docFormView = dialog.down('docFormView');
let markedTextUi = dialog.down('markedText');
let markedRegionStartPage = dialog.down('markedRegionStartPage');
let markedRegionEndPage = dialog.down('markedRegionEndPage');
let markedRegionHeight = dialog.down('markedRegionHeight');
let markedRegionWidth = dialog.down('markedRegionWidth');
let markedRegionTop = dialog.down('markedRegionTop');
let markedRegionLeft = dialog.down('markedRegionLeft');
let confidence = dialog.down('confidence');
let currentPage = dialog.down('currentPage');
let previousPage = dialog.down('previousPage');
let nextPage = dialog.down('nextPage');

// Functions
function resetInformationFields() {
  docFormView.highlight = {startPage: 0, endPage:0, height: 0, width: 0, top: 0, left: 0};
  markedRegionStartPage.value = null;
  markedRegionEndPage.value = null;
  markedRegionHeight.value = null;
  markedRegionWidth.value = null;
  markedRegionTop.value = null;
  markedRegionLeft.value = null;
  confidence.value = null;
  markedTextUi.value = null;
}

// Events
docFormView.on('marked', marked => {
  confidence.value = marked.confidence;
  docFormView.highlight = marked.region;
});

docFormView.on('markedText', markedText => {
  markedTextUi.value = markedText;
});

docFormView.on('markedRegion', markedRegion => {
  markedRegionStartPage.value = markedRegion.startPage;
  markedRegionEndPage.value = markedRegion.endPage;
  markedRegionHeight.value = markedRegion.height;
  markedRegionWidth.value = markedRegion.width;
  markedRegionTop.value = markedRegion.top;
  markedRegionLeft.value = markedRegion.left;
});

previousPage.on('clicked', () => {
  let page = docFormView.page;
  if (page > 1) {
    let newPage = page - 1;
    docFormView.page = newPage;
    currentPage.value = newPage;
    resetInformationFields();
  }
});

nextPage.on('clicked', () => {
  let page = docFormView.page;
  let newPage = page + 1;
  docFormView.page = newPage;
  currentPage.value = newPage;
  resetInformationFields();
});

// Load object to display
docFormView.id = Id of Object which should be used in the docform view 
docFormView.page = 1;
currentPage.value = 1;

// Present dialog to user
dialog;