Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ahoj, tento týden si v pravidelné minisoutěži o placku a samolepky naprogramujeme "zkušenostní kruhy", nevím jak to pojmenovat lépe. Ty se používají na stránkách pro zobrazení nějaké hodnoty, třeba procent dovednosti nějakého jazyka atd., takže se vám bude určitě hodit i v budoucnu. Ukázka, jak by to mohlo vypadat, je přiložena jako obrázek níže.

Úkolem bude vytvořit co nejlepší takovýto kruh, můžete použít třeba i různé animace, efekty atd. Hodnocen bude samozřejmě také kód a přívětivost pro uživatele, tzn. aby si nemusel nastavovat milion složitých věcí.

Do HTML tedy bude stačit zadat něco ve stylu
<canvas class="kruh" data-procent="86"></can­vas>

Můžete využít čisté jQuery.

Deadline je v pondělí 3.2. v 19:00

Podrobnější pravidla soutěží naleznete zde: http://www.itnetwork.cz/…outezi-machr

Editováno 28.1.2014 17:32
Odpovědět  +3 28.1.2014 17:26
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Martin Konečný (pavelco1998):

Jen taková technická... není blbost určit, na kolik procent umím jazyk?

 
Nahoru Odpovědět  ±0 28.1.2014 17:39
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Honza Bittner:

Dělá se to tak běžně, buď si to můžeš nějak odhadnout, nebo je milión online testů...

Nahoru Odpovědět 28.1.2014 17:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Nahoru Odpovědět 28.1.2014 17:45
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

jinak aby canvas fungoval musí mít attribut width a height, pokud to nastavíš v CSS, tak to nebude fungovat, bude to rozmazané.

Nahoru Odpovědět  +1 28.1.2014 17:58
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Honza Bittner
Martin Konečný (pavelco1998):

No jasný, ale ani žádný test ti nedokáže určit, jak opravdu dobře na tom jsi. Nápad na machra je dle mě dobrý, jen mi to osobně trošku postrádá smysl (navíc bych se nikdy nepřiznával, že umím jazyk třeba jen na 20% :-D).

 
Nahoru Odpovědět  -4 28.1.2014 17:59
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

No jasně, to ale není na uživateli, to je práce pro programátora, tudíž to musí být v kódu. Uživateli je jedno jestli bude mít canvas šířku 100px nebo 500px.

Nahoru Odpovědět 28.1.2014 18:01
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Michal Žůrek (misaz):

to ale není jenom na zkušenosti z kvízů, představ si že děláš webovou aplikaci měřící rychlost připojení, můžeš to znázornit třeba touto cestou.

Machr v žádném případě smysl nepostrádá.

Nahoru Odpovědět  +5 28.1.2014 18:13
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Martin Konečný (pavelco1998):

První myšlenku jsem moc nepobral a druhou nevyvracím - že postrádá smysl, jsem měl na mysli ten kruh jako takový. Nápad na machra se mi líbí, to jsem uvedl.

 
Nahoru Odpovědět 28.1.2014 18:29
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Honza Bittner
Ondrca:

Ahoj, měla by tam být nějaká blbuvzdronost (př. -50%, 110% apod.)?

Nahoru Odpovědět 28.1.2014 20:47
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ondrca
Honza Bittner:

To jako vážně? ...

Btw. Ty jsi programátor, ty určuješ pravidla :P

Nahoru Odpovědět 28.1.2014 20:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

Musím se k němu přiklonit. Podle mě tyhle ukazatele - umím C# na 80%, umím HTML na 90% je blbost. Za 1. zákazníka či huntera zaměstnanců zajímá především jedno - reference :) A je smutné když si člověk napíše do portfolia umím XYZ5 jazyků na 10-150% a v referencích má jednu aplikaci (já nejsem výjimkou, ale aspoň nehodnotím sám sebe dle procent). Podle mě to hodnotit takto nejde. Co je definice umět ? Zvládání syntaxe ? OOP ? Algoritmické myšlení ? Nabiflovaný kompletně manuál ?

