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?
nadiam 0 Posting Pro in Training
nadiam 0 Posting Pro in Training
oh i found the groups method. but how do i do the different2 coordinates without doing multiple circle methods? is it possible?
Taywin 312 Posting Virtuoso
If the object is going to be in group, why not use an image instead of javascript rendering?
nadiam 0 Posting Pro in Training
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:
Taywin 312 Posting Virtuoso
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?
Taywin 312 Posting Virtuoso
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>
<input type="button" value="Create" onclick="genTable('drawing', 'selSeat')">
</div>
<div id="drawing" class="drawing-area">
</div>
</body>
</html>
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.