NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Zdeněk Pavlátka:2.4.2015 10:45

V tomto machrovi bude vaším úkolem vytvořit jednoduchou webovou aplikaci pro úpravu obrázků. K ní samozřejmě vytvoříte stránku s nějakým pěkným formulářem pro odesílání obrázků k úpravě.
Aplikace musí povinně umět efekty: sépiové zbarvení, odstíny šedé, zesvětlení / ztmavení o zadanou hodnotu, převrácení stran, otočení o 90°, 180° a 270°
Další efekty (např. rozmazání) budou za plusové body.

Pro jakékoli dotazy je dost místa v komentářích.

Čas si dáme do neděle 12.4.2015 do 12:00. Vyhodnocení bude (snad) téhož dne večer.

Kompletní pravidla soutěží: http://www.itnetwork.cz/…outezi-machr

Editováno 2.4.2015 10:45
Odpovědět
2.4.2015 10:45
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek - misaz:2.4.2015 10:52

moc nechápu proč se toto má zpracovávat na serveru. Toto je skvělá úloha pro JavaScript a Canvas.

 
Nahoru Odpovědět
2.4.2015 10:52
Avatar
Dominik Gavrecký:2.4.2015 10:56

Michal má pravdu je to kontraproduktívne ....

Nahoru Odpovědět
2.4.2015 10:56
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Šmahel:2.4.2015 10:58

Aby to nebylo tak jednoduché. Myslím si, že ten obrázek můžeš nejprve proklikáváním předělat pomocí JS (bude vidět, jak vypadá fináln) a až po odeslání to udělat ještě PHP a dát možnost ho stáhnout.

Nahoru Odpovědět
2.4.2015 10:58
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Dominik Gavrecký
Michal Žůrek - misaz:2.4.2015 10:58

dělat toto na serveru je jako střílet vrabce atomovkou.

// Pokud to samozřejmě nepotřebuješ pro nějaké účely serveru, který si to bude volat sám. Pak postrádá smysl GUI s výběrem obrázku.

Editováno 2.4.2015 10:59
 
Nahoru Odpovědět
2.4.2015 10:58
Avatar
Odpovídá na Michal Šmahel
Michal Žůrek - misaz:2.4.2015 11:00

a proč bych to všechno měl dělat dvakrát. V JS ho může upravovat a real-time vidět náhled třeba stmavení a pak ho normálně stáhne.

JS umožňuje vyvolat stahování souboru a to na jeho poměr docela jednoduše a elegantně. :`

Pořád tam nějak nevidím ten smysl serverové strany.

 
Nahoru Odpovědět
2.4.2015 11:00
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Šmahel:2.4.2015 11:03

Já též ne, ale to PHP tam být musí podle zadání. Když tam chceš JS, můžeš to takto zpestřit.

Nahoru Odpovědět
2.4.2015 11:03
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:2.4.2015 11:07

Nejde tak úplně o úpravy obrázků v prohlížeči, smysl úlohy je práce s obrázky v PHP ;)

Nahoru Odpovědět
2.4.2015 11:07
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek - misaz:2.4.2015 11:13

to nic nemění na tom, že výsledek úlohy implementuje "střílení vrabců atomovkou".

 
Nahoru Odpovědět
2.4.2015 11:13
Avatar
Neaktivní uživatel:2.4.2015 13:09

Tedy s obrázky jsem naposledy pracoval několik let zpátky a nevím, jestli jsou ty funkce zastaralé, ale mno. :D Každopádně něco jsem napsal, chtěl jsem se konečně taky zůčastnit nějakého Machra. :) http://leteckaposta.cz/515278883

Nahoru Odpovědět
2.4.2015 13:09
Neaktivní uživatelský účet
Avatar
Odpovídá na Michal Žůrek - misaz
Uživatel sítě :3.4.2015 11:04

Tak když je to zadání ve vlákně PHP?
Proč to dál rozmazávat, že jiný jazyk by byl ideální apod..
Máš předem daný jazyk ve kterým to napsat a hotovo.. ]:>

Nahoru Odpovědět
3.4.2015 11:04
Chybami se člověk učí, běžte se učit jinam!
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Filip Pýrek:3.4.2015 11:37

Je důležité si na začátku zvolit správnou technologii (jazyk, atd.), takže je to dobrá poznámka a souhlasím s Michalem!

Nahoru Odpovědět
3.4.2015 11:37
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Filip Pýrek
Neaktivní uživatel:3.4.2015 11:45

To sice je, ale v opravdovém projektu. Když se učíš funkce v PHP, nebudeš přece přemýšlet nad tím, jestli to udělat v JS. Je dobré tyhle funkce znát. Jestli je použiješ v reálné praxi je už věc druhá.

Nahoru Odpovědět
3.4.2015 11:45
Neaktivní uživatelský účet
Avatar
Odpovídá na Filip Pýrek
Uživatel sítě :3.4.2015 12:20

Stále nevím co řešíte:

smysl úlohy je práce s obrázky v PHP

Jestli vám toto jako odpověď od zadávající nestačí, tak vás opravdu nechápu.

Editováno 3.4.2015 12:21
Nahoru Odpovědět
3.4.2015 12:20
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Zdeněk Pavlátka
piatoksviatok:3.4.2015 12:50

Chcem sa spýtať, toto zadanie, sa celé vytvorí čisto v php kóde? Iba PHP, alebo k tomu použijete napríklad obrázky, html a podobne..,.. ďakujem za odpoveď.

 
Nahoru Odpovědět
3.4.2015 12:50
Avatar
Odpovídá na piatoksviatok
piatoksviatok:3.4.2015 12:52

vidím, že to tu asi riešite, lebo viem kresliť cez php, ale urobiť tlačítko v graficky bezchybnom odtieni šedej,.... ahaaaahhaahaha­hahahaha , ved ja neviem kresliť rukou.... :) . Idem čítať, každopádne ďakujem za vašu námahu nás niečo naučiť.

 
Nahoru Odpovědět
3.4.2015 12:52
Avatar
Odpovídá na piatoksviatok
Neaktivní uživatel:3.4.2015 13:04

Já napsal třídu čistě v PHP a k tomu přiložil HTML formulář. Nevím, jestli to bude Zdeněk Pavlátka stačit, je to ale jedna z možností. :D

Nahoru Odpovědět
3.4.2015 13:04
Neaktivní uživatelský účet
Avatar
Odpovídá na Uživatel sítě
Michal Žůrek - misaz:3.4.2015 14:28

Machr by měl docílit abyste se naučili něco zajímavého na něčem co se v praxi dá nějak zužitkovat. Proto se ofrňuju, ale lepší než nic, pokud se na tom někdo něco naučí. Já to tedy vyřeším (i kdyby mimo soutěž) v JavaScriptu. :)

 
Nahoru Odpovědět
3.4.2015 14:28
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:3.4.2015 15:17

Kdo by tedy chtěl, může to vypracovat v javascriptu. Takové výtvory budu hodnotit samostatně (jako dalšího machra).

Nahoru Odpovědět
3.4.2015 15:17
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
pivovary
Člen
Avatar
pivovary:3.4.2015 15:33

Já jsem to udělal jako hybridní PHP knihovna a ovládání JS. A místo otočení obrázku se mi ten obrázek odvaluje furt pryč :D

 
Nahoru Odpovědět
3.4.2015 15:33
Avatar
Neaktivní uživatel:3.4.2015 17:29

Jestli mluvíš o PHP filtrech, tak brightness je jas - kladná hodnota je zesvětlení, záporná ztmavení. Contrast je - jak z názvu vyplývá - kontrast. :D

Nahoru Odpovědět
3.4.2015 17:29
Neaktivní uživatelský účet
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ondrca:3.4.2015 17:37

To už mě taky došlo :D, jinak ale díky :D

Nahoru Odpovědět
3.4.2015 17:37
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Neaktivní uživatel:3.4.2015 17:39

Je, promiň, nevšiml jsem si, že sis to upravil. :D Na hlavní stránce je to jinak jak v diskuzi. :D

Nahoru Odpovědět
3.4.2015 17:39
Neaktivní uživatelský účet
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:3.4.2015 18:20

Bude vadit, když místo zesvětlení a ztamevní tam bude jas (záporná nebo kladná hodnota) a místo otočení o přesně zadanou hodnotu si uživatel bude moct zadat úhel otočení?

Nahoru Odpovědět
3.4.2015 18:20
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Zdeněk Pavlátka:3.4.2015 18:22

Naopak to bude plus :)

Nahoru Odpovědět
3.4.2015 18:22
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:3.4.2015 18:26

Díky za odpověď, je to moje první práce v PHP, tak snad to nebude žádný prasekód či něco :D

Nahoru Odpovědět
3.4.2015 18:26
Zase jsem o něco chytřejší
Avatar
Odpovídá na Michal Žůrek - misaz
Uživatel sítě :3.4.2015 18:42

Né každý má v lásce JS. :D :P
Ale řešení může být zajímavé, těším se.. ;)

Nahoru Odpovědět
3.4.2015 18:42
Chybami se člověk učí, běžte se učit jinam!
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:3.4.2015 20:03

Tak propojení s JS by bylo ideální. Třeba pokud by formulář uměl frontu filterů. Čili uživatel by si mohl zvolit pořadí aplikace filtrů a vytvořil si tak seznam, který se přes formulář odešle na server.

Dále třeba při použití maticových filtrů by se mohla dynamicky objevit tabulka pro zadání hodnot.

No a taky samozřejmě náhled, jak psal Misaz.

 
Nahoru Odpovědět
3.4.2015 20:03
Avatar
Michal Žůrek - misaz:5.4.2015 0:36

pustil jsem se do toho zdrojový kód má celkem 889 řádků (TS: 577, HTML: 25, CSS: 287) a jediné co to zatím umí je načíst obrázek :D Snad to stihnu dokončit.

 
Nahoru Odpovědět
5.4.2015 0:36
Avatar
Neaktivní uživatel:5.4.2015 7:26

Co tak koukám, všicí si dávaj záležet i na těch formulářích... :D Bude se za klientskou stranu také počítat body, nebo jen za PHP (respektive JS)?

Nahoru Odpovědět
5.4.2015 7:26
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Zdeněk Pavlátka:5.4.2015 8:45

Samozřejmě že budou, ale bude to mít menší váhu než body za PHP

Nahoru Odpovědět
5.4.2015 8:45
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:5.4.2015 11:42

body se dají tak nějak za všechno, ale jestliže už ses pustil do serverové strany, bude se hodnotit převážně ta.

 
Nahoru Odpovědět
5.4.2015 11:42
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:6.4.2015 12:26

Má to umět více přípon?

Nahoru Odpovědět
6.4.2015 12:26
Zase jsem o něco chytřejší
Avatar
pivovary
Člen
Avatar
pivovary:9.4.2015 19:53

Trápí mně že nemám brát od koho inspiraci do konce už jsou jen 3 dny tak dám aspoň k dispozici malý náhled mého výtvoru.

http://machr.phpreport.cz/editor

 
Nahoru Odpovědět
9.4.2015 19:53
Avatar
Michal Žůrek - misaz:9.4.2015 21:23

Ahoj!
tak se tedy hlásím s mým celkem velkým editorem fotografií/obrázků.

Umí všechny potřebné funkce, které jsou v zadání je skvělé objektový a je připraven na další rozšíření. Všechny stěžejní funkce jsou již hotové.

Umí

  • vytvořit nové bílé plátno
  • otevřít obrázek z lokálního počítače
  • otevřít obrázek z URL (pokud server posílá hlavičku, která to JavaScriptu umožní)
  • exportovat obrázek v PNG
  • exportovat obrázek v JPEG
  • vrátit předchozí provedenou akci
  • zrušit vrácení provedené akce
  • zobrazit kompletní historii změn v obrázku
  • porovnávat rozdíly před a po použití funkce
  • vrátit se do libovolného bodu v historii změn
  • převést obrázek do sépie
  • převést obrázek do stupňů šedi
  • nastavit jas obrázku
  • překlopit obrázek vodorovně
  • překlopit obrázek svisle
  • otočit obrázek o 90°
  • otočit obrázek o 180°
  • otočit obrázek o 270°
  • otočit obrázek o -90°
  • otočit obrázek o -180°
  • otočit obrázek o -270°
  • pamatuje si seznam naposledy uložených obrázků
  • naposledy uložené obrázky zobrazuje na vítací obrazovce
  • umožňuje editovat v jedné záložce prohlížeče více obrázku najednou díky panelu otevřených záložek
  • umí pracovat a přepínat se do full screen režimu
  • nástroje jas a historie otevírá v plovoucích oknech, díky tomu lze efektivněji využívat (hlavně nástroj historie) na více obrazovkových monitorech
  • umí uložit v komprimované složce (metoda ZIP) všechny obrázky ze všech otevřených záložek
  • plně podporován a testován v Internet Explorerem 10
  • plně podporován a testován v Chrome 40
  • plně podporován a testován v Mozilla Firefox 35
  • částečně podporován v Project Spartan (zhruba 60% podpora)
  • částečně podporován v Opera 12.17 (zhruba 90% podpora)

Implementace
aplikaci lze samozřejmě otevřít otevřením souboru index.html v prohlížeči (kdo by to čekal, že). jenže... nástroje jas a historie nebudou dostupné, protože pro jejich běh je z bezpečnostních důvodů (které jsem si nevymyslel já) běh aplikace na serveru. Můžete proto si aplikaci buď rozhodit na localhostu nebo rovnou spustit z http://misaz.moxo.cz/mphotobeta

Bugy
Ano aplikace je větší, tak i ačkoliv prošla důkladným testováním jistojistě bude obsahovat nějaké bugy, můžete je samozřejmě hlásit. Prozatím vím, jen o tom, že můj oblíbený Google Chrome vyhodí ptáky při exportu většího obrázku nebo ZIPu. Internet Explorer v záchvatu volání Windows API při větším obrázku naopak (ne však vždy) spadne s chybou "Datová oblast předaná systémové službě je příliš malá.". Firefox se na to pro změnu občas vykašle (bez vypsání chyby), ale většinou to funguje ve všech prohlížečích (až na Spartana tedy) dobře.

Stažení pro počítače bez serveru: http://misaz.moxo.cz/…er_misaz.zip
Stažení pro počítače se serverem: http://misaz.moxo.cz/…st_misaz.zip
Online: http://misaz.moxo.cz/mphotobeta

Až si najdu čas splácám články o základech TypeScriptu a pak se vrhneme na něco takového. :)

 
Nahoru Odpovědět
9.4.2015 21:23
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:9.4.2015 21:28

Wow, to ti teda tleskám - vypadá to luxusně.
BTW: zítra i můj výtvor bude tu (v hádankách já mluvit musím) :D

Nahoru Odpovědět
9.4.2015 21:28
Zase jsem o něco chytřejší
Avatar
Odpovídá na Michal Žůrek - misaz
Štefan Pružinský:9.4.2015 21:34

Fúha, tak toto je skutočne perfektné. Vytvoriť takýto výtvor za týždeň...to je úloha pre naozajstného machra:)

Nahoru Odpovědět
9.4.2015 21:34
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
pivovary
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
pivovary:9.4.2015 21:41

Přesně něco takového jsem potřeboval :-D abych věděl jak tomu udělat hezký kabát. Nějak na ten desing moc nejsem

 
Nahoru Odpovědět
9.4.2015 21:41
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondřej Štorc:9.4.2015 21:44

Hlásím bug. V Google Chromu při otáčení obrázků o 180° se obrázek sice přetočí, ale v pozadí zůstane ta původní verze. Jinak to vypadá fakt dobře :)

Nahoru Odpovědět
9.4.2015 21:44
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na Ondřej Štorc
Michal Žůrek - misaz:9.4.2015 21:50

můžeš poslat screen (nebo obrázek u kterého ti to dělá), mě v chrome (40) funguje otočení o 180 stupňů správně, teda alespoň tak jak já předpokládám :D

 
Nahoru Odpovědět
9.4.2015 21:50
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:9.4.2015 21:51

Mně také to překlopení duplikuje (Mozilla Firefox)

Nahoru Odpovědět
9.4.2015 21:51
Zase jsem o něco chytřejší
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondřej Štorc:9.4.2015 21:53

Je to obrázek HoBiho z zdejších HTML tutoriálů. Jinak mám Chrome 41

Nahoru Odpovědět
9.4.2015 21:53
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
pivovary
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
pivovary:9.4.2015 22:00

Asi nejaky s pruhlednym pozadim, pokud vlozim klasicky obrazek tak nic. Jakmile vlozim php slona tak se taky duplikuje.

Firefox 36.0.1

 
Nahoru Odpovědět
9.4.2015 22:00
Avatar
Odpovídá na Michal Žůrek - misaz
Uživatel sítě :9.4.2015 22:19

Ehm, tleskám, opravdu parádní aplikace.. :)
Teď abych přidal ještě nějaké jiné filtry a různé věci.. :D :D

Nahoru Odpovědět
9.4.2015 22:19
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:10.4.2015 15:40

Bug #0001 (Plátno se při provádění náhledů funkcí nevyčistí) vyřešen. Okazy zůstávají stejné. Cache vyčistíte buďto Ctrl + F5 nebo Strl + R nebo prostě přidržíte F5. Seznam naposledy editovaných obrázků by měl být v rámci domény zachován.

 
Nahoru Odpovědět
10.4.2015 15:40
Avatar
Uživatel sítě :12.4.2015 0:15

Zdravím,
také přidám svůj výtvor.

Umí filtry a efekty, které jsou v zadání, nějaké to rozmazání a také změnu rozlišení. je to čisté PHPko, žádné JS vychytávky tam nehledejte. :P

Ve skupině Image, můžete změnit požadované min. a max. hodnoty pro výšku či šířku nebo cestu kam chcete obrázky ukládat.

Použití: Začněte nejprve s nahráním obrazku/ů, je přítomná podpora hromadného uložení.
Po nahrátí se vám hned ukáže výpis přítomných/nah­raných obrázků, můžete je buď upravit nebo smazat.
Složky kam se nahrávají obrázky a keše se vytvoří samy.

Při úpravě máte možnost začít znovu, pokud se výsledek nebude líbit. Jakmile budete s výsledkem spokojeni můžete přijmout úpravu, čímž aktualizujete originální obrázek upraveným.

To je vše co bych k tomu mohl napsat, ke stažení to máte zde: http://leteckaposta.cz/278881376

Doufám, že se bude líbit.. ;)

Nahoru Odpovědět
12.4.2015 0:15
Chybami se člověk učí, běžte se učit jinam!
Avatar
pivovary
Člen
Avatar
pivovary:12.4.2015 1:11

Tak přidávám aktualizovaný výtvor
http://machr.phpreport.cz/
Umí teda pracovat pouze s jedním obrázkem, který nahrajete na uvodní stránce a potom Vás to přesměruje k editoru. Je to vše psané podle zdejších tutorialů. Jen previewController mam trošku divočejši.

http://machr.phpreport.cz/…pivovary.zip

Editováno 12.4.2015 1:12
 
Nahoru Odpovědět
12.4.2015 1:11
Avatar
Zdeněk Pavlátka:12.4.2015 19:03

Jelikož je spousta odevzdaných výtvorů a už moc nestíhám, bude ohodnocení pozítří večer. Za takové zpoždění se omlouvám.

Nahoru Odpovědět
12.4.2015 19:03
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:14.4.2015 20:34

Tak to odkládám ještě o jeden den, dneska jsem měl menší potíže s časem. Zítra mám volno, takže to opravím a zadám min. jednoho nového machra.

Nahoru Odpovědět
14.4.2015 20:34
Kolik jazyků umíš, tolikrát jsi programátor.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 50 zpráv z 57.