Za 2. životopis a celková prezentace sebe samotného. Netvrdím že stránku tyhle ukazatele neoživí, ale věty na porfóliech typu " Umím ASM, Umím windows phone, umím android" jsou nesmysl. Lze to napsat jinak a lépe, tj tak že řekneš jsem v tom dobrý ale nezní to tak kýčovitě. Navíc každý ty procenta může chápat úplně jinak.

To jenom mírný offtopic, více to rozvádět nebudeme :)

Nahoru Odpovědět  +1 28.1.2014 20:56
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Honza Bittner
Ondrca:

To jo, ale ty jsi zadal soutěž :P.
Podle mě by to bylo dobrý to tam přidat, ale zase bybylo blbý kdyby se tam místo oblouku vypsal error :D.

Nahoru Odpovědět 28.1.2014 20:57
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ondrca
Honza Bittner:

Rozhodni si to sám, úkol je jasně zadaný. Vytvoř to co nejlépe dokážeš. :P

Nahoru Odpovědět 28.1.2014 21:05
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

Jasně, ale když se koukneš, tak to používá 70% portfolií. Podle mě to není špatné, když se ohodnotíš, ale bohužel většina lidí si dává třeba 90% C# a je jim 14let ... Pravda, že to hodně lidí přehání.

Ale je to off-topic, kdyžtak už jen přímo k soutěži prosím. :) Toto nemá smysl řešit.

Nahoru Odpovědět  +1 28.1.2014 21:08
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:

Nemyslím si , že je uživateli jedno, jestli má canvas 100px nebo 500px, aby mu to sedělo do layoutů stránky, bude si to chtít nastavit ne?
Co se týče toho hodnocení se, myslím, že člověk nemůže vědět, kolik z celku toho umí, protože to, ostatní prostě neumí. A čím víc toho umí, tím víc přichází a narazí na věci, které neumí. Tohle by řešili jedině nějaké certifikované testy, ale pokud si to člověk jen tak "tipne" a nebo si to tam napíše podle nějakého z "miliónů kvizů na internetu" valný význam to podle mne nemá.

 
Nahoru Odpovědět 28.1.2014 22:21
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:

Jak jsem již psal, toto tady už neřešme.

Nahoru Odpovědět  +1 28.1.2014 22:23
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Podle mě není moc dobré psát to čistě v javascriptu. Možná tak tu animaci, ale základ bych viděl na PHP nebo jen obyčejný obrázek v HTML.

 
Nahoru Odpovědět  -3 29.1.2014 0:31
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

prostímtě jak bys to dělal v PHP (knihovnu GD nejspíš opomeneme, protože to je víceméně totéž co v javascriptu canvas)?

Nahoru Odpovědět  +3 29.1.2014 6:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Obrázky, obyčejnými obrázky. Předpokládám, že se to bude načítat z DB, takže podle záznamu procent načtu obrázek. Nevím jak vy tady na fóru, ale já mám rád i uživatele s IE a i ty s vyplým javascriptem. Nepotřebuji přece generovat statický obrázek po každém příchodu na stránku, stačí jednou ne?

 
Nahoru Odpovědět 29.1.2014 13:30
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na 1Pupik1989
Honza Bittner:

Ony se tyto kruhy dělají animované, je rok 2014, ne 2000...
Takže se načítají, mají i hover, onclick, při tažení atd.

Generovat obrázky je tedy docela na nic, pokud se chceš držet s módou, kdy statika moc nestačí :P

Nahoru Odpovědět  +1 29.1.2014 13:39
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Honza Bittner
1Pupik1989:

Animaci klidně udělám z těch obrázků. Nebudu je generovat na serveru, prostě jich budu mít 100 a půjde to všem. :P Když ale někdo bude mít vypnutý javascript nebo bude bez Canvasu, tak přijde jen o tu animaci a ne o celé kruhy. Je mi jedno jaký je rok, já koukám na podíl prohlížečů. Je pravda, proč to neudělat rovnou ve WebGL? To je taky IN a umí ho alespoň 18% prohlížečů. :)

