Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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
Odpovídá na vojtamaniak
Michal Žůrek - misaz:30.1.2014 19:52

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.

 
Odpovědět
30.1.2014 19:52
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:30.1.2014 21:21

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
Odpovídá na Honza Bittner
Neaktivní uživatel:31.1.2014 14:23

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
31.1.2014 14:23
Neaktivní uživatelský účet
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Honza Bittner
Filip Pýrek:31.1.2014 15:25

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
31.1.2014 15:25
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Zdeněk Bauer:31.1.2014 16:43

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
31.1.2014 16:43
Avatar
Odpovídá na Zdeněk Bauer
Michal Žůrek - misaz:31.1.2014 16:56

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

 
Nahoru Odpovědět
31.1.2014 16:56
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Bauer:31.1.2014 18:24

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
31.1.2014 18:24
Avatar
Odpovídá na Zdeněk Bauer
Michal Žůrek - misaz:31.1.2014 19:21

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

 
Nahoru Odpovědět
31.1.2014 19:21
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Benjibs:31.1.2014 19:26

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

Nahoru Odpovědět
31.1.2014 19:26
1 + 1 = 2
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:31.1.2014 19:27

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
31.1.2014 19:27
Neaktivní uživatelský účet
Avatar
Zdeněk Bauer
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Zdeněk Bauer:31.1.2014 19:34

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:31.1.2014 19:35

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
Odpovídá na Zdeněk Bauer
Neaktivní uživatel:31.1.2014 19:44

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

Nahoru Odpovědět
31.1.2014 19:44
Neaktivní uživatelský účet
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:3.2.2014 20:42

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

Nahoru Odpovědět
3.2.2014 20:42
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
David Hartinger:3.2.2014 20:47

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

Nahoru Odpovědět
3.2.2014 20:47
You are the greatest project you will ever work on.
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na David Hartinger
Ondrca:3.2.2014 20:50

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 Hartinger
Vlastník
Avatar
Odpovídá na Ondrca
David Hartinger:3.2.2014 20:53

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
You are the greatest project you will ever work on.
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na David Hartinger
Ondrca:3.2.2014 20:54

Aha, tak to chápu :).

Nahoru Odpovědět
3.2.2014 20:54
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:3.2.2014 22:30

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:3.2.2014 22:34

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

 
Nahoru Odpovědět
3.2.2014 22:34
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Honza Bittner
Filip Pýrek:4.2.2014 5:58

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:4.2.2014 6:39

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

 
Nahoru Odpovědět
4.2.2014 6:39
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Filip Pýrek
Honza Bittner:4.2.2014 12:32

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Filip Pýrek:4.2.2014 12:53

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
4.2.2014 12:53
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Filip Pýrek
Tvůrce
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:4.2.2014 13:06

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

 
Nahoru Odpovědět
4.2.2014 13:06
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Aleyo
Filip Pýrek:4.2.2014 13:12

: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 27 zpráv z 77.