Úkol: HTML klikací mapa

Moderátoři: asistent strany, Vedouci organu, Odbor - personalni

Pravidla fóra
Úkoly nyní postupně převádíme do nového specializovaného systému Úkoly. Nové úkoly prosím dávejte přímo tam. Diskuse k úkolům je tam také možná, pouze musíte být přihlášeni. Jakmile dojde k odladění nového systému a převedení veškerých úkolů, bude toto fórum uzavřeno, archivováno a zrušeno.
Děkujeme za pochopení.
Uživatelský avatar
Petr.Kopac
Člen KS Plzeňský kraj
Příspěvky: 2933
Registrován: 10 říj 2011, 22:43
Profese: Software engineer
Bydliště: Amsterdam
Dal poděkování: 5451 poděkování
Dostal poděkování: 3576 poděkování

Re: Úkol: HTML klikací mapa

Příspěvek od Petr.Kopac » 15 čer 2012, 05:17

Ja to vzdavam, je to lepsi predelat na tu JS knihovnu a na to ted nemam cas. Lepsi bude, kdyz to udela Vasek, ktery koneckoncu dela spoustu veci na piznamu. Sorry.
Softwarový inženýr 5+ let praxe. Evropan.
If you are neutral in situations of injustice, you have chosen the side of the oppressor. -- Desmond Tutu

greyhound
Příznivec Pirátů – Praha
Příspěvky: 36
Registrován: 21 dub 2012, 21:08
Profese: IT
Dal poděkování: 24 poděkování
Dostal poděkování: 62 poděkování

Re: Úkol: HTML klikací mapa

Příspěvek od greyhound » 15 čer 2012, 21:03

Já to udělám, asi bude lepší tím Raphaelem, aby to bylo všude stejně. Musím ale nejdřív nastudovat.
Tito uživatelé poděkovali autorovi greyhound za příspěvek:
Jakub.Michalek

Uživatelský avatar
Vaclav Malek
Uživatel fóra – není člen Pirátů
Příspěvky: 8117
Registrován: 12 čer 2009, 01:32
Profese: filozof času, meta-politik
Dal poděkování: 4877 poděkování
Dostal poděkování: 8355 poděkování
Kontaktovat uživatele:

Re: Úkol: HTML klikací mapa

Příspěvek od Vaclav Malek » 15 čer 2012, 21:06

greyhound píše:Já to udělám, asi bude lepší tím Raphaelem, aby to bylo všude stejně. Musím ale nejdřív nastudovat.
Já už připravuji novou svg verzi. Takže.... jako být tebou tak se do toho asi nepouštím... jelikož už to skoro mám.
Tito uživatelé poděkovali autorovi Vaclav Malek za příspěvek:
wajrou

Uživatelský avatar
Zdenek.Stepanek
Místní předsednictvo
Příspěvky: 3505
Registrován: 25 črc 2009, 22:46
Profese: IT Expert
Bydliště: Varnsdorf
Dal poděkování: 1474 poděkování
Dostal poděkování: 2902 poděkování

Re: Úkol: HTML klikací mapa

Příspěvek od Zdenek.Stepanek » 18 čer 2012, 12:48

Zapomente na ten Raphael, vzdyt to skoro v nicem nefunguje...
Nerušit, porušuju kopírovací monopol EMI Music...

Zdeněk Štěpánek, 776 189 619
„Stát vypíše nové daně, - Čech se bude dříti na ně,
Neb mu brání mozku lenost - vidět svoji zotročenost..“
F. Gellner

Uživatelský avatar
Vaclav Malek
Uživatel fóra – není člen Pirátů
Příspěvky: 8117
Registrován: 12 čer 2009, 01:32
Profese: filozof času, meta-politik
Dal poděkování: 4877 poděkování
Dostal poděkování: 8355 poděkování
Kontaktovat uživatele:

Re: Úkol: HTML klikací mapa

Příspěvek od Vaclav Malek » 18 čer 2012, 13:35

Zdenek Stepanek píše:Zapomente na ten Raphael, vzdyt to skoro v nicem nefunguje...
Raphael funguje skoro všude kde to je potřeba. Pokud je to dobře napsané. Ale tady to udělám, tak jako předtím přes klasickou klikací mapu...

