Změna obrázku po kliknutí na tlačítko

- Alyxx
- Člen | 9
Dobrý den, už druhý den se snažím vymyslet jak propojit tlačítka
v latte s presenterem kvůli vykreslování obrázků.
Princip je takový, že v presenteru mám paths k obrázkům v poli, odkud je
posílám na vykreslení do latte a potřebuji po kliknutí na tlačítko
změnit obrázek. Problém je že pracuji na verzi Nette 2.3 a php
7.1. Děkuji za nápad či odpověď.

- nightfish
- Člen | 528
@Alyxx Pokud něco potřebuješ udělat po kliknutí na tlačítko
v PHP, tak tlačítko buď musí být součástí formuláře nebo to musí
být odkaz (např. na signál). Předání správných dat do šablony pak
dosáhneš v onSuccess() metodě formuláře nebo handle metodě
signálu.
Tohle jsou zrovna věci, které se mezi Nette 2.3 a PHP 7.1 a aktuálním Nette/PHP neliší, snad s výjimkou PHP syntaxe.

- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx Pokud něco potřebuješ udělat po kliknutí na tlačítko v PHP, tak tlačítko buď musí být součástí formuláře nebo to musí být odkaz (např. na signál). Předání správných dat do šablony pak dosáhneš v
onSuccess()metodě formuláře nebo handle metodě signálu.Tohle jsou zrovna věci, které se mezi Nette 2.3 a PHP 7.1 a aktuálním Nette/PHP neliší, snad s výjimkou PHP syntaxe.
Děkuji za odpověď, tohle mi vůbec nedošlo. Je nějaká možnost jak mít image a form ve stejné komponentě, případně z form komponenty měnit promněnné v image komponentě?

- nightfish
- Člen | 528
@Alyxx
Jak v tuto chvíli vypadá kód tvého presenteru (stačí ta část
v presenteru mám paths k obrázkům v poli, odkud je posílám na
vykreslení do latte) a kód šablony (která hádám nějak ty obrázky a
tlačítka vykresluje)?
Kód nemusí fungovat, ani dělat to co potřebuješ, ale bude jednodušší se
bavit o konkrétním kódu než tu řešit rozdělení neznámého kódu do
komponent…

- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx
Jak v tuto chvíli vypadá kód tvého presenteru (stačí ta část v presenteru mám paths k obrázkům v poli, odkud je posílám na vykreslení do latte) a kód šablony (která hádám nějak ty obrázky a tlačítka vykresluje)?
Kód nemusí fungovat, ani dělat to co potřebuješ, ale bude jednodušší se bavit o konkrétním kódu než tu řešit rozdělení neznámého kódu do komponent…
Kód presenteru vypadá následovně, omlouvám se za pozdní odpověď ale neměl jsem k tomu přes víkend přístup.
public function createComponentTestPatra(): Form
{
$form = new Form;
$branch_office_id = 1;
$idtest = 8;
$idZamestnanec = $this->template->google = $this->googleMap
->getidZamestnanec($idtest);
$idZakaznik = $this->template->google = $this->googleMap
->getidZakaznik($idZamestnanec);
;
$branch_office_id =$this->template->google = $this->googleMap
->getidPobockaZakaznik($idZakaznik);
$img_paths =
$this->template->patra = $this->googleMap
->getImgPath($branch_office_id[0]);
$imgSelect = $form->addSelect('path', 'Img_paths:', $img_paths);
$form->addButton('previous','Previous')
->setHtmlAttribute('onclick','ahoj()');
$form->addButton('next','Next');
return $form;
}
public function ahoj()
{
echo ("Ahoj");
}
public function renderDefault()
{
/*$form = new Form;
$form->addButton('previous','Previous');
$form->addButton('next','Next');
$branch_office_id = 1;
$img_paths =
$this->template->patra = $this->googleMap
->getImgPath($branch_office_id);
;
$index = 2;
$image = Image::fromFile('C:/Users/venhm/Desktop/chyba.png');
image = "C:/Users/venhm/Desktop/chyba.png";*/
$paths = array("C:/xampp/htdocs/timerservice/www/uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg", "C:/xampp/htdocs/timerservice/www/uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png");
$image = Image::fromFile($img_paths[$index]);
$this->template->patraMap = $image;
//return $form;
//$image->send(Image::JPEG);
}
Editoval Alyxx (18. 9. 2023 7:12)

