Asynchroniczne wczytywanie obrazków

Asynchroniczne wczytywanie obrazków
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 9 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10056
0

Jakoś tak

index.html

Kopiuj
<html>
<body>
<span id="value"></span>
<img id="image1"/>
<img id="image2"/>

<script>
const span = document.getElementById("value");

const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");

fetchIteratively(data => {
  span.innerText = data.text;
  const images = data.images; // tutaj będzie to co jest w pliku JSON
  console.log(images);
  image1.src = images[0];
  image2.src = images[1];
});

function fetchIteratively(callback) {
  fetchValue(data => {
    callback(data);
    setTimeout(() => fetchIteratively(callback), 5000);
  });
}

function fetchValue(callback) {
  fetch('/values.php')
    .then(response => response.json())
    .then(data => callback(data));
}

</script>
</body>
</html>

Oraz values.php:

Kopiuj
if (file_exists("file.txt")) {
  $text = file_get_contents("file.txt");
}
else {
  $text = "";
}

if (file_exists("images.json")) {
  $file = json_decode(file_get_contents("images.json"), true);
  $images = $file['images'];
} else {
  $images = [];
}

echo json_encode([
  'text' => $text,
  'images' => $images
]);

Oraz images.json:

Kopiuj
{
  "images": ["obrazek1.png", "obrazek2.png"]
}

Teraz jak chcesz wrzucić nowy obrazek, to po prostu uploadujesz obrazek o nazwie powiedzmy obrazek-nowy.png - on się jeszcze nie wyświetli. Ale wtedy zmieniasz images.json na np "images": ["obrazek1.png", "obrazek-nowy.png"] i wtedy już się powinien zmienić.

edytowany 7x, ostatnio: Riddle
Waran3
O mamusiu, bez Ciebie bym tego jeszcze przez tydzień nie zrobił. :-) Jest mała literówka w <img id="image1" /> powninno być w jednej linii "image2.
Riddle
Tak, powinno być image2. Poprawiłem. Pisane z palca, nie uruchamiałem tego.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Mam jakiś błąd którego nie mogę zlokalizować:

Kopiuj
Uncaught (in promise) TypeError: images is undefined
Riddle
Dodaj console.log(data); i zobacz co tam jest.
Waran3
Object { text: "robo (json)2" } Taki napis mam w pliku.
Riddle
@Waran3: Poprawiłeś plik .php który wstawiłem? W nim też są zmiany.
Waran3
Oczywiście...tak jak by nie działała ta linia: const images = data.images; Może nie widzi tego images.json...chociaż mam go w głównym katalogu.
Waran3
Teraz przestało w ogóle działać: Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Odpaliłem w drugiej przeglądarce (Chrome):

Kopiuj
br />
<b>Fatal error</b>:  Uncaught Error: Cannot use object of type stdClass as array in C:\xampp\htdocs\robo\values.php:11
Stack trace:
#0 {main}
  thrown in <b>C:\xampp\htdocs\robo\values.php</b> on line <b>11</b><br />

Linia 11...
screenshot-20220603135251.png

edytowany 2x, ostatnio: Waran3
Riddle
Poprawiłem kod PHP. Sorry, jak mówiłem pisane z palca.
Waran3
No co Ty! Wielkie dzięki. Tylko teraz obrazki są ale tekstu nie czyta. Wyświetla [object object] .
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Teraz nie czyta ( nie wyświetla poprawnie ) pliku txt.
Chyba dlatego że w pliku values.php $file się miesza....tak na moje oko ;-)

Mała korekta z mojej strony:

Kopiuj
if (file_exists("kotlin/wynik.txt")) {
  $text = file_get_contents("kotlin/wynik.txt");// Zmiana na $text
}
else {
  $text = "";// Zmiana na $text
}

if (file_exists("images.json")) {
  $file = json_decode(file_get_contents("images.json"), true);
  $images = $file['images'];
} else {
  $images = [];
}