Hover udělám v CSS a místo onclicku je přesměruji na stránku kam chci. Ještě že je v HTML tag A. :)

 
Nahoru Odpovědět 29.1.2014 13:48
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět  +2 29.1.2014 13:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

Hodně štěstí, budeš ho potřebovat.

Nahoru Odpovědět 29.1.2014 15:12
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Opravdu se mi nechce kreslit kulatý "progress bar", takže sem mrsknu jen kód PHP.

<?php
  function getCircleProgress($skill){
    $skill = (int) $skill;
    $path = 'images/'.$skill.'.png';

    if(!File_Exists($path)){ return 'Zkušenosti: '.$skill; }
    return '<img src="'.$path.'" alt="Zkušenosti '.$skill.'%" alt="Zkušenosti '.$skill.'%">';
  }
?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div>
      <?php echo getCircleProgress(30); ?>
    </div>
  </body>
</html>

Teda pokud jsem to blbě nepochopil a neměl se předvést ve WebGL, ale to by takový problém taky nebyl. :)

 
Nahoru Odpovědět  -1 29.1.2014 15:13
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

myslel jsem že když už teda děláš Machr na JavaScript v PHP, tak aspoň necháš těch 100 obrázků vygenerovat nim.

Nahoru Odpovědět  +3 29.1.2014 15:15
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Ne, psal jsem že je blbost to psát v javascriptu. Že v javascriptu bych napsal maximálně jen tu animaci. A canvas bych k tomu nepoužil, ani GD v PHP. :)

Nicméně to tedy zkusím i v JS, aby se neřeklo.

 
Nahoru Odpovědět 29.1.2014 15:30
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

Ale podívej se na 100 obrázků průhledných png, jednak je to velké, než to sem odešleš a než si to všichni stáhnou ... . Co když to nebudeš chtít jen 100×100 pixelů? Ten tvůj script je úžasně jednoduchý, ale jak to toho kruhu cokoliv dopíšeš? IE samozřejmě podporuji i já, IE 11 podporuje kde co i WebGL a není problém, pokud používáš zastaralé IE, tak je mi tě líto.

Nahoru Odpovědět  ±0 29.1.2014 15:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Napozicuji to v CSS. Proto jsem to uzavřel do divu, kterému bych dal position: relative. No pokusil jsem se jen říct co jsem myslel.

Velikost by mohl být problém, to uznávám. Průměr jednoho obrázku v rozlišení 1000x1000 pixelů by se pohyboval okolo 300kB.

Já nepoužívám staré IE, ale spoustu lidí ano. IE 8 mají třeba Windows 7, které mám tedy také. Je pravda, že by to šlo dohnat pomocí excanvas.js nebo VML. Jde spíš o ty uživatelé, kteří z javascriptu mají fobii a tudíž ho mají permanentně vypnutý. Kvůli tomu že mají strach je přeci nezapudím a nepřijdu tak o spoustu uživatelů. I kdyby byly jen 2, tak je to důležité.

Ano, pro uživatelé s novými prohlížeči můžu klidně udělat nějakou fíčurinu, ale na úkor toho, že vyškrtnu staré prohlížeče.

Holt v praktikách se asi neshodneme.

Editováno 29.1.2014 15:46
 
Nahoru Odpovědět 29.1.2014 15:42
Avatar
Zdeněk Bauer
Redaktor
Avatar
Odpovídá na 1Pupik1989
Zdeněk Bauer:

Neznám nikoho s vypnutým JS a hlavně to vpodstatě ani v dnešní době nejde, protože skoro každá stránka bez JS má nějaké nedostatky.

 
Nahoru Odpovědět  +1 29.1.2014 15:50
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Zdeněk Bauer
1Pupik1989:

A to je pro mě špatně. Já jsem asi stará škola (ve 24 letech docela smutné). :D

 
Nahoru Odpovědět  -1 29.1.2014 15:55
Avatar
1Pupik1989
Člen
Avatar
 
Nahoru Odpovědět  +3 29.1.2014 18:41
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na 1Pupik1989
Ondrca:

