Put label on the image

Dear All,
I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read the value from db I would also read the said ID value. How to enable the ID to appear on top of the image ?

echo '<p>Tyre: ’ . $id . ‘</p>’;

Imagemagick method save as a page e.g.watermark.php and call using:
<img src=“watermark.php”>


<?php
$photo="sunflower.jpg";

$cmd = "convert $photo -gravity center -annotate +0+0 \\"$id \\" JPG:-";

header("Content-type: image/jpeg");
passthru($cmd, $retval);
?>  

There must be a shorter way of doing it with GD but this is an example I have and I think it will display without saving the image use as IM example above.:


<?php 
$canvas = imagecreate( 200, 100 ); 

$black = imagecolorallocate( $canvas, 0, 0, 0 ); 
$white = imagecolorallocate( $canvas, 255, 255, 255 ); 

imagefilledrectangle( $canvas, 0, 0, 200, 100, $white ); 

$font = "../fonts/verdana.ttf"; 
$text = "Sunflower"; 
$size = "30"; 
$degrees = "30"; 
$photo= "../original_images/sunflower.jpg";

$box = imagettfbbox( $size, 0, $font, $text ); 
$x = (200 - ($box[2] - $box[0])) / 2; 
$y = (100 - ($box[1] - $box[7])) / 2; 
$y -= $box[7]; 

imageTTFText( $canvas, $size, 0, $x, $y, $black, $font, $text ); 

imagecolortransparent ( $canvas, $white ); 

imagerotate( $canvas, $degrees, 0); 

imagepng( $canvas, "temp.png" ); 

ImageDestroy( $canvas ); 

$watermark = imagecreatefrompng('temp.png');   
$watermark_width = imagesx($watermark);   
$watermark_height = imagesy($watermark);   
$image = imagecreatetruecolor($watermark_width, $watermark_height);   
$image = imagecreatefromjpeg($photo);   
$size = getimagesize($photo);   
$dest_x = $size[0] - $watermark_width - 100;   
$dest_y = $size[1] - $watermark_height - 200;   
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 50);   
imagejpeg($image);   
imagedestroy($image);   
imagedestroy($watermark);   

unlink( 'temp.png'); 
?> 

oops

You may be correct Cups I am not 100% sure what he wanted.

Dear Rubble and Cups,
I guess the imagemagick I will need for another application to build watermarks that is great. But for now I will load the images and just put the relevant labels on top of it. The problem I can immerse it to be part of the imagine because later I am going to have a functionality where the black image can be swap using jquery but the label stay where it is? Anyway I have tried like this.But it comes out below the image not on the image tyre2.png?

<div style=“margin: 0; padding: 0;”><img class=“imgClass1” src=“tyre2.png” >
<p>Tyre:</p>
<img class=“imgClass1” src=“longJoinAxle.png” >
<img class=“imgClass1” src=“tyre2.png” >
</div>

The code I uploaded will just add the watermark on display; the original image will not be modified - try it.
I can not gaurentee the GD one will work as I do not use it :wink:

Your code will just display one image after the other; there would be a css method using your image as a background and write the text over it.

The problem as I read the value from db I would also read the said ID value. How to enable the ID to appear on top of the image ?

I am still struggling to understand what you want to do.

You are creating a diagram. A diagram is currently made up of images of “axles” and “tyres”.

a) Are you going to select the tyre layout from your database, and generate that plan on the fly.

b) With each “tyre” you want to display a html (or at least visual) label ?

c) or with each entire diagram you want to display one of the “tyres” highlighted

d) something else?

Dear Cups,
Ok sorry if I have confuse you guys is simple. What I would like to do is as below.

  1. Based on each different layout in the db I will show the relevant tyres and axles.
  2. On each tyre image I would like to put the location label. e.g. R1,L1 etc. Each tyre will have its own Id which I would like to hide to maybe via input hidden.
  3. Then I would have some other operation link to those tyres like I would like to exchange among them that is swapping. Send the tyre for repair, rethread etc. (For all this I guess I would require jquery right).

I hope I am clearer now.

Ok, so you have mulitple vehicle wheel layouts (diagrams).

Lets keep it simple to start with, a normal 4 wheeled van, will that do as an example?

So you have a layout with wheels, R1, L1, R2 and L2 for fwd and rear tyres, lets call it Diagram4.

I will guess you don’t want to have numerous tyre images each with R1 R2 etc stuck on them, just one image of a tyre, but somehow in the html label them up?


<img src="tyre.png" title="R1" />
<img src="tyre.png" title="R2" />
<img src="axel.png" />
<img src="tyre.png" title="L1" />
<img src="tyre.png" title="L2" />

Lets say its as simple as a mouseover title for argument’s sake (but, yes, you could do something cleverer with a client library such as jQuery).