Jakub Sembera
Návštěvník – není člen Pirátů

Re: Úkol: HTML klikací mapa

Příspěvek od Jakub Sembera » 18 čer 2012, 13:42

Pokouším se klikací mapu vyrobit pomocí Handy ImageMapperu. Po dokončení vyleze HTML kód ... nebude rychlejší posléze kód vyměnit za stávající Raphael, než-li "laborovat" co nechodí ?

Uživatelský avatar
Vaclav Malek
Uživatel fóra – není člen Pirátů
Příspěvky: 8117
Registrován: 12 čer 2009, 01:32
Profese: filozof času, meta-politik
Dal poděkování: 4877 poděkování
Dostal poděkování: 8355 poděkování
Kontaktovat uživatele:

Re: Úkol: HTML klikací mapa

Příspěvek od Vaclav Malek » 18 čer 2012, 14:36

Jakub Sembera píše:Pokouším se klikací mapu vyrobit pomocí Handy ImageMapperu. Po dokončení vyleze HTML kód ... nebude rychlejší posléze kód vyměnit za stávající Raphael, než-li "laborovat" co nechodí ?
Ale tam není raphael.

Uživatelský avatar
Zdenek.Stepanek
Místní předsednictvo
Příspěvky: 3505
Registrován: 25 črc 2009, 22:46
Profese: IT Expert
Bydliště: Varnsdorf
Dal poděkování: 1474 poděkování
Dostal poděkování: 2902 poděkování

Re: Úkol: HTML klikací mapa

Příspěvek od Zdenek.Stepanek » 18 čer 2012, 22:54

Jakub možná myslel mapu krajů :-)
Nerušit, porušuju kopírovací monopol EMI Music...

Zdeněk Štěpánek, 776 189 619
„Stát vypíše nové daně, - Čech se bude dříti na ně,
Neb mu brání mozku lenost - vidět svoji zotročenost..“
F. Gellner

Uživatelský avatar
Vaclav Malek
Uživatel fóra – není člen Pirátů
Příspěvky: 8117
Registrován: 12 čer 2009, 01:32
Profese: filozof času, meta-politik
Dal poděkování: 4877 poděkování
Dostal poděkování: 8355 poděkování
Kontaktovat uživatele:

Re: Úkol: HTML klikací mapa

Příspěvek od Vaclav Malek » 19 čer 2012, 01:50

Název tohoto vlákna je trochu matoucí, protože tady v tom vlákně jde o ten organizační diagram... :)

Uživatelský avatar
Vaclav Malek
Uživatel fóra – není člen Pirátů
Příspěvky: 8117
Registrován: 12 čer 2009, 01:32
Profese: filozof času, meta-politik
Dal poděkování: 4877 poděkování
Dostal poděkování: 8355 poděkování
Kontaktovat uživatele:

Re: Úkol: HTML klikací mapa

Příspěvek od Vaclav Malek » 26 črc 2012, 18:12

Dal jsem rovnou i na web, kde se jeste snazim zbavit tech hnusnych podtrzenych odkazu...

kod:

Kód: Vybrat vše

