Convert html/css into PDF and save into database

I don't believe it would be necessary to convert it to a PDF. But I could be wrong. I am still a little confused on what you are trying to achieve.

i don't?

example: http://www.thestables-doncaster.co.uk/images/wedd_room_layout01.jpg

this layout is in the div mentioned in OP, and id like to save that whole thing in the database : the position, the tables etc. it can be retrieved from database and be edited. how would i do that then?

Ok am I to assume that you want to save 'snapshots' of different layouts? E.g. with three chairs here and 4 tables there, sort of thing?

Table and chair icons (large tables, small tables etc.) are a fixed size I take it? And a user can then drag them around to place them how they want them, add more/less of the icons. Are you using a coordinate or position system for those icons.. would it not be easier to store the icon positions in a database? In other words, if you have a 500x500 pixel square where icons can be placed a dragged. Would it not be so that small_table_1 is at (x40,y40), chair_1 at (x44,y42) and so on.. or are you not keeping coordinates at all?

For converting to PDF and back you'll probably need plugins, depending on what language you're using. There might even be a JavaScript solution. Converting back from PDF to HTML is going to be a bigger problem than from HTML to PDF I reckon, especially if you need high precision.

Agreed with Traevel with regard to data to be saved. An example could be...

snapshot
id | title | description | user_id | timestamp

snapdata
id | snap_id | svg_id | label | scale_percent | colour | x | y | z_index | rotation

svgs
id | label | description | filename

That should allow you to reproduce the data on extraction. Alternatively, this could be saved to something like xml or even json.

thansk traevel and diafol. i actually did not think of saving the coordinates of the elements thank you for that. i will usin offset() found a fiddle that uses that, somethin like this example:

table1.draggable({ 
   drag: function(){
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
    } 
})

now im trying to figure out how to save it into the database. i was thinking create hidden input box for x and y using js for every created table then have the positions copied into the textbox like:

$('uniqueid').text('x: ' + xPos);
$('uniqueid').text('y: ' + yPos);

then overall save according to table id or somethin but i can't get the inputs to have their own unique id; is that too complicated?

I'm assuming 'table1' is the object and it should have a unique id? If you have a "save" or "update" button. Then you can ajax the data to the db. Pass the properties of the object as post data. Let a php file do the updating to the db and send back a success/fail message.

yeah every created tables have their own unique ids.

OK in that case you have a choice of either INSERT...ON DUPLICATE KEY UPDATE or REPLACE INTO... OR a DELETE followed by an INSERT (which is what REPLACE INTO pretty much does). The INSERT/DUPLICATE may not work for you as the identifier(s) you're using will not be the primary key, so a REPLACE or straight delete all records for that snap_id (snapshot_id) and insert new ones may be better.

how would i retrieve the positions and set them to the element? thinking of using ajax to retrieve but how to set the values?

Thinking about it, I believe you could just save and retrieve the raw json - otherwise you're going to have a lot of deleting / inserting or updating to do.

So...

snapshots

id | title | description | user_id | json_data | updated_at | created_at

snap_elements

id | se_label | description | category_id | width | length | filename (or blob data)

snap_element_categories

id | cat_label