echo json_encode([
  'text' => $text, // Zmiana na $text
  'images' => $images
]);

I śmiga !!! :-)

edytowany 7x, ostatnio: Waran3
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Jeszcze pytanie za 100 punktów.
Czy na stronie www mogę mieć kłopoty z działaniem JSON,a?
Pytam bo aktualnie mam.:-)
W sensie, że czegoś tam może brakować ?
Myślałem, że to kwestia ścieżek ale wydaje się, że nie....bo niby to sprawdziłem.
Mam na konsoli taki błąd:
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Zwykły html chodzi ;-)
http://maciekk.pl/robo/index2.html

A strona z JSONem nie.
http://maciekk.pl/robo/obrazki.html

Z AJAXem też działa:
http://maciekk.pl/robo/index.html

EDIT podobno na tym serwerze jest PHP 4 więc może to jest przyczyną. :-)

Edit 2. Potwierdzam. Na innym serwerze z nowszym oprogramowaniem hula!

edytowany 6x, ostatnio: Waran3
CH
JSON to tylko format przesylania danych z tym nie mozna miec klpotow
Waran3
No ale wywalało błąd JSONa...a chodziło o PHP :-) jak to zwykle bywa z komunikatami.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Pytanie pomocnicze.
Chodzi mi o przesyłanie danych przez JSONa.

Kopiuj
echo json_encode([
  'array' => $arr_all,
  'images' => $images
]);

Jak bym chciał przesłać klika array albo images to jak to zapisać ?
Dokładałem kolejne linijki ale to wydaje się nie działać
.

edytowany 1x, ostatnio: Riddle
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 9 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10056
2
Waran3 napisał(a):

Pytanie pomocnicze.
Chodzi mi o przesyłanie danych przez JSONa.

Kopiuj
echo json_encode([
  'array' => $arr_all,
  'images' => $images
]);

Jak bym chciał przesłać klika array albo images to jak to zapisać ?
Dokładałem kolejne linijki ale to wydaje się nie działać
.

O to Ci chodzi?

Kopiuj
echo json_encode([
  'array' => $arr_all,
  'images1' => $images,
  'images2' => $images,
  'images3' => $images,
  'images4' => $images,
]);

albo

Kopiuj
echo json_encode([
  'array' => $arr_all,
  'images' => [
    $images1,
    $images2,
    $images3,
    $images4, 
  ]
]);
edytowany 2x, ostatnio: Riddle
Waran3
No niby tak robiłem...tylko nie dokładnie tak ;-) Myślałem że po lewej stronie jest typ 'images' a po prawej różne zmienne. I niby tak jest ale użyłem nawiasów [].
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Program przeszedł trochę transformacji i znowu coś mi nie działa :-)
I znowu ten JSON :-)

Program mam zapisany w 3 plikach:
index.html
values_wyniki.php
obrazki.js

index.html w większości to div'y
i wywołanie obrazki.js:

Kopiuj

    <p class = "rozgrywka1"> #1</p>
    <p class = "rozgrywka2"> #2</p>
    <p class = "rozgrywka3"> #3</p>
    <p class = "rozgrywka4"> #4</p>
    <p class = "rozgrywka5"> #5</p>


</div> 

<script src="obrazki.js"></script>

</body>
</html>

js wrzucam na wszelki wypadek w całości:

Kopiuj
const span = document.getElementById("value");

const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");

var s1 = document.getElementById("sedzia_1");
var s2 = document.getElementById("sedzia_2");
var s3 = document.getElementById("sedzia_3");