- nightfish
- Člen | 528
@Alyxx Vidím, že tam máš nějaký formulář, v rámci kterého
máš selectbox s cestami k obrázku.
A pak v presenteru kód, který z jednoho obrázku udělá Image
a pošle jej do šablony.
V nejjednodušším případě bych to udělal následovně (snažil jsem se používat co nejméně moderní syntaxi, protože už si popravdě nepamatuji, co bylo povolené už v PHP 7.1 a co bylo přidáno později; stejně tak u Nette/Latte):
Celá myšlenka je jednoduchá – máš pole s obrázky (nejspíš k nim
nechceš přistupovat přes filesystém, protože bys potom pro vykreslení
v šabloně musel v každém requestu každý obrázek obalit přes
Image::fromFile(), což by bylo imho zbytečně pomalé; z toho
důvodu jsou v poli jen části URL, které po složení se standardní nette
$basePath budou validní URL sloužící ke stažení/zobrazení
obrázků), toto pole předáš do presenteru a vykreslíš. Každý obrázek
(kromě aktuálně vybraného) je obalen odkazem, který slouží k vybrání
obrázku po kliknutí. Vybrání obrázku není řešeno ani formulářem, ani
signálem, nýbrž jen odkazem na renderDefault() s předáním
příslušného indexu obrázku.
Presenter (index vybraného obrázku se do presenteru předává jako argument render metody; žádný obrázek nemusí být vybraný):
public function renderDefault($selectedImageIndex = null)
{
$images = $this->getImages();
$selectedImageUrlPart = null;
if (!empty($selectedImageIndex)) {
$selectedImageUrlPart = $images[$selectedImageIndex];
}
$this->template->images = $images;
$this->template->selectedImageUrlPart = $selectedImageUrlPart;
}
/**
* Vraci pole casti URL, ktere dohromady s $basePath daji funkcni URL
* ke stazeni obrazku.
*/
private function getImages(): array
{
return [
"uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg",
"uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png",
];
}
Šablona (vykreslí jednotlivé obrázky, obalené odkazem; aktuálně zvolený obrázek odkazem obalený není):
{foreach $images as $imageIndex => $imageUrlPart}
<a n:tag-if="$imageUrlPart !== $selectedImageUrlPart" n:href="Presenter:default $imageIndex"><img src="{$basePath}/{$imageUrlPart}" /></a>
{/foreach}

- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx Vidím, že tam máš nějaký formulář, v rámci kterého máš selectbox s cestami k obrázku.
A pak v presenteru kód, který z jednoho obrázku uděláImagea pošle jej do šablony.V nejjednodušším případě bych to udělal následovně (snažil jsem se používat co nejméně moderní syntaxi, protože už si popravdě nepamatuji, co bylo povolené už v PHP 7.1 a co bylo přidáno později; stejně tak u Nette/Latte):
Celá myšlenka je jednoduchá – máš pole s obrázky (nejspíš k nim nechceš přistupovat přes filesystém, protože bys potom pro vykreslení v šabloně musel v každém requestu každý obrázek obalit přes
Image::fromFile(), což by bylo imho zbytečně pomalé; z toho důvodu jsou v poli jen části URL, které po složení se standardní nette$basePathbudou validní URL sloužící ke stažení/zobrazení obrázků), toto pole předáš do presenteru a vykreslíš. Každý obrázek (kromě aktuálně vybraného) je obalen odkazem, který slouží k vybrání obrázku po kliknutí. Vybrání obrázku není řešeno ani formulářem, ani signálem, nýbrž jen odkazem narenderDefault()s předáním příslušného indexu obrázku.Presenter (index vybraného obrázku se do presenteru předává jako argument render metody; žádný obrázek nemusí být vybraný):
public function renderDefault($selectedImageIndex = null) { $images = $this->getImages(); $selectedImageUrlPart = null; if (!empty($selectedImageIndex)) { $selectedImageUrlPart = $images[$selectedImageIndex]; } $this->template->images = $images; $this->template->selectedImageUrlPart = $selectedImageUrlPart; } /** * Vraci pole casti URL, ktere dohromady s $basePath daji funkcni URL * ke stazeni obrazku. */ private function getImages(): array { return [ "uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg", "uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png", ]; }Šablona (vykreslí jednotlivé obrázky, obalené odkazem; aktuálně zvolený obrázek odkazem obalený není):
{foreach $images as $imageIndex => $imageUrlPart} <a n:tag-if="$imageUrlPart !== $selectedImageUrlPart" n:href="Presenter:default $imageIndex"><img src="{$basePath}/{$imageUrlPart}" /></a> {/foreach}
Děkuji mockrát, konečně jsem schopný to dokončit.