Ähnlich OverDisk im browser

[overflow]

Geht ja eigentlich ganz gut, zumindest hier im Ansatz bild
Es ist ein einziges div rot background, darüber viele kleine divs blau und darüber eine map mit vielen areas ohne ein img.
Geht auch mit canvas statt divs, ist egal.
Man sieht leider im bild die Maus nicht. Klickt man, kommt in dem Fall der explorer auf C:\Notepad++Portable\localization
Es zeigt ja eigentlich bereits alles.
Das Runde vertikal darstellen, dabei die files horizontal und, weils so simpel ist, in gleichen kleinen Stücken nebeneinander zeigen. Der Text links entfällt dann natürlich. Er wird dann nur mehr beim drüber Flutschen mit der Maus angezeigt.
Das blendet oben horizontal die Namen ohne Verzug ruckzuck in der links vertikal dargestellten Reihenfolge auf.
php schreibt die Daten in ein javascript-array.
Die können damit für externe Datenträger auch von einem zip-file stammen ($zip = new ZipArchive(); usw.).
Jetzt gehts um die vertikale Darstellung der Ordnergrößen und um die Größenrelation.
Alles ist völlig frei in beliebigen Koordinaten im browser darstellbar.
Je weiter man bei Overdisk im Dateisystem z.B. zum C: hin hochklickt, desto mehr muß natürlich an Feinheiten herausfallen.
So könnte man das auch im browser halten.
Dazu suche ich mal Anregungen.
Oder hat sich schon jemand sowas z.B. auch aus Langeweile gebastelt?
html text ist dazu unnötig, da steht also nix
Oder auch die files vertikal mit Größenraster wie bei OverDisk?
Viell. bietet die Browserdarstellung ungeahnte Vorteile?

Es läßt sich auch wie bei OverDisk rund darstellen, mit canvas und dort tooltips.
Aber dann da durch Mausklick den zugehörigen Ordner im explorer öffnen, das geht wohl leider nicht.
Doch, geht: links mit canvas
Statt dem Textbereich dort kann ein beliebiger Flächenbereich inLink=true; herstellen lassen.
Ich glaube, viell. alles nur in canvas schreibseln.

 

[Nase]

Ich habe deinen Text zweimal gelesen, aber das einzige, was mir in Erinnerung geblieben ist, ist der Threadtitel. Oder anders ausgedrückt: Was willst du? Gibt es hier eine Frage, willst du eine Diskussion anregen oder schreibst du ein Tagebuch?

 

[overflow]

So ein Zufall, bin damit durch und hab eben hier rein geguckt.
OverDisk läßt sich genau so im browser darstellen und funktional umsetzen, ist mir in der letzten Stunde klar geworden.
Das Tagebuch eingangs war noch unausgegoren mit dem Grundgedanken.
Man kann die canvas Ringdiagramme mit tooltips belegen und gleichzeitig on_click mit bewirken, das auf ein array verweist, was dann den Ordner im dateiexplorer aufblendet.
Dazu mußte ich Dinge zusammen bringen, die ich so noch nicht verbunden sah.
Das macht Spass.
Bild - weiß nicht, wie man die Maus sehen könnte, aber egal.
Transparente tooltips übernehmen im Wirkungsbereich die Farbe unter dem Mauszeiger.
Klickt man, blendet dieser Ordner auf. Bei OverDisk geht das mit "Open".
Diese freeware soll bei Win 8 und höher angeblich nicht mehr funktionieren.
Da dachte ich mal, das im browser gleich mit abzuhandeln.
Der tooltip-Text ist völlig unabhängig vom aufgeblendeten Ordnernamen.
Das Ding wandert parallel zur Maus im sensiblen Diagrammbereich im definierten Abstand mit.
Man kann sogar in der am Monitor sichtbaren Farbe Infos verstecken, die dann aktiviert werden, wenn die Maus drüber kommt. Dazu lassen sich die Farben r, g, b und auch a (Transparenz) getrennt voneinander je nach Pixel untersuchen, über das die Maus gerade fährt.
Der Witz dabei, es ist total einfach, wenn mans mal gecheckt hat und benötigt nur wenig code.
Canvas ist lustig. Der browser kann immer mehr eigene Proggies abhandeln, womit man vom Betriebssystem etwas unabhängiger wird.

function pixelOnMouseOver(ctx,callback){  
			var canvas = ctx.canvas;
			var w = canvas.width, h=canvas.height;
			var data = ctx.getImageData(0,0,w,h).data;
			canvas.addEventListener('mousemove',function(e){    
			canvas.addEventListener("click", on_click, false);
			var idx = (e.offsetY*w + e.offsetX)*4; x=e.offsetX; y=e.offsetY;
			var parts = Array.prototype.slice.call(data,idx,idx+4);
			callback.apply(ctx,parts);
			},false);
		}
		
pixelOnMouseOver(ctx,function(r,g,b,a){  
			var isOver = a > 10;
			if (isOver != wasOver){
				can.style.backgroundColor = isOver ? '#ff6' : '#cde';
				wasOver = isOver;
			}  rgb=(r+255*g+65025*b);    
			for(i=0;i<=ind;i++) if(rgb == farbe[i]) { das=namen[i]; innen=1; aussen=0;
			 if((xa!=x) || (ya!=y)) { ctx.putImageData(back,xa,ya); back=ctx.getImageData(x,y,250,250); xa=x;ya=y; } tooltip(x,y,50,50,150,200,5,10,10,i); 
			 }
			 if(!innen) if(!aussen) { ctx.putImageData(back,xa,ya); aussen=1; ja=false; } 
			 innen=0;
		});		
		
function on_click(e) { if(ja) {
var hoverLink="../progstart/?alle=C:\\Windows\\explorer.exe@C:\\F\\Effective@File@Search";
 window.open(hoverLink); 
 }}		

Und in ...progstart/index.php steht u.a. für 'alle' sowas wie
exec (str_replace(";","+",str_replace("@"," ",$_GET['alle']))); 
damit der tab der leer aufpoppenden (hahaha) Seite wieder verschwindet:
echo '<script type="text/javascript"> self.close(); </script>';

So mal den wesentlichen code hingepfriemelt.
Und jetzt kommt php zum Zug, was das dynamisiert und dazu canvas-array befüllt.
Ist echt witzig, was der browser so darstellen kann.
Das sind nur Skizzen oder Fragmente, die für sich funktionieren.
zwamp-x64 kann z.B. php-5.5.8-Win32-VC11-x64 von windows.php.net, hat mysql und mongodb dabei und geht auch mit phpMyAdmin-4.1.4-all-languages.zip

Schade, hat niemand Interesse?
Die browserseite wird damit sozusagen für jedes Pixel zum Applikationsinstrument.
Wo html aufhört, wirds erst so richtig interessant ;-)
Gibt nur eins, was mehr Spass macht - sowas selber klimbern (war dazu mal an einem Musikkonservatorium) Chopin Etudes
js und canvas sollten für den lokalen Eigenbedarf ohne Webzugriff für den server auf der eigenen Festplatte zugänglich werden.
Gibts da schon was?
Nicht nur immer an den PC denken, hahaha: Flügel fürs Träumen göttlich
Statt mit den Griffeln über die Tasten gleitet man mit der Maus über den Monitor, worunter dann möglichst komplexe Zusammenhänge generiert werden.
Leider hört man da nix ;-)
Dieser code sieht noch besser aus der kribbelt schon beim Gucken - wow, sowas als Programmiersprache
Ui, wie geht'n das? - die lassen was offline mitlaufen, diese Knilche, oder?
Verknallt man sich in die Violinschlüssel, dann ist man gerne bei Integralen, die so ähnlich aussehen.
Die Notenlinien sehen wie Bruchstriche aus.
Dann kann man Gift drauf nehmen: in einem blödsinnigen Ing.-Studium gibt man nur fehlerfreie Matheklausuren ab, wozu es nix zu lernen gibt.
Sich selber hält man allerdings für beknackt, weils gar so langweilig ist.

 

[overflow]

Habs heute mal wieder bearbeitet.
Jetzt fehlt noch das Zurechtdrehen, naja.
Den Mauszeiger sieht man leider nicht.
Per Rechtsklick blendet der Windows Dateiexplorer mit entsprechend geöffnetem Ordner auf.
Dabei kommt eine leere website, die gleich wieder verschwindet.
Tooltips wandern mit, können auch die Farbe unter dem Mauszeiger annehmen, was lustig ungewohnt aussieht.
PHP, js und canvas lassen sowas in wenigen Zeilen verblüffend darstellen.
http://s1.directupload.net/images/140208/hu7yaqy5.png