fetchIteratively(data => {
  span.innerText = data.array;
  const images = data.images; // tutaj będzie to co jest w pliku JSON
  console.log(images);
  console.log(data);
//   image1.src = images[0];
//   image2.src = images[1];
//   const arr = data.array;
//   s1 = arr[0];
//   s2 = arr[1];
//   s3 = arr[2];
// console.log("s1= " +s1);
// console.log("s2= " +s2);
// console.log("s3= " +s3);

// if (s1 == 1){
// document.getElementById("kafelek_lewy_1").style.backgroundColor = "red";    
// console.log("s1= " +s1);
// }
// else{
//   document.getElementById("kafelek_lewy_1").style.backgroundColor = "blue";    
// console.log("s1= " +s1);
// }
// if (s1==0){
//   document.getElementById("kafelek_lewy_1").style.backgroundColor = "white";    
// }


});

function fetchIteratively(callback) {
  fetchValue(data => {
    callback(data);
    setTimeout(() => fetchIteratively(callback), 5000);
  });
}

function fetchValue(callback) {
  fetch('/robo/values_wyniki.php')
    .then(response => response.json())
    .then(data => callback(data));
}

no i fragment values_wyniki.php

Kopiuj
//dla sedziego 3
$szukanaFraza = "*$sedziowie[2]*";// szukamie pliku z nazwa pierwszego sedziego
print("szukanaFraza= $szukanaFraza<br>"); //np. *Maciekk*
$katalog= 'wyniki/final/';
$lista = glob($katalog.$szukanaFraza);//$lista - tablica ze siezka do znalezionego pliku
$znalezionyPlik = $lista[0]; // znaleziony plik ze sciezka dostepu
print_r ("lista= $lista<br>");
print("znalezionyPlik= $znalezionyPlik<br>");
$arr_sedzia3 = file_get_contents("$znalezionyPlik");
print_r ("arr_sedzia1= $arr_sedzia1<br>");

$arr_all = array($arr_sedzia1,$arr_sedzia2,$arr_sedzia3);
print_r("arr_all = $arr_all");


  if (file_exists("images.json")) {
    $file = json_decode(file_get_contents("images.json"), true);
    $images = $file['images'];
    print_r("images= $images<br>");
  } else {
    $images = [];
  }
  
  echo json_encode([
    //'array' => $arr_all,
    'images' => $images
  ]);

Na stronie index.html ( konsola), mam błąd:
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

PoREmowałem podejrzane rzeczy ale błąd ciągle się wyświetla.

echo json_encode daje taki wynik:
{"images":["breck_1.jpg","breck_2.jpg"]}

edytowany 2x, ostatnio: Waran3
Riddle
Wyrzuć całkiem print_r().
Waran3
Wyrzucone...nie pomogło
Riddle
Wyrzuć też print().
Waran3
Wyrzucone :-)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
chomikowski
CH
chomikowski
CH
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:449
1
Kopiuj
<p class = "rozgrywka1"> #1</p>
    <p class = "rozgrywka2"> #2</p>
    <p class = "rozgrywka3"> #3</p>
    <p class = "rozgrywka4"> #4</p>
    <p class = "rozgrywka5"> #5</p>

NaRpierw zacznijmy od tego ze klasa jest zawsze jedna a ID sie roznia wiec musisz zapisac to tak

Kopiuj
    <p id = "rozgrywka1" class="rozrywka"> #1</p>
    <p id = "rozgrywka2" class="rozrywka"> #2</p>
    <p id = "rozgrywka3" class="rozrywka"> #3</p>
    <p id = "rozgrywka4" class="rozrywka"> #4</p>
    <p id = "rozgrywka5" class="rozrywka"> #5</p>
edytowany 4x, ostatnio: chomikowski
Zobacz pozostałe 13 komentarzy
Waran3
span.innerText = data.array; - no tutaj czytałem przekazana tablicę i już to działało. Zakomentowałem //const span = document.getElementById("value");
Waran3
Trochę błądzę jeszcze z tym jsonem :-)
Waran3
Teraz jest :span is not defined
Riddle
Używasz zmiennej która jest nie zdefiniowana
CH
niezdefiniowana piszemy razem bo to przymiotnik.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

To jeszcze raz:

index.html

Kopiuj
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styleDance.css" >
</head>