Each tyre will have its own Id which I would like to hide to maybe via input hidden.

Now this sounds interesting, do you mean that the user looking at this page is going to be allowed to interact with the Diagram4, eg to report that tyre L2 needs replacing, for example in which case you want the tyre(s) upon being clicked to feed back some kind of information?

Is that what you want help with?

and/or

Do you need help with storing how Diagram4 extracts all the pieces it needs in order to make the diagram of a 4 wheeled van?

Dear Cups,
Yes you are right for now I am just using one image and not having numerous images with the label fixon it. But the this title=“R1” require a mouse over right? But I require is that without a mouse over or click the label to be on top of the tyre as if it was built statically. Because the mouse over method will expect user to move the mouse over to each tyre to know its location code. I would prefer on one glance they could see all the locations.

Yes user looking at this page e.g. Diagram4 is allowed to interact like swapping tyres, drag and drop into a bin where a tyre need to be rethread,repair etc. So each tyre in the each location is unique tyre which have its own unique id/serial number.

About storing and extract the piece for Diagram 4 I have managed to do it where first I build each row and store into the db. Each row will tell me is it 2 tyres or 4 tyres and type of tyres is steer or drive etc.

So each tyre in the each location is unique tyre which have its own unique id/serial number.

The vehicle can be unique, and the tyres’ placement on the vehicle at any given moment in time can be unique - but surely tyres themselves cannot be unique?

What do you do, stamp a number on each tyre?

Dear Cups,
You are right first I will register/add the tyres into the system the unique key here is tyreID. Then based on the layouts will assign tyres according to the position. So each vehicle will have a tyre position table with the positionID,tyreID in it. I hope I am clearer now right?


$rows[0]['id'] = "12345";
$rows[0]['position'] = "R1";
$rows[1]['id'] = "12346";
$rows[1]['position'] = "R2";
$rows[2]['id'] = "12347";
$rows[2]['position'] = "L1";
$rows[3]['id'] = "12348";
$rows[3]['position'] = "L2";

OK, imagine you select all the info you need from your database for this particular Diagram4 a small van.

One way to approach this might be to create a form containing all the selectable elements (tyres).

For the time being you display this along with the Diagram, and then when it is all wired up and is working you use some jQuery magic to say, hide the form but only show the necessary elements in a lightbox when a tyre is clicked.

So for each tyre you would build up the diagram as previously, but also echo out a form such as this in the page below…


<form action="update.php" method="POST" id="form_12345">
<input type="hidden" name=id value="12345" />
<select>
<option value="0">Leave alone<option />
<option value="1">Change<option />
<option value="2">Retread<option />
</select>
<input type=submit>
</form>

If at this point you cannot make the mental leap between displaying the Diagram and hiding the forms, then pursue a jQuery solution first and satisfy yourself that this is possible.

It is entirely reasonable to put the PHP/Mysql development on hold for the time being and thrash out a simple proof of concept of what you want it to look like/behave … then switch back to PHP/Mysql and move that on a little.

So, you click on a tyre and a form pops up offering some actions, is that what you want?

BTW in reply to your original question, I still cannot understand what was wrong with my first reply:

echo '<p>Tyre: ’ . $id . ‘</p>’;

even though now, amongst the made-up $rows I imagine you get from your database that could be


foreach( $rows as $row){
echo '<p>Tyre: ' . $row['id'] . ' Position: ' .$row['position']. '<br />';
echo '<img src="trye.png" id="tyre_' . $row['id'] . '" /></p>';
}

You then have jQuery intercept #id=“tyre_12345” onclick event and consequently display the form whose #id is “form_12345”.

How does that sound? Its not drag-n-drop yet, but should move you along towards that path…

Dear Cups,
Regarding this method echo '<p>Tyre: ’ . $id . ‘</p>’; I have used it in this sample can you view at here http://183.78.169.53/tyre2/page2.html. Ok back to the form method. I can create a form that is not a problem so I must detect is it on click then pop-up a menu is it? How about the drag and drop via jquery is not advisable is it?

Not saying not advisable, just saying that drag-drop is more likely to be a client-side issue, whereas PHP/Mysql is a server-side technology.

If you are intent on finding a drag-drop code sample then search in JS or jQuery forums first.

“Tyre” text in amongst your images - how you display the text a largely a css issue.

PHP can extract data and intersperse that data with html and JS, but you have to know exactly what your html has to look like first. Then you can make a reliable template.

Your first job would seem to be learn some CSS and if you want to get clever with drag-drop take a look at what can be done with HTML5, then look at other solutions with jQuery.

Dear Cup,
Actually my problem is simple just put the data on the image thats all. Never mind I will search some css too. Do you have any good jquery for drag and drop functionality?