• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wartość z input range do funkcji onload w czasie rzeczywistym.

0 głosów
135 wizyt
pytanie zadane 2 lipca 2020 w JavaScript przez Anrea Anelo Nowicjusz (180 p.)

Witam! Chciałbym mieć wartość z input range w funkcji onload żeby zmieniała się w czasie rzeczywistym. Mam takie cos(używam vanilli i opencv.js):

<input type="range" min="0" max="179" oninput="myFunction(this.value);">

imgElement.onload = () => {
   let array = [TUTAJ CHCE WARTOSC Z RANGE,2,3,4];
}

Z moimi umiejętnościami moge zrobić tak, że wartość aktualizuje sie tylko w trakcie onload, albo puszczenie tej tablicy w funkcji pozwala na aktualizacje tej wartosci w czasie rzeczywistym:

function myFunction(e){
    let array = [parseInt(e),2,3,4];
}

Tylko niewiem jak zrobić, żeby działało to w funkcji onload. 

Z góry dziękuje za pomoc smiley

komentarz 2 lipca 2020 przez Comandeer Guru (568,880 p.)
Hm, a możesz opisać, co chcesz uzyskać? Jaki jest faktyczny problem? Bo tutaj raczej pytasz o konkretne rozwiązanie. I szczerze, nie bardzo rozumiem, o co Ci chodzi.
komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)

Dziękuje za odpowiedź!

To jest z opencv.js, Tak to wyglada gdybym nie chciał podawac wartosci w czasie rzeczywistym:

imgElement.onload = () => {
let ARRAY= [1,2,3,4]
let low = new cv.Mat(src.rows, src.cols, src.type(), ARRAY);
}

Niestety potrzebuje kontrolowac to za pomoca input range, i chodzi o to żeby w ARRAY pod wartosc np. 1 podstawic value z input range .

komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)
let fullArray = [];
function inputValueChanged(){
  let value = parseInt(document.querySelector('.input1').value)
  fullArray = [value,2,3,4];
  console.log(fullArray)
}
imgElement.onload = () => {
inputValueChanged();
let ARRAY = fullArray;
let low = new cv.Mat(src.rows, src.cols, src.type(), ARRAY);
}

Tu mam cały kod i problem jest taki ze nie dziala to w czasie rzeczywistym. Dopiero jak podmienie zdjecie (czyli funkcja imgElement.onload sie odtworzy) zmienia sie wartosc z input range 

komentarz 2 lipca 2020 przez ScriptyChris Mędrzec (180,980 p.)

A co konkretnie masz na myśli przez "w czasie rzeczywistym"? Skoro na onload uzupełniasz tablicę tablicę fullArray i robisz to też przy pomocy funkcji myFunction (handlerem oninput) w momencie przesuwania suwaka input[type="range"], to w czym jeszcze jest problem?

komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)
Chodzi o to że w funkcji onload wczytywany jest obraz, i teraz chce aby w momencie przesuwania suwaka obraz zmienial swoje wlasciwosci "w czasie rzeczywistym".

Na chwilę obecną działa to tak że przesuwam suwak nic sie nie dzieje, i dopiero gdy wczytam ponownie obrazek to zostaje przypisana ta wartosc ktora byla w danym momencie.

1 odpowiedź

+1 głos
odpowiedź 2 lipca 2020 przez Comandeer Guru (568,880 p.)

Ok, rozumiem, że chcesz, żeby to, co dzieje się w onload, działo się też przy zmianie wartości suwaka.

Zatem najsensowniej byłoby to przenieść do osobnej funkcji (albo do inputValueChanged) i wywoływać ją zarówno w onload, jak i przy zmianie wartości pola. Coś typu:

function inputValueChanged(){
  let value = parseInt(document.querySelector('.input1').value)
  const fullArray = [value,2,3,4];
  console.log(fullArray)
  let low = new cv.Mat(src.rows, src.cols, src.type(), ARRAY);
}
imgElement.onload = inputValueChanged;
document.querySelector('.input1').oninput = inputValueChanged;

 

komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)
Dziękuje za propozycje rozwiązania jednak niestety chodzi o to, że nie moge tego tak zrobić ponieważ musze podać jeszcze 4 wartosci z 4 suwaków do tej tablicy (ten kod tak napisałem w celu uproszczenia tego o co mi chodzi) a w przypadku tego rozwiązania mam dostęp do wartości tylko z jednego suwaka.
komentarz 2 lipca 2020 przez Comandeer Guru (568,880 p.)

Można je przecież podać, analogicznie jak dla pierwszego suwaka (czyli element.value).

 

komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)

Racja nie pomyślałem, że wystarczy dodać te samą funkcje do kolejnego inputa. Rzeczywiście teraz wszystko działa jednak na początku odrzucałem takie rozwiązanie dlatego że teraz wszystko wolno chodzi dlatego, że za każdym razem gdy rusze suwakiem wszystkie polecenia z openCV.js musza sie wykonac w funkcji inputValueChanged. Dlatego zależalo mi na odzieleniu tego, żeby w funkcji imgElement.onload zmieniały sie tam tylko parametry z tablicy. Teraz tak wyglada ta funkcja i powoduje straszne zwiechy:

inputValueChanged = () => {
    let src = cv.imread(imgElement);
    let dst = new cv.Mat();
    cv.cvtColor(src, dst, cv.COLOR_BGR2HSV);
    let value = parseInt(document.querySelector('.input1').value)
    let valuetwo = parseInt(document.querySelector('.two').value)
    fullArray = [value,valuetwo,3,4];

    let low = new cv.Mat(src.rows, src.cols, src.type(), fullArray);
    cv.inRange(src, low, high, dst);

    cv.imshow('canvasOutput', dst);
    src.delete(); dst.delete(); low.delete(); high.delete();
}

Tych poleceń z openCV.js nie  jestem wstanie rodzielić ( jak na mój poziom "programowania") Czy jest wgl. szansa żeby móc zmieniać te wartosci tak jak chciałem na początku i nie przenosic tego do osobnej funkcji?

1
komentarz 2 lipca 2020 przez Comandeer Guru (568,880 p.)

Wtedy musiałbyś jakoś odpalać to rysowanie – i to asynchronicznie, żeby tak nie wieszało, hmm…

Osobiście użyłbym tu chyba czegoś w stylu debounce, żeby niepotrzebnie tego nie przerysowywać wiele razy.

komentarz 2 lipca 2020 przez Anrea Anelo Nowicjusz (180 p.)

Dziękuje za pomoc, spróbuje "pogrzebać" teraz z debounce może sie uda smiley

Podobne pytania

0 głosów
2 odpowiedzi 113 wizyt
pytanie zadane 3 maja 2019 w JavaScript przez MrxCI Dyskutant (8,280 p.)
0 głosów
1 odpowiedź 85 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,530 p.)
+1 głos
2 odpowiedzi 85 wizyt
pytanie zadane 7 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,880 p.)

88,328 zapytań

136,921 odpowiedzi

305,575 komentarzy

58,599 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...