var element_name = "pgraph";
               // formulas
               var rad = Math.PI / 180;
               // urls
               var sector_cf_url = "/cf";
               var sector_rp_url = "/rp";
               var sector_rv_url = "/rv";
               var sector_rk_url = "/rk";
               var sector_kk_url = "/kk";
               var sector_po_url = "/po";
               var sector_ao_url = "/ao";
               var sector_zo_url = "/zo";
               var sector_to_url = "/to";
               var sector_fo_url = "/fo";
               var sector_mo_url = "/mo";
               var sector_kci_url = "/kci";
               var sector_kos_url = "/koss";
               var sector_kop_url = "/kop";
               // options
               var x = 600;
               var y = x;
               var lines = {stroke: "#000", "stroke-width": x/200};
               var peoples = {stroke: "#000", "stroke-width": x/300, fill: "#000", "r": x/100, href: sector_cf_url };
               var peoples_o = { fill:"#fff", href: sector_cf_url };
               var peoples_o_over = { fill:"#a2d3ea" };
               var peoples_num = 17;
               var labels_cf = { "font-size": x/25, "font-weight": "bold", href: sector_cf_url }
               var labels = { "font-size": x/42}
               var labels_rp = { fill: "#000", href: sector_rp_url }
               var labels_rp_over = { fill: "#fff" }
               // sectors options
               var sector_cf = { stroke: "#fff", "stroke-width":x/7.5, href: sector_cf_url }
               var sector_cf_over = { stroke: "#a2d3ea" }
               var sector_rp = { fill: "#fff", href: sector_rp_url }
               var sector_rp_over = { fill: "#000" }
               var sector_rv = { fill: "#fff", href: sector_rv_url }
               var sector_rv_over = { fill: "#acaaa9" }
               var sector_rk = { fill: "#fff", href: sector_rk_url }
               var sector_rk_over = { fill: "#a65dac" }
               var sector_kk = { fill: "#fff", href: sector_kk_url }
               var sector_kk_over = { fill: "#f00" }
               var sector_po = { fill: "#fff", href: sector_po_url }
               var sector_po_over = { fill: "#df9e27" }
               var sector_ao = { fill: "#fff", href: sector_ao_url }
               var sector_ao_over = { fill: "#a6d425" }
               var sector_zo = { fill: "#fff", href: sector_zo_url }
               var sector_zo_over = { fill: "#6c359c" }
               var sector_to = { fill: "#fff", href: sector_to_url }
               var sector_to_over = { fill: "#3172c2" }
               var sector_fo = { fill: "#fff", href: sector_to_url }
               var sector_fo_over = { fill: "#f14622" }
               var sector_mo = { fill: "#fff", href: sector_mo_url }
               var sector_mo_over = { fill: "#52c4b7" }
               var sector_komise = { fill: "#fff" }
               var sector_komise_over = { fill: "#f4ea18" }
               
               // usefull functions
               function addCenterSector(paper, cx, cy, r, startAngle, endAngle, params) {
                    var x1 = cx + r * Math.cos(-startAngle * rad);
                    x2 = cx + r * Math.cos(-endAngle * rad);
                    y1 = cy + r * Math.sin(-startAngle * rad);
                    y2 = cy + r * Math.sin(-endAngle * rad);
                    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(lines).attr(params);
               }
               
               function addMiddleSector(paper, cx, cy, r, startAngle, endAngle, params) {
                    var x1 = cx + r * Math.cos(-startAngle * rad);
                    x2 = cx + r * Math.cos(-endAngle * rad);
                    y1 = cy + r * Math.sin(-startAngle * rad);
                    y2 = cy + r * Math.sin(-endAngle * rad);
                    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(lines).attr(params);
               }
               
               // init
               window.onload = function(){
                    var p = Raphael(element_name, x, y);
                    
                    // sectors
                    var set_cf = p.set();
                    var element_cf = p.circle(x/2,y/2,x/2.32-lines["stroke-width"]).attr(sector_cf) // celostatni forum
                    set_cf.push(element_cf);
                    var set_kk = p.set();
                    var element_kk = addMiddleSector(p,x/2,y/2,x/2.79,288,360,sector_kk); // kontrolni komise
                    set_kk.push(element_kk);
                    var set_po = p.set();
                    var element_po = addMiddleSector(p,x/2,y/2,x/2.79,0,24,sector_po); // kontrolni komise
                    set_po.push(element_po);
                    var set_ao = p.set();
                    var element_ao = addMiddleSector(p,x/2,y/2,x/2.79,24,48,sector_ao); // administrativni odbor
                    set_ao.push(element_ao);
                    var set_zo = p.set();
                    var element_zo = addMiddleSector(p,x/2,y/2,x/2.79,48,72,sector_zo); // zahranicni odbor
                    set_zo.push(element_zo);
                    var set_to = p.set();
                    var element_to = addMiddleSector(p,x/2,y/2,x/2.79,72,96,sector_to); // technicky odbor
                    set_to.push(element_to);
                    var set_fo = p.set();
                    var element_fo = addMiddleSector(p,x/2,y/2,x/2.79,96,120,sector_fo); // financni odbor
                    set_fo.push(element_fo);
                    var set_mo = p.set();
                    var element_mo = addMiddleSector(p,x/2,y/2,x/2.79,120,144,sector_mo); // medialni odbor
                    set_mo.push(element_mo);
                    //
                    var set_kci = p.set();
                    var element_kci = addMiddleSector(p,x/2,y/2,x/2.79,144,192,sector_komise).attr({href: sector_kci_url}); // kki
                    set_kci.push(element_kci);
                    var set_kos = p.set();
                    var element_kos = addMiddleSector(p,x/2,y/2,x/2.79,192,240,sector_komise).attr({href: sector_kos_url}); // kos
                    set_kos.push(element_kos);
                    var set_kop = p.set();
                    var element_kop = addMiddleSector(p,x/2,y/2,x/2.79,240,288,sector_komise).attr({href: sector_kop_url}); // kop
                    set_kop.push(element_kop);
                    //
                    var set_rp = p.set();
                    var element_rp = addCenterSector(p,x/2,y/2,x/4.6,0,144,sector_rp); // republikove predsednictvo
                    set_rp.push(element_rp);
                    var set_rv = p.set();
                    var element_rv = addCenterSector(p,x/2,y/2,x/4.6,144,288,sector_rv); // republikovy vybor
                    set_rv.push(element_rv);
                    var set_rk = p.set();
                    var element_rk = addCenterSector(p,x/2,y/2,x/4.6,288,360,sector_rk); // rozhodci komise
                    set_rk.push(element_rk);
                    // main circle
                    var c1 = p.circle(x/2,y/2,x/2-lines["stroke-width"]).attr(lines); // big
                    //var c2 = p.circle(x/2,y/2,x/2.75-lines["stroke-width"]).attr(lines); // middle
                    //var c3 = p.circle(x/2,y/2,x/4.5-lines["stroke-width"]).attr(lines); // small
                    // people
                    var set_peoples_o = p.set();
                    for (var v = 0; v < peoples_num; v++) {
                         var alpha = 360 / peoples_num * v;
                         var a = (90-alpha) *  Math.PI / 180;
                         var px = x/2+x/2.35 * Math.cos(a);
                         var py = y/2.1+y/2.32 * Math.sin(a);
                         
                         if(py<y/1.15){ // label skip
                              //p.circle(px,py).attr(peoples); // head
                              if(v%2==0) set_cf.push(p.circle(px,py).attr(peoples)); // head
                              else {
                                   var head_o = p.circle(px,py).attr(peoples).attr(peoples_o);
                                   set_cf.push(head_o); // head o
                                   set_peoples_o.push(head_o);
                              }
                              // body
                              set_cf.push(p.path("M"+px+","+(py+peoples.r)+"L"+px+","+(py+peoples.r*3)).attr(peoples));
                              // hands
                              set_cf.push(p.path("M"+px+","+(py+peoples.r*1.5)+"L"+(px-peoples.r)+","+(py+peoples.r*2)).attr(peoples));
                              set_cf.push(p.path("M"+px+","+(py+peoples.r*1.5)+"L"+(px+peoples.r)+","+(py+peoples.r*2)).attr(peoples));
                              // foots
                              set_cf.push(p.path("M"+px+","+(py+peoples.r*3)+"L"+(px-peoples.r)+","+(py+peoples.r*4.5)).attr(peoples));
                              set_cf.push(p.path("M"+px+","+(py+peoples.r*3)+"L"+(px+peoples.r)+","+(py+peoples.r*4.5)).attr(peoples));
                         }
                    }
                    
                    // labels
                    set_cf.push(p.text(x/2,y/1.11,"Celostátní fórum").attr(labels_cf));
                    set_cf.push(p.text(x/2,y/1.06,"Všichni členové strany").attr(labels)).attr({href: sector_cf_url});
                    var label_rp = p.text(x/1.85,y/2.6,"Republikové\npředsednictvo").attr(labels).attr(labels_rp);
                    set_rp.push(label_rp);
                    set_rv.push(p.text(x/2.5,y/1.75,"Republikový\nvýbor").attr(labels).attr({href: sector_rv_url}));
                    set_rk.push(p.text(x/1.65,y/1.75,"Rozhodčí\nkomise").attr(labels).attr({href: sector_rk_url}));
                    set_kk.push(p.text(x/1.36,y/1.5,"Kontrolní\nkomise").attr(labels).attr({href: sector_kk_url}));
                    set_po.push(p.text(x/1.28,y/2.23,"Personální\nodbor").attr(labels).attr({href: sector_po_url}));
                    set_ao.push(p.text(x/1.365,y/2.85,"Administrativní\nodbor").attr(labels).attr({href: sector_ao_url}));
                    set_zo.push(p.text(x/1.54,y/3.85,"Zahraniční\nodbor").attr(labels).attr({href: sector_zo_url}));
                    set_to.push(p.text(x/1.88,y/4.65,"Technický\nodbor").attr(labels).attr({href: sector_to_url}));
                    set_fo.push(p.text(x/2.45,y/4.4,"Finanční\nodbor").attr(labels).attr({href: sector_fo_url}));
                    set_mo.push(p.text(x/3.35,y/3.47,"Mediální\nodbor").attr(labels).attr({href: sector_mo_url}));
                    set_kci.push(p.text(x/4.52,y/2.2,"Komise pro\nkopírování\na Internet").attr(labels).attr({href: sector_kci_url}));
                    set_kos.push(p.text(x/3.9,y/1.5,"Komise pro\notevřený\nstát").attr(labels).attr({href: sector_kos_url}));
                    set_kop.push(p.text(x/2.15,y/1.27,"Komise pro oblastní\npolitiku").attr(labels).attr({href: sector_kop_url}));
                    
                    // events
                    set_cf.mousemove(function(){ element_cf.attr(sector_cf_over); set_peoples_o.attr(peoples_o_over); });
                    set_cf.mouseout(function(){ element_cf.attr(sector_cf); set_peoples_o.attr(peoples_o); });
                    set_rp.mousemove(function(){ element_rp.attr(sector_rp_over); label_rp.attr(labels_rp_over); });
                    set_rp.mouseout(function(){ element_rp.attr(sector_rp); label_rp.attr(labels_rp); });
                    set_rv.mousemove(function(){ element_rv.attr(sector_rv_over); });
                    set_rv.mouseout(function(){ element_rv.attr(sector_rv); });
                    set_rk.mousemove(function(){ element_rk.attr(sector_rk_over); });
                    set_rk.mouseout(function(){ element_rk.attr(sector_rk); });
                    set_kk.mousemove(function(){ element_kk.attr(sector_kk_over); });
                    set_kk.mouseout(function(){ element_kk.attr(sector_kk); });
                    set_po.mousemove(function(){ element_po.attr(sector_po_over); });
                    set_po.mouseout(function(){ element_po.attr(sector_po); });
                    set_ao.mousemove(function(){ element_ao.attr(sector_ao_over); });
                    set_ao.mouseout(function(){ element_ao.attr(sector_ao); });
                    set_zo.mousemove(function(){ element_zo.attr(sector_zo_over); });
                    set_zo.mouseout(function(){ element_zo.attr(sector_zo); });
                    set_to.mousemove(function(){ element_to.attr(sector_to_over); });
                    set_to.mouseout(function(){ element_to.attr(sector_to); });
                    set_fo.mousemove(function(){ element_fo.attr(sector_fo_over); });
                    set_fo.mouseout(function(){ element_fo.attr(sector_fo); });
                    set_mo.mousemove(function(){ element_mo.attr(sector_mo_over); });
                    set_mo.mouseout(function(){ element_mo.attr(sector_mo); });
                    set_kci.mousemove(function(){ element_kci.attr(sector_komise_over); });
                    set_kci.mouseout(function(){ element_kci.attr(sector_komise); });
                    set_kos.mousemove(function(){ element_kos.attr(sector_komise_over); });
                    set_kos.mouseout(function(){ element_kos.attr(sector_komise); });
                    set_kop.mousemove(function(){ element_kop.attr(sector_komise_over); });
                    set_kop.mouseout(function(){ element_kop.attr(sector_komise); });
               };
EDIT: Podtržení odstraněno...
Tito uživatelé poděkovali autorovi Vaclav Malek za příspěvky (celkem 3):
Adam.Soukal, Jakub.Michalek, Jaroslav.Kucera

Odpovědět

Zpět na „Programování“

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 0 hostů