Input range dynamische Variable Potrace/Livepreview

[lukme]

Hallo liebes Forum,

ich arbeite momentan an einem Projekt, wo ich mit dem Javascript-Port von Potrace

http://kilobtye.github.io/potrace/

arbeite.
Ich habe vor eine Live-Preview/Render Funktion zu implementieren. Es soll für verschiedene Variablen Input-Range Elemente verwendet werden, das SVG nach der Änderung des Wertes/onchange neuberechnet werden.
Nun bin ich soweit, dass ich die Verbindung zwischen Input-Range und der Variable hergestellt habe - wenn ich die Input Value von z.B. 20 vorgebe, wird das Bild mit diesem Wert gerechnet. Bei Änderung des Wertes tut sich jedoch noch nichts. Was mache ich falsch? Wie kann ich dieses Problem lösen?

<input id="tolerance" value="4" min="0" max="30" step="0.5" type="range" onchange="rerender();" >
<div id="svgdiv"> </div>

//Funktion zur direkten Berechnung bei Image-Upload
function handleFiles(files) {
  Potrace.loadImageFromFile(files[0]);
  Potrace.process(function(){
    displaySVG(1);
  });
}
//Anzeigen der fertig berechneten SVG
function displaySVG(size, type){
  var svgdiv = document.getElementById('svgdiv');
  svgdiv.style.display = 'inline-block';
  svgdiv.innerHTML = "<p>Result:</p>" + Potrace.getSVG(size, type);
}
//Meine Funktion zur Neuberechnung des Bildes
function rerender(){
    Potrace.loadImageFromFile(files[0]);
    Potrace.process(function(){
    displaySVG(1);
  });
}

Und noch meine Verknüpfung zum genannten Wert aus der potrace.js

turdsize: parseInt(document.getElementById("tolerance").value),

Ich freue mich über jegliche Hilfe.

Gruß
lukmorf

 

[kkapsner]

Du musst in dem onchange den Wert des <input> schon neu auslesen und an das potrace.js übergeben. Denn das

turdsize: parseInt(document.getElementById("tolerance").value),

liest nur den aktuellen Wert aus und stellt keine logischen/programmiertechnisch Verbindung her.

 

[lukme]

Hi, wie stelle ich denn die Verbindung dazu her?

 

[kkapsner]

Das geht gar nicht. Wie ich oben schon geschrieben hab': du musst in dem onchange den Wert neu auslesen und an das potrace übergeben.

 

[lukme]

Ich stehe komplett auf dem schlauch. Beim Input also etwas wie onchange="this.value" ?

 

[kkapsner]

Nein.

Ich kenne mich mit potrace gar nicht aus, aber irgendwie sowas wie:

POTRACE_VARIABLE.turdsize = parseInt(this.value, 10);

- - - Aktualisiert - - -

oder

POOTRACE_VARIABLE.setTurdsize(parseInt(this.value, 10));