0

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
20
Views
2 Years
Discussion Span
Last Post by Taywin
0

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

0

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

0

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

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.