Dynamisch zeichnen in ASP.NET

[Jelly]

Ich versuche mich gerade daran, eine ASP.NET dynamisch zu gestalten, und muss dazu ein Control auf der Seite dynamisch mit grafischen Methoden zeichnen. Unter Delphi32 zieh dafür ein Canvas von einem beliebigen visuellen Control heran. Doch unter ASP.NET läuft das nicht so leicht.

Wichtig, ich will nicht NUR die Grafik zeichnen, sondern als Control in eine komplett gestaltete Seite einbinden.

Ich sitz echt auf dem Schlauch.

[Phoenix]

???

Zeichnen im ASP.NET Bereich = Grafik erstellen und an den Browser schicken.
Du willst ein Control (will heissen ein HTML-Steuerelement, welches vom Browser gerendert wird) zeichnen? Das geht so nicht.

Was ginge wäre, Du änderst den Style des Controls (z.B. mit CSS) so, dass der Browser das richtig hinrendert. Ggf. kannst Du dem Control auch noch mit CSS eine Hintergrundgrafik mitgeben, die Du dann Serverseitig selber generierst, aber so auf direktem Wege kann das nicht klappen.

[Jelly]

Es geht im Grunde um eine Art Progressbar, nur halt noch ein paar Sachen mehr.
Aber man kann doch eigene Webcontrols erstellen, und damit irgendwelche grafischen Sachen machen.
Dass das nicht so einfach geht wie unter Delphi32 ist schon klar. Nur wie pack ich das am besten an? TMS hat doch auch eine Menge an ASP.NET Controls.

PS: Ich meinte eigentlich auch nicht "Zeichnen im Browser", sondern zeichnen im "ASP.NET Code", in meinem Fall in C# gehalten.

[Phoenix]

Schon klar.

ABER: Der Server generiert entweder (X)HTML-Code der an den Client (Browser) geschickt und dort gerendert wird oder Bilder, die an den Client geschickt und von diesem angezeigt werden. Wobei letztere bei Bedarf mithilfe von System.Drawing auch selber gezeichnet werden können.

Das heisst: Wenn Du (User-)Controls designen willst, dann bleiben Dir Serverseitig genau diese zwei Mittel: HTML / CSS und Grafiken. Clientseitig gibts dann noch Javascript, mit dem Du Grafiken verändern kannst (z.B. anhand von Informationen, die sich das Script dynamisch vom Server nachlädt, Stichwort AJAX). Dazwischen gibts im Web nix.

Wenn Du eine Progress-Bar von Hand machen willst, dann bleiben Dir zwei Möglichkeiten: Ein animiertes Gif das solange im Kreis läuft wie nötig, oder aber Du musst mit AJAX Grafiken austauschen (z.B. alle 10% eine weitere Grafik mit einem weiteren Balken nachladen und austauschen).

Auf CodeProject gibt es da schon was, da kannst Du Dir zumindest mal angucken wie die das gemacht haben: ASP.NET Progressbar bei CodeProject.

[Jelly]

OK, jetzt hab ich dich verstanden.
Der Punkt ist eigentlich, wie ich die Grafik rendern kann und an den Client schicken kann.

Aber der Artikel ist sehr interessant, werd ich mir mal morgen bei der Arbeit ankucken. Ich denk, damit wird die Erleuchtung kommen.

[Phoenix]

Hrm. Im Prinzip nimmst Du ein Bitmap her und zeichnest dadrauf. Geht so ähnlich wie mit dem Canvas.

Wichtig ist jedoch:

Du schickst den HTML-Quelltext an den Client, der Browser rendert ihn und wenn er zum rendern der Seite ein Bild braucht, schickt er für das Bild eine extra Anfrage an den Server um das Bild auszuliefern.

Du hast also zwei Möglichkeiten:

1.) Du zeichnest das Bild während die Seite generiert wird, packst das Bild in ein Verzeichnis auf dem Server wo man es herunterladen kann und packst den Dateinamen in die Response.

