JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<div id="container"></div>
<div id="accordion-resizer">
<div id="accordion" class="wrapper">

<h3>Build</h3>
<div>
	<p>
List of building features
<div class="room"></div>
	</p>
</div>

<h3>Equipments</h3>
<div>
<p>
List of equimpents' icons
    </p>
<div>
	<img id="house_1" class="imag" src="http://sandbox.kendsnyder.com/IM/square-stripped.png">
    <img id="house_2" class="imag" width=32 height=32 src="http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA">
</div>

</div>

<h3>Sensors</h3>
<div>
<p>
List of sensors' icons
</p>
</div>
</div>
</div>

CSS

#container {
    border:solid 1px #ccc;   
    width:600px;
    height:600px;
	position:absolute;
	left:330px;
	top:10px;
}
.wrapper { 
    width: 300px;
}
#accordion-resizer { 
	width:300px;
	height:400px;
	margin-top:10px; 
}
.room {
    width:100px;
    border:4px solid black;
    height:60px;
    position:relative;
    z-index:1;
	background-color:ivory;
}
.imag {
    width:32;
    height:32; 
    position:relative;
    z-index:2;
}

JavaScript

// drawing the accordion
$( "#accordion" ).accordion({
      heightStyle: "fill"
    });
// get a reference to the house icon
var $house = $(".imag");

// get the offset position of the kinetic container
var $stageContainer = $("#container");
var stageOffset = $stageContainer.offset();
var offsetX = stageOffset.left;
var offsetY = stageOffset.top;

// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 600
});

// grid data
var CELL_SIZE = 40,
    w = 15,
    h = 15,
    W = w * CELL_SIZE,
    H = h * CELL_SIZE;

// function of drawing the grid in the container
var make_grid = function(layer) {
    var r = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: W,
        height: H,
        fill: "white"
    });
    layer.add(r);
    for (i = 0; i < w + 1; i++) {
        var I = i * CELL_SIZE;
        var l = new Kinetic.Line({
            stroke: "grey",
            strokeWidth: 0.5,
            points: [I, 0, I, H]
        });
        layer.add(l);
    }

    for (j = 0; j < h + 1; j++) {
        var J = j * CELL_SIZE;
        var l2 = new Kinetic.Line({
            stroke: "grey",
            strokeWidth: 0.5,
            points: [0, J, W, J]
        });
        layer.add(l2);
    }
    return r;
};

var layer = new Kinetic.Layer();
//var chambre = new Kinetic.Group();
var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: CELL_SIZE,
    height: CELL_SIZE,
    fill: "white",
    stroke: "grey",
    strokeWidth: 0.5
});
var gr = make_grid(layer);

// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);

/************************************/
function Picture (x, y, name, url, eqpt_id){
    this.x = x;
    this.y = y;
    this.name = name;
    this.url = url;
    this.id = "#house_"+eqpt_id ;
}
/*Pictures = [{"x": Picture.x,
            "y": Picture.y,
            "name": Picture.name,
            "url": Picture.url,
            "eqpt_id":...