hi i really need some help,

i am trying to make a site were i can write from within a area then the text will be previewed like this http://www.wildboatnames.co.uk/ i have anything completed but the preview image which i just am really lost on any ideas ??

    Can you rewrite your question please; as it stands its hard to know what you are asking.

      I know what he means, but that is not PHP!!! that is javascript and ajax, if you look in the source code of the page you can probably figure out how to do it. PHP is not client side, just server side. but if you use PHP with Ajax you can do some pretty neat tricks....

        thanks for the responce,

        ok what im stuck on is the fact the var previewer = ?? a image

        and in the img src = is also the same image so i was gusing that this image is creating with php but i am new to all of this so i props making this more confusing then it is but i have seen alot of places telling me to generate the image with a GD extension i will get bck to you guys thanks for your help

          Just make the src attribute of the <img> tag go to a PHP script. Your browser doesn't care about the file extension, it will just grab whatever the script gives it and attempt to display the image.

          In the PHP script you can grab the information from the GET data (the stuff after the ? ) to create the image, i.e. using different fonts, colours, size, etc. The php.net manual for the GD stuff is very good, and has lots of examples. I wrote a script a couple of years back that has a lot of these features in

          http://www.ashleysheridan.co.uk/coding/php/PHP+Image+Header

            ashley this is exactly what i am trying to do but first i need to make this php script lol

              ahh that is true, could also have been made with PHP, i only said the previous statement because i saw the Javascript generating the preview. ignored the wildgraphics bit.

              ooopsy daisy.

              I made one similar but without GD the performance was not good hehe.

              probably get a lot of stick from the others but i will show you a small snippet:

              
