Add files via upload
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
Mateiadrielrafael
parent
e051e36b97
commit
fe18c7cf5c
SSH key fingerprint:
SHA256:WFp/cO76nbarETAoQcQXuV+0h7XJsEsOCI0UsyPIy6U
83
index.html
Normal file
83
index.html
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<html>
|
||||||
|
<head>.
|
||||||
|
<title>
|
||||||
|
Logic simulator
|
||||||
|
</title>
|
||||||
|
<!-- Scripts -->
|
||||||
|
<!-- jquery -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||||
|
<!-- Optional theme --
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
||||||
|
!--Latest compiled and minified JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg height = "100%" width = "100%" id = "svg1">
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!--And-->
|
||||||
|
<script src="scripts/and_gate.js"></script>
|
||||||
|
<!--Pin-->
|
||||||
|
<script src="scripts/pins.js"></script>
|
||||||
|
<!--Edges-->
|
||||||
|
<script src="scripts/edges.js"></script>
|
||||||
|
<!--Button-->
|
||||||
|
<script src="scripts/but.js"></script>
|
||||||
|
<!--light bulb-->
|
||||||
|
<script src="scripts/light.js"></script>
|
||||||
|
<!--or-->
|
||||||
|
<script src="scripts/or.js"></script>
|
||||||
|
<!--or-->
|
||||||
|
<script src="scripts/text.js"></script>
|
||||||
|
<!--not-->
|
||||||
|
<script src="scripts/not.js"></script>
|
||||||
|
<!--buffer-->
|
||||||
|
<script src="scripts/buffer.js"></script>
|
||||||
|
<!--Main-->
|
||||||
|
<script src="scripts/main.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<div class = "modal fade" id = "addel">
|
||||||
|
<div class = "modal-dialog">
|
||||||
|
<div class = "modal-content">
|
||||||
|
<div class = "modal-header">
|
||||||
|
<p>
|
||||||
|
Add a piece!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class = "modal-body">
|
||||||
|
<select id="sel">
|
||||||
|
<option value = "not">Not gate</option>
|
||||||
|
<option value = "light">Light bulb</option>
|
||||||
|
<option value = "but">Button</option>
|
||||||
|
<option value = "buffer">Buffer</option>
|
||||||
|
<option value = "or">Or gate</option>
|
||||||
|
<option value = "and">And gate</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class = "modal-footer">
|
||||||
|
<button type="button" onclick = '$("#addel").modal("hide"); addel();' class="btn btn-primmary" id = "done">
|
||||||
|
Add!!!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<link href="st.css" rel="Stylesheet" type="text/css" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
103
scripts/and_gate.js
Normal file
103
scripts/and_gate.js
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
console.log("and");
|
||||||
|
function and(id){
|
||||||
|
this.id = id;
|
||||||
|
this.rep = add(80,80,"blue","black",this.id,false);
|
||||||
|
this.pin1 = new pin(0);
|
||||||
|
this.pin2 = new pin(0);
|
||||||
|
this.o = new pin(1);
|
||||||
|
this.o.nei = this;
|
||||||
|
this.activation = function(){
|
||||||
|
if (this.pin1.val && this.pin2.val){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
|
x: "50",
|
||||||
|
y: "50",
|
||||||
|
id: (id+"-skin"),
|
||||||
|
width:"80",
|
||||||
|
height:"80"
|
||||||
|
});
|
||||||
|
var img = $(document.createElement('img')).attr({
|
||||||
|
height:"72",
|
||||||
|
width:"72",
|
||||||
|
src:"textures/gates/and_gate.jpg"
|
||||||
|
});
|
||||||
|
var iDiv = document.createElement("div");
|
||||||
|
$(iDiv).append(img);
|
||||||
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
|
||||||
|
//updating
|
||||||
|
this.update = function(){
|
||||||
|
//the main object and his pins
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.pin1.set(x-20,y);
|
||||||
|
this.pin2.set(x-20,y+60);
|
||||||
|
this.o.set(x+80,y+30);
|
||||||
|
|
||||||
|
//and the skin
|
||||||
|
var name = "#"+this.id+"-skin";
|
||||||
|
var skin = $(name);
|
||||||
|
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
||||||
|
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
|
||||||
|
addclk(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addclk(ob){
|
||||||
|
var rep = ob.rep;
|
||||||
|
$((ob.img)).mousedown(function(e){
|
||||||
|
var svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.pin1.rep));
|
||||||
|
$(svg).append($(ob.pin2.rep));
|
||||||
|
$(svg).append($(ob.o.rep));
|
||||||
|
$(svg).append($(ob.skin));
|
||||||
|
selected = ob.id;
|
||||||
|
});
|
||||||
|
$((ob.img)).mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
function noname(ob){
|
||||||
|
$((ob.img)).mousedown(function(e){
|
||||||
|
selected = ob.id;
|
||||||
|
console.log("Clicked!!!");
|
||||||
|
});
|
||||||
|
$((ob.img)).mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
72
scripts/buffer.js
Normal file
72
scripts/buffer.js
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
function buffer(id){
|
||||||
|
this.id = id;
|
||||||
|
this.name = "#" + this.id;
|
||||||
|
this.rep = add(80,80,"green","black",this.id,true);
|
||||||
|
this.pin1 = new pin(0);
|
||||||
|
this.o = new pin(1);
|
||||||
|
this.o.nei = this;
|
||||||
|
//this.text = new text(this,"Or-gate");
|
||||||
|
this.activation = function(){
|
||||||
|
if (this.pin1.val){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
|
x: "50",
|
||||||
|
y: "50",
|
||||||
|
id: (id+"-skin"),
|
||||||
|
width:"80",
|
||||||
|
height:"80"
|
||||||
|
});
|
||||||
|
var img = $(document.createElement('img')).attr({
|
||||||
|
height:"80",
|
||||||
|
width:"80",
|
||||||
|
src:"textures/gates/buffer_gate.jpg"
|
||||||
|
});
|
||||||
|
var iDiv = document.createElement("div");
|
||||||
|
$(iDiv).append(img);
|
||||||
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
|
||||||
|
//updating
|
||||||
|
this.update = function(){
|
||||||
|
//the main object and his pins
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.pin1.set(x-20,y+30);
|
||||||
|
this.o.set(x+80,y+30);
|
||||||
|
|
||||||
|
//and the skin
|
||||||
|
var name = "#"+this.id+"-skin";
|
||||||
|
var skin = $(name);
|
||||||
|
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
||||||
|
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
addclk11(this);
|
||||||
|
}
|
||||||
79
scripts/but.js
Normal file
79
scripts/but.js
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
console.log("nut");
|
||||||
|
function but(id){
|
||||||
|
this.wait = true;
|
||||||
|
this.id = id;
|
||||||
|
this.rep = add(80,80,"orange","black",this.id,true);
|
||||||
|
this.o = new pin(1);
|
||||||
|
this.val = false;
|
||||||
|
addevt(this);
|
||||||
|
$((this.rep)).attr("stroke-width",4);
|
||||||
|
$((this.rep)).attr("stroke","black");
|
||||||
|
this.o.nei = this;
|
||||||
|
this.activation = function(){
|
||||||
|
return this.val;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
this.init = function(){
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update = function(){
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.o.set(x+80,y+30);
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
}
|
||||||
|
function addevt(ob){
|
||||||
|
/*
|
||||||
|
$((ob.rep)).click(function(){
|
||||||
|
ob.val = (ob.val+1)%2;
|
||||||
|
if (ob.val){
|
||||||
|
$((ob.rep)).attr("fill","red");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$((ob.rep)).attr("fill","orange");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
$((ob.rep)).mousedown(function(e){
|
||||||
|
var svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.o.rep));
|
||||||
|
selected = ob.id;
|
||||||
|
|
||||||
|
if (ob.wait){
|
||||||
|
ob.val = (ob.val+1)%2;
|
||||||
|
if (ob.val){
|
||||||
|
$((ob.rep)).attr("fill","red");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$((ob.rep)).attr("fill","orange");
|
||||||
|
}
|
||||||
|
ob.wait = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$((ob.rep)).mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
ob.wait = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
94
scripts/edges.js
Normal file
94
scripts/edges.js
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
var l_count = 0;
|
||||||
|
var lines = [];
|
||||||
|
console.log("started2");
|
||||||
|
function edge(start,end){
|
||||||
|
this.id = l_count.toString()+"line";
|
||||||
|
l_count++;
|
||||||
|
this.start = start;
|
||||||
|
this.end = end;
|
||||||
|
console.log(start+end);
|
||||||
|
|
||||||
|
console.log(this.end);
|
||||||
|
console.log(this.start);
|
||||||
|
|
||||||
|
lines[lines.length] = this;
|
||||||
|
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
|
||||||
|
x1: "50",
|
||||||
|
y1:"50",
|
||||||
|
x2:"55",
|
||||||
|
y2:"55",
|
||||||
|
id: this.id,
|
||||||
|
fill:"yellow",
|
||||||
|
stroke: "black"
|
||||||
|
});
|
||||||
|
$(el).attr("stroke-width","2");
|
||||||
|
$(g).append(el);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
|
||||||
|
//console.log("succes"+lines);
|
||||||
|
|
||||||
|
this.rep = el;
|
||||||
|
this.name = "#"+this.id;
|
||||||
|
|
||||||
|
this.update = function(){
|
||||||
|
let adr = this.start.name;
|
||||||
|
let temp = $(adr).attr("x");
|
||||||
|
let n = this.name;
|
||||||
|
//console.log("updating"+adr+temp+n);
|
||||||
|
temp = (parseFloat(temp)).toString();
|
||||||
|
$(n).attr("x1",temp);
|
||||||
|
temp = $(adr).attr("y");
|
||||||
|
temp = (parseFloat(temp)+10).toString();
|
||||||
|
$(n).attr("y1",temp);
|
||||||
|
adr = this.end.name;
|
||||||
|
temp = $(adr).attr("x");
|
||||||
|
temp = (parseFloat(temp)+20).toString();
|
||||||
|
$(n).attr("x2",temp);
|
||||||
|
temp = $(adr).attr("y");
|
||||||
|
temp = (parseFloat(temp)+10).toString();
|
||||||
|
$(n).attr("y2",temp);
|
||||||
|
|
||||||
|
//and the color based on the state
|
||||||
|
if (this.start.val){
|
||||||
|
$((this.rep)).attr("stroke","yellow");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$((this.rep)).attr("stroke","black");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
rem_edge(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
function rem_edge(ob){
|
||||||
|
$((ob.rep)).click(function(e){
|
||||||
|
//removing the edge from the array
|
||||||
|
for (var i = 0; i < lines.length; i++) {
|
||||||
|
if (lines[i] == (ob.id)) {
|
||||||
|
lines.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//removing the visual
|
||||||
|
$((ob.rep)).remove();
|
||||||
|
|
||||||
|
//fixing the actual start and end pins
|
||||||
|
ob.start.nei = "yay";
|
||||||
|
ob.start.val = false;
|
||||||
|
ob.start.state = true;
|
||||||
|
ob.end.val = false;
|
||||||
|
ob.end.state = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
83
scripts/light.js
Normal file
83
scripts/light.js
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
console.log("bulb");
|
||||||
|
function light(id){
|
||||||
|
this.id = id;
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
|
||||||
|
cx: "50",
|
||||||
|
cy:"50",
|
||||||
|
r: "40",
|
||||||
|
id: this.id,
|
||||||
|
fill:"white",
|
||||||
|
stroke: "black"
|
||||||
|
});
|
||||||
|
$(el).attr("stroke-width","2");
|
||||||
|
$(el).attr("class","light");
|
||||||
|
$(g).append(el);
|
||||||
|
//$(el).attr("onmousedown","selected='"+this.id+"';");
|
||||||
|
$(el).attr("onmouseup","selected='yay';");
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
this.rep = el;
|
||||||
|
|
||||||
|
this.i = new pin(0);
|
||||||
|
this.val = false;
|
||||||
|
//addevt(this);
|
||||||
|
$((this.rep)).attr("stroke-width",4);
|
||||||
|
|
||||||
|
this.activation = function(){
|
||||||
|
return this.i.val;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("cx"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("cy"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
this.init = function(){
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update = function(){
|
||||||
|
if (this.i.val != "yay"){
|
||||||
|
if ((this.activation())){
|
||||||
|
$((this.rep)).attr("fill","yellow");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$((this.rep)).attr("fill","white");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//console.log($((this.rep)).attr("fill"));
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.i.set(x-60,y-10);
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
addclk_light(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addclk_light(ob){
|
||||||
|
var rep = ob.rep;
|
||||||
|
$(ob.rep).mousedown(function(e){
|
||||||
|
var svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.i.rep));
|
||||||
|
selected=ob.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
187
scripts/main.js
Normal file
187
scripts/main.js
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
//the absolute start, adding the buttons
|
||||||
|
//adding the button for the modal
|
||||||
|
var order = 0;
|
||||||
|
var selecte="yay"
|
||||||
|
var pieces = [];
|
||||||
|
var modal = add(40,40,"blue","black","butt",false);
|
||||||
|
$(modal).mousedown(function(e){
|
||||||
|
$("#addel").modal("show");
|
||||||
|
selected = "butt";
|
||||||
|
});
|
||||||
|
$(modal).mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
});
|
||||||
|
$(modal).attr("y","500");
|
||||||
|
$(modal).attr("x","500");
|
||||||
|
|
||||||
|
//var desc = new text(modal,"+")
|
||||||
|
|
||||||
|
function getname(){
|
||||||
|
return ((order++).toString()+"piece")
|
||||||
|
}
|
||||||
|
|
||||||
|
function addel(){
|
||||||
|
var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())");
|
||||||
|
}
|
||||||
|
|
||||||
|
//variables
|
||||||
|
$("img,rect,circle,svg,p").mousedown(function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
$("*").mouseup(function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
$("img").click(function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
var selected = "yay";
|
||||||
|
var firstx = 0;
|
||||||
|
var firsty = 0;
|
||||||
|
var fx = 0;
|
||||||
|
var fy = 0;
|
||||||
|
let snap = false;
|
||||||
|
console.log("started");
|
||||||
|
//events
|
||||||
|
|
||||||
|
$("body").mousemove(function(e){
|
||||||
|
drag(e,selected);
|
||||||
|
});
|
||||||
|
$("body").mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
});
|
||||||
|
$("body").mousedown(function(e){
|
||||||
|
if (selected!="yay"){
|
||||||
|
firstx = e.pageX;
|
||||||
|
firsty = e.pageY;
|
||||||
|
name = "#"+selected;
|
||||||
|
if ($(name).attr("class")=="light"){
|
||||||
|
fx = parseFloat($(name).attr("cx"));
|
||||||
|
fy = parseFloat($(name).attr("cy"));
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
fx = parseFloat($(name).attr("x"));
|
||||||
|
fy = parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//functions
|
||||||
|
function drag(e,selected){
|
||||||
|
|
||||||
|
//the name
|
||||||
|
let name = "#" + selected;
|
||||||
|
|
||||||
|
//the positions
|
||||||
|
let x = e.pageX;
|
||||||
|
let y = e.pageY;
|
||||||
|
|
||||||
|
//updating positions
|
||||||
|
set_position(name,x,y);
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_position(name,x,y){
|
||||||
|
var obj,objx,objy;
|
||||||
|
obj = "#"+selected;
|
||||||
|
if ($(name).attr("class")!="light"){
|
||||||
|
//getting the variables
|
||||||
|
obj = "#"+selected;
|
||||||
|
objx = parseFloat($(obj).attr("x"));
|
||||||
|
objy = parseFloat($(obj).attr("y"));
|
||||||
|
|
||||||
|
x = parseFloat(x);
|
||||||
|
y = parseFloat(y);
|
||||||
|
|
||||||
|
xdif = fx - firstx;
|
||||||
|
ydif = fy - firsty;
|
||||||
|
|
||||||
|
x += xdif;
|
||||||
|
y += ydif;
|
||||||
|
|
||||||
|
//x -= parseFloat($(obj).attr("width"));
|
||||||
|
//y -= parseFloat($(obj).attr("height"));
|
||||||
|
if (snap){
|
||||||
|
x = Math.floor(x/80)*80;
|
||||||
|
y = Math.floor(y/80)*80;
|
||||||
|
}
|
||||||
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
||||||
|
//setting the new positions
|
||||||
|
$(obj).attr("x",(x).toString());
|
||||||
|
$(obj).attr("y",(y).toString());
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
//for circles
|
||||||
|
//getting the variables
|
||||||
|
obj = "#"+selected;
|
||||||
|
objx = parseFloat($(obj).attr("cx"));
|
||||||
|
objy = parseFloat($(obj).attr("cy"));
|
||||||
|
|
||||||
|
x = parseFloat(x);
|
||||||
|
y = parseFloat(y);
|
||||||
|
|
||||||
|
xdif = fx - firstx;
|
||||||
|
ydif = fy - firsty;
|
||||||
|
|
||||||
|
x += xdif;
|
||||||
|
y += ydif;
|
||||||
|
|
||||||
|
//x -= parseFloat($(obj).attr("width"));
|
||||||
|
//y -= parseFloat($(obj).attr("height"));
|
||||||
|
if (snap){
|
||||||
|
x = Math.floor(x/80)*80+40;
|
||||||
|
y = Math.floor(y/80)*80+40;
|
||||||
|
}
|
||||||
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
||||||
|
//setting the new positions
|
||||||
|
$(obj).attr("cx",(x).toString());
|
||||||
|
$(obj).attr("cy",(y).toString());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function add(h,w,color,stroke,id,on){
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
|
||||||
|
x: "50",
|
||||||
|
y:"50",
|
||||||
|
id: id,
|
||||||
|
fill:color,
|
||||||
|
height: h.toString()+"px",
|
||||||
|
width: w.toString()+"px",
|
||||||
|
stroke: stroke,
|
||||||
|
rx:"20",
|
||||||
|
ry:"20"
|
||||||
|
});
|
||||||
|
if (on){
|
||||||
|
$(el).attr("onmousedown","selected='"+id+"';");
|
||||||
|
$(el).attr("onmouseup","selected='yay';");
|
||||||
|
}
|
||||||
|
$(el).attr("stroke-width","4");
|
||||||
|
$(g).append(el);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(pieces);
|
||||||
|
setInterval(function(){
|
||||||
|
for (var i = 0;i < pieces.length;i++){
|
||||||
|
pieces[i].update();
|
||||||
|
}
|
||||||
|
for (var i = 0;i < lines.length;i++){
|
||||||
|
lines[i].update();
|
||||||
|
}
|
||||||
|
for (var i = 0;i < pins.length;i++){
|
||||||
|
pins[i].update();
|
||||||
|
}
|
||||||
|
},0.001);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//objects are made in other files
|
||||||
93
scripts/not.js
Normal file
93
scripts/not.js
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
function not(id){
|
||||||
|
this.id = id;
|
||||||
|
this.name = "#" + this.id;
|
||||||
|
this.rep = add(80,80,"green","black",this.id,true);
|
||||||
|
this.pin1 = new pin(0);
|
||||||
|
this.o = new pin(1);
|
||||||
|
this.o.nei = this;
|
||||||
|
//this.text = new text(this,"Or-gate");
|
||||||
|
this.activation = function(){
|
||||||
|
if (!this.pin1.val){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
|
x: "50",
|
||||||
|
y: "50",
|
||||||
|
id: (id+"-skin"),
|
||||||
|
width:"80",
|
||||||
|
height:"80"
|
||||||
|
});
|
||||||
|
var img = $(document.createElement('img')).attr({
|
||||||
|
height:"80",
|
||||||
|
width:"80",
|
||||||
|
src:"textures/gates/not_gate.jpg"
|
||||||
|
});
|
||||||
|
var iDiv = document.createElement("div");
|
||||||
|
$(iDiv).append(img);
|
||||||
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
|
||||||
|
//updating
|
||||||
|
this.update = function(){
|
||||||
|
//the main object and his pins
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.pin1.set(x-20,y+30);
|
||||||
|
this.o.set(x+80,y+30);
|
||||||
|
|
||||||
|
//and the skin
|
||||||
|
var name = "#"+this.id+"-skin";
|
||||||
|
var skin = $(name);
|
||||||
|
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
||||||
|
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
addclk11(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addclk11(ob){
|
||||||
|
var rep = ob.rep;
|
||||||
|
$((ob.img)).mousedown(function(e){
|
||||||
|
var svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.pin1.rep));
|
||||||
|
$(svg).append($(ob.o.rep));
|
||||||
|
$(svg).append($(ob.skin));
|
||||||
|
selected = ob.id;
|
||||||
|
});
|
||||||
|
$((ob.img)).mouseup(function(e){
|
||||||
|
selected = "yay";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
86
scripts/or.js
Normal file
86
scripts/or.js
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
function or(id){
|
||||||
|
this.id = id;
|
||||||
|
this.name = "#" + this.id;
|
||||||
|
this.rep = add(80,80,"green","black",this.id,true);
|
||||||
|
this.pin1 = new pin(0);
|
||||||
|
this.pin2 = new pin(0);
|
||||||
|
this.o = new pin(1);
|
||||||
|
this.o.nei = this;
|
||||||
|
//this.text = new text(this,"Or-gate");
|
||||||
|
this.activation = function(){
|
||||||
|
if (this.pin1.val || this.pin2.val){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.y = function(){
|
||||||
|
let name = "#" + this.id;
|
||||||
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//design
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
|
x: "50",
|
||||||
|
y: "50",
|
||||||
|
id: (id+"-skin"),
|
||||||
|
width:"80",
|
||||||
|
height:"80"
|
||||||
|
});
|
||||||
|
var img = $(document.createElement('img')).attr({
|
||||||
|
height:"80",
|
||||||
|
width:"80",
|
||||||
|
src:"textures/gates/or_gate.jpg"
|
||||||
|
});
|
||||||
|
var iDiv = document.createElement("div");
|
||||||
|
$(iDiv).append(img);
|
||||||
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
|
||||||
|
//updating
|
||||||
|
this.update = function(){
|
||||||
|
//the main object and his pins
|
||||||
|
let x = this.x();
|
||||||
|
let y = this.y();
|
||||||
|
this.pin1.set(x-20,y);
|
||||||
|
this.pin2.set(x-20,y+60);
|
||||||
|
this.o.set(x+80,y+30);
|
||||||
|
|
||||||
|
//and the skin
|
||||||
|
var name = "#"+this.id+"-skin";
|
||||||
|
var skin = $(name);
|
||||||
|
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
||||||
|
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
||||||
|
}
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
addclk(this);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
function addclk(ob){
|
||||||
|
var rep = ob.rep;
|
||||||
|
$(ob.rep).mousedown(function(e){
|
||||||
|
var svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.pin1.rep));
|
||||||
|
$(svg).append($(ob.pin2.rep));
|
||||||
|
$(svg).append($(ob.o.rep));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
70
scripts/pins.js
Normal file
70
scripts/pins.js
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
var count = 0;
|
||||||
|
var pins = [];
|
||||||
|
var sels = "yay";
|
||||||
|
var sele = "yay";
|
||||||
|
var num;
|
||||||
|
function pin(type){
|
||||||
|
this.state = true;
|
||||||
|
this.nei = "yay";
|
||||||
|
this.val = false;
|
||||||
|
if (type == 0){
|
||||||
|
this.type = true;
|
||||||
|
color = "black";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.type = false;
|
||||||
|
color = "red";
|
||||||
|
}
|
||||||
|
this.update = function(){
|
||||||
|
if (this.nei != "yay"){
|
||||||
|
if (!(this.type)){
|
||||||
|
this.val = this.nei.activation();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.val = this.nei.val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.val){
|
||||||
|
$((this.rep)).attr("fill","red");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$((this.rep)).attr("fill","yellow");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.id = count.toString();
|
||||||
|
this.name = "#"+this.id;
|
||||||
|
this.rep = add(20,20,"yellow","black",this.id,false);
|
||||||
|
clicked(this);
|
||||||
|
count++;
|
||||||
|
this.name = "#"+this.id;
|
||||||
|
this.set = function(x,y){
|
||||||
|
$(this.name).attr("x",x.toString());
|
||||||
|
$(this.name).attr("y",y.toString());
|
||||||
|
}
|
||||||
|
pins[pins.length] = this;
|
||||||
|
this.num = pins.length-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clicked(ob){
|
||||||
|
$(ob.rep).click(function(e){
|
||||||
|
if (ob.type == true){
|
||||||
|
sels = ob;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sele = ob;
|
||||||
|
}
|
||||||
|
console.log("click"+sels+sele+ob.type);
|
||||||
|
if ((sels!="yay")&&(sele!="yay")){
|
||||||
|
console.log("step 2");
|
||||||
|
if ((sels.state)){
|
||||||
|
sels.nei = sele;
|
||||||
|
sels.state = false;
|
||||||
|
sele.state = false;
|
||||||
|
a = new edge(sels,sele);
|
||||||
|
sels = "yay";
|
||||||
|
sele = "yay";
|
||||||
|
console.log("end");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
41
scripts/text.js
Normal file
41
scripts/text.js
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
var t_count = 0;
|
||||||
|
function text(parent,value){
|
||||||
|
//variables
|
||||||
|
this.parent = parent;
|
||||||
|
this.val = value;
|
||||||
|
this.id = t_count.toString() + "text";
|
||||||
|
t_count++;
|
||||||
|
this.name = "#"+this.id;
|
||||||
|
|
||||||
|
//adding the text to the SVG
|
||||||
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
});
|
||||||
|
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
|
||||||
|
x: "50",
|
||||||
|
y:"50",
|
||||||
|
id: this.id,
|
||||||
|
fill:"white",
|
||||||
|
stroke: "black"
|
||||||
|
});
|
||||||
|
$(el).text(value);
|
||||||
|
$(el).attr("class","heavy");
|
||||||
|
$(g).append(el);
|
||||||
|
var elem = document.getElementById("svg1");
|
||||||
|
elem.appendChild(g);
|
||||||
|
this.rep = el;
|
||||||
|
$((this.rep)).click(function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
//updating
|
||||||
|
this.update = function(){
|
||||||
|
$((this.name)).attr("x",(parseFloat($((this.parent)).attr("x"))+15).toString());
|
||||||
|
$((this.name)).attr("y",(parseFloat($((this.parent)).attr("y"))+25).toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
//beeing sure it would be updated
|
||||||
|
pieces[pieces.length] = this;
|
||||||
|
}
|
||||||
22
st.css
Normal file
22
st.css
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
body {
|
||||||
|
background-color:rgba(0,0,0,0.7);
|
||||||
|
/*
|
||||||
|
background-image: url("bg.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
*/
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heavy { font: bold 20px sans-serif; }
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 17px;
|
||||||
|
height: 74;
|
||||||
|
width: 74;
|
||||||
|
}
|
||||||
|
|
||||||
|
#butt {
|
||||||
|
rx: 10;
|
||||||
|
ry: 10;
|
||||||
|
}
|
||||||
BIN
textures/gates/Thumbs.db
Normal file
BIN
textures/gates/Thumbs.db
Normal file
Binary file not shown.
BIN
textures/gates/and_gate.jpg
Normal file
BIN
textures/gates/and_gate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
textures/gates/buffer_gate.jpg
Normal file
BIN
textures/gates/buffer_gate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
textures/gates/not_gate.jpg
Normal file
BIN
textures/gates/not_gate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
textures/gates/or_gate.jpg
Normal file
BIN
textures/gates/or_gate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Loading…
Reference in a new issue