Autor Zpráva
návštěvník
Profil *
Dělám strom s ikonama. Konečně jsem to nahrál na web, takže se můžete podívat.
http://seznamka.moxo.cz/

Skript je aktuálně nastaven tak, že
http://seznamka.moxo.cz/my_springyui.js
ikony které nejsou aktivní se překreslují barvou pozadí.

Není to zatím funkční, proto to dávám sem, kdyby tu někoho napadlo v čem může tkvět problém.

Co to má dělat:
Když najedu myší na ikonu Gothic (na žádnou jinou), sourozenci se nemají překrýt. Aktuální chyba: sourozenci Vegetariánství a New Age se překryjí barvou okna. Určité vodítko mi poskytuje způsob vytváření uzlu:
graph.addNodes( "Alternativní styl", ['Vegetariánství', 'New age', 'Gothic', 'Emo', 'Grunge', 'Punk', 'Nudismus', 'BDSM' ],... kde Alternativní styl je rodič. hodnota proměnné fade nebo některého člena .fade je 4 místo 0. Už jsem tam vkládal nějaké podmínky např. bloky na řádcích 423 (rodič) a ř. 461 (zpracování potomka rodiče).

Další problém je v tom, že když teda vyberu Gothic, tak hodnota fade nemá být 4 ani 3 ale 1.

Další problém že pokud pak najedu na jiný uzel tak se to celé sekne.

Jinak mám příšerné problémy s tím že na mém PC mi přestal ve Firefoxu v konzole fungovat výpis chyb z příkazu throw new Error() a console.log() si taky funguje jak chce většinou tedy nefunguje, i když v jiných částech skriptu jo. Když to otevřu ze vzdálené adresy (http://) tak mi výpis console.log to funguje ale lokálně (file://) ne. Takže se mi to hrozně špatně ladí.
mimochodec
Profil
Nepotěším tě. V opeře je to ukrutně pomalé, firefox mi dvakrát zahlásil něco o pomalém skriptu a pak spadl úplně.
Taurus
Profil
Prohlížeč to shodilo. Nikde nevidím prosbu nebo nějaký otazník, tak fakt nevím...
návštěvník
Profil *
Je tam 171 uzlů v poli a ikony se vykreslují v cyklu. Jinak mě to na Firefoxu 32.0.1 jede docela v pohodě i když zapnu konzolu. Ale z té vzdálené adresy mi to teď nechtělo načíst až na několikátý pokus. A smím se zeptat jak máte výkonný PC? Já mám i7 čtyřjádro o frekvenci 2.93 Ghz. Těch ikon tam přitom není až tak moc. Teď jsem ještě vypnul funkci ctx.strokeText(text, x, y); která měla vykreslovat světlé pozadí pod textem (ne že bych si toho všiml).
mimochodec
Profil
Jo, tohle hledání čísla verze ve firefoxu vždycky spolehlivě pobaví. Strávil jsem tím pět minut a nenašel. To je neuvěřitelnej software. Každopádně mám poslední verzi. A PC mám postarší a poslabší.
návštěvník
Profil *
Tak to asi bude počítačem. V mém prohlížeči stačí najet na nápovědu a O aplikaci Firefox. Ovšem jestli to v té nové verzi předělaly tak to jsem rád, že jsem ji nenainstaloval. Zkoušel jsem dneska nainstalovat Operu a taky jsem nemohl najít verzi. Myslím že to v Opeře jelo, akorád že jsem ji už odinstaloval (nebyla tam čeština).


Popis problému:
Když najedu na Gothic tak se mi překreslí Vegetariánství a New age (tj. první dva uzly pod Alternativní styl).

Otázka:
Jak to opravit, aby se nepřekreslily?

Posílám log:
http://pastebin.com/cDpc5xkd

V logu je to řádek 129:
"child label:Vegetariánství !!!! this_child.fade: 4 child level: 2 init: -1 fade: 4" my_springyui.js:502

A jde o to že fade má nesprávnou hodnotu. Potřebuju udělat vyjímku aby fade = 0; Už jsem tam dal podmínky ale nepomohlo to.
mimochodec
Profil
V opeře je čeština někdy od verze 7, ale to je asi jedno. To podstatné, čím ti sice nechci kazit radost, ale mělo by tě to myslím zajímat, je, že ten skript je opravdu málo použitelný. Řešíš detaily a přitom ti to shazuje prohlížeče. Nevím, jestli má smysl zkoumat, jestli tam jsou tak fatální chyby, nebo je to jen tak extrémně náročné, že to prostě části návštěvníků vůbec nepojede.
návštěvník
Profil *
mimochodec:
Ale já vím co v tom skriptu je a vím jak se do tá překonfigurovat. Je to jen o tom vykreslování do canvasu to tam bere výkon. Nechápeš to s tou Operou byla česká verze, ale nedalo se to číst.


Dodávám, že pokud padaj prohlížeče tak to bude buď špatným prohlížečem, nebo slabým počítačem, pamětí apod. Mě to jede, běží mi to tu už několik hodin od té doby co jsem to nahrál a ještě to nespadlo.
Taurus
Profil
návštěvník:
buď špatným prohlížečem, nebo slabým počítačem
Evidentně existuje třetí možnost.
návštěvník
Profil *
Ono to ale ještě není dodělané. Takže je možné že až to dodělané bude že to pojede i na slabém PC.


Taky je možné že jste nenásledovali moje instrukce správně a proto vám to spadlo. O tom že tam je bug vím a odstraním ho až potom co vyřeším ten aktuální problém s fade
návštěvník
Profil *
Ještě vám to padá? Včera jsem udělal nějakou změnu, bylo tam zacyklování a už by se to zacyklovávat nemělo.
juriad
Profil
Zatím to nespadlo, ale o plynulosti se nedá mluvit. Vytíží to jedno jádro na 100 %. Rozhodně to není použitelné jako navigace, všelijak se to překrývá a pohybuje.
návštěvník
Profil *
To nemá být navigace. Má to být rozklikávací filtr (to co si vybereš na stromu v té oblasti bude filtr hledat). V jednom čase by mělo být zobrazeno tak kolem 8-12 ikon.


Větve které neprocházíš se zabalí.


Chtěl bych to odladit ve Firefoxu ale ve vývojářských nástrojích mi neustále vyskakují ty dvě boční okna.

http://oi57.tinypic.com/rkn805.jpg

Takhle se nedá ladit. Poradíte mi jak to vyskakování vypnout?
návštěvník
Profil *
Je to normální aby funkce vracela boolean místo integer? Všude používám pouze aritmetické operace, ale po návratu se init změní buď na false nebo na true.
init = graph.nodes[this.parent_id].setParentFadeLevel(init,initNodeId,fade);      
}
return init;
}
návštěvník
Profil *
Co teď?