function rpltext($letters)
{
$r = str_split($letters);


foreach($r as $i=> $t)
{
if($t == "0")
{
echo "<img src='images/letters/0.png'/>";
}

if($t == "1")
{
echo "<img src='images/letters/1.png'/>";
}
....

              well you get the rest... that was my first attempt just needed something simple with font that i couldn't install online.

              in the end i was using ajax with php to show instantly....

              I wouldn't suggest you do like what i have done, but that is just an example.

              Wouldn't mind seeing your attempt at it 🙂

                Chris, the example I gave you has pretty much all you need ready-made, and I've even explained it line-by-line. Unless me or someone else here writes the whole code for you (which won't happen) I don't see you getting any further unless you actually put a bit of effort in.

                  ashley i took that code and now just making it work for me thanks for all your help not expecting anyone to write all the code for me cheers guys

                    hi im back again, this i the only place i have found help on ( that makes sense )

                    this is the site im tyin to make heres the preview :

                    http://boats.instantonlinesuccess.co.uk/boat-names.html

                    maybe you guys can help me out remember i said im knew.

                    my hosting didnt have gd installed so thats sorted now, the script iv got to TRY an do what im doin this :

                    <?php

                    header("Content-type: image/png");
                    $CurrentFont = $GET['font'];
                    $boatname = $                    GET['text'];
                    $currentTextColour = $GET['colour'];
                    $currentEffect = $                    GET['effect'];
                    $currentEffectColour = $_GET['effectcolour'];
                    $im = imagecreatefrompng("images/test.png");
                    $px = (imagesx($im) - 7.5 * strlen($boatname)) / 2;
                    //if you exactly know the RGB color indexes
                    //$rgb = imagecolorexact($im, 0, 0, 0);
                    //or keep the rgb color by position so at top 0 left 0
                    $rgb = imagecolorat($im, 0, 0);
                    imagecolortransparent($im, $rgb);
                    imagestring($im, 64, $px, 16, $boatname, $currentTextColour);
                    imagepng($im);
                    imagedestroy($im);
                    ?>

                      this is from the java im using,

                      • not asking for any to write the code out for me - im asking if any one can point me in the right direction
                      $('previewImage').src = previewer + '?font='+ currentFont + '&text=' + boatname + '&colour=' + textcolour + '&effect=' + $('currentEffect').innerHTML + '&effectcolour=' + effectcolour + '&hull=' + currentHullColour;

                      }

                      thanks in advance

                        What exactly is the question here? Are you getting an error, is it doing something strange?

                          Your javascript (not java, that's an entirely different language) is incomplete. The braces don't match up, and its impossible to tell if it will work without seeing how you're setting those variables.

                            well i was trying to make the text appear, which it is but i need to look at adding a current font because on the site you will be able to change the font type, tryd make the colour change so i added --- $currentTextColour = $GET['colour']; ------ and the colour changes but not to the right colours ( weird ) if you look at the site im trying to make it gives the option of adding effects and effect colours so i added ---- $currentEffect = $GET['effect'];
                            $currentEffectColour = $_GET['effectcolour']; ---- but then it stops showing anything on the preview area if this makes sense ?

                              this sites on the home page

                              <script type="text/javascript">
                              var fontPopup = '';
                              var currentFont = "http://boats.instantonlinesuccess.co.uk/Arimo-Bold-Latin.ttf";
                              var currentFontName = "Arimo-Bold-Latin";

                              	var previewer = 'preview.php';

	var sizes = ['25mm (1")','38mm (1.5")','50mm (2")','64mm (2.5")','75mm (3")','89mm (3.5")','100mm (4")','125mm (5")','150mm (6")','200mm (8")','250mm (10")','300mm (12")','350mm (13.7")','400mm (15.7")','450mm (17.7")','500mm (19.6")'];

	var prices = ['1.00','1.00','1.00','1.10','1.30','1.45','1.60','1.80','2.00','2.60','3.20','3.90','4.70','6.00','7.60','8.20'];

	var effectsprices = ['1.90','1.90','1.90','2.00','2.30','2.60','2.90','3.30','3.70','4.80','5.80','7.10','8.60','10.90','13.90','15.00'];

	var currentSize = 4;
	var currentPrice = prices[currentSize];

	var colours = ['000000','0658B4','070F76','1520A1','158C1E','16621B','543007','565656','7F0DA9','94CC25','B0AFAF','CD100B','D9C306','EE45A4','F1212B','F1C721','FF3300','FFFFFF'];

	var colourNames = ['Black','Process','Midnight','Vivid','Emerald','Forest','Brown','Tarmac','Purple','Lime','Silver','Cherry','Gold','Pink','Flame','Sunflower','Poppy','White'];

	var currentColour = 0;
	var textColourPallette;
	var textcolour;
	var currentHullColour = "FFFFFF";

	var effects = [
		'No Effects',
		'Block Shadow',
		'Drop Shadow',
		'Outline'
	];

	var currentEffect = 0;
	var currentEffectColour = 0;
	var effectColourPallette;

	var currentTotal = 0;
</script>

                              and this is listed in designer.js

                              function hider(element) {
                              if(element.getStyle('display') == 'none') element.setStyle('display', '');
                              else element.setStyle('display', 'none');
                              }

                              function timedHider(element) {
                              if(element.getStyle('display') != 'none') element.setStyle('display', 'none');
                              }

                              function updatePreview() {
                              var textcolour = $('currentTextColour').getStyle('background-color').replace("#", "");
                              var effectcolour = $('currentEffectColour').getStyle('background-color').replace("#", "");
                              var boatname = $('boatname').getValue().replace("&", "%26").clean();
                              if(boatname == "enter your boat name here") {
                              boatname = "";
                              $('itemdetails').getElement('span').setHTML('There are no items in your basket');
                              }
                              else if(boatname != "") {
                              if(currentEffect == 0) pricePerChar = prices[currentSize];
                              else pricePerChar = effectsprices[currentSize];
                              price = (pricePerChar * $('boatname').getValue().replace(" ", "").length).round(2);
                              $('itemdetails').getElement('span').setHTML('"' + boatname + '" <br /> Price (inc. delivery): &pound;' + price.toFixed(2));
                              }
                              else {
                              boatname = "";
                              $('itemdetails').getElement('span').setHTML('No Item');
                              }
                              $('previewImage').src = previewer + '?font='+ currentFont + '&text=' + boatname + '&colour=' + textcolour + '&effect=' + $('currentEffect').innerHTML + '&effectcolour=' + effectcolour + '&hull=' + currentHullColour;
                              }

                              function updatePrice() {
                              (currentEffect == 0) ? price = prices[currentSize] : price = effectsprices[currentSize];
                              $('pricePerLetter').setHTML("Price per letter: &pound;" + price);
                              }

                              window.addEvent('domready', function() {

                              // alert('shopCart ' + shopCart);

                              $('boatname').addEvents({
	'blur': function()	{
		if(this.getValue().clean() == "")	{
			this.value = "enter your boat name here";
			this.setStyle('font-style', 'italic');
		}
		else	{
			this.setStyle('font-style', 'normal');
		}
	},
	'focus': function()	{
		if(this.getValue().clean() == "enter your boat name here")	this.value = "";
		this.setStyle('font-style', 'normal');
	}
}).fireEvent('blur');

// LETTER HEIGHTS
$('letterheight').getFirst().addEvent('mousedown', function()	{
	if(currentSize > 0)	currentSize--;
	$$('#letterheight .setting').setHTML('Letter height: ' + sizes[currentSize]);
	updatePrice();
}).setStyle('cursor', 'pointer');

$('letterheight').getLast().addEvent('mousedown', function()	{
	if(currentSize < (sizes.length - 1))	currentSize++;
	$$('#letterheight .setting').setHTML ('Letter height: ' + sizes[currentSize]);
	updatePrice();
}).setStyle('cursor', 'pointer');

$$('#letterheight .setting').setHTML('Letter height: ' + sizes[currentSize]);

                              /**/
                              // EFFECT TYPES
                              $('effecttype').getFirst().addEvent('mousedown', function() {
                              if(currentEffect > 0) {
                              currentEffect--;
                              }
                              if(currentEffect == 0) {
                              $('currentEffectColour').setStyle('visibility', 'hidden');
                              }
                              $$('#effecttype .setting').setHTML(effects[currentEffect]);
                              updatePrice();
                              }).setStyle('cursor', 'pointer').fireEvent('mousedown');

                              $('effecttype').getLast().addEvent('mousedown', function()	{
	if(currentEffect < (effects.length - 1))	{
		currentEffect++;
	}
	if(currentEffect != 0)	{
		$('currentEffectColour').setStyle('visibility', 'visible');	
	}
	$$('#effecttype .setting').setHTML(effects[currentEffect]);
	updatePrice();
}).setStyle('cursor', 'pointer');

$$('#effecttype .setting').setHTML(effects[currentEffect]);

                              /**/
                              // EFFECTS COLOUR PALLETTE AND EFFECT
                              // Putting effects pallette in first so it appears above the text pallette
                              coords = $('effectcolour').getCoordinates();
                              effectColourPallette= new Element('div').setStyles({
                              'position': 'absolute',
                              'width': ((coords.right - coords.left) - 30) + 'px',
                              'top': (coords.bottom - 4) + 'px',
                              'left': (coords.left + 12) + 'px',
                              'display': 'none'
                              }).addClass('pallette').setProperty('id', 'effectColourPallette').injectInside(document.body);

                              $('effectcolour').getLast().addEvent('click', function()	{
	hider(effectColourPallette);
}).setStyle('cursor', 'pointer');

$('effectcolour').getFirst().setHTML('Effect Colour : ');

colours.each(function(colour, nameIndex)	{
	new Element('div').addClass('swatch').setStyle('background', '#' + colour).setProperty('title', colourNames[nameIndex]).injectInside(effectColourPallette).addEvent('mousedown', function()	{
		$('currentEffectColour').setProperty('title', this.getProperty('title')).setStyle('background', this.getStyle('background')).setStyle('cursor', 'pointer');
		effectColourPallette.removeEvent('mouseleave');
		effectColourPallette.addEvent('mouseleave', function()	{
			timedHider(effectColourPallette);										   
		});
	});
});

$('effectColourPallette').getLast().fireEvent('mousedown');

                              /**/

                               and thers more jus cant post all of it

                              /

                                You're not actually creating the colour as a GF image colour. Look back at my original code to see how I was setting the colour for the font.

                                  Write a Reply...