Vorschaufenster für Signatur

[Syli]

ich bin gerade dabei ein Signatur Editor zu gestallten, dieser läuft auf PhP und gibt dem benutzer verschiedene möglichkeiten seine Signatur individuel zu gestallten (wie zb. nen kleines wappen im bild positionieren ect eigene Schriftzüge, sowie variable schriftzüge) ähnlich wie viele bekannte Signatur Editoren für MMORPG's

alles läuft klasse, script ist soweit auch fast fertig, nur überlege ich jetzt ob ich nen Vorschaufenster, ich hab zwar schon eins, aber dies acktualiesiert nur per neuladen, php halt...

nun wollte ich fragen ob wer schon erfahrungen mit solchen vorschaufenstern hat und einen guten ansatz hat mit welcher sprache ich damit starten sollte, und evtl erfahrungs tipps mit sowas...


es muss halt hauptsächlich per "onchange" oder ähnlichem acktualiesiert werden ohne das die komplette seite neu läd

momentan wird die Vorschau per GD.lib erstellt (was ein neuladen vorraussetzt)

mfg und danke schonmal

Syli

[jahlives]

es muss halt hauptsächlich per "onchange" oder ähnlichem acktualiesiert werden ohne das die komplette seite neu läd

Dann wohl Javascript. Wenn du das dann noch AJAX mässig machst funzt es ganz im Hintergrund

Gruss

tobi

[wahsaga]

Re: Vorschaufenster für Signatur

Original geschrieben von Syli
momentan wird die Vorschau per GD.lib erstellt (was ein neuladen vorraussetzt)

Wenn du nur das Bild wchseln willst, dann wechsle nur das Bild.

Wie das mit Javascript geht, dazu sollten sich genug Hinweise im WWW finden lassen.

[Syli]

es geht halt nur darum das bild bei einem onchange event neu laden zu lassen um eine acktuelle vorschau zu bekommen, dabei soll möglichst der rest der seite nicht neu geladen werden um zeit, nerfen und trafic zu sparen XD

gut, javascript hatte ich auch schon im kopf und hab auch per java angefangen, hätt ja sein können das es ne bessere lösung gibt

mfg

[Syli]

ich hab da ein problem...

wie übertrage ich nach einem onchange() event die in Javascript verarbeiteten daten an ein anderes php script (das was das bild als vorschau ausgibt)...

hab schon gegoogelt ohne ende find aber nix...

<select name="background" onchange="rewrite()">

bei den <option></option> wird dann halt nen kleines javascript abgerasselt, dann erscheint für den "background" eine sepperates preview

nun hab ich noch ein grösseres preview wo alle elemente, schift, background, ramen ect. zusammen gefasst werden wollen, des mach ich mit einem php script, mein problem ist folgendes:
ich krieg es nicht hin das dass javascript(vorzugsweise) zb eine $_POST variable mit dem gewählten optionen zu befüllt...

sry aber javascript ist nicht so ganz mein lieblingssprache

mfg
syli

edit, evtl würds mir helfen wenn man per onchange event das pic erstellt und abspeichert unter der $sess_id und dannach das preview bild neu läd, aber dafür muss ohne reload das php script angesprochen werden

[wahsaga]

Warum übergibst du die Daten nicht einfach als GET-Parameter ans das bilderstellende Script ...?

[Syli]

hatte ich als erstes auch dran gedacht...

in der JS function rewrite() habe ich dann gleich den link mit geändert, klappt jedoch nur wenn ich dann das bild pre rechtsklick, nur die grafik wird dabei nicht mit aktualiesiert, warum auch immer..

[wahsaga]

Original geschrieben von Syli
in der JS function rewrite() habe ich dann gleich den link mit geändert, klappt jedoch nur wenn ich dann das bild pre rechtsklick,

Was klappt wie ...?

nur die grafik wird dabei nicht mit aktualiesiert, warum auch immer..

Dann hast du wohl was falsch gemacht.


Dass für ein per JS auszutauschendes Bild, wenn das Ersatzbild noch nicht geladen ist, erst mal ein Image()-Objekt erstellt werden sollte, hast du berücksichtigt ...?

[Syli]

Dass für ein per JS auszutauschendes Bild, wenn das Ersatzbild noch nicht geladen ist, erst mal ein Image()-Objekt erstellt werden sollte, hast du berücksichtigt ...?

natürlich, hab da nen blanko.png drin...

ich post ma nen parr bausteine..


ich mach es grad so das die vorschau nur neu geladen wird wenn man speichert, auserdem benutz ich momentan nur den background, aus testzwecken...

Vorschau Bild schnipsel, so wie ich es momentan hab

if (empty($_POST['background']) && empty($_POST['left']) && empty($_POST['right'])) {
	echo '<img width="300" height="100" src="img/blanko.png">';
}
else {
	echo '<img width="300" height="100" src="sig_vorschau.php">';
}

Das Formular, ist momentan noch im php eingebettet, wird aber später ausgebettet...