Máš to pěkný, ale už jsem na 5000 a čekám kdy to skončí :D.
data-procent="a"

Nahoru Odpovědět  +2 29.1.2014 19:04
Zase jsem o něco chytřejší
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Jo tak to mám udělat i blbu vzdorný. :D Dělám si srandu, ale tohle ošetřím a dodělám dokumentaci. Škoda že JS nemá typehinting. :(

Nestihnu to ale dříve jak zítra, teď už jsem na pivku. :D

 
Nahoru Odpovědět 29.1.2014 19:21
Avatar
Filip Pýrek
Redaktor
Avatar
Nahoru Odpovědět  +7 29.1.2014 19:33
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Filipe, moc pěkný :)
S canvasem nejsem moc kamarád, takže mi to jde trochu pomalu, ale naučit se to musím a spřátelit s ním se taky musím :D
Zatím jsem došel k základu. http://jsfiddle.net/…204/sL5cQ/3/

Editováno 29.1.2014 20:36
 
Nahoru Odpovědět  +1 29.1.2014 20:34
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Filip Pýrek
Honza Bittner:

Nemusíš dělat přesně jako to je v ukázce :D
Ve výsledku to nemusí být ani kruh... Udělej to tak jak ti to příjde cool :)

Nahoru Odpovědět 29.1.2014 20:46
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Honza Bittner
1Pupik1989:

Já tedy myslel taky že to musí být kruh, koneckonců to pravil název topicu. :D To schválně zkusim objektově a udělat ty animace jako objekty.

 
Nahoru Odpovědět 29.1.2014 22:35
Avatar
Matyáš Procházka:

Tak zde je mé řešení:
http://leteckaposta.cz/277141722

Je to objektové a podporuje vlastní stylizování a pár dalších věcí...

 
Nahoru Odpovědět 30.1.2014 16:46
Avatar
vojtamaniak
Člen
Avatar
vojtamaniak:

Tak taky jsem to zkusil :)
http://leteckaposta.cz/487148310

Přímo v tom js/expcircle.js je pár volitelných věcí, které můžete a nemusíte upravovat.

U HTML tagu stačí uvést atribut data-procent, který určuje počet procent a také data-text, což je ten text, který se zobrazí u těch procent.

Volitelný atribut je data-color, který určuje barvu té linky. Pokud se neuvede, tak se to nastaví automaticky na modrou linku.

Snažil jsem se to udělat pomocí tříd a ne pomocí id, aby těch "Zkušenostních kruhů" mohlo být na stránce více.

Tady je podoba těch kruhů: http://vojtamaniak.fakaheda.eu/MachrJS/

 
Nahoru Odpovědět 30.1.2014 18:17
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na vojtamaniak
Zdeněk Pavlátka:

Běhá to hrozně rychle. Trochu to zpomal. Jinak krásné.

Nahoru Odpovědět 30.1.2014 18:27
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Všichni byste měli dodat kapku originality do designu. :)

Nahoru Odpovědět 30.1.2014 18:34
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek (misaz):

mě to přijde tak akorát, moc se mi nelíbí, když na to musím 10sekund čekat.

Nahoru Odpovědět  +1 30.1.2014 18:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Sice jsem se v tom tak trochu zamotal, ale nakonec dopadl druhý pokus.

http://leteckaposta.cz/698520355

Ještě to chce trochu vyladit.

 
Nahoru Odpovědět 30.1.2014 19:25
Avatar
Michal Žůrek (misaz):

Ahoj, tak zde přidávám svůj výtvor, originalitu do designu jsem sice nevnukl, ale za to jsem se hodně trhl od zkušenostních krhů. Moje kruhy jsou celkem stejné jako ty vaše, ale to je jenom zdání. Umožňují nastavit, startovní úhel, barvu proužku, pozadí, písmo (čili můžete použít i obrázkové písma), zdali mají být kruhy animované a samozřejmě taky popisek. Ten jsem navrhl tak, že si ho definujete celý vy, stanovíte si přesný formát. \n značí nový řádek a %%% bude nahrazeno procenty.