2.) Du packst eine Referenz zum Bild an die Bild-URL (die ist eine extra aspx-Seite) und wartest dort darauf, bis die Response kommt. Dann wird konkret bei der Anfrage nach dem Bild die Referenz ausgewertert, Du schaust anhand der Referenz nach was Du genau zeichnen musst und lieferst das Bild dann entsprechend aus.

Auch wenn's VB-Code, aber lesen wirst Du das sicher können: http://www.codeproject.com/aspnet/ImageBinaryStream.asp

Dort wird gezeigt, wie Du ein Bild von einer Datenbank an den Client schickst. Ob das Bild jetzt aus der DB kommt oder selber gezeichnet wird tut dabei nichts zu Sache.

Ein klein wenig zum Zeichnen selber (hier allerdings Windows.Forms Controls) findest Du hier:
http://www.codeproject.com/cs/miscctrl/XCtrls.asp

[Jelly]

Nochmals danke. Jetzt wird mir so einiges klar.
Da ich aber private kein Visual Studio besitze, muss ich eben bis morgen auf der Arbeit warten. Ich werd aber sicherlich noch mit Fragen zurückschiessen :mrgreen:

[mkinzler]

Ein Zeichnen per JavaScript wäre auch noch eine Alternative.

[Jelly]

Eher schwer, da die Information zum Zeichnen aus einem OPC Server stammt, und ich nicht wüsst wie ich unter Java Skript darauf zugreifen könnt. Es kommt daher nur eine Serverseitige Bearbeitung in Frage. Ich müsste sonst unter asp.net die Daten holen und sie an den Browser übermitteln, der sich dann um die Darstellung kümmert. Dann send ich lieber gleich die Grafik und bleib so flexibler.

[mkinzler]

Zitat:

Eher schwer, da die Information zum Zeichnen aus einem OPC Server stammt, und ich nicht wüsst wie ich unter Java Skript darauf zugreifen könnt.

Ajax

[Jelly]

Davon hab ich noch weniger Ahnung :mrgreen:

[mkinzler]

http://ajax.asp.net/default.aspx?tabid=47

[Jelly]

Sorry für das späte Feedback. Kam leider nicht viel früher heut dazu zum Testen.

Ich hab mir das Tutorial mal genau reingezogen, und versucht es an einem einfachen Beispiel nachzuvollziehen. Hier mein Code, der aber nicht das gewünschte Ergebnis liefert (einfache Seite mit einem Button drauf):

Code:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
        StateDraw sd = new StateDraw(123456);
        sd.Draw();

        Response.Clear();
        Response.ContentType = "image/Jpeg";
        sd.Image.Save(Response.OutputStream, ImageFormat.Jpeg);
        //sd.Image.Save(@"c:\img.jpg");
        
    }
}

StadeDraw ist eine eigene Klasse, die eigentlich einwandfrei klappt. Es wird lediglich ein 300x300 Image erzeugt mit einem Text drauf ausgegeben. Denn speichere ich mit

Code:

sd.Image.Save(@"c:\img.jpg");

wird mein Bild korrekt auf Festplatte als jpg gespeichert. sd.Image liefert mir dann das erstelle Bild aus der Klasse nach aussen hin zurück.
Aber mit dem Response wills nicht klappen. Stattdessen seh im im Browser lediglich einen 300x300 grossen schwarzen Kasten.

[Jelly]

Habe jetzt noch weiterversucht, und wollte das erzeugt Image in einer Datei speichern, um es dann ganz regulär über das img Tag in Html anzuzeigen. Jetzt lässt sich das Bild aber mangels Dateiberechtigung nicht speichern.

Code:

sd.Image.Save(@"img.jpg");

Im Webverzeichnis habe ich entsprechende Recht für den Nutzer ASPNET eingeräumt. Und gebe ich den lokalen Pfad des Webs an (c:\Inetpub\blubb\img.jpg) dann geht es auch.

Folglich habe ich den Verdacht, das versucht wird in ein falsches Verzeichnis zu speichern. Kann ich denn etwa nicht mit relativen Pfaden arbeiten ?