Member Avatar for nadiam

hello. so im really noob at canvas and kinetic js as im just only learning it. i want to create a floor plan thing for this site where a user can choose 6 seater round table or 8 seater rectangle table or doorways things like that. and i thought i could use canvas or kinetic to do that. i just tried out shapes like rectange and circle. so im trying to figure out how to do a 6 seater round table, i mean i can just create each circle as the chairs and the table itself but thats just really silly. any ideas how i can achieve this?

  • 2 Contributors
  • 5 Replies
  • 142 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 5 Replies

Member Avatar for nadiam

oh i found the groups method. but how do i do the different2 coordinates without doing multiple circle methods? is it possible?

Edited by nadiam
Member Avatar for Taywin

If the object is going to be in group, why not use an image instead of javascript rendering?

Member Avatar for nadiam

Yes well, currently I am using images, easier of course but Ive been asked to make those more interactable or whatever. Like right now for Rectangle tables I have up to 10 seater but what if a person (for examlpe) wants a 20 seater table instead of the 10 seater chosen so like click on the table, modify it to 20 seater from the 10 seater and it does it dynamically. or should i make the list longer until 20 instead of until 10?

currently:
rec.jpg

Member Avatar for Taywin

Hmm... What would the table be like? A rectangle? A round table? If it is a rectangle, how would you lay out seats around the table? Is table width dynamic? Is seat size dynamic?

Edited by Taywin
Member Avatar for Taywin

Below is a sample of how to create new grouping element (with table & chairs) inside a specified div element. There are not enough verification but just to show you the concept. Not sure whether it is what you are looking for.

PS: You will need to add drag-and-drop event to each created group element though...

<!DOCTYPE HTML>
<html>
<head>
 <style type="text/css">
 body {
   min-width: 700px;
 }
 div.menu {
   width: 100%;
   min-height: 40px;
   border: 2px ridge gray;
   margin-bottom: 10px;
 }
 div.drawing-area {
   position: relative;
   width: 100%;
   min-height: 400px;
   border: 2px groove gray;
 }
 div.group-table-chairs {
   position: absolute;
   border: 0px solid transparent;
   padding: 1px;
   height: 82px;  /* 40px from table, 40px from chairs, 2px from padding */
   z-index: 5;
 }
 div.table {
   position: absolute;
   top: 20px;  /* between 2 chairs - top & bottom */
   border: 1px solid gray;
   height: 30px;
   min-width: 24px;  /* 20px per chair + 2px gap on both sides */
   z-index: 0;
   background-color: #40F0E0;
   text-align: center;
 }
 div.chair {
   position: absolute;
   border: 1px solid gray;
   height: 20px;
   width: 20px;
   z-index: -1;
   background-color: #F0D040;
   text-align: center;
 }
 </style>

 <script type="text/javascript">
 var elId=0;  // for tracking
 function genTable(drawAreaId, seatNumId) {
   var drawArea = document.getElementById(drawAreaId);
   var selSeat = document.getElementById(seatNumId);
   var seatNum = (selSeat) ? parseInt(selSeat.value, 10) : 0;
   if (drawArea && selSeat && seatNum>1) {
     if (seatNum%2 !=0) {  // odd seat number, add to end table
       // and option to implement...
     }  // drawing with end table used (odd seat #)
     else {
       var col = seatNum/2;  // seat column number
       elId += 1;
       // create grouping
       var group = document.createElement("div");
       group.id = "group"+elId;
       group.className = "group-table-chairs";
       group.style.width = ((col*24)+2)+"px";

       // create table
       var table = document.createElement("div");
       table.className = "table";
       table.style.width = (col*24)+"px";
       table.style.left = "0px";
       table.innerHTML = "T"+seatNum;
       group.appendChild(table);

       // add seats to the table
       for (var i=0; i<col; i++) {
         var chairTop = document.createElement("div");
         chairTop.className = "chair";
         chairTop.style.top = "0px";
         chairTop.style.left = ((i*24)+2)+"px";
         chairTop.innerHTML = "C";
         var chairBottom = document.createElement("div");
         chairBottom.className = "chair";
         chairBottom.style.top = "50px";  // chair top + table height
         chairBottom.style.left = ((i*24)+2)+"px";
         chairBottom.innerHTML = "C";
         group.appendChild(chairTop);
         group.appendChild(chairBottom);
       }
       drawArea.appendChild(group);
     }  // drawing w/o end table
   }  // somewhat OK arguments
 }  // function genTable
 </script>
</head>

<body>
 <div id="menu" class="menu">
 Seat Number:
 <select id="selSeat">
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="6">6</option>
  <option value="8">8</option>
  <option value="10">10</option>
  <option value="20">20</option>
 </select>
 &nbsp;&nbsp;
 <input type="button" value="Create" onclick="genTable('drawing', 'selSeat')">
 </div>
 <div id="drawing" class="drawing-area">
 </div>
</body>
</html>
Edited by Taywin
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.