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