<body>
    




    
    <img src="jpg/breck_1.jpg" alt="zawodnik po lewej"  class="fotoBox left" >
   
    <div class="box2">
        <img src = "jpg/pftu_niebieski_waski.png" >
    </div>


<img src="jpg/breck_1.jpg" alt="zawodnik po prawej"  class="fotoBox right" >


<div class="container2">
    
        <p class = "box zawodnik1"> ZAWODNIK 1</p>
   
    <div class="box wynik1"> 0 </div>

    <div class="box wynik2"> 2 </div>

        <p class = "box zawodnik2"> ZAWODNIK 2</p>


        <p class = "sedzia1"> Sedzia 1</p>
        <p class = "sedzia2"> Sedzia 2</p>
        <p class = "sedzia3"> Sedzia 3</p>

      
    <div class = "kafelek_lewy_1" ></div>
    <div class = "kafelek_srodkowy_1" ></div>
    <div class = "kafelek_prawy_1" ></div>

    <div class = "kafelek_lewy_2" ></div>
    <div class = "kafelek_srodkowy_2" ></div>
    <div class = "kafelek_prawy_2" ></div>

    <div class = "kafelek_lewy_3" ></div>
    <div class = "kafelek_srodkowy_3" ></div>
    <div class = "kafelek_prawy_3" ></div>

    <div class = "kafelek_lewy_4" ></div>
    <div class = "kafelek_srodkowy_4" ></div>
    <div class = "kafelek_prawy_4" ></div>

    <div class = "kafelek_lewy_5" ></div>
    <div class = "kafelek_srodkowy_5" ></div>
    <div class = "kafelek_prawy_5" ></div>



    <p class = "rozgrywka1"> #1</p>
    <p class = "rozgrywka2"> #2</p>
    <p class = "rozgrywka3"> #3</p>
    <p class = "rozgrywka4"> #4</p>
    <p class = "rozgrywka5"> #5</p>
    

    

</div> 

<script src="obrazki.js"></script>




</body>
</html>

obrazki.js

Kopiuj
const span = document.getElementById("value");

const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");

var s1 = document.getElementById("sedzia_1");
var s2 = document.getElementById("sedzia_2");
var s3 = document.getElementById("sedzia_3");

fetchIteratively(data => {
  span.innerText = data.array;
  const images = data.images; // tutaj będzie to co jest w pliku JSON
  console.log(images);
  console.log(data);
//   image1.src = images[0];
//   image2.src = images[1];
//   const arr = data.array;
//   s1 = arr[0];
//   s2 = arr[1];
//   s3 = arr[2];
// console.log("s1= " +s1);
// console.log("s2= " +s2);
// console.log("s3= " +s3);

// if (s1 == 1){
// document.getElementById("kafelek_lewy_1").style.backgroundColor = "red";    
// console.log("s1= " +s1);
// }
// else{
//   document.getElementById("kafelek_lewy_1").style.backgroundColor = "blue";    
// console.log("s1= " +s1);
// }
// if (s1==0){
//   document.getElementById("kafelek_lewy_1").style.backgroundColor = "white";    
// }


});

function fetchIteratively(callback) {
  fetchValue(data => {
    callback(data);
    setTimeout(() => fetchIteratively(callback), 5000);
  });
}

function fetchValue(callback) {
  fetch('/robo/values_wyniki.php')
    .then(response => response.json())
    .then(data => callback(data));
}

values_wyniki.php

Kopiuj
<?php

//odczyt nazw sedziow
if (file_exists("wyniki/final/sedziowie.txt")) {
  $sedziowie = file_get_contents("wyniki/final/sedziowie.txt");
}
else {
  $sedziowie ="";
}

$sedziowie = explode(PHP_EOL,$sedziowie); // utworzenie tablicy z nazwami sedziow