echo '
	<FORM name="background_change" action="index.php?link=sig&step=1" method="POST">
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td valign="top">
					<select name="background" onchange="rewrite()">
						<option value="">Background Wählen</option>
						'.$background_ausgabe.'
					</select>
				</td>
				<td valign=top>
					<img src="img/blanko.png" name="spacer" height="1"><BR>
					<img src="img/blanko.png" name="prspacer" width="40" height="1">
';
if (empty($_POST['background'])) {
	echo '
		<img src="img/blanko.png" name="vorschau" width="175" height="100">
	';
}
else {
	echo '
		<img src="img/sig_background/'.$_POST['background'].'" border="1" width="175" height="100" name="vorschau">
	';
}
echo '
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="Speichern">
				</td>
				<td>
				</td>
			</tr>
		</table>
	</FORM>
	<hr>
';

und die externe sig_vorschau.php
bischen grösser...

den header hab ich erst jetzt neu gebaut, vorher war der erste teil net da

//Header Infos damit es nicht zwischengespeichert wird <--- Teil 1
header("Expires: Mon, 18 Jul 1990 01:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
//Header Bildangaben
header('Content-type: image/png');

	$bg = $_POST['background'];
	$left = $_POST['left'];
	$right = $_POST['right'];
	//line 1
	$line1 = $_POST['line1'];
	$schrift1 = $_POST['schrift1'];
	$gross1 = $_POST['gross1'];
	$corlor1 = $_POST['color1'];
	//line2
	$line2 = $_POST['line2'];
	$schrift2 = $_POST['schrift2'];
	$gross2 = $_POST['gross2'];
	$corlor2 = $_POST['color2'];
	//line3
	$line3 = $_POST['line3'];
	$schrift3 = $_POST['schrift3'];
	$gross3 = $_POST['gross3'];
	$corlor3 = $_POST['color3'];


		if ($left != "blanko" && $left != "") {
			$left_pic = imagecreatefrompng('img/sig_styles_left/'.$left);
			$left_pic_width = imagesx($left_pic);
			$left_pic_height = imagesy($left_pic);
		}
		elseif ($left = "blanko" or $left = "") {
			$left_pic = imagecreatefrompng('img/sig_styles_left/blanko.png');
			$left_pic_width == 80;
			$left_pic_height == 80;
		}
		if ($right != "blanko" && $right != "") {
			$right_pic = imagecreatefrompng('img/sig_styles_right/'.$right);
			$right_pic_width = imagesx($right_pic);
			$right_pic_height = imagesy($right_pic);
		}
		elseif ($right = "blanko" or $right = "") {
			$right_pic = imagecreatefrompng('img/sig_styles_right/blanko.png');
			$right_pic_width == 80;
			$right_pic_height == 80;
		}
		//$background = imagecreatetruecolor($right_pic_width, $right_pic_height);
		if ($bg != "") {
			$background = imagecreatefrompng('img/sig_background/'.$bg);
		}
		else {
			$background = imagecreatefrompng('img/blanko.png');
		}

		$size = getimagesize('img/sig_background/'.$bg);

		$dest_x = $size[0] - $right_pic_width;
		$dest_y = 0;//$size[1] - $right_pic_height - 5;


		$white = imagecolorallocate($background,255,255,255);
		$black = imagecolorallocate($background,0,0,0);
		$red = imagecolorallocate($background,255,0,0);
		$green = imagecolorallocate($background,0,255,0);
		$blue = imagecolorallocate($background,0,0,255);
		$grey = imagecolorallocate($background,65,65,65);



		$abstand_line1_x = $left_pic_width + 15;
		$abstand_line1_y = 25;
		switch($corlor1){
			case "Weiß":
				$farbe1 = $white;
				break;
			case "Schwarz":
				$farbe1 = $black;
				break;
			case "Rot";
				$farbe1 = $red;
				break;
			case "Grün";
				$farbe1 = $green;
				break;
			case "Blau";
				$farbe1 = $blue;
				break;
			case "Grau";
				$farbe1 = $grey;
				break;
		}

		$abstand_line2_x = $left_pic_width + 15;
		$abstand_line2_y = $abstand_line1_y + $gross1 + 5;
		switch($corlor2){
			case "Weiß":
				$farbe2 = $white;
				break;
			case "Schwarz":
				$farbe2 = $black;
				break;
			case "Rot";
				$farbe2 = $red;
				break;
			case "Grün";
				$farbe2 = $green;
				break;
			case "Blau";
				$farbe2 = $blue;
				break;
			case "Grau";
				$farbe2 = $grey;
				break;
		}

		$abstand_line3_x = $left_pic_width + 15;
		$abstand_line3_y = $abstand_line2_y + $gross2 + 5;
		switch($corlor3){
			case "Weiß":
				$farbe3 = $white;
				break;
			case "Schwarz":
				$farbe3 = $black;
				break;
			case "Rot";
				$farbe3 = $red;
				break;
			case "Grün";
				$farbe3 = $green;
				break;
			case "Blau";
				$farbe3 = $blue;
				break;
			case "Grau";
				$farbe3 = $grey;
				break;
		}

		imagecopymerge($background, $right_pic, $dest_x, $dest_y, 0, 0, $right_pic_width, $right_pic_height, 100);
		imagecopymerge($background, $left_pic, 0, 0, 0, 0, $left_pic_width, $left_pic_height, 100);
		if (!empty($schrift1)) {
			imageTTFText ($background, $gross1, 0, $abstand_line1_x, $abstand_line1_y, $farbe1, "/fonts/".$schrift1, $line1);
		}
		if (!empty($schrift2)) {
			imageTTFText ($background, $gross2, 0, $abstand_line2_x, $abstand_line2_y, $farbe2, "/fonts/".$schrift2, $line2);
		}
		if (!empty($schrift3)) {
			imageTTFText ($background, $gross3, 0, $abstand_line3_x, $abstand_line3_y, $farbe3, "/fonts/".$schrift3, $line3);
		}
		//$imgname=uuid(); //erstellung einer UUID für den namen
		//imagepng($background,'signaturen/'.$imgname.'.png'); //speicherung des bildes --> nicht nötig
		imagedestroy($background);
		imagedestroy($left_pic);
		imagedestroy($right_pic);

naja, ich weis echt net weiter, wenn ich das bild über "grafik anzeigen" in einem eigenständigen fenster öffne kommt die fehlermeldung

Die Grafik "http://localhost/sigcreator/sig_vorschau.php" kann nicht angezeigt werden, weil sie Fehler enthält.

[wahsaga]

Regeln lesen, Code umbrechen.

natürlich, hab da nen blanko.png drin...

Das hat mit meinem Hinweis überhaupt nichts zu tun.

naja, ich weis echt net weiter, wenn ich das bild über "grafik anzeigen" in einem eigenständigen fenster öffne kommt die fehlermeldung

Die Grafik "http://localhost/sigcreator/sig_vorschau.php" kann nicht angezeigt werden, weil sie Fehler enthält.

Dann kommentiere die Header aus, und schau nach, welche Fehlermeldung das Script dir bringt. (error-reporting steht ja wohl hoffentlich auf E_ALL.)

[tontechniker]

Warum übergibst du die Daten nicht einfach als GET-Parameter ans das bilderstellende Script ...?

Ich lese da immer noch überall $_POST ...

[Syli]

weil ich es per formular methode POST abschicke, weil sonst die URL zu lang wird im späteren code.. find es einfach nicht schön und nicht zweckdienlich...

das mit dem error_reporting(E_ALL) kannte ich bisher net, hab mich eingelesen und gleich noch
ini_set('display_errors', TRUE)
drangehängt

bitte verzeit meine unwissenheit, programieren ist halt net meine arbeit, sondern nur mein hobby...

danke erstmal, alle fehler beseitigt, script läuft soweit, morgen schreibe ich den rest und dann kommt die grafik hinzu XD

habs jetzt überrigens per $_SESSION gelöst und das bild lasse ich in der Javafunktion rewrite() neu laden


alle wünsche erfüllt XD, zumindestens vorerst

mfg
Syli

[Syli]

AJAXläd funktioniert manchmal nicht

nun, mein ajax script funktioniert auf dem lokalhost einwandfrei, wenn ich es jedoch auf meinen webspace lade funktioniert es nur bedingt

wenn man in dem formular 2 mal schnell hintereinander auf den submit button drückt, dann werden fast alle variablen die vorher eingegeben wurden zurückgesetzt...

aus dem formular wird ein bild erstellt und temporär abgespeichen, und dann im interval abgefragt ob ein neues ist...

denke halt die einfachste methode währe evtl ein lade icon und das ausblenden der input felder.. bis das bild erstellt ist... aber evtl hat wer eine bessere idee?

[wahsaga]

Re: AJAXläd funktioniert manchmal nicht

Original geschrieben von Syli
aus dem formular wird ein bild erstellt und temporär abgespeichen, und dann im interval abgefragt ob ein neues ist...

Wann gibt es denn ein neues Bild?
Nur dann, wenn der User neue Formulardaten abgeschickt hat?

Dann verstehe ich nicht, warum du da irgendwas in "Intervallen" abfragst.
Ich hatte dir doch schon vorgeschlagen, den Bildwechsel mit Javascript zu machen.
Gut, Daten per GET ans Bildscript übergeben wolltest du nicht, mit reichlich abwegiger Begründung.
Dann könntest du ja immer noch die Daten erst mal an den Server übertragen, und in einer Session ablegen - damit sie anschliessend dem bilderzeugenden Script wieder zur Verfügung stehen.

[Syli]

ich hab die POST methode gewählt wegen der Zeichenbeschränkung, weil man background bilder und bild fragmente selbst hochladen kann