DJSGTPE - Beispiel2 - HTML-Quelltext

Quelltext von djsgtpe2.html

index Anfang runter djsgt.js djsgtpe.js djsgt1.html djsgtpe1.html
Dies ist die Auflistung der Datei djsgtpe2.html, die ein Linienmuster unter Benutzung von djsgt.js und djsgtpe.js auf eine Seite malt.

Im folgenden Quelltext sind wichtige Bereiche rot und Kommentare grün markiert.
index Anfang hoch runter djsgt.js djsgtpe.js djsgt1.html djsgtpe1.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="Ulrich Kritzner">
<meta name="robots" content="none">
<title>JavaScript - DJSGT - Demo</title>
<script type="text/javascript" src="djsgt.js"></script>
<script type="text/javascript" src="djsgtpe.js"></script>
<script type="text/javascript">
<!--
/* wichtige globale Variablendeklarationen: */
var Image1,PixelEmitter1,Frame1,HTMLArea,Rect,Bar;
var fontstyle="style=\"color:#007700; font-family:helvetica,sans-serif; font-size:18px;\""
var prefix="<p align=center "+fontstyle+">";
var suffix="</p>";
var i,j,pcount=9;
var x=new Array(),y=new Array();

function Init()
{

/* Hintergrund- und Vordergrund-Styleangaben fuer Bild setzen: */
  Image1.SetBackground("#FFFFAA");
  Image1.SetBorder("2px solid #000077");

/* Info-Rahmen erzeugen und in Bild einfuegen: */
  Frame1=new DJSGTFrame(4,59,250,140,"#FFFF00","1px solid #770000");
  Frame1.ShowObject(Image1);

/* HTML-Bereich erzeugen und in Rahmen einfuegen: */
  HTMLArea=new DJSGTHTMLArea(0,0,250,100,prefix+"Berechnung..."+suffix);
  HTMLArea.ShowObject(Frame1);

/* Rechteck erzeugen und in Rahmen einfuegen: */
  Rect=new DJSGTRect(3,100,242,36,"1px solid #770000");
  Rect.ShowObject(Frame1);

/* Balken erzeugen und in Rechteck einfuegen: */
  Bar=new DJSGTBar(1,1,1,34,"#000088");
  Bar.ShowObject(Rect);

/* Pixel-Emitter erzeugen, aber noch nicht anzeigen: */
  PixelEmitter1=new DJSGTPixelEmitter(10,10,240,240,"#000077");

  window.setTimeout("Berechnung()",100);
}

function Berechnung()
{
  for (i=0;i<pcount;i++)
  {
    x[i]=120-Math.sin(Math.PI*2/pcount*i)*120;
    y[i]=120-Math.cos(Math.PI*2/pcount*i)*120;
  }
  i=0;
  j=0;

/* Inhalt von HTML-Bereich manipulieren: */
  HTMLArea.SetHTMLText(prefix+"Darstellung vorbereiten..."+suffix);

  window.setTimeout("Zeichne()",300);
}

function Zeichne()
{
  var k;
  for (k=0;(k<(pcount/4))&&(i<pcount);k++)
  {
    if (j<=i)
      j=i+1;
    if ((j<pcount)&&(i<pcount))
    {

/* Linie im PixelEmitter malen: */
      PixelEmitter1.SetXY(x[i],y[i]);
      PixelEmitter1.LineTo(x[j],y[j],2);

      j++;
    }
    if (j==pcount)
    {
      j=0;
      i++;
    }
  }

/* Breite des Balkens dem Malfortschritt anpassen: */
  Bar.ResizeTo((i*pcount+j)*240/(pcount*pcount),34);

  if (i<pcount)
  {

/* Inhalt von HTML-Bereich manipulieren: */
    HTMLArea.SetHTMLText(prefix+"Darstellung vorbereiten...<br>"+i+"/"+pcount+suffix);

    window.setTimeout("Zeichne()",200);
  }
  else
  {

/* Inhalt von HTML-Bereich manipulieren: */
    HTMLArea.SetHTMLText(prefix+"Darstellung aufbauen..."+suffix);

    window.setTimeout("Beende()",200);
  }
}

function Beende()
{

/* Info-Rahmen aus dem Bild entfernen: */
  Frame1.HideObject();
 
/* Pixel-Emitter jetzt anzeigen: */
  PixelEmitter1.ShowObject(Image1);

}

function ColorModel(bgcolor,color)
{

/* andere Bild-Hintergrundfarbe einstellen: */
  Image1.SetBackground(bgcolor);

/* andere Bild-Randfarbe einstellen: */
  Image1.SetBorder("2px solid "+color);

/* andere PixelEmitter-Vordergrundfarbe einstellen: */
  PixelEmitter1.SetColor(color);

}
//-->
</script>
</head>

<!-- Init-Funktion onLoad aufrufen: -->
<body onLoad="Init();">

<h4 align=center>
Demo zur Verwendung von "djsgt.js" und "djsgtpe.js"<br>
(DJSGT - Dr&ouml;ppez JavaScript Graphics Tool)<br>
(DJSGTPE - DJSGT Pixel Emitter)
</h4>
<table align=center border="0" cellspacing="0" cellpadding="0"><tr><td>
<script type="text/javascript">
<!--

/* Bild auf der Seite erzeugen, Breite 260, Hoehe 260: */
Image1=new DJSGTImage(260,260);

//-->
</script>
</td></tr></table>
<p align=center>
(c) 2002 <a href="../../tohome.html">Ulrich Kritzner</a>
<br>
<br>

<!-- Farben aendern per Querverweis: -->
<a href="javascript:ColorModel('#FFFFAA','#000077')">blau auf gelb</a><br>
<a href="javascript:ColorModel('#000000','#FFFFFF')">wei&szlig; auf schwarz</a><br>
<a href="javascript:ColorModel('#FFFFFF','#000000')">schwarz auf wei&szlig;</a><br>
<a href="javascript:ColorModel('#007700','#AAFFAA')">gr&uuml;n auf gr&uuml;n</a><br>

<br>
die Verwendung von "djsgt.js" und "djsgtpe.js" in kommerziellen Seiten ist kostenpflichtig
<br>
<br>
<a href="index.html">zur&uuml;ck zum Index</a>
</p>

</body>
</html>
index Anfang hoch djsgt.js djsgtpe.js djsgt1.html djsgtpe1.html
Autor: Ulrich Kritzner