Tyto kruhy mohou být realtime updatované, v JS prostě změníte attribut data-procenta a kruhy změní procenta.

V příkladech máte několik ukázek, na těch jdou nejlépe vidět features, ta poslední (realitme update) bohužel nefunguje v Google Chrome (to je paradox, že?), ale Mozzila a IE ji zvládají perfektně.

Použití se tedy meze nekladou, tím že to zvládá IE, je můžete používat v Modern UI aplikacích i Windows Phone aplikacích.

online: http://misaz.moxo.cz/…/machr145js/
Download: http://misaz.moxo.cz/…gressbar.zip

Nahoru Odpovědět  +1 30.1.2014 19:43
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Já si zase radši počkám, když člověk sotva mrkne a už je animace pryč, tak si to moc neužije.

Nahoru Odpovědět 30.1.2014 19:45
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Nahoru Odpovědět  -1 30.1.2014 19:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
vojtamaniak
Člen
Avatar
vojtamaniak:

Zdeněk Pavlátka, protože se tímto nejde zavděčit všem, někdo to chce rychlejší, někdo pomalejší, tak se to dá v tom js/expcircle.js změnit :)

Honza Bittner, v jednoduchosti je krása, ne? :D

 
Nahoru Odpovědět 30.1.2014 19:49
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Nahoru Odpovědět  +1 30.1.2014 19:51
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na vojtamaniak
Michal Žůrek (misaz):

spíš je možná problém v tom že jsem udělali totožné s tím co má HoBi v prvním příspěvku.

Nahoru Odpovědět 30.1.2014 19:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Já neudělal stejný, mám tam jeden styl úplně jiný. Mám klasický progress bar se zakulacenými rohy. Plus teda ten kruh co mají všichni. :D

 
Nahoru Odpovědět 30.1.2014 21:21
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Honza Bittner
Jiří Gracík:

Tak moje verze, opět hrají spíš na krásu výsledku než kódu. Tentokrát je tam ode mě alespoň více matiky než obvykle :D

Online:
http://www.funebrak.hys.cz/…kill-circle/
Download:
http://leteckaposta.cz/698520355

// EDIT: Možná si ještě pohraji s kódem, nemusí to být finální verze.

Editováno 31.1.2014 14:25
Nahoru Odpovědět  +1 31.1.2014 14:23
Creating websites is awesome till you see the result in another browser ...
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Honza Bittner
Filip Pýrek:

Momentálně finální verze.
Pro úspěšný chod je potřeba jQuery.

Stačí vložit:

<script type="text/javascript" src="js/Skill.js"></script>

a

<canvas data-percent="50"></canvas>

Další parametry:

data-lineColor - barva čáry znázorňující procenta (CSS)
data-lineWidth - šířka čáry znázorňující procenta (px)
data-backgroundColor - barva pozadí kruhu (CSS)
data-fontColor - barva fontu (CSS)
data-font - název fontu
data-animationSpeed - rychlost animace (ms)
data-size - velikost canvasu (px)
data-label - popisek
data-manualAnimate - pokud se má animace spustit automaticky
data-static - pokud se má kruh zobrazit načtený bez animace

Jak spustit animaci pomocí JS

document.getElementById("canvas").animate();

nebo

$("#canvas")[0].animate();

Online: http://skill.filippyrek.cz
Download: https://docs.google.com/…BNERwcnBKUlk

Editováno 31.1.2014 15:26
Nahoru Odpovědět  +1 31.1.2014 15:25
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Tak jsem o něco pokročil a zatím to vypadá takto.
Mám rád čistý design a vyplněný kruh se mi nelíbí, zvlášť se to asi ani nehodí do "flat designu".
Není potřeba jQuery (ikdyž je tam nalinkované).
Stačí tedy jen vložit skript a canvas.
Takto může vypadat příklad:

<canvas width="250" height="250" data-radius="25" data-percent="25" data-curPerc="10" data-duration="20" data-text="jQuery">