// $katalog= 'wyniki/final/';
// // czytanie danych dla wszytskich sedziow po kolei
// foreach ($sedziowie as $nazwaSedziego)
// {
//   print("***************$nazwaSedziego***<br>");
//   if ($nazwaSedziego == "")
// break;

// $szukanaFraza = "*$nazwaSedziego*";// szukamie pliku z nazwa sedziego
// print("nazwaSedziego= $nazwaSedziego<br>");
// print("szukanaFraza= $szukanaFraza<br>");

// $lista = glob($katalog.$szukanaFraza);//$lista - tablica ze siezkami do znalezionych plikow
// $znalezionyPlik = $lista[0]; // bedzie tylko jednen znaleziony plik
// echo "$znalezionyPlik<br>";


// $arr1 = file_get_contents("$znalezionyPlik"); // tworzenie tablicy dla kazdego z sedziow
// print_r("arr1= $arr1<br>");
//}

//dla sedziego 1
$szukanaFraza = "*$sedziowie[0]*";// szukamie pliku z nazwa pierwszego sedziego
$katalog= 'wyniki/final/';
$lista = glob($katalog.$szukanaFraza);//$lista - tablica ze siezka do znalezionego pliku
$znalezionyPlik = $lista[0]; // znaleziony plik ze sciezka dostepu
$arr_sedzia1 = file_get_contents("$znalezionyPlik");


//dla sedziego 2
$szukanaFraza = "*$sedziowie[1]*";// szukamie pliku z nazwa pierwszego sedziego
$katalog= 'wyniki/final/';
$lista = glob($katalog.$szukanaFraza);//$lista - tablica ze siezka do znalezionego pliku
$znalezionyPlik = $lista[0]; // znaleziony plik ze sciezka dostepu
$arr_sedzia2 = file_get_contents("$znalezionyPlik");


//dla sedziego 3
$szukanaFraza = "*$sedziowie[2]*";// szukamie pliku z nazwa pierwszego sedziego
$katalog= 'wyniki/final/';
$lista = glob($katalog.$szukanaFraza);//$lista - tablica ze siezka do znalezionego pliku
$znalezionyPlik = $lista[0]; // znaleziony plik ze sciezka dostepu
$arr_sedzia3 = file_get_contents("$znalezionyPlik");


$arr_all = array($arr_sedzia1,$arr_sedzia2,$arr_sedzia3);



  if (file_exists("images.json")) {
    $file = json_decode(file_get_contents("images.json"), true);
    $images = $file['images'];
  } else {
    $images = [];
  }
  
  echo json_encode([
    'array' => $arr_all,
    'images' => $images
  ]);
  
?>

CSS nie wrzucam :-)
( zbyt wiele prób, spróbuj za chwilę - nieco irytujące )

edytowany 1x, ostatnio: Riddle
Riddle
Nie używaj zamykającego ?> w PHP
Waran3
Wyciąłem ale nie wiem dlaczego ;-)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 9 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10056
0

@Waran3: no robisz const span = document.getElementById("value");, ale nie masz żadnego obiektu który ma id="value".

Waran3
No właśnie pomyślałem o tym... ale nie wydaje mi się żeby taki obiekt był wcześniej...a to jest od początku.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Nie wiem ale sam to wstawiłeś ;-) i wszystko fajnie działało.
screenshot-20220608160424.png

Mózg mi się lasuje muszę przerwać na trochę to gapienie się w monitor :-)

Wstawiłem do index.html:

Kopiuj
<body>
    

    <span id="value"></span>

i poszło ;-) ale kurde, nie rozumiem dlaczego.

edytowany 1x, ostatnio: Waran3
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
chomikowski
CH
chomikowski
CH
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 2 lata
  • Postów:449
1

Musisz zorbic od poczatku linijka po linijce bo teraz jest bagno

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Wszystko śmiga ale lokalnie ( symulacja serwera XAMPP)
Jak wrzucę pliki na serwer i odpalę stronę to cześć rzeczy się nie odświeża.
Zauważyłem taką zależność, że jak dane mam na serwerze:

Kopiuj
{
    "images": ["breck_1.jpg", "breck_2.jpg"] ,
    "zawodnicy": ["GonzoBonzo", "SpeedyTweedy"] 
}

i jak je zmienię to na stronie pojawi się aktualizacja.

Tak przekazuję dane i wszytko co przechodzi tędy odświeża się

Kopiuj
 echo json_encode([
    'array' => $arr_all,
    'arraySedziowie'=> $sedziowie,
    'images' => $images,
    'zawodnicy' => $zawodnicy
  ]);

Natomiast wszytko co zrobię już po stronie strony www (java scrypt), nie chcę się odświeżyć.

To fragment funkcji która przetwarza wszystkie dane które mają się odświeżyć:

Kopiuj
fetchIteratively(data => {
  span.innerText = data.array;
  const images = data.images; // tutaj będzie to co jest w pliku JSON
  const zawodnicy = data.zawodnicy;
//  console.log(data);
//   image1.src = images[0];
//   image2.src = images[1];
  const arr = data.array;
  const arrSedziowie = data.arraySedziowie;
  sedzia1 = arrSedziowie[0]
  sedzia2 = arrSedziowie[1]
  sedzia3 = arrSedziowie[2]
  document.getElementById("sedzia1").innerHTML = sedzia1; // podstawianie nazwy sedziego1  
  document.getElementById("sedzia2").innerHTML = sedzia2; // podstawianie nazwy sedziego2  
  document.getElementById("sedzia3").innerHTML = sedzia3; // podstawianie nazwy sedziego3  
  
  
  zawodnik1 = zawodnicy[0];
  zawodnik2 = zawodnicy[1]; 
  //console.log(zawodnik1);
  //console.log(zawodnik2);

  document.getElementById("zawodnik1").innerHTML = zawodnik1 ;
  document.getElementById("zawodnik2").innerHTML = zawodnik2 ;
  

  s1Wynik = arr[0][0]; //tablica sedzia1 1/2  1-red , 2-blue
  s1Runda = arr[0][1];
  s1OnOff = arr[0][2]; //0-Off , 1-On

  s2Wynik = arr[1][0]; //tablica sedzia2
  s2Runda = arr[1][1];
  s2OnOff = arr[1][2]; //0-Off , 1-On
  
  s3Wynik = arr[2][0]; //tablica sedzia1
  s3Runda = arr[2][1];
  s3OnOff = arr[2][2]; //0-Off , 1-On 


   



if(s1OnOff == 0 && s2OnOff == 0 && s3OnOff == 0)
{
  document.getElementById("rozgrywka5").style.color = 'black';
  document.getElementById("rozgrywka4").style.color = 'black';
  document.getElementById("rozgrywka3").style.color = 'black';
  document.getElementById("rozgrywka2").style.color = 'black';
  document.getElementById("rozgrywka1").style.color = 'black';

  document.getElementById("kafelek_lewy_1").style.backgroundColor = 'black';
  document.getElementById("kafelek_lewy_2").style.backgroundColor = 'black';
  document.getElementById("kafelek_lewy_3").style.backgroundColor = 'black';
  document.getElementById("kafelek_lewy_4").style.backgroundColor = 'black';
  document.getElementById("kafelek_lewy_5").style.backgroundColor = 'black';
  
  document.getElementById("kafelek_srodkowy_1").style.backgroundColor = 'black';
  document.getElementById("kafelek_srodkowy_2").style.backgroundColor = 'black';
  document.getElementById("kafelek_srodkowy_3").style.backgroundColor = 'black';
  document.getElementById("kafelek_srodkowy_4").style.backgroundColor = 'black';
  document.getElementById("kafelek_srodkowy_5").style.backgroundColor = 'black';

  document.getElementById("kafelek_prawy_1").style.backgroundColor = 'black';
  document.getElementById("kafelek_prawy_2").style.backgroundColor = 'black';
  document.getElementById("kafelek_prawy_3").style.backgroundColor = 'black';
  document.getElementById("kafelek_prawy_4").style.backgroundColor = 'black';
  document.getElementById("kafelek_prawy_5").style.backgroundColor = 'black';

Zauważyłem że ma to jakiś związek z wersją PHP...
Przy zmianie na najnowszą wersję (8.1) wywala:
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Podobnie przy wersji starszej (5.6). Przy 7 jest lepiej ale właśnie tak połowicznie.

Ustawiłem 8.1 bo XAMPP taką aktualnie wersję obsługuje więc chyba tak jest logicznie.
Tu link do strony
link

edytowany 4x, ostatnio: Waran3
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
leonpro778
L7
leonpro778
L7
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 15 godzin
  • Postów:433
0

@Waran3: Nie chce mi się już pisać, że zacząłeś od d... strony tworzyć tą "wizualizację" ale pomogę Cię nakierować czemu masz błąd jeżeli korzystasz ze skryptu obrazki.js

screenshot-20220610201526.png
P.s. Korzystaj czasem z debugowania i dokumentacji. Komunikat błędu o tym JSON'ie mówi w tym przypadku, że nie otrzymujesz prawidłowego JSON'a.

Waran3
No jest taki problem :szukanaFraza = *Andrzej *, skąd się bierze ta spacja na końcu, przed * ?
L7
No ale błąd nie dotyczy tej spacji
Waran3
Chyba dotyczy bo program nie znajduje sekwencji ze spacją i dlatego "ścieżka jest pusta"
L7
Dzielisz odczytany plik po PHP_EOL i może masz jakieś "białe znaki". Nie prościej było trzymać te nazwy i oddzielać je po przecinku? Ewentualnie użyj rtrim($sedzia)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Waran3
Waran3
Waran3
Waran3
  • Rejestracja:około 4 lata
  • Ostatnio:około rok
  • Lokalizacja:Zielonka
  • Postów:103
0

Dobra, zamieniłem

Kopiuj
//$sedziowie = explode(PHP_EOL,$sedziowie); // utworzenie tablicy z nazwami sedziow

na

Kopiuj
$sedziowie = preg_split('/\n|\r\n?/',$sedziowie);

i śmiga

ZD
A mój wujek przejechał na czerwonym i mu sie tez udało.
Waran3
Fajny wujek, Ty byś nie miał jaj ;-)
ZD
Nie wiem czy rozumiesz, wątpię, że są ludzie nie mający kompleksów popychających do "testowania jaj". Ale chyba to nie ty
Waran3
Szkoda tej dyskusji.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
cietybadacz
CI
cietybadacz
CI
  • Rejestracja:około 3 lata
  • Ostatnio:ponad 2 lata
  • Postów:6
0

Moim zdaniem, jeśli ty chcesz podmieniać obrazki asynchronicznie, bo chyba tego potrzebujesz do wyświetlania wyników, to czemu nie użyjesz rozwiązań do tego przeznaczonych?
Jak ja bym chciał podmieniać rezultaty meczów, to pod spodem bym użył biblioteki GD i otworzył websocketa na backendzie albo użył w PHP rozwiązań do tego przeznaczonych:
https://github.com/tpunt/phactor
https://stackoverflow.com/questions/858883/run-php-task-asynchronously
https://dev.to/webong/using-asynchronous-processes-in-php-7io
https://amphp.org/
https://reactphp.org/
i setek innych
Nie będę ich opisywał tutaj - wystarczy w Google wpisać php async backend. Tak btw wielu programistów nie wie nawet, że takie cuda da się w php robić.

Waran3
Super, skorzystam. Nie wiedziałem o tym. W PHP programuję od kilku dni :-)
CI
mało osób zna pełne możliwości tego języka - w mojej opinii pythona przegonił już dawno i zaczyna dobrze fikac do java/scala/c#.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)