Dlouho jsem hledal jak vzniká ta rekurze a když jsem myslel že jsem to opravil, tak jsem ten řádek opravil tak jsem zas zjistil že ne respektive jsem to opravil v nesprávném souboru. Ale rekurze je vyřešena. Teď vyřešit proč se někteří sourozenci zakryjou když se nemaj zakrýt
juriad
Profil
Nějaký fading už tam je vidět, ale rychlost je pořád mizerná (pořad to vytěžuje procesor na 100%).
návštěvník
Profil *
A to je špatně když ti jede vlákno na 100%? U mě 80-100% ale v programátorské diskusi jsem četl že to je naprosto normální. U mě je přesun ikon (můžeš s nimi hýbat) naprosto hladký
juriad
Profil
Chápal bych to vysoké vytížení během těch pár sekund, kdy s něčím hýbu, nebo na něco najíždím, ale toto je pořád. To rozhodně není normální. Uživatel nechce, aby se to hýbalo, ale aby mu baterka v ntb vydržela o 10 minut déle.
Plynulé to rozhodně není. Navíc to zaseká zbytek stránky, třeba scrolování na té stránce (mám obrazovku na výšku jen 900px) skoro nefunguje (čekám sekundu).
Alphard
Profil
návštěvník [#17]:
Samzřejmě že je to na webu špatně. Projekty, na kterých pracuji se někdy počítají mnoho hodin a vytíží i několik procesorů na serveru (o tom možná psali na těch fórech), ale web je něco jiného. Běžně mám otevřeno několik desítek stránek v několika prohlížečích. Ta vaše chce sama pro sebe cca 50 % výkonu jednoho mého jádra, což mi roztáčí větrák (to nemám rád) a kdybych takových stránek otevřel více, zpomalí mi to počítač.
návštěvník
Profil *
To se spraví až udělám automatické zabalení ikon. Bude jich tam asi tak 4x méně, čímž se to 4x zrychlí.


Kdybych se rozhodl nevykreslovat ikonu pokud není vidět jak to zjistit že není vidět? Aktuálně souřadnice co tam jsou jsou relativní hodnoty vzhledem k pozici v canvasu.

Malá ukázka jak pracují se souřadnicema:
  jQuery(canvas).mousemove(function(e) {
    var canvasPosition = jQuery(this).offset();
        var p = fromScreen({x: e.pageX - canvasPosition.left, y: e.pageY - canvasPosition.top});
        nearest = layout.nearest(p);

    if (nearest.node.visible)
      {
      var s = toScreen(nearest.point.p);
      var h = e.pageX-canvasPosition.left > s.x ? e.pageX-canvasPosition.left - s.x : s.x - e.pageX-canvasPosition.left;
      var v = e.pageY-canvasPosition.top > s.y ? e.pageY-canvasPosition.top - s.y : s.y - e.pageY-canvasPosition.top;
      var distance = Math.sqrt(h*h + v*v);              
      underMouseEvent = distance <= iconRadius ? true : false;
      }
    else
      underMouseEvent = false;
    
    if (underMouseEvent )
      highlighted = nearest;
      
        if (dragged !== null && dragged.node !== null) {
            dragged.point.p.x = p.x;
            dragged.point.p.y = p.y;
        }
    
        renderer.start();
    });

p obsahuje souřadnice, nějaké číslo float myslím od 1 do 10
nearest je nejbližší uzel (vrácený po zavolání layout.nearest(p) ).
e obsahuje reálné souřadnice u pozici myši.

V renderu ve funkci drawNode je zase toto:
var s = toScreen(p);
vrací reálné souřadnice které jsou myslím v levého dolním rohu ikony.

Když na řádek 836 vložím
if (node.data.label="Zábava")
   {
        console.log(s);
   }
Tak můžu sledovat souřadnice ikony Zábava. A ty čísla co tam jsou jsou pro x 811,810,809 .. takže se pohybuje směrem doleva, ale zase ta hodnota je nějak vysoko nato že ikona je kousek od kraje. Celý canvas má na šířku 1200. Takže na tyto čísla asi spoléhat nemůžu.
návštěvník
Profil *
Zkusil jsem toto:

      var left = document.body.scrollLeft || window.pageXOffset;
      var top = document.body.scrollTop || window.pageYOffset;
      
      var visibleArea = {
        left: left,
        right: screen.width + left,
        top: top,
        bottom: screen.height + top        
        }
      
      if ( (s.x<visibleArea.left || s.x>visibleArea.right) && 
           (s.y<visibleArea.top || s.y>visibleArea.bottom)
          )
          {
          // console.log(node.data.label + " is off screen: " + s.x + "," + s.y );
          return false;                                    
          }
          else
          {
          console.log(node.data.label + " is on screen: " + s.x + "," + s.y );          
          }

Není do toho započítaný padding a šířka ikony + není to přesné, je to jen první pokus. Když zazoomuju a otevřu panel vývojových nástrojů (vpravo) tak mi přijde že je to přijatelné, ale mohlo by to jet rychleji, kdybych to vychytal. Zatím je ve výpisu víc ikon než by mělo být.


Mohli byste posoudit správnost toho výpočtu? Prvních 6 řádků je originální součástí programu. Projevuje se to pouze pokud zazoomuju jinak ne. Jak to opravit aby se to projevilo i kdy odzoomuju mám vlevo nebo vpravo otevřený panel a ikony nejsou všechny na obrazovce? Ve výpisu v konzole firefoxu vidíte které ikony nebyly vykresleny.

var paddingX = 6;
var paddingY = 6;
var contentWidth = node.getWidth();
var contentHeight = node.getHeight();
var boxWidth = contentWidth + paddingX;
var boxHeight = contentHeight + paddingY;
var left = document.body.scrollLeft || window.pageXOffset;
var top = document.body.scrollTop || window.pageYOffset;

var visibleArea = {
        left: left + (boxWidth/2),
        right: screen.width + left - (boxWidth/2),
        top: top + (boxHeight/2),
        bottom: screen.height + top - (boxHeight/2)        
        }
      
if ( (s.x<visibleArea.left || s.x>visibleArea.right) && 
           (s.y<visibleArea.top || s.y>visibleArea.bottom)
          )
          {
          console.log(node.data.label + " is off screen: " + s.x + "," + s.y );
          return false;                                    
          }
návštěvník
Profil *
Ještě abych to upřesnil ta posílám snímky:
http://oi62.tinypic.com/qsa2qw.jpg
Když posunu obrazovku malinko dolů, tak vegetariánství zmizí. Takže to není úplně OK, protože zmizí předčasně.

Na druhou stranu Nudismus vpravo se mi neobjeví ve výpisu když stránku posunu až dolů a ikona zmizí. Na druhou stranu začátek osy x se zdá být vpořádku, protože když posunu obrazovku trochu doleva, Nudismus se objeví ve výpisu. Ale když posunu tuto ikonu až úplně nahoru a stránku posunu úplně dolů (posun trochu doleva) tak se ikona nezobrazí ve výpisu. Tedy jako by byla stále vidět přitom je hodně vysoko.


Tady na tom snímku:
http://oi57.tinypic.com/2w6ykbl.jpg
je limit visibleArea.Top 234 což je menší než aktuální pozice ikony Nudismus y 272. A ikona se nezobrazí, ale hodnota by měla být o několik desítek px větší

Podotýkám že šířka a výška ikony je 72px.

Ještě jsem zkoušel zrušit dělení šíšky dvěma a to mi dává výsledek: y:301.10658147538095 vs visibleArea.Top 273 taky neuspokojivé...

Co tedy dělám špatně?
návštěvník
Profil *
Udělal jsem upřesnění souřadnic které je vidět při větším zoomu, ale stále se mi nedaří upřesnit výpočet tak aby platil i pro odzoomování. Vpravo mám otevřený panel a vidím pravou polovinu Canvasu. Bohužel ve výpisu nevidím žádnou ikonu která je mimo obrazovku (když odkomentuji příslušný komentář). Takže poradíte mi jak správně vypočítat ty souřadnice pro viditelnou oblast?

var paddingX = 6;
var paddingY = 6;
                  
      var contentWidth = node.getWidth();
            var contentHeight = node.getHeight();
            var boxWidth = contentWidth + paddingX;
            var boxHeight = contentHeight + paddingY;
      var text = addTextToImages ? 12 + (nodeFontStroke?2:0) : 0; // height of label
      var left = document.body.scrollLeft || window.pageXOffset;
      var top = document.body.scrollTop || window.pageYOffset;

      var bodyMargin = 8;
      var visibleArea = {
        left: left - bodyMargin - contentWidth/2,
        right: screen.width + bodyMargin + left + contentWidth/2,
        top: top - addTextToImages - bodyMargin - contentHeight/2,
        bottom: screen.height + bodyMargin + top + contentHeight/2        
        }
      
      if ( (  s.x<visibleArea.left  || 
           s.x > visibleArea.right 
              ) ||  
           ( s.y<visibleArea.top ||   
             s.y>visibleArea.bottom
             )
          )
          {
          // console.log(node.data.label + " is off screen: " + s.x + "," + s.y + " ");
          return false;                                    
          }          
          else
            {
            console.log(node.data.label + " is on screen: " + s.x + "," + s.y );
            }



Tak tohle jsem vyřešil. místo screen.width a screen.height jsem použil window.innerWidth a window.innerHeight a myslím že teď to jede správně, takže to nebude zbytečně vykreslovat ikony mimo obrazovku.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: