/*Inizializza il canvas principale e le sue proprietà :*/
function init_canv ()
{
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight-10;
}
/*Ricava la posizione per accentrare l'oggetto orizzontalmente*/
function width_cent(ogg_width)
{
return (canvas.width-ogg_width)/2;
}
/*Ricava la posizione per accentrare l'oggetto verticalmente*/
function height_cent(ogg_height)
{
return (canvas.height-ogg_height)/2;
}
/*Traccia una linea dati due punti e lo stile*/
function linea (x1,y1,x2,y2,sty,context)
{
context.beginPath();
context.strokeStyle = sty;
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
context.closePath();
}
/*Crea un gradiente a DUE colori dati i colori e due punti*/
function grd2 (c1,c2,x1,y1,x2,y2,context)
{
grd=context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0,c1);
grd.addColorStop(1,c2);
return grd;
}
/*Crea un gradiente circolare a DUE colori dati i colori e due centri e raggi.*/
function rgrd2 (c1,c2,x1,y1,r1,x2,y2,r2,context)
{
grd=context.createRadialGradient(x1,y1,r1,x2,y2,r2);
grd.addColorStop(0,c1);
grd.addColorStop(1,c2);
return grd;
}
/******************************************************************************/
function globalItem (home,vector)
{
//Contiene un riferimento globale degli oggetti presenti attualmente.
//I membri sono 'vector' che contiene 'vector_item' & 'home' che contiene la 'home'
//& 'url' che contiene la directory della pagina attuale
/*Costruttore*/
this.home=home;
this.vector=vector;
this.url=new Array();
this.pag=new Array();
this.p_a=0;
}
var global= new globalItem(new item(),new Array());
/******************************************************************************/
/*Verifica se all'evento 'mousemove' viene selezionato qualche oggetto*/
function onMove(event,canvas)
{
var ogg;
var x=0, y=0;
var X=event.pageX;
var Y=event.pageY;
X=X-canvas.width/2;
Y=canvas.height/2-Y;
/*************HOME*************/
ogg=global.home;
x=ogg.x;
y=ogg.y;
x=x-canvas.width/2;
y=canvas.height/2-y;
if (Math.sqrt((X-x)*(X-x)+(Y-y)*(Y-y))<25)
{
if (ogg.stat===0)
{
ogg.stat=1;
ogg.draw(canvas);
}
}
else
{
if (ogg.stat===1)
{
ogg.stat=0;
ogg.draw(canvas);
}
}
/*************ITEM*************/
for (var i=0; i<global.vector.length; i++)
{
ogg=global.vector[i];
x=ogg.x;
y=ogg.y;
x=x-canvas.width/2;
y=canvas.height/2-y;
/******/
if (Math.sqrt((X-x)*(X-x)+(Y-y)*(Y-y))<25)
{
if (ogg.stat===0)
{
ogg.stat=1;
ogg.draw(canvas);
}
}
else
{
if (ogg.stat===1)
{
ogg.stat=0;
ogg.draw(canvas);
}
}
}
/*************Pagine*************/
for (var i=0; i<global.pag.length; i++)
{
ogg=global.pag[i];
x=ogg.x;
y=ogg.y;
X=event.pageX;
Y=event.pageY;
if ((X>x)&&(X<x+20)&&(Y>y)&&(Y<y+20))
{
if (ogg.s===0)
{
ogg.s=1;
ogg.draw(canvas);
}
}
else
{
if (ogg.s===1)
{
ogg.s=0;
ogg.draw(canvas);
}
}
}
return 0;
}
/*Verifica se all'evento 'mouseclick' viene clickato qualche oggetto*/
function onClick(event,canvas)
{
var ogg;
var x=0, y=0;
var X=event.pageX;
var Y=event.pageY;
X=X-canvas.width/2;
Y=canvas.height/2-Y;
/*************HOME*************/
ogg=global.home;
x=ogg.x;
y=ogg.y;
x=x-canvas.width/2;
y=canvas.height/2-y;
/******/
if (Math.sqrt((X-x)*(X-x)+(Y-y)*(Y-y))<25)
{
if (event.button===0)
{
if (ogg.name==="Indietro")
{
event.stopImmediatePropagation();
if (global.url.length>1)
{
global.url.pop();
}
global.p_a=0;
GetText(global.url[global.url.length-1]);
}
else
{
window.open(ogg.url);
}
}
else
{
window.open(ogg.url);
}
}
/*************ITEM*************/
for (var i=0; i<global.vector.length; i++)
{
ogg=global.vector[i];
x=ogg.x;
y=ogg.y;
x=x-canvas.width/2;
y=canvas.height/2-y;
/******/
if (Math.sqrt((X-x)*(X-x)+(Y-y)*(Y-y))<25)
{
if (event.button===0)
{
if (ogg.color==="rgb(46,138,207)")
{
event.stopImmediatePropagation();
global.url.push(ogg.url);
global.p_a=0;
GetText(ogg.url);
}
else
{
window.open(ogg.url);
}
}
else
{
window.open(ogg.url);
}
}
}
/*************PAGINE*************/
for (var i=0; i<global.pag.length; i++)
{
ogg=global.pag[i];
x=ogg.x;
y=ogg.y;
X=event.pageX;
Y=event.pageY;
if ((X>x)&&(X<x+20)&&(Y>y)&&(Y<y+20))
{
if (event.button===0)
{
event.stopImmediatePropagation();
global.p_a=ogg.n;
GetText(global.home.url);
}
}
}
/*********************************/
return 0;
}
/*Gestisce gli eventi*/
function getEvents(canvas)
{
canvas.onmousedown=function (event){onClick(event,canvas);};
canvas.onmousemove=function (event){onMove(event,canvas);};
}
/*Dati n oggetti, li colloca equidistanti lungo la circonferenza di raggio 'd' e centro nell'origine (centro del canvas)*/
function pos_item (canvas,array_ogg,d)
{
var angolo=(360/array_ogg.length)*Math.PI/180;
var x=0,y=0;
for (var i=0; i<array_ogg.length; i++)
{
x=Math.cos(angolo*(i+1))*d;
y=Math.sin(angolo*(i+1))*d;
array_ogg[i].x=x+canvas.width/2;
array_ogg[i].y=canvas.height/2-y;
}
}
/*Collega un array di elementi ad un altro elemento dato da parametro con delle linee*/
function link_item (canvas,array_ogg,ogg)
{
var context = canvas.getContext('2d');
for (var i=0; i<array_ogg.length; i++)
{
var grd=grd2(array_ogg[i].color,"#FFFFFF",array_ogg[i].x, array_ogg[i].y, ogg.x, ogg.y,context);
linea(array_ogg[i].x, array_ogg[i].y,ogg.x,ogg.y,grd,context);
}
}
//OGGETTO//
function item (nome,pos_x,pos_y,status,url,colore)
{
this.name=nome;
this.x=pos_x;
this.y=pos_y;
this.url=url;
this.color=colore;
this.stat=status; //Status: 0=Normale 1=MouseOver 2=MouseClick
/*Fuzioni*/
this.draw=function(canvas)
{
var context=canvas.getContext('2d');
/*GRAFICA******************************************************************/
//Pulisco
context.save();
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(this.x, this.y, 38, 0, 2 * Math.PI, false);
context.fill();
context.restore();
context.beginPath();
/**************************************************************************/
/*Stili stroke e fill*/
var bianco="rgb(255,255,255)";
context.strokeStyle = bianco;
if (this.stat===0)
context.fillStyle = rgrd2(bianco,this.color,this.x,this.y,0,this.x,this.y,25,context);
if (this.stat===1)
context.fillStyle = rgrd2(this.color,bianco,this.x,this.y,0,this.x,this.y,25,context);
/*Immagine della 'casa' (home)*/
var imageObj = new Image();
var pos_img_x=this.x-20;
var pos_img_y=this.y-20;
imageObj.onload = function()
{
context.drawImage(imageObj,pos_img_x,pos_img_y);
};
if (this.stat===0)
context.shadowColor = this.color;
if (this.stat===1)
context.shadowColor = bianco;
context.shadowBlur = 9;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
/*Disegno il cerchio e vi disegno sopra*/
context.arc(this.x, this.y, 25, 0, Math.PI*2, true);
///////////Centrali:
if (this.color==="rgb(85,34,132)")
{
if (this.name==="Home")
{
imageObj.src = "sitemap_dir/img/home.png";
}
if (this.name==="Indietro")
{
imageObj.src = "sitemap_dir/img/back.png";
}
}
///////////Radiali:
else
{
switch (this.url.href.slice(-4))
{
case ".exe":
case ".dll":
case ".jar":
case ".bat":
imageObj.src = "sitemap_dir/img/exe.png";
break;
case ".rar":
case ".zip":
case ".iso":
imageObj.src = "sitemap_dir/img/zip.png";
break;
case ".wav":
case ".wma":
case ".mp3":
imageObj.src = "sitemap_dir/img/music.png";
break;
case ".jpg":
case ".bmp":
case ".png":
case ".gif":
imageObj.src = "sitemap_dir/img/img.png";
break;
case ".avi":
case ".wmv":
case ".3gp":
imageObj.src = "sitemap_dir/img/video.png";
break;
default:
imageObj.src = "sitemap_dir/img/doc.png";
}
}
/*Applco la grafica*/
context.fill();
context.stroke();
context.closePath();
/*TESTO********************************************************************/
var out="";
if (this.name.length>11)
{
out=this.name.slice(0,11)+"...";
}
else
{
out=this.name;
}
context.beginPath();
context.fillStyle = "#BBBBBB";
context.font="16px Segoe UI";
context.textAlign="center";
context.shadowBlur = 0;
context.clearRect(this.x-context.measureText(out).width/2,this.y+31,context.measureText(out).width,20);
context.fillText(out,this.x,this.y+41);
context.fill();
context.closePath();
};
};
//Pagine da sfogliare:
function pg(n,s)
{
//Membri:
this.n=n;
this.x=40*(n%5)+20;
this.y=Math.floor(n/5)*40+140;
this.s=s;
//Funzioni:
this.draw=function(canvas)
{
var context = canvas.getContext('2d');
//Disegno:
context.beginPath();
context.strokeStyle = "rgb(46,138,207)";
if (this.s===0)
context.fillStyle = "rgb(0,32,64)";
if ((this.s===1)||(this.s===2))
context.fillStyle = "rgb(255,255,255)";
context.fillRect(this.x,this.y,19,19);
context.strokeRect(this.x,this.y,19,19);
//Testo
context.font="16px Segoe UI";
context.textAlign="center";
if (this.s===0)
context.fillStyle = "rgb(255,255,255)";
if ((this.s===1)||(this.s===2))
context.fillStyle = "rgb(0,0,0)";
context.fillText(n+1,this.x+10,this.y+15);
context.closePath();
};
}
/*Scrive il nuero di links visualizzati****************************************/
function count_links (canvas,num)
{
var context= canvas.getContext('2d');
context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.font="20px Segoe UI";
context.textAlign="left";
context.fillText(num,canvas.width-120+context.measureText("Links: ").width,180);
context.closePath();
}
/*Gestione Pagine**************************************************************/
function pag(canvas,n)
{
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.font="20px Segoe UI";
context.textAlign="left";
context.fillText("Pagine:",20,120);
var vector=new Array();
vector=[];
for (var i=0; i<n/12; i++)
{
if (global.p_a===i)
vector.push(new pg(i,2));
else
vector.push(new pg(i,0));
}
global.pag=vector;
context.fill();
context.closePath();
}
/*Disegna HUD******************************************************************/
function draw_hud(URL)
{
/*Recupero il contesto*/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
/**************************************************************************/
var bianco="rgb(255,255,255)";
/**************************************************************************/
//Titolo:
context.beginPath();
context.fillStyle = grd2("rgb(255,255,255)","rgb(128,128,128)",20,50,220,50,context);
context.shadowColor=bianco;
context.font="italic 50px Consolas";
context.textAlign="left";
context.shadowBlur = 25;
context.shadowOffsetX = 0;
context.shadowOffsetY = 5;
context.fillText("Sitemap",20,50);
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.closePath();
/**************************************************************************/
//Rappresento mouse:
var m_pos=canvas.width-120;
//Testo:
context.beginPath();
context.fillStyle = bianco;
context.font="20px Segoe UI";
context.textAlign="center";
context.fillText("Mouse:",m_pos+25,30);
context.fillStyle ="rgb(200,200,200)";
context.font="16px Segoe UI";
context.fillText("Esplora",m_pos-50,58);
context.fillText("Apri",m_pos+87,58);
context.closePath();
//Disegno:
context.beginPath();
context.strokeStyle=bianco;
context.moveTo(m_pos,125);
context.bezierCurveTo(m_pos,150,m_pos+50,150,m_pos+50,125);
context.arcTo(m_pos+50,70,m_pos+5,65,29);
context.moveTo(m_pos,125);
context.arcTo(m_pos,70,m_pos+45,65,29);
context.moveTo(m_pos+25,69);
context.lineTo(m_pos+25,95);
context.moveTo(m_pos+10,80);
context.lineTo(m_pos+10,55);
context.lineTo(m_pos-20,55);
context.moveTo(m_pos+40,80);
context.lineTo(m_pos+40,55);
context.lineTo(m_pos+70,55);
context.moveTo(m_pos,95);
context.lineTo(m_pos+50,95);
context.stroke();
context.closePath();
/**************************************************************************/
//Links:
//Legenda colori:
context.beginPath();
context.fillStyle="rgb(46,138,207)";
context.fillRect(m_pos,200,20,20);
context.fillStyle="rgb(33,171,74)";
context.fillRect(m_pos,240,20,20);
context.closePath();
//Testo:
context.beginPath();
context.fillStyle = bianco;
context.font="20px Segoe UI";
context.textAlign="left";
context.fillText("Links:",m_pos,180);
context.font="16px Segoe UI";
context.textAlign="left";
context.fillText("Interni",m_pos+25,214);
context.fillText("Esterni",m_pos+25,254);
context.closePath();
/**************************************************************************/
//Links totali:
context.beginPath();
context.fillStyle = "rgb(150,150,150)";
context.font="16px Segoe UI";
context.textAlign="left";
context.fillText("Links file: "+(document.links.length-1),m_pos,296);
context.closePath();
/**************************************************************************/
//Sessione attuale:
context.beginPath();
context.fillStyle = bianco;
context.font="20px Segoe UI";
context.textAlign="left";
context.fillText("Sessione attuale:",20,canvas.height-85);
context.closePath();
/**************************************************************************/
//Percorso URL:
context.beginPath();
context.fillStyle = "rgb(150,150,150)";
context.font="16px Segoe UI";
context.textAlign="left";
context.fillText("URL: "+URL,20,canvas.height-30);
context.closePath();
/**************************************************************************/
//Titolo
var o=document.getElementById("tmp");
var txt=o.innerHTML;
//Se il titolo è stato specificato
var title="Non specificato.";
if (txt.indexOf("<title>")!==-1)
{
title=txt.substring(txt.indexOf("<title>")+7,txt.indexOf("</title>"));
title=title.trim();
}
////////////////
context.beginPath();
context.fillStyle = "rgb(150,150,150)";
context.font="16px Segoe UI";
context.textAlign="left";
context.fillText("Titolo: "+title,20,canvas.height-55);
context.closePath();
/**************************************************************************/
//Descrizione(meta-tag):
var desc="Non specificata.";
if (txt.indexOf('<meta name="description" content="')!==-1)
{
desc=txt.substring(txt.indexOf('<meta name="description" content="')+34,txt.indexOf('"',txt.indexOf('<meta name="description" content="')+34));
desc.trim();
}
//////////////////
context.beginPath();
context.fillStyle = "rgb(150,150,150)";
context.font="16px Segoe UI";
context.textAlign="left";
context.fillText("Descrizione: "+desc,20,canvas.height-5);
context.closePath();
/**************************************************************************/
}
/*Disegna nel contesto principale**********************************************/
function draw_canv (URL)
{
/*Recupero e pulisco il contesto*/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
draw_hud(URL);
/**************************************************************************/
/*Aggiungo la Home indicata, all'inizio dell'array delle directory.*/
/*Se l'array ha solo un elemento, ci troviamo nella home,
* altrimenti in una sottodirectory.*/
if (global.url.length===0)
{
global.url.push(URL);
}
if (global.url.length===1)
{
var home=new item("Home",canvas.width/2,canvas.height/2,0,URL,"rgb(85,34,132)");
}
else
{
var home=new item("Indietro",canvas.width/2,canvas.height/2,0,URL,"rgb(85,34,132)");
}
/**************************************************************************/
/*Configurato l'oggetto centrale (home) si passa agli altri disposti radialmente:
* Ognuno rappresenta un link della pagina attuale, se è esterno è verde,
* se è nello stesso dominio è blu, e può essere a sua volta 'esplorato'.*/
var vector_item= new Array();
vector_item=[];
for (var i=0; i<document.links.length-1; i++)
{
var chk=0;
for(var j=0; j<i; j++)
{
if (document.links[i].href===document.links[j].href)
{
chk++;
}
}
if (chk===0)
{
if (document.domain===document.links[i].hostname)
{
vector_item.push(new item(document.links[i].text,0,0,0,document.links[i],"rgb(46,138,207)"));
}
else
{
vector_item.push(new item(document.links[i].text,0,0,0,document.links[i],"rgb(33,171,74)"));
}
}
}
/**************************************************************************/
//Conto i link rappresentati:
count_links(canvas,vector_item.length);
//Gestisce i links su più pagine nel caso ce ne fossero troppi
pag(canvas,vector_item.length);
for (var i=0; i<global.pag.length; i++)
{
global.pag[i].draw(canvas);
}
vector_item=vector_item.slice(global.p_a*12,global.p_a*12+12);
/**************************************************************************/
/*Apporto alla classe globale i cambiamenti:*/
global.home=home;
global.vector=vector_item;
/**************************************************************************/
/*Posiziono e disegno i vari oggetti:*/
pos_item(canvas,vector_item,canvas.height/2-65);
link_item(canvas,vector_item,home);
for(var i=0; i<vector_item.length; i++)
{
vector_item[i].draw(canvas);
}
home.draw(canvas);
/**************************************************************************/
/*Cattura e analizza gli eventi della pagina.*/
getEvents(canvas);
/**************************************************************************/
//Se tutto è andato correttamente, ritorna 0.
return 0;
}