Wie man eigene Dijits/Dojo Widgets schreibt (HowTo)

Dojo erfreut sich immer größerer Beliebtheit, so auch die Dijits aus der Dojo-Dijit-Bilbiothek. Nun ist man nicht auf die vor gefertigten Dijits beschränkt, sondern kann auch eigene erstellen. Dazu benötigt man HTML und JavaScript-Erfahrungen.

So, nicht viel geschwafel, sondern direkt los legen. Zuerst importiert man die Basisklassen:

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dijit._Widget ist die Basisklasse für Dijits generell und dijit._Templated ist ein sehr nützlicher Dijit-Zusatz zur Markup-Verwaltung.

Danach erstellt man seine Klasse mittels dojo.declare, wobei wir uns der zuvor geladenen “Mix-Ins” bedienen. In die hinteren geschweiften Klammern kommt gleich unser eigentlicher Code.

dojo.declare("my.widget", [ dijit._Widget, dijit._Templated ], {});

In dem Beispiel hier werden wir einfach “Hallo Welt” ausgeben, um zu verstehen wie Dijits aufgebaut sind. Dazu schreiben wir uns erst ein bisschen Markup (HTML) in die Code-Klammern:

{
    templateString: "<div data-dojo-attach-point='ausgabeDiv'></div>",
    postCreate: function () {}
}

Die Namen, die man Elementen via data-dojo-attach-point gibt, lassen sich nach postCreate als Eigenschaften in this verwenden. postCreate ist also so zu sagen der Konstruktor.

Dennoch schreiben wir uns erst eine Funktion, welche “Hallo Welt” in unser Div schreiben soll:

    schreibHalloWelt: function ()
    {
        this.ausgabeDiv.innerHTML = "Hallo Welt!";
    }

Dann rufen wir das ganze im postCreate einfach auf:

this.schreibHalloWelt();

Sodass der gesamte Code am Ende so aussieht:

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("my.widget", [ dijit._Widget, dijit._Templated ], {
    templateString: "<div data-dojo-attach-point='ausgabeDiv'></div>",
 
    postCreate: function () 
    {
        this.schreibHalloWelt();
    },
 
    schreibHalloWelt: function ()
    {
        this.ausgabeDiv.innerHTML = "Hallo Welt!";
    }
});

Ein solches Dijit erstellt man später ganz normal durch den Namen, den man Ihm gegeben hat, in HTML z.B. so:

<div data-dojo-type="my.widget" data-dojo-props=""></div>

Über die data-dojo-props lassen sich Eigenschaften der Klasse ändern, da in diesem Beispiel aber keine Eigenschaften vorhanden sind, klappt das hier auch nicht.

Viel Erfolg, und eigene Erfahrungen und Infos gerne in den Kommentaren schreiben!

OpenGL Bloom Shader

Habe gestern für Galaxy War Commander einen bloom shader geschrieben und wollte den hier nochmal explizit vorstellen. Zu beachten ist das der Shader auf eine Framebuffer-Textur angewendet wird.

Vertexshader Source:

varying vec2 texcoord;
 
void main(void)
{
    gl_Position = ftransform();
    texcoord = vec2(ftransform() * 0.5 + 0.5);
}

Der Vertexshader transformiert die position und gibt diese zur weiteren Verarbeitung an den Fragmentshader weiter.

Fragmentshader Source:

uniform sampler2D rscene;
varying vec2 texcoord;
 
void main()
{
    vec4 pxl = texture2D(rscene, texcoord);
    float avg = ((pxl.r + pxl.g + pxl.b) / 3.0);
 
    // bloom
    {
        vec4 sum = vec4(0.0);
        for (int i = -5; i <= 5; i++)
        {
            for (int j = -5; j <= 5; j++)
            {
             sum += texture2D(rscene, (texcoord + vec2(i, j)
                   * 0.0018)) * 0.015;
            }
        }
 
        if (avg < 0.025)
        {
            gl_FragColor = pxl + sum * 0.335;
        }
        else if (avg < 0.10)
        {
            gl_FragColor = pxl + (sum * sum) * 0.5;
        }
        else if (avg < 0.88)
        {
            gl_FragColor = pxl + ((sum * sum) * 0.333);
        }
        else if (avg >= 0.88)
        {
            gl_FragColor = pxl + sum;
        }
        else
        {
            gl_FragColor = pxl;
        }
    }
}

Hier wird das gerenderte Bild zunächst weichgezeichnet und dann je nach Intensität des darunterliegenden Pixels über den Render gelegt. Die Werte (Weichzeichengröße- und Auflösung, Intensität) können je nach Geschmack angepasst werden.

Das Resultat (rechts) kann sich allemale sehen lassen!

Viel Spaß!

PowerBZAdmin

Seit ein paar Tagen arbeite ich nun schonwieder an einem neuen C#-Lernprojekt, welches mir Netzwerkkommunikation näherbringen soll. Mein Vorhaben ist es, den von BZFlag mitgelieferten BZAdmin von grund auf neu und machtvoller zu programmieren. So soll er eine stets aktuelle Spielerliste, eine Variablenliste sowie auch den Chat verfügen. Alle bereiche sollen bei gegebenen Rechten auch die verfügbaren Administratorfunktionen verwenden. Somit soll die Administrierung von bereits laufenden BZFlag Servern den Administratoren sowie Eigentümern erleichtert werden und auch weniger versierten Benutzern zugänglich gemacht werden.

Bald schon werde ich in meinem Software-Breiech eine Seite für PowerBZAdmin einrichten, auf der es erste Screenshots und ein paar Infos geben wird. Diese Seite sowie auch das Programm werden auf Englisch sein, da BZFlag ein internationales Onlinespiel ist.

Schlechte Besucherzähler verbessern

Durch einen Verwandten bin ich nun auf ein paar Internetseiten gest0ßen die eine art Rangliste der Benutzerseiten aufgrund der Aufrufstatistiken aufstellt. Wer die meisten Klicks hat steht ganz vorne.

Soweit sogut ist die Idee, so ein Ranking zwischen beliebten und unbeliebten Profilen zu erstellen und den Besuchern das Navigieren zu häufig besuchten Seiten zu erleichtern. Nur leider wurde hier nicht ganz zu Ende gedacht (oder der zuständige Programmierer war einfach unfähig), denn auf dieser Seite seine eigenen Besucherzahlen in die höhe zu treiben ist so einfach wie Brot schneiden.

Mit Firefox alleine schon lassen sich mit intensivem Klicken auf den eigenen Profillink, so das Firefox mehrere Anfragen absendet, ohne Probleme bis zu 150 Klicks in kürzester Zeit (1 Minute) produzieren. Nicht auszudenken wären die Auswirkungen eines Scriptes welches von einem Server aus ausgeführt würde und jede Sekunde zwei mal klickt. Jeder könnte nach belieben seine Besucherzahlen gestalten, und es ginge nicht mehr danach wer der Bessere ist sondern wer die bessere Klickmaschine hat.

Dabei ist es doch garnicht so schwer das zu verhindern. Da die meisten dieser Seiten (und höchst wahrscheinlich auch diese spezielle) an eine Datenbank angebunden sind, lässt sich ein IP-Klick-Limiter doch ohne weiteres in wenigen Minuten einbauen. Alles was man hinzufügen muss ist eine Tabelle mit zwei Spalten und ein paar wenige Zeilen Code.

CREATE TABLE clicklimit (
 ip INT(14) NOT NULL,
 la INT(14) NOT NULL,
 PRIMARY KEY (ip)
)

Nun den PHP Teil:

 // aktuelle ip eintragen wenn sie nicht existiert,
 // mit time()-30 damit der klick gezaehlt wird
 mysql_query("INSERT IGNORE INTO clicklimit
 ( ip, la)
 VALUES ( ".ip2long($_SERVER['REMOTE_ADDR'])."
 , ".time()-30.")");
 
 // die daten fuer die aktuelle ip auslesen
 $req = mysql_query("SELECT * FROM clicklimit
 WHERE ip = ".ip2long($_SERVER['REMOTE_ADDR']));
 $tmp = mysql_fetch_array($req);
 $res = $tmp[0]; unset($tmp);
 
 // klick nur zaehlen wenn seit dem
 // letzten klick 30 sekunden vergangen sind
 if ( $res['la']+30 &lt;= time() ) {
  // besucherzahl erhoehen code
 
  // nun die aktuelle ip akutalisieren,
  // damit man nicht betruegen kann
  mysql_query("UPDATE clicklimit SET
  la = ".time()." WHERE
  ip = ".ip2long($_SERVER['REMOTE_ADDR']));
 }

Wie man sieht nur wenige Zeilen zusätzlicher Code mit großer wirkung! Und ich hoffe das hilft einigen Webmastern und/oder Webdevelopern weiter und macht nicht nur Rankingsysteme sondern auch Online-Votings sicherer!

SZVP – Visual C# Projekt

So, ich arbeite nun schon seit einigen Tagen an einem neuen Projekt für das Studierzimmer unserer Schule, wo Schüler geregelten zugang zu Computern mit Internet etc bekommen. Da die Verwaltung der Schüler momentan recht aufwendig ist (Schüler bekommen einen eigens angefertigten Benutzerausweis, Schülerdaten in Excel-Mappen gespeichert) hatte mein Co-Administrator die Idee eine eigene Verwaltungssoftware für die Aufsicht zu entwickeln. Dies übernahm ich dann, weil er nur auf Webanwendungen klar kommt.

Das ganze macht sich solangsam über einen holprigen Weg zu einer halbwegs benutzbaren Software, aber noch ist sie ja nicht vollendet. Heute habe ich endlich die Datenbanken angelegt, für welche ich schon Gestern eine Klasse zum Zugriff schrieb.

Ob das Produkt dann irgendwann der Öffentlichkeit verfügbar gemacht wird überlege ich mir noch.

Counter pushen mit PHP

Da ich heute gefragt wurde wie man denn ein PHP Skript bauen könnte welches Internetseiten nacheinander aufruft um dort die Besuchercounter ein wenig zu beschleunigen habe ich mal was kleines gebastelt.

Das Skript ruft die im Array gespeicherten URLs der Reihe nach auf und ist dann fertig. Zum regelmäßigen Aufruf am besten als CronScript eintragen. :)

<?php
$sites = array(
 "http://domain.com/",
 "http://foo.com/",
 "http://bar.org/"
);
foreach ( $sites as $site )
{
 $call = file_get_contents($site);
 unset($call);
}
?>

Erläuterung:

Zunächst speichern wir alle unsere URLs in einem Array. Dann gehen wir der Reihe nach mit Foreach den Array durch und rufen mit file_get_contents(); die jeweilige URL auf. Um Ressourcen zu sparen bei einem etwas längeren Array löschen wir den cache der soeben aufgerufenen URL mit unset().

VisualC#

Ich muss jetzt doch mal sagen, dass es mir sehr viel Spaß macht mich mit der Entwicklung von Desktopapplikationen zu beschäftigen und VisualC# zu lernen. Ich finde es ist eine wohltuende Abwechslung zur Webentwicklung und lohnt sich auch durchaus.

Heute habe Ich gelernt wie ich DLLs erstelle und verwende, sowie ein bisschen mehr über OOP und habe auch einem Kumpel bei seinem Projekt geholfen. Ich finde es sehr interessant, das man in Klassen nicht nur Funktionen sondern auch alle Variablentypen und Objekte als publike oder private Variable oder Funktion verwenden kann.

public int i () {
 return 1;
}

Dies ist ein kleines Beispiel dafür, welches meine Entdeckung veranschaulichen soll. Einige die sich schon etwas länger mit OOP beschäftigen mag das lächerlich vorkommen aber für einen einsteiger ist dies durchaus nützliches Wissen!

Da ich jedoch mit Visual Studio 2008 Express arbeite bin ich momentan noch an die Windows-APIs und .NET gebunden, will mich aber sobald meine Fähigkeiten ausreichend sind davon befreien und eigenständiger werden.

Passwort Generator

Ich habe mich dazu entschieden entlich mal mit der Entwicklung von Desktopapplikationen mit VisualC# zu beginnen. Erstes Produkt dieses Entschlusses ist nun ein Passwort Generator, welcher dem Benutzer erlaubt vorher zu definieren wie die Passwörter aus zu sehen haben, damit der Erfolg garantiert ist.

Das Programm steht unter der Creative Commons, Namensnennung Nicht-Kommerziell Keine-Bearbeitung, Lizenz zum download.

Password Generator by Cobra_Fast Setup

Password Generator by Cobra_Fast Setup