Diskuze: Machr na JavaScript - Zkušenostní kruhy

Michal Žůrek - misaz

Tvůrce

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

1Pupik1989

Člen

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.

Nahoru Odpovědět

30.1.2014 21:21

Neaktivní uživatel

Tvůrce

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

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

Filip Pýrek

Tvůrce

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

Zdeněk Bauer

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Zdeněk Bauer

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Benjibs

Člen

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

Neaktivní uživatel

Tvůrce

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

Zdeněk Bauer

Tvůrce

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

Matyáš Procházka

Člen

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

Neaktivní uživatel

Tvůrce

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.2.2014 20:42

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

Nahoru Odpovědět

3.2.2014 20:42

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger:3.2.2014 20:47

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

Nahoru Odpovědět

3.2.2014 20:47

New kid back on the block with a R.I.P

Ondrca

Tvůrce

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ší

David Hartinger

Vlastník

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

New kid back on the block with a R.I.P

Ondrca

Tvůrce

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ší

Honza Bittner

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Filip Pýrek

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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.

Filip Pýrek

Tvůrce

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

Filip Pýrek

Tvůrce

Filip Pýrek:4.2.2014 12:53

Ok...

Nahoru Odpovědět

4.2.2014 12:53

„The best way to predict the future is to invent it.“ — Alan Kay

Aleyo

Člen

Aleyo:4.2.2014 13:06

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

Nahoru Odpovědět

4.2.2014 13:06

Filip Pýrek

Tvůrce

Filip Pýrek:4.2.2014 13:12

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

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

Nejčastěji vyhledáváné

Diskuze: Machr na JavaScript - Zkušenostní kruhy