Browse Source

Implement low quality highlighting

better-rectangles
Tissevert 8 months ago
parent
commit
ae3ba9e32b
4 changed files with 16 additions and 4 deletions
  1. +4
    -0
      gui.css
  2. +1
    -1
      index.html
  3. +3
    -2
      src/ALTO.js
  4. +8
    -1
      src/Main.js

+ 4
- 0
gui.css View File

@ -26,3 +26,7 @@ html, body {
font-size: 0.99em;
margin: 0;
}
.String.lowQuality {
background: #a4ddfd;
}

+ 1
- 1
index.html View File

@ -9,7 +9,7 @@
<body>
<div id="toolbar">
<label for="inputFile">Charger un fichier ALTO</label><input id="filePicker" type="file" name="inputFile" accept="text/xml,.xml"/>
<label for="wcThreshold">Seuil de qualité</label><input type="number" min="0" max="1" step="0.01" value="0.5"/>
<label for="wcThreshold">Seuil de qualité</label><input id="thresholdInput" type="number" min="0" max="1" step="0.01" value="0.5"/>
</div>
<div id="workzone">
</div>


+ 3
- 2
src/ALTO.js View File

@ -19,7 +19,7 @@ function appendTo(element) {
return function(e) {element.appendChild(e);};
}
function display(ALTODoc) {
function display(ALTODoc, thresholdInput) {
var printSpace = Element.make(ALTODoc.querySelector('Page PrintSpace'));
Element.setPrintSpace(printSpace);
workzone.style.height = Element.printSpace.pxHeight + 'px';
@ -53,8 +53,9 @@ function display(ALTODoc) {
function makeString(parentElement) {
return function(string) {
var wc = string.getAttribute('WC');
var dom = Dom.make('span', {
class: "String",
class: (wc < thresholdInput.value ? ["lowQuality"] : []).concat("String"),
id: string.getAttribute('ID'),
textContent: string.getAttribute('CONTENT')
});


+ 8
- 1
src/Main.js View File

@ -2,6 +2,7 @@ import * as Async from UnitJS.Async;
import ALTO;
var filePicker = document.getElementById('filePicker');
var thresholdInput = document.getElementById('thresholdInput');
var currentALTOFile = null;
filePicker.addEventListener('change', function() {
@ -10,8 +11,14 @@ filePicker.addEventListener('change', function() {
ALTO.load(filePicker.files[0]),
Async.map(function(ALTOFile) {
currentALTOFile = ALTOFile;
ALTO.display(currentALTOFile);
refresh();
})
)
);
});
thresholdInput.addEventListener('change', refresh);
function refresh() {
ALTO.display(currentALTOFile, thresholdInput);
}

Loading…
Cancel
Save