Však se můžete podívat sami a zjistit si co to umí (Každej kdo to napsal se v tom určitě vyzná, myslím že ten můj neumí nic závratnýho...)
Online: http://z-computers.eu/…rcleProgress
Download: http://z-computers.eu/…Progress.rar

 
Nahoru Odpovědět  +2 31.1.2014 16:43
Avatar
Odpovídá na Zdeněk Bauer
Michal Žůrek (misaz):

v pravidlech je psáno, že přiložený soubor má být v zipu, ne raru.

Nahoru Odpovědět  -1 31.1.2014 16:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Bauer
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Bauer:

Taky tam je napsáno, že se to má odeslat do vlákna nebo Sdracovi, ale kdybych to poslal sdracovi tak je to taky špatně, vzhledem k tomu že sdraco do tohoto machra nejspíše nebude ani zasahovat...
A .rar tu dokáže rozbalit snad každej když všude na netu se používá pro archivy .rar a ne .zip, krom toho v pravidlech není přímo .rar zakázanej, takže archiv jako archiv. :)
No, ale to je šumák, minule jsem to vyhrál taky s .rarem a nikdo si nestěžoval.

Editováno 31.1.2014 18:26
 
Nahoru Odpovědět  ±0 31.1.2014 18:24
Avatar
Odpovídá na Zdeněk Bauer
Michal Žůrek (misaz):

Na rozbalení raru potřebuješ externí program, a to mi leze na nervy.

Nahoru Odpovědět  -1 31.1.2014 19:21
Nesnáším {}, proto se jim vyhýbám.
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Benjibs:

Nikto ti to nekáže rozbaľovať :)

Nahoru Odpovědět  +1 31.1.2014 19:26
1 + 1 = 2
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Jiří Gracík:

Důležitější je spíš přístup hodnotícího. Nikdo mi v životě na rar nic neřekl. Zajímalo by mě, u koho je tu problém :)

Nahoru Odpovědět  +1 31.1.2014 19:27
Creating websites is awesome till you see the result in another browser ...
Avatar
Zdeněk Bauer
Redaktor
Avatar
Odpovídá na Jiří Gracík
Zdeněk Bauer:

Krom toho JS se dá přeci naprosto bez problémů zkontrolovat a upravit i v prohlížeči, takže by teoreticky ani ty zdrojáky neměly být extra potřeba...

Editováno 31.1.2014 19:35
 
Nahoru Odpovědět 31.1.2014 19:34
Avatar
Matyáš Procházka:

Můj zatím finální výtvor
http://leteckaposta.cz/269590515

Tak snad jsem aspoň trošku do toho vňuknul nový design, ikdyž tvar kruhu stále zůstává. Je potřeba JQuery, odkaz na script soubor a element canvas s parametrem data-procent. Funkce je objektová a canvasů můžete mít na stránce neomezeně.

Co to umí?

Aspoň nějaká blbuvzdornost - při zadávání procent mimo rozmezí 0-100, při zadávání neplatné šířky (neboli radiusu, jak to tam nazývám), či při zadávání neplatné rychlosti animace a šířky animovaného proužku. Vlastní stylyzování v podobě zvolení vlastních barev a šířky. Vlastní počáteční úhel. Vlastní nadpis, což je snad i samozřejmostí. Pokud je nějaká hodnota nezadaná, samo si to vezme předdefinovanou hodnotu.

Chyby

Pokud máte parametr data-poz="" (parametr pro nastavení barvy pozadí) prázdný (jak je ukázáno) vezme si stejnou hodnotu jako barva písma nadpisu, což by nemělo, ale ze zatím nezjištěných důvodů tomu tak je.
Pokud ovšem celý parametr data-poz chybí, již si to stejnou barvu nevezme a pozadí se nastaví na automaticky předdefinovanou bílou barvu.

 
Nahoru Odpovědět 31.1.2014 19:35
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Zdeněk Bauer
Jiří Gracík:

Nepochybně lepší je si to celé stáhnout a kontrolovat u sebe než na webu.

Nahoru Odpovědět 31.1.2014 19:44
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Honza Bittner
Jiří Gracík:

Tak kde je ten deadline a vyhodnocení, pane Moderátore :D?

Nahoru Odpovědět 3.2.2014 20:42
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
David Čápka:

Ono to chvíli trvá :D Myslím, že na tom dělá.

Nahoru Odpovědět  +2 3.2.2014 20:47
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:

Proč teď byl jenom jeden machr, smím-li se zeptat?

Nahoru Odpovědět 3.2.2014 20:50
Zase jsem o něco chytřejší
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Ondrca
David Čápka:

Protože přepisuji redakční systém a můj čas klesl do záporných hodnot :)

Nahoru Odpovědět 3.2.2014 20:53
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 3.2.2014 20:54
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ahoj, při náročném hodnocení jsem dospěl k následujícímu pořadí:

1. 1Pupik1989 (90) - Hezký OOP návrh, může se změnit vykreslování na line. Máš tam ale i pár chybek, jako například při zadání více procent než 100.
2. Misaz (85) - Lepší by bylo OOP přes prototype. Jinak docela dobré.
3. Funebrak (77) - Určitě bych nenastavoval text pomocí elementu. Chtělo by to dát do OOP.
3. FilipPyrek (77) - Chybka při zadání více než 100%. Někdy se mi to zdálo trochu zmatené.
4. DoctorMuscha (70) - Také chybka při více než 100%. Používáš moc ifů, které by se dali zapsat jinak a výhodněji.
5. zdenda204 (65) - Kód máš moc nahňácaný v pár funkcích. Chtělo by to dát do OOP.
5. vojtamaniak (65) - Kód máš moc nahňácaný v pár funkcích. Chtělo by to dát do OOP.

Placku tedy uděluji 1Pupik1989 a také Michal Žůrek (misaz), jelikož se mi jeho kód také líbil. Adresu napište x.

Dost z vás mělo použito OOP, což znamená znovupoužitelnost. Rozdělujte tedy metody na to co opravdu dělají, tedy aby metoda PAINT nepočítala různé rozměry, to má dělat jiná metoda... :) Poté byste museli měnit celou metodu PAINT, jelikož vám nebude fungovat pro jiné hodnoty.

Hezký zbytek dne... ;)

Nahoru Odpovědět 3.2.2014 22:30
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

Díky, adresu a publikaci vyřídím zítra, na telefonu by mi z toho asi už hráblo.

Nahoru Odpovědět  +1 3.2.2014 22:34
Nesnáším {}, proto se jim vyhýbám.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Honza Bittner
Filip Pýrek:

A jakou myslíš chybu pří zadávání více než 100%? (nemělo by se cokoliv vykreslit)

Nahoru Odpovědět 4.2.2014 5:58
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek (misaz):

a proč nezobrazit víc jak 100% jako 100%?

Nahoru Odpovědět  ±0 4.2.2014 6:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Filip Pýrek
Honza Bittner:

Jako programátor musíš udělat blbu-vzdornost, tedy třeba když zadá méně než 0%, uděláš to jako 0, pokud zadá více než 100%, uděláš to jako 100.

Uživatelé nejsou moc chytří a důslední... :)

Nahoru Odpovědět 4.2.2014 12:32
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Protože by více jak 100% nemělo jít, ne? (Myslím že jsme se to učily v matice)

Nahoru Odpovědět  ±0 4.2.2014 12:53
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Filip Pýrek
Redaktor
Avatar
Nahoru Odpovědět 4.2.2014 12:53
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Aleyo
Člen
Avatar
Aleyo:

Kam chodíš na školu ? :D celkem by mě zajímalo, kde učej, že víc jak 100% nejde :D

 
Nahoru Odpovědět  -1 4.2.2014 13:06
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Aleyo
Filip Pýrek:

:D ŘÍKÁM ŽE MYLÍM :D
Tak OK :D

Editováno 4.2.2014 13:13
Nahoru Odpovědět 4.2.2014 13:12
„The best way to predict the future is to invent it.“ — Alan Kay
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 77 zpráv z 77.