small changes to code
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
Sandu Victor
parent
cfd5714220
commit
c0ea9eb319
SSH key fingerprint:
SHA256:WFp/cO76nbarETAoQcQXuV+0h7XJsEsOCI0UsyPIy6U
150
index.html
150
index.html
|
|
@ -1,63 +1,65 @@
|
||||||
<html>
|
<html>
|
||||||
<head>.
|
|
||||||
<title>
|
<head>.
|
||||||
Logic simulator
|
<title>
|
||||||
</title>
|
Logic simulator
|
||||||
<!-- Scripts -->
|
</title>
|
||||||
<!-- jquery -->
|
<!-- Scripts -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
<!-- 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">
|
<!-- Latest compiled and minified CSS -->
|
||||||
<!-- Optional theme --
|
<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">
|
<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 -->
|
!--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>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body id="body">
|
|
||||||
<svg height = "100%" width = "100%" id = "svg1" viewbox = "0 0 700 700">
|
<body id="body">
|
||||||
|
<svg height="100%" width="100%" id="svg1" viewbox="0 0 700 700">
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!--And-->
|
<!--And-->
|
||||||
<script src="scripts/and_gate.js"></script>
|
<script src="scripts/and_gate.js"></script>
|
||||||
<!--Pin-->
|
<!--Pin-->
|
||||||
<script src="scripts/pins.js"></script>
|
<script src="scripts/pins.js"></script>
|
||||||
<!--Edges-->
|
<!--Edges-->
|
||||||
<script src="scripts/edges.js"></script>
|
<script src="scripts/edges.js"></script>
|
||||||
<!--Button-->
|
<!--Button-->
|
||||||
<script src="scripts/but.js"></script>
|
<script src="scripts/but.js"></script>
|
||||||
<!--light bulb-->
|
<!--light bulb-->
|
||||||
<script src="scripts/light.js"></script>
|
<script src="scripts/light.js"></script>
|
||||||
<!--or-->
|
<!--or-->
|
||||||
<script src="scripts/or.js"></script>
|
<script src="scripts/or.js"></script>
|
||||||
<!--or-->
|
<!--or-->
|
||||||
<script src="scripts/text.js"></script>
|
<script src="scripts/text.js"></script>
|
||||||
<!--not-->
|
<!--not-->
|
||||||
<script src="scripts/not.js"></script>
|
<script src="scripts/not.js"></script>
|
||||||
<!--buffer-->
|
<!--buffer-->
|
||||||
<script src="scripts/buffer.js"></script>
|
<script src="scripts/buffer.js"></script>
|
||||||
<!--nand-->
|
<!--nand-->
|
||||||
<script src="scripts/nand.js"></script>
|
<script src="scripts/nand.js"></script>
|
||||||
<!--nand with 3 inputs-->
|
<!--nand with 3 inputs-->
|
||||||
<script src="scripts/nand3.js"></script>
|
<script src="scripts/nand3.js"></script>
|
||||||
<!--xor-->
|
<!--xor-->
|
||||||
<script src="scripts/xor.js"></script>
|
<script src="scripts/xor.js"></script>
|
||||||
<!--zoom-->
|
<!--zoom-->
|
||||||
<script src="scripts/events.js"></script>
|
<script src="scripts/events.js"></script>
|
||||||
<!--Main-->
|
<!--Main-->
|
||||||
<script src="scripts/main.js"></script>
|
<script src="scripts/main.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<div class = "modal fade" id = "addel">
|
<div class="modal fade" id="addel">
|
||||||
<div class = "modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class = "modal-content">
|
<div class="modal-content">
|
||||||
<div class = "modal-header">
|
<div class="modal-header">
|
||||||
<p>
|
<p>
|
||||||
Add a piece!
|
Add a piece!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class = "modal-body">
|
<div class="modal-body">
|
||||||
<select id="sel">
|
<select id="sel">
|
||||||
<option value = "not">Not gate</option>
|
<option value = "not">Not gate</option>
|
||||||
<option value = "light">Light bulb</option>
|
<option value = "light">Light bulb</option>
|
||||||
<option value = "but">Button</option>
|
<option value = "but">Button</option>
|
||||||
|
|
@ -67,30 +69,18 @@
|
||||||
<option value = "nand">Nand gate</option>
|
<option value = "nand">Nand gate</option>
|
||||||
<option value = "nand3">Nand gate (3 inputs)</option>
|
<option value = "nand3">Nand gate (3 inputs)</option>
|
||||||
<option value = "xor">Xor gate</option>
|
<option value = "xor">Xor gate</option>
|
||||||
</select>
|
</select> Quantity:
|
||||||
Quantity:
|
<input id="times" type="number">
|
||||||
<input id = "times" type = "number">
|
</div>
|
||||||
</div>
|
<div class="modal-footer">
|
||||||
<div class = "modal-footer">
|
<button type="button" onclick='$("#addel").modal("hide"); addel();' class="btn btn-primmary" id="done">
|
||||||
<button type="button" onclick = '$("#addel").modal("hide"); addel();' class="btn btn-primmary" id = "done">
|
|
||||||
Add!!!
|
Add!!!
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<link href="st.css" rel="Stylesheet" type="text/css" />
|
<link href="st.css" rel="Stylesheet" type="text/css" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,104 +1,87 @@
|
||||||
console.log("and");
|
console.log("and");
|
||||||
function and(id){
|
|
||||||
this.id = id;
|
class and {
|
||||||
this.rep = add(80,80,"blue","black",this.id,false);
|
constructor(id) {
|
||||||
this.pin1 = new pin(0);
|
this.id = id;
|
||||||
this.pin2 = new pin(0);
|
this.rep = add(80, 80, "blue", "black", this.id, false);
|
||||||
this.o = new pin(1);
|
this.pin1 = new pin(0);
|
||||||
this.o.nei = this;
|
this.pin2 = new pin(0);
|
||||||
this.activation = function(){
|
this.o = new pin(1);
|
||||||
if (this.pin1.val && this.pin2.val){
|
this.o.nei = this;
|
||||||
return true;
|
this.activation = function() {
|
||||||
}
|
if (this.pin1.val && this.pin2.val) {
|
||||||
return false;
|
return true;
|
||||||
}
|
}
|
||||||
|
return false;
|
||||||
this.x = function(){
|
};
|
||||||
let name = "#" + this.id;
|
this.x = function() {
|
||||||
return parseFloat($(name).attr("x"));
|
let name = "#" + this.id;
|
||||||
}
|
return parseFloat($(name).attr("x"));
|
||||||
|
};
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
};
|
||||||
|
//design
|
||||||
//design
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
$(g).attr({
|
||||||
$(g).attr({
|
width: "100%",
|
||||||
width: "100%",
|
height: "100%"
|
||||||
height: "100%"
|
});
|
||||||
});
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
});
|
||||||
var img = $(document.createElement('img')).attr({
|
let img = $(document.createElement('img')).attr({
|
||||||
height:"72",
|
height: "72",
|
||||||
width:"72",
|
width: "72",
|
||||||
src:"textures/gates/and_gate.jpg"
|
src: "textures/gates/and_gate.jpg"
|
||||||
|
});
|
||||||
|
let iDiv = document.createElement("div");
|
||||||
|
$(iDiv).append(img);
|
||||||
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let 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
|
||||||
|
let name = "#" + this.id + "-skin";
|
||||||
|
let 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) {
|
||||||
|
|
||||||
|
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let 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;
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
$((ob.img)).on("mouseup touchend", function() {
|
||||||
$(iDiv).append(img);
|
selected = "yay";
|
||||||
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)).on("mousedown touchstart",function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
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)).on("mouseup touchend",function(e){
|
|
||||||
selected = "yay";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
function noname(ob){
|
|
||||||
$((ob.img)).on("mousedown touchstart",function(e){
|
|
||||||
selected = ob.id;
|
|
||||||
console.log("Clicked!!!");
|
|
||||||
});
|
|
||||||
$((ob.img)).on("mouseup touchend",function(e){
|
|
||||||
selected = "yay";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,72 +1,72 @@
|
||||||
function buffer(id){
|
function buffer(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = "#" + this.id;
|
this.name = "#" + this.id;
|
||||||
this.rep = add(80,80,"green","black",this.id,true);
|
this.rep = add(80, 80, "green", "black", this.id, true);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
//this.text = new text(this,"Or-gate");
|
//this.text = new text(this,"Or-gate");
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (this.pin1.val){
|
if (this.pin1.val) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"80",
|
|
||||||
width:"80",
|
|
||||||
src:"textures/gates/buffer_gate.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "80",
|
||||||
this.skin = skin;
|
width: "80",
|
||||||
this.img = img;
|
src: "textures/gates/buffer_gate.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y+30);
|
this.pin1.set(x - 20, y + 30);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
addclk11(this);
|
addclk11(this);
|
||||||
}
|
}
|
||||||
134
scripts/but.js
134
scripts/but.js
|
|
@ -1,79 +1,63 @@
|
||||||
console.log("nut");
|
console.log("nut");
|
||||||
function but(id){
|
|
||||||
this.wait = true;
|
function but(id) {
|
||||||
this.id = id;
|
this.wait = true;
|
||||||
this.rep = add(80,80,"orange","black",this.id,true);
|
this.id = id;
|
||||||
this.o = new pin(1);
|
this.rep = add(80, 80, "orange", "black", this.id, true);
|
||||||
this.val = false;
|
this.o = new pin(1);
|
||||||
addevt(this);
|
this.val = false;
|
||||||
$((this.rep)).attr("stroke-width",4);
|
addevt(this);
|
||||||
$((this.rep)).attr("stroke","black");
|
$((this.rep)).attr("stroke-width", 4);
|
||||||
this.o.nei = this;
|
$((this.rep)).attr("stroke", "black");
|
||||||
this.activation = function(){
|
this.o.nei = this;
|
||||||
return this.val;
|
this.activation = function() {
|
||||||
}
|
return this.val;
|
||||||
|
}
|
||||||
this.x = function(){
|
|
||||||
let name = "#" + this.id;
|
this.x = function() {
|
||||||
return parseFloat($(name).attr("x"));
|
let name = "#" + this.id;
|
||||||
}
|
return parseFloat($(name).attr("x"));
|
||||||
|
}
|
||||||
this.y = function(){
|
|
||||||
let name = "#" + this.id;
|
this.y = function() {
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("y"));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
}
|
return parseFloat($(name).attr("y"));
|
||||||
|
}
|
||||||
//design
|
|
||||||
this.init = function(){
|
//design
|
||||||
return 0;
|
this.init = function() {
|
||||||
}
|
return 0;
|
||||||
|
}
|
||||||
this.update = function(){
|
|
||||||
let x = this.x();
|
this.update = function() {
|
||||||
let y = this.y();
|
let x = this.x();
|
||||||
this.o.set(x+80,y+30);
|
let y = this.y();
|
||||||
}
|
this.o.set(x + 80, y + 30);
|
||||||
pieces[pieces.length] = this;
|
}
|
||||||
}
|
pieces[pieces.length] = this;
|
||||||
function addevt(ob){
|
|
||||||
/*
|
|
||||||
$((ob.rep)).on("click touchstart",function(){
|
|
||||||
ob.val = (ob.val+1)%2;
|
|
||||||
if (ob.val){
|
|
||||||
$((ob.rep)).attr("fill","red");
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
$((ob.rep)).attr("fill","orange");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
$((ob.rep)).on("mousedown touchstart",function(e){
|
|
||||||
var svg = document.getElementById("svg1");
|
|
||||||
$(svg).append(ob.rep);
|
|
||||||
$(svg).append($(ob.o.rep));
|
|
||||||
selected = ob.id;
|
|
||||||
e.preventDefault();
|
|
||||||
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)).on("mouseup touchend",function(e){
|
|
||||||
selected = "yay";
|
|
||||||
ob.wait = true;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addevt(ob) {
|
||||||
|
|
||||||
|
$((ob.rep)).on("mousedown touchstart", function(e) {
|
||||||
|
let svg = document.getElementById("svg1");
|
||||||
|
$(svg).append(ob.rep);
|
||||||
|
$(svg).append($(ob.o.rep));
|
||||||
|
selected = ob.id;
|
||||||
|
e.preventDefault();
|
||||||
|
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)).on("mouseup touchend", function() {
|
||||||
|
selected = "yay";
|
||||||
|
ob.wait = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
162
scripts/edges.js
162
scripts/edges.js
|
|
@ -1,95 +1,91 @@
|
||||||
var l_count = 0;
|
let l_count = 0;
|
||||||
var lines = [];
|
let lines = [];
|
||||||
console.log("started2");
|
console.log("started2");
|
||||||
function edge(start,end){
|
|
||||||
this.id = l_count.toString()+"line";
|
function edge(start, end) {
|
||||||
l_count++;
|
this.id = l_count.toString() + "line";
|
||||||
this.start = start;
|
l_count++;
|
||||||
this.end = end;
|
this.start = start;
|
||||||
console.log(start+end);
|
this.end = end;
|
||||||
|
console.log(start + end);
|
||||||
console.log(this.end);
|
|
||||||
console.log(this.start);
|
console.log(this.end);
|
||||||
|
console.log(this.start);
|
||||||
lines[lines.length] = this;
|
|
||||||
|
lines[lines.length] = this;
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
||||||
$(g).attr({
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
|
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
|
||||||
x1: "50",
|
x1: "50",
|
||||||
y1:"50",
|
y1: "50",
|
||||||
x2:"55",
|
x2: "55",
|
||||||
y2:"55",
|
y2: "55",
|
||||||
id: this.id,
|
id: this.id,
|
||||||
fill:"yellow",
|
fill: "yellow",
|
||||||
stroke: "black"
|
stroke: "black"
|
||||||
});
|
});
|
||||||
$(el).attr("stroke-width","2");
|
$(el).attr("stroke-width", "2");
|
||||||
$(g).append(el);
|
$(g).append(el);
|
||||||
var elem = document.getElementById("svg1");
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//console.log("succes"+lines);
|
//console.log("succes"+lines);
|
||||||
|
|
||||||
this.rep = el;
|
this.rep = el;
|
||||||
this.name = "#"+this.id;
|
this.name = "#" + this.id;
|
||||||
|
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
let adr = this.start.name;
|
let adr = this.start.name;
|
||||||
let temp = $(adr).attr("x");
|
let temp = $(adr).attr("x");
|
||||||
let n = this.name;
|
let n = this.name;
|
||||||
//console.log("updating"+adr+temp+n);
|
//console.log("updating"+adr+temp+n);
|
||||||
temp = (parseFloat(temp)).toString();
|
temp = (parseFloat(temp)).toString();
|
||||||
$(n).attr("x1",temp);
|
$(n).attr("x1", temp);
|
||||||
temp = $(adr).attr("y");
|
temp = $(adr).attr("y");
|
||||||
temp = (parseFloat(temp)+10).toString();
|
temp = (parseFloat(temp) + 10).toString();
|
||||||
$(n).attr("y1",temp);
|
$(n).attr("y1", temp);
|
||||||
adr = this.end.name;
|
adr = this.end.name;
|
||||||
temp = $(adr).attr("x");
|
temp = $(adr).attr("x");
|
||||||
temp = (parseFloat(temp)+20).toString();
|
temp = (parseFloat(temp) + 20).toString();
|
||||||
$(n).attr("x2",temp);
|
$(n).attr("x2", temp);
|
||||||
temp = $(adr).attr("y");
|
temp = $(adr).attr("y");
|
||||||
temp = (parseFloat(temp)+10).toString();
|
temp = (parseFloat(temp) + 10).toString();
|
||||||
$(n).attr("y2",temp);
|
$(n).attr("y2", temp);
|
||||||
|
|
||||||
//and the color based on the state
|
//and the color based on the state
|
||||||
if (this.start.val){
|
if (this.start.val) {
|
||||||
$((this.rep)).attr("stroke","yellow");
|
$((this.rep)).attr("stroke", "yellow");
|
||||||
}
|
} else {
|
||||||
else{
|
$((this.rep)).attr("stroke", "black");
|
||||||
$((this.rep)).attr("stroke","black");
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
rem_edge(this);
|
||||||
rem_edge(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function rem_edge(ob){
|
function rem_edge(ob) {
|
||||||
$((ob.rep)).on("click touchstart",function(e){
|
$((ob.rep)).on("click touchstart", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
//removing the edge from the array
|
//removing the edge from the array
|
||||||
for (var i = 0; i < lines.length; i++) {
|
for (let i = 0; i < lines.length; i++) {
|
||||||
if (lines[i] == (ob.id)) {
|
if (lines[i] == (ob.id)) {
|
||||||
lines.splice(i, 1);
|
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;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -1,118 +1,102 @@
|
||||||
window.addEventListener("keydown", function(e) {
|
window.addEventListener("keydown", function(e) {
|
||||||
// space and arrow keys
|
// space and arrow keys
|
||||||
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
|
if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
var xvb = 0;
|
let xvb = 0;
|
||||||
var yvb=0;
|
let yvb = 0;
|
||||||
var zoomx = window.innerWidth;
|
let zoomx = window.innerWidth;
|
||||||
var zoomy = window.innerHeight;
|
let zoomy = window.innerHeight;
|
||||||
|
|
||||||
updatescr();
|
updatescr();
|
||||||
|
|
||||||
function updatescr(){
|
function updatescr() {
|
||||||
if (zoomx < 51){
|
if (zoomx < 51) {
|
||||||
zoomx += 50;
|
zoomx += 50;
|
||||||
}
|
}
|
||||||
if (zoomy < 51){
|
if (zoomy < 51) {
|
||||||
zoomy += 50;
|
zoomy += 50;
|
||||||
}
|
}
|
||||||
let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
|
let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
|
||||||
$("#svg1").removeAttr("viewBox");
|
$("#svg1").removeAttr("viewBox");
|
||||||
$("#svg1").each(function(){$(this)[0].setAttribute("viewBox",newname)});
|
$("#svg1").each(function() { $(this)[0].setAttribute("viewBox", newname) });
|
||||||
}
|
}
|
||||||
document.addEventListener("keydown",e=> {
|
document.addEventListener("keydown", e => {
|
||||||
if(e.keyCode == 40){
|
if (e.keyCode == 40) {
|
||||||
yvb += 10;
|
yvb += 10;
|
||||||
updatescr();
|
updatescr();
|
||||||
}
|
} else if (e.keyCode == 39) {
|
||||||
else if(e.keyCode == 39){
|
xvb += 10;
|
||||||
xvb += 10;
|
updatescr();
|
||||||
updatescr();
|
} else if (e.keyCode == 38) {
|
||||||
}
|
yvb -= 10;
|
||||||
else if(e.keyCode == 38){
|
updatescr();
|
||||||
yvb -= 10;
|
} else if (e.keyCode == 37) {
|
||||||
updatescr();
|
xvb -= 10;
|
||||||
}
|
updatescr();
|
||||||
else if(e.keyCode == 37){
|
} else if (e.keyCode == 187) {
|
||||||
xvb -= 10;
|
if (!(zoomx < 101) && !(zoomy < 101)) {
|
||||||
updatescr();
|
xvb += 25;
|
||||||
}
|
yvb += 25;
|
||||||
else if(e.keyCode == 187){
|
}
|
||||||
if (!(zoomx < 101)&&!(zoomy < 101)){
|
zoomx -= 50;
|
||||||
xvb += 25;
|
zoomy -= 50;
|
||||||
yvb += 25;
|
updatescr();
|
||||||
}
|
} else if (e.keyCode == 189) {
|
||||||
zoomx -= 50;
|
xvb -= 25;
|
||||||
zoomy -= 50;
|
yvb -= 25;
|
||||||
updatescr();
|
zoomx += 50;
|
||||||
}
|
zoomy += 50;
|
||||||
else if(e.keyCode == 189){
|
updatescr();
|
||||||
xvb -= 25;
|
}
|
||||||
yvb -= 25;
|
}, false);
|
||||||
zoomx += 50;
|
|
||||||
zoomy += 50;
|
|
||||||
updatescr();
|
|
||||||
}
|
|
||||||
},false);
|
|
||||||
|
|
||||||
|
|
||||||
var zooming = false;
|
let zooming = false;
|
||||||
var xbeg = 0;
|
let xbeg = 0;
|
||||||
var ybeg = 0;
|
let ybeg = 0;
|
||||||
var moveing = false;
|
let moveing = false;
|
||||||
|
|
||||||
$("svg").on("mousemove touchmove",function(e){
|
$("svg").on("mousemove touchmove", function(e) {
|
||||||
if (moveing && selected == "yay"){
|
if (moveing && selected == "yay") {
|
||||||
if (!(zooming)){
|
if (!(zooming)) {
|
||||||
zooming = true;
|
zooming = true;
|
||||||
|
|
||||||
//setting our first mouse poitions
|
//setting our first mouse poitions
|
||||||
xbeg = e.pageX * zoomx/window.innerWidth;
|
xbeg = e.pageX * zoomx / window.innerWidth;
|
||||||
ybeg = e.pageY * zoomy/window.innerHeight;
|
ybeg = e.pageY * zoomy / window.innerHeight;
|
||||||
|
|
||||||
xbeg += xvb;
|
xbeg += xvb;
|
||||||
ybeg += yvb;
|
ybeg += yvb;
|
||||||
console.log("started zooming"+xbeg+"and"+ybeg);
|
console.log("started zooming" + xbeg + "and" + ybeg);
|
||||||
//moveing = (moveing +1)%2;
|
//moveing = (moveing +1)%2;
|
||||||
}
|
}
|
||||||
|
|
||||||
var newx = e.pageX * zoomx/window.innerWidth;
|
let newx = e.pageX * zoomx / window.innerWidth;
|
||||||
var newy = e.pageY * zoomy/window.innerHeight;
|
let newy = e.pageY * zoomy / window.innerHeight;
|
||||||
|
|
||||||
newx += xvb;
|
newx += xvb;
|
||||||
newy += yvb;
|
newy += yvb;
|
||||||
|
|
||||||
xvb -= newx - xbeg;
|
xvb -= newx - xbeg;
|
||||||
yvb -= newy - ybeg;
|
yvb -= newy - ybeg;
|
||||||
updatescr();
|
updatescr();
|
||||||
|
|
||||||
console.log(xvb+"newx"+newx+"xbeg"+xbeg);
|
console.log(xvb + "newx" + newx + "xbeg" + xbeg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$("svg").on("mousedown touchstart",function(e){
|
$("svg").on("mousedown touchstart", function() {
|
||||||
//e.preventDefault();
|
//e.preventDefault();
|
||||||
moveing = true;
|
moveing = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$("svg").on("mouseup touchend",function(e){
|
$("svg").on("mouseup touchend", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
selected = "yay";
|
selected = "yay";
|
||||||
zooming = false;
|
zooming = false;
|
||||||
moveing = false;
|
moveing = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
142
scripts/light.js
142
scripts/light.js
|
|
@ -1,84 +1,78 @@
|
||||||
console.log("bulb");
|
console.log("bulb");
|
||||||
function light(id){
|
|
||||||
this.id = id;
|
function light(id) {
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
this.id = id;
|
||||||
$(g).attr({
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
|
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
|
||||||
cx: "50",
|
cx: "50",
|
||||||
cy:"50",
|
cy: "50",
|
||||||
r: "40",
|
r: "40",
|
||||||
id: this.id,
|
id: this.id,
|
||||||
fill:"white",
|
fill: "white",
|
||||||
stroke: "black"
|
stroke: "black"
|
||||||
});
|
});
|
||||||
$(el).attr("stroke-width","2");
|
$(el).attr("stroke-width", "2");
|
||||||
$(el).attr("class","light");
|
$(el).attr("class", "light");
|
||||||
$(g).append(el);
|
$(g).append(el);
|
||||||
//$(el).attr("onmousedown","selected='"+this.id+"';");
|
//$(el).attr("onmousedown","selected='"+this.id+"';");
|
||||||
$(el).attr("onmouseup","selected='yay';");
|
$(el).attr("onmouseup", "selected='yay';");
|
||||||
var elem = document.getElementById("svg1");
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
this.rep = el;
|
this.rep = el;
|
||||||
|
|
||||||
this.i = new pin(0);
|
this.i = new pin(0);
|
||||||
this.val = false;
|
this.val = false;
|
||||||
//addevt(this);
|
//addevt(this);
|
||||||
$((this.rep)).attr("stroke-width",4);
|
$((this.rep)).attr("stroke-width", 4);
|
||||||
|
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
return this.i.val;
|
return this.i.val;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("cx"));
|
return parseFloat($(name).attr("cx"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("cy"));
|
return parseFloat($(name).attr("cy"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
this.init = function(){
|
this.init = function() {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
if (this.i.val != "yay"){
|
if (this.i.val != "yay") {
|
||||||
if ((this.activation())){
|
if ((this.activation())) {
|
||||||
$((this.rep)).attr("fill","yellow");
|
$((this.rep)).attr("fill", "yellow");
|
||||||
}
|
} else {
|
||||||
else{
|
$((this.rep)).attr("fill", "white");
|
||||||
$((this.rep)).attr("fill","white");
|
}
|
||||||
}
|
}
|
||||||
}
|
//console.log($((this.rep)).attr("fill"));
|
||||||
//console.log($((this.rep)).attr("fill"));
|
let x = this.x();
|
||||||
let x = this.x();
|
let y = this.y();
|
||||||
let y = this.y();
|
this.i.set(x - 60, y - 10);
|
||||||
this.i.set(x-60,y-10);
|
}
|
||||||
}
|
pieces[pieces.length] = this;
|
||||||
pieces[pieces.length] = this;
|
|
||||||
|
addclk_light(this);
|
||||||
addclk_light(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function addclk_light(ob){
|
function addclk_light(ob) {
|
||||||
var rep = ob.rep;
|
$(ob.rep).on("mousedown touchstart", function(e) {
|
||||||
$(ob.rep).on("mousedown touchstart",function(e){
|
e.preventDefault();
|
||||||
e.preventDefault();
|
let svg = document.getElementById("svg1");
|
||||||
var svg = document.getElementById("svg1");
|
$(svg).append(ob.rep);
|
||||||
$(svg).append(ob.rep);
|
$(svg).append($(ob.i.rep));
|
||||||
$(svg).append($(ob.i.rep));
|
selected = ob.id;
|
||||||
selected=ob.id;
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
374
scripts/main.js
374
scripts/main.js
|
|
@ -6,63 +6,60 @@
|
||||||
//====================first adding the modal=================================
|
//====================first adding the modal=================================
|
||||||
|
|
||||||
//order is used to generate new id's for components
|
//order is used to generate new id's for components
|
||||||
var order = 0;
|
let order = 0;
|
||||||
|
|
||||||
//selected indicates what is the last element the user clicked on
|
|
||||||
var selecte="yay"
|
|
||||||
|
|
||||||
//piece would contain all the components
|
//piece would contain all the components
|
||||||
//(without pins and edges)
|
//(without pins and edges)
|
||||||
//we will use that array for updating the value and the position
|
//we will use that array for updating the value and the position
|
||||||
var pieces = [];
|
let pieces = [];
|
||||||
|
|
||||||
//this 'modal' variable is used to keep the blue box
|
//this 'modal' letiable is used to keep the blue box
|
||||||
//basically when you click on it the modal for adding components will pop
|
//basically when you click on it the modal for adding components will pop
|
||||||
var modal = add(40,40,"blue","black","butt",false);
|
let modal = add(40, 40, "blue", "black", "butt", false);
|
||||||
|
|
||||||
//adding the event for clicking
|
//adding the event for clicking
|
||||||
$(modal).on("mousedown touchstart",function(e){
|
$(modal).on("mousedown touchstart", function() {
|
||||||
|
|
||||||
//showing the modal
|
//showing the modal
|
||||||
//actually 'modal' is just the button
|
//actually 'modal' is just the button
|
||||||
//and 'addel' is the true id of the modal from DOM
|
//and 'addel' is the true id of the modal from DOM
|
||||||
$("#addel").modal("show");
|
$("#addel").modal("show");
|
||||||
|
|
||||||
//being sure we wont move the components
|
//being sure we wont move the components
|
||||||
moveing = false;
|
moveing = false;
|
||||||
|
|
||||||
//activatng the drag and drop for the blue box
|
//activatng the drag and drop for the blue box
|
||||||
selected = "butt";
|
selected = "butt";
|
||||||
});
|
});
|
||||||
|
|
||||||
//the event for finishing the drag and drop on the blue box
|
//the event for finishing the drag and drop on the blue box
|
||||||
$(modal).on("mouseup touchend",function(e){
|
$(modal).on("mouseup touchend", function() {
|
||||||
//telling that we dont want to drag it anymore
|
//telling that we dont want to drag it anymore
|
||||||
selected = "yay";
|
selected = "yay";
|
||||||
});
|
});
|
||||||
|
|
||||||
//changing the positon of the blue box
|
//changing the positon of the blue box
|
||||||
//we dont want it to be in the left top corner at 0 0
|
//we dont want it to be in the left top corner at 0 0
|
||||||
$(modal).attr("y","500");
|
$(modal).attr("y", "500");
|
||||||
$(modal).attr("x","500");
|
$(modal).attr("x", "500");
|
||||||
|
|
||||||
//var desc = new text(modal,"+")
|
//let desc = new text(modal,"+")
|
||||||
|
|
||||||
|
|
||||||
//used for actually getting the new ids
|
//used for actually getting the new ids
|
||||||
function getname(){
|
function getname() {
|
||||||
//getting the 'order'
|
//getting the 'order'
|
||||||
//than making it bigger by 1
|
//than making it bigger by 1
|
||||||
//convert it to string
|
//convert it to string
|
||||||
//than add 'piece' to it for avoiding confusion between pieces and pins
|
//than add 'piece' to it for avoiding confusion between pieces and pins
|
||||||
return ((order++).toString()+"piece")
|
return ((order++).toString() + "piece")
|
||||||
}
|
}
|
||||||
|
|
||||||
//the function that fires when you tap 'add'
|
//the function that fires when you tap 'add'
|
||||||
function addel(){
|
function addel() {
|
||||||
for (var i = 0;i < parseFloat($("#times").val());i++){
|
for (let i = 0; i < parseFloat($("#times").val()); i++) {
|
||||||
var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())");
|
let added = eval("new " + $("#sel option:selected").attr("value") + "(getname())");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -71,32 +68,32 @@ function addel(){
|
||||||
//================================preventing deafult actions==========================
|
//================================preventing deafult actions==========================
|
||||||
|
|
||||||
//nothing to say here
|
//nothing to say here
|
||||||
$("img,rect,circle,p,foreignObject").on("mousedown touchstart",function(e){
|
$("img,rect,circle,p,foreignObject").on("mousedown touchstart", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
$("*").on("mouseup touchend",function(e){
|
$("*").on("mouseup touchend", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
moveing = false;
|
moveing = false;
|
||||||
});
|
});
|
||||||
$("img").on("click touchstart",function(e){
|
$("img").on("click touchstart", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//===============================variables============================================
|
//===============================letiables============================================
|
||||||
|
|
||||||
//setting the drag and drop to our value
|
//setting the drag and drop to our value
|
||||||
//'yay' means 'nothing selected'
|
//'yay' means 'nothing selected'
|
||||||
var selected = "yay";
|
let selected = "yay";
|
||||||
|
|
||||||
//the first positios of the clicks
|
//the first positios of the clicks
|
||||||
var firstx = 0;
|
let firstx = 0;
|
||||||
var firsty = 0;
|
let firsty = 0;
|
||||||
|
|
||||||
//the first position of an element dragged
|
//the first position of an element dragged
|
||||||
var fx = 0;
|
let fx = 0;
|
||||||
var fy = 0;
|
let fy = 0;
|
||||||
|
|
||||||
//snap settings
|
//snap settings
|
||||||
let snap = false;
|
let snap = false;
|
||||||
|
|
@ -105,40 +102,39 @@ let snap = false;
|
||||||
|
|
||||||
//nothing to say here...
|
//nothing to say here...
|
||||||
//just some basic things
|
//just some basic things
|
||||||
$("body").on("mousemove touchmove",function(e){
|
$("body").on("mousemove touchmove", function(e) {
|
||||||
//calling the drag function
|
//calling the drag function
|
||||||
drag(e,selected);
|
drag(e, selected);
|
||||||
});
|
});
|
||||||
$("body").on("mouseup touchend",function(e){
|
$("body").on("mouseup touchend", function(e) {
|
||||||
selected = "yay";
|
selected = "yay";
|
||||||
console.log("got a mouse up");
|
console.log("got a mouse up");
|
||||||
});
|
});
|
||||||
$("body").on("mousedown touchstart",function(e){
|
$("body").on("mousedown touchstart", function(e) {
|
||||||
//beeing sure that we actually want to drag something
|
//beeing sure that we actually want to drag something
|
||||||
if (selected!="yay"){
|
if (selected != "yay") {
|
||||||
|
|
||||||
//setting our first mouse poitions
|
//setting our first mouse poitions
|
||||||
firstx = e.pageX * zoomx/window.innerWidth;
|
firstx = e.pageX * zoomx / window.innerWidth;
|
||||||
firsty = e.pageY * zoomy/window.innerHeight;
|
firsty = e.pageY * zoomy / window.innerHeight;
|
||||||
|
|
||||||
firstx += xvb;
|
firstx += xvb;
|
||||||
firsty += yvb;
|
firsty += yvb;
|
||||||
|
|
||||||
//conveerting the id to an actual thing
|
//conveerting the id to an actual thing
|
||||||
name = "#"+selected;
|
name = "#" + selected;
|
||||||
|
|
||||||
//beeing sure we get the corect attributes
|
//beeing sure we get the corect attributes
|
||||||
//circle have 'cx' and 'cy'
|
//circle have 'cx' and 'cy'
|
||||||
//and rectangles have 'x' and 'y'
|
//and rectangles have 'x' and 'y'
|
||||||
if ($(name).attr("class")=="light"){
|
if ($(name).attr("class") == "light") {
|
||||||
fx = parseFloat($(name).attr("cx"));
|
fx = parseFloat($(name).attr("cx"));
|
||||||
fy = parseFloat($(name).attr("cy"));
|
fy = parseFloat($(name).attr("cy"));
|
||||||
}
|
} else {
|
||||||
else{
|
fx = parseFloat($(name).attr("x"));
|
||||||
fx = parseFloat($(name).attr("x"));
|
fy = parseFloat($(name).attr("y"));
|
||||||
fy = parseFloat($(name).attr("y"));
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -147,130 +143,130 @@ $("body").on("mousedown touchstart",function(e){
|
||||||
|
|
||||||
|
|
||||||
//thefunction that tranfers the data from the event to our set_position function
|
//thefunction that tranfers the data from the event to our set_position function
|
||||||
function drag(e,selected){
|
function drag(e, selected) {
|
||||||
|
|
||||||
//the name
|
//the name
|
||||||
let name = "#" + selected;
|
let name = "#" + selected;
|
||||||
|
|
||||||
//the positions
|
//the positions
|
||||||
let x = e.pageX;
|
let x = e.pageX;
|
||||||
let y = e.pageY;
|
let y = e.pageY;
|
||||||
|
|
||||||
x *= zoomx/window.innerWidth;
|
x *= zoomx / window.innerWidth;
|
||||||
y *= zoomy/window.innerHeight;
|
y *= zoomy / window.innerHeight;
|
||||||
|
|
||||||
//updating positions
|
//updating positions
|
||||||
set_position(name,x,y);
|
set_position(name, x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
//our main place to change things
|
//our main place to change things
|
||||||
function set_position(name,x,y){
|
function set_position(name, x, y) {
|
||||||
var obj,objx,objy;
|
let obj, objx, objy;
|
||||||
obj = "#"+selected;
|
obj = "#" + selected;
|
||||||
|
|
||||||
x = parseFloat(x);
|
x = parseFloat(x);
|
||||||
y = parseFloat(y);
|
y = parseFloat(y);
|
||||||
|
|
||||||
x += xvb;
|
x += xvb;
|
||||||
y += yvb;
|
y += yvb;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if ($(name).attr("class")!="light"){
|
if ($(name).attr("class") != "light") {
|
||||||
//getting the variables
|
//getting the letiables
|
||||||
obj = "#"+selected;
|
obj = "#" + selected;
|
||||||
objx = parseFloat($(obj).attr("x"));
|
objx = parseFloat($(obj).attr("x"));
|
||||||
objy = parseFloat($(obj).attr("y"));
|
objy = parseFloat($(obj).attr("y"));
|
||||||
|
|
||||||
x = parseFloat(x);
|
x = parseFloat(x);
|
||||||
y = parseFloat(y);
|
y = parseFloat(y);
|
||||||
|
|
||||||
xdif = fx - firstx;
|
xdif = fx - firstx;
|
||||||
ydif = fy - firsty;
|
ydif = fy - firsty;
|
||||||
|
|
||||||
x += xdif;
|
x += xdif;
|
||||||
y += ydif;
|
y += ydif;
|
||||||
|
|
||||||
//x -= parseFloat($(obj).attr("width"));
|
//x -= parseFloat($(obj).attr("width"));
|
||||||
//y -= parseFloat($(obj).attr("height"));
|
//y -= parseFloat($(obj).attr("height"));
|
||||||
if (snap){
|
if (snap) {
|
||||||
x = Math.floor(x/80)*80;
|
x = Math.floor(x / 80) * 80;
|
||||||
y = Math.floor(y/80)*80;
|
y = Math.floor(y / 80) * 80;
|
||||||
}
|
}
|
||||||
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
||||||
//setting the new positions
|
//setting the new positions
|
||||||
$(obj).attr("x",(x).toString());
|
$(obj).attr("x", (x).toString());
|
||||||
$(obj).attr("y",(y).toString());
|
$(obj).attr("y", (y).toString());
|
||||||
}
|
} else {
|
||||||
else{
|
//for circles
|
||||||
//for circles
|
//getting the letiables
|
||||||
//getting the variables
|
obj = "#" + selected;
|
||||||
obj = "#"+selected;
|
objx = parseFloat($(obj).attr("cx"));
|
||||||
objx = parseFloat($(obj).attr("cx"));
|
objy = parseFloat($(obj).attr("cy"));
|
||||||
objy = parseFloat($(obj).attr("cy"));
|
|
||||||
|
x = parseFloat(x);
|
||||||
x = parseFloat(x);
|
y = parseFloat(y);
|
||||||
y = parseFloat(y);
|
|
||||||
|
xdif = fx - firstx;
|
||||||
xdif = fx - firstx;
|
ydif = fy - firsty;
|
||||||
ydif = fy - firsty;
|
|
||||||
|
x += xdif;
|
||||||
x += xdif;
|
y += ydif;
|
||||||
y += ydif;
|
|
||||||
|
//x -= parseFloat($(obj).attr("width"));
|
||||||
//x -= parseFloat($(obj).attr("width"));
|
//y -= parseFloat($(obj).attr("height"));
|
||||||
//y -= parseFloat($(obj).attr("height"));
|
if (snap) {
|
||||||
if (snap){
|
x = Math.floor(x / 80) * 80 + 40;
|
||||||
x = Math.floor(x/80)*80+40;
|
y = Math.floor(y / 80) * 80 + 40;
|
||||||
y = Math.floor(y/80)*80+40;
|
}
|
||||||
}
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
||||||
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
//setting the new positions
|
||||||
//setting the new positions
|
$(obj).attr("cx", (x).toString());
|
||||||
$(obj).attr("cx",(x).toString());
|
$(obj).attr("cy", (y).toString());
|
||||||
$(obj).attr("cy",(y).toString());
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function add(h,w,color,stroke,id,on){
|
function add(h, w, color, stroke, id, on) {
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
|
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y:"50",
|
y: "50",
|
||||||
id: id,
|
id: id,
|
||||||
fill:color,
|
fill: color,
|
||||||
height: h.toString()+"px",
|
height: h.toString() + "px",
|
||||||
width: w.toString()+"px",
|
width: w.toString() + "px",
|
||||||
stroke: stroke,
|
stroke: stroke,
|
||||||
rx:"20",
|
rx: "20",
|
||||||
ry:"20"
|
ry: "20"
|
||||||
});
|
});
|
||||||
if (on){
|
if (on) {
|
||||||
$(el).attr("onmousedown","selected='"+id+"';");
|
$(el).attr("onmousedown", "selected='" + id + "';");
|
||||||
$(el).attr("onmouseup","selected='yay';");
|
$(el).attr("onmouseup", "selected='yay';");
|
||||||
}
|
}
|
||||||
$(el).attr("stroke-width","4");
|
$(el).attr("stroke-width", "4");
|
||||||
$(g).append(el);
|
$(g).append(el);
|
||||||
var elem = document.getElementById("svg1");
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(pieces);
|
console.log(pieces);
|
||||||
setInterval(function(){
|
|
||||||
for (var i = 0;i < pieces.length;i++){
|
setInterval(function() {
|
||||||
pieces[i].update();
|
for (let i = 0; i < pieces.length; i++) {
|
||||||
}
|
pieces[i].update();
|
||||||
for (var i = 0;i < lines.length;i++){
|
}
|
||||||
lines[i].update();
|
for (let i = 0; i < lines.length; i++) {
|
||||||
}
|
lines[i].update();
|
||||||
for (var i = 0;i < pins.length;i++){
|
}
|
||||||
pins[i].update();
|
for (let i = 0; i < pins.length; i++) {
|
||||||
}
|
pins[i].update();
|
||||||
},0.001);
|
}
|
||||||
|
}, 0.001);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
136
scripts/nand.js
136
scripts/nand.js
|
|
@ -1,74 +1,74 @@
|
||||||
function nand(id){
|
function nand(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = "#" + this.id;
|
this.name = "#" + this.id;
|
||||||
this.rep = add(80,80,"green","black",this.id,true);
|
this.rep = add(80, 80, "green", "black", this.id, true);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.pin2 = new pin(0);
|
this.pin2 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
//this.text = new text(this,"Or-gate");
|
//this.text = new text(this,"Or-gate");
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (!(this.pin1.val && this.pin2.val)){
|
if (!(this.pin1.val && this.pin2.val)) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"80",
|
|
||||||
width:"80",
|
|
||||||
src:"textures/gates/nand_gate.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "80",
|
||||||
this.skin = skin;
|
width: "80",
|
||||||
this.img = img;
|
src: "textures/gates/nand_gate.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y);
|
this.pin1.set(x - 20, y);
|
||||||
this.pin2.set(x-20,y+60);
|
this.pin2.set(x - 20, y + 60);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
addclk(this);
|
addclk(this);
|
||||||
}
|
}
|
||||||
169
scripts/nand3.js
169
scripts/nand3.js
|
|
@ -1,93 +1,92 @@
|
||||||
function nand3(id){
|
function nand3(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.rep = add(80,80,"blue","black",this.id,false);
|
this.rep = add(80, 80, "blue", "black", this.id, false);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.pin2 = new pin(0);
|
this.pin2 = new pin(0);
|
||||||
this.pin3 = new pin(0);
|
this.pin3 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (!((this.pin1.val && this.pin2.val)&&this.pin3.val)){
|
if (!((this.pin1.val && this.pin2.val) && this.pin3.val)) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"72",
|
|
||||||
width:"72",
|
|
||||||
src:"textures/gates/nand_gate.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "72",
|
||||||
this.skin = skin;
|
width: "72",
|
||||||
this.img = img;
|
src: "textures/gates/nand_gate.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y);
|
this.pin1.set(x - 20, y);
|
||||||
this.pin2.set(x-20,y+60);
|
this.pin2.set(x - 20, y + 60);
|
||||||
this.pin3.set(x-20,y+30);
|
this.pin3.set(x - 20, y + 30);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
|
|
||||||
clk(this,[this.pin1,this.pin2,this.pin3,this.o]);
|
clk(this, [this.pin1, this.pin2, this.pin3, this.o]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function clk(ob,arr){
|
function clk(ob, arr) {
|
||||||
var rep = ob.rep;
|
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||||
$((ob.img)).on("mousedown touchstart",function(e){
|
e.preventDefault();
|
||||||
e.preventDefault();
|
let svg = document.getElementById("svg1");
|
||||||
var svg = document.getElementById("svg1");
|
$(svg).append(ob.rep);
|
||||||
$(svg).append(ob.rep);
|
$(svg).append($(ob.pin1.rep));
|
||||||
$(svg).append($(ob.pin1.rep));
|
for (let i = 0; i < arr.length; i++) {
|
||||||
for (var i = 0; i < arr.length;i++){
|
$(svg).append($(i.rep));
|
||||||
$(svg).append($(i.rep));
|
}
|
||||||
}
|
$(svg).append($(ob.skin));
|
||||||
$(svg).append($(ob.skin));
|
selected = ob.id;
|
||||||
selected = ob.id;
|
});
|
||||||
});
|
$((ob.img)).on("mouseup touchend", function() {
|
||||||
$((ob.img)).on("mouseup touchend",function(e){
|
selected = "yay";
|
||||||
selected = "yay";
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
167
scripts/not.js
167
scripts/not.js
|
|
@ -1,94 +1,87 @@
|
||||||
function not(id){
|
function not(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = "#" + this.id;
|
this.name = "#" + this.id;
|
||||||
this.rep = add(80,80,"green","black",this.id,true);
|
this.rep = add(80, 80, "green", "black", this.id, true);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
//this.text = new text(this,"Or-gate");
|
//this.text = new text(this,"Or-gate");
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (!this.pin1.val){
|
if (!this.pin1.val) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"80",
|
|
||||||
width:"80",
|
|
||||||
src:"textures/gates/not_gate.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "80",
|
||||||
this.skin = skin;
|
width: "80",
|
||||||
this.img = img;
|
src: "textures/gates/not_gate.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y+30);
|
this.pin1.set(x - 20, y + 30);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
addclk11(this);
|
addclk11(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addclk11(ob){
|
function addclk11(ob) {
|
||||||
var rep = ob.rep;
|
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||||
$((ob.img)).on("mousedown touchstart",function(e){
|
e.preventDefault();
|
||||||
e.preventDefault();
|
let svg = document.getElementById("svg1");
|
||||||
var svg = document.getElementById("svg1");
|
$(svg).append(ob.rep);
|
||||||
$(svg).append(ob.rep);
|
$(svg).append($(ob.pin1.rep));
|
||||||
$(svg).append($(ob.pin1.rep));
|
$(svg).append($(ob.o.rep));
|
||||||
$(svg).append($(ob.o.rep));
|
$(svg).append($(ob.skin));
|
||||||
$(svg).append($(ob.skin));
|
selected = ob.id;
|
||||||
selected = ob.id;
|
});
|
||||||
});
|
$((ob.img)).on("mouseup touchend", function() {
|
||||||
$((ob.img)).on("mouseup touchend",function(e){
|
selected = "yay";
|
||||||
selected = "yay";
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
150
scripts/or.js
150
scripts/or.js
|
|
@ -1,86 +1,74 @@
|
||||||
function or(id){
|
function or(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = "#" + this.id;
|
this.name = "#" + this.id;
|
||||||
this.rep = add(80,80,"green","black",this.id,true);
|
this.rep = add(80, 80, "green", "black", this.id, true);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.pin2 = new pin(0);
|
this.pin2 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
//this.text = new text(this,"Or-gate");
|
//this.text = new text(this,"Or-gate");
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (this.pin1.val || this.pin2.val){
|
if (this.pin1.val || this.pin2.val) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"80",
|
|
||||||
width:"80",
|
|
||||||
src:"textures/gates/or_gate.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "80",
|
||||||
this.skin = skin;
|
width: "80",
|
||||||
this.img = img;
|
src: "textures/gates/or_gate.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y);
|
this.pin1.set(x - 20, y);
|
||||||
this.pin2.set(x-20,y+60);
|
this.pin2.set(x - 20, y + 60);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
|
|
||||||
addclk(this);
|
addclk(this);
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
function addclk(ob){
|
|
||||||
var rep = ob.rep;
|
|
||||||
$(ob.rep).on("mousedown touchstart",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));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
133
scripts/pins.js
133
scripts/pins.js
|
|
@ -1,71 +1,68 @@
|
||||||
var count = 0;
|
let count = 0;
|
||||||
var pins = [];
|
let pins = [];
|
||||||
var sels = "yay";
|
let sels = "yay";
|
||||||
var sele = "yay";
|
let sele = "yay";
|
||||||
var num;
|
let num;
|
||||||
function pin(type){
|
|
||||||
this.state = true;
|
function pin(type) {
|
||||||
this.nei = "yay";
|
this.state = true;
|
||||||
this.val = false;
|
this.nei = "yay";
|
||||||
if (type == 0){
|
this.val = false;
|
||||||
this.type = true;
|
if (type == 0) {
|
||||||
color = "black";
|
this.type = true;
|
||||||
}
|
color = "black";
|
||||||
else{
|
} else {
|
||||||
this.type = false;
|
this.type = false;
|
||||||
color = "red";
|
color = "red";
|
||||||
}
|
}
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
if (this.nei != "yay"){
|
if (this.nei != "yay") {
|
||||||
if (!(this.type)){
|
if (!(this.type)) {
|
||||||
this.val = this.nei.activation();
|
this.val = this.nei.activation();
|
||||||
}
|
} else {
|
||||||
else{
|
this.val = this.nei.val;
|
||||||
this.val = this.nei.val;
|
}
|
||||||
}
|
}
|
||||||
}
|
if (this.val) {
|
||||||
if (this.val){
|
$((this.rep)).attr("fill", "red");
|
||||||
$((this.rep)).attr("fill","red");
|
} else {
|
||||||
}
|
$((this.rep)).attr("fill", "yellow");
|
||||||
else{
|
}
|
||||||
$((this.rep)).attr("fill","yellow");
|
}
|
||||||
}
|
this.id = count.toString();
|
||||||
}
|
this.name = "#" + this.id;
|
||||||
this.id = count.toString();
|
this.rep = add(20, 20, "yellow", "black", this.id, false);
|
||||||
this.name = "#"+this.id;
|
clicked(this);
|
||||||
this.rep = add(20,20,"yellow","black",this.id,false);
|
count++;
|
||||||
clicked(this);
|
this.name = "#" + this.id;
|
||||||
count++;
|
this.set = function(x, y) {
|
||||||
this.name = "#"+this.id;
|
$(this.name).attr("x", x.toString());
|
||||||
this.set = function(x,y){
|
$(this.name).attr("y", y.toString());
|
||||||
$(this.name).attr("x",x.toString());
|
}
|
||||||
$(this.name).attr("y",y.toString());
|
pins[pins.length] = this;
|
||||||
}
|
this.num = pins.length - 1;
|
||||||
pins[pins.length] = this;
|
|
||||||
this.num = pins.length-1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function clicked(ob){
|
function clicked(ob) {
|
||||||
$(ob.rep).on("click touchstart",function(e){
|
$(ob.rep).on("click touchstart", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (ob.type == true){
|
if (ob.type == true) {
|
||||||
sels = ob;
|
sels = ob;
|
||||||
}
|
} else {
|
||||||
else{
|
sele = ob;
|
||||||
sele = ob;
|
}
|
||||||
}
|
console.log("click" + sels + sele + ob.type);
|
||||||
console.log("click"+sels+sele+ob.type);
|
if ((sels != "yay") && (sele != "yay")) {
|
||||||
if ((sels!="yay")&&(sele!="yay")){
|
console.log("step 2");
|
||||||
console.log("step 2");
|
if ((sels.state)) {
|
||||||
if ((sels.state)){
|
sels.nei = sele;
|
||||||
sels.nei = sele;
|
sels.state = false;
|
||||||
sels.state = false;
|
sele.state = false;
|
||||||
sele.state = false;
|
a = new edge(sels, sele);
|
||||||
a = new edge(sels,sele);
|
sels = "yay";
|
||||||
sels = "yay";
|
sele = "yay";
|
||||||
sele = "yay";
|
console.log("end");
|
||||||
console.log("end");
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,41 +1,42 @@
|
||||||
var t_count = 0;
|
let t_count = 0;
|
||||||
function text(parent,value){
|
|
||||||
//variables
|
function text(parent, value) {
|
||||||
this.parent = parent;
|
//letiables
|
||||||
this.val = value;
|
this.parent = parent;
|
||||||
this.id = t_count.toString() + "text";
|
this.val = value;
|
||||||
t_count++;
|
this.id = t_count.toString() + "text";
|
||||||
this.name = "#"+this.id;
|
t_count++;
|
||||||
|
this.name = "#" + this.id;
|
||||||
//adding the text to the SVG
|
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
//adding the text to the SVG
|
||||||
$(g).attr({
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
|
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y:"50",
|
y: "50",
|
||||||
id: this.id,
|
id: this.id,
|
||||||
fill:"white",
|
fill: "white",
|
||||||
stroke: "black"
|
stroke: "black"
|
||||||
});
|
});
|
||||||
$(el).text(value);
|
$(el).text(value);
|
||||||
$(el).attr("class","heavy");
|
$(el).attr("class", "heavy");
|
||||||
$(g).append(el);
|
$(g).append(el);
|
||||||
var elem = document.getElementById("svg1");
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
this.rep = el;
|
this.rep = el;
|
||||||
$((this.rep)).on("click touchstart",function(e){
|
$((this.rep)).on("click touchstart", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
$((this.name)).attr("x",(parseFloat($((this.parent)).attr("x"))+15).toString());
|
$((this.name)).attr("x", (parseFloat($((this.parent)).attr("x")) + 15).toString());
|
||||||
$((this.name)).attr("y",(parseFloat($((this.parent)).attr("y"))+25).toString());
|
$((this.name)).attr("y", (parseFloat($((this.parent)).attr("y")) + 25).toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
//beeing sure it would be updated
|
//beeing sure it would be updated
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
}
|
}
|
||||||
134
scripts/xor.js
134
scripts/xor.js
|
|
@ -1,73 +1,73 @@
|
||||||
function xor(id){
|
function xor(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = "#" + this.id;
|
this.name = "#" + this.id;
|
||||||
this.rep = add(80,80,"green","black",this.id,true);
|
this.rep = add(80, 80, "green", "black", this.id, true);
|
||||||
this.pin1 = new pin(0);
|
this.pin1 = new pin(0);
|
||||||
this.pin2 = new pin(0);
|
this.pin2 = new pin(0);
|
||||||
this.o = new pin(1);
|
this.o = new pin(1);
|
||||||
this.o.nei = this;
|
this.o.nei = this;
|
||||||
//this.text = new text(this,"Or-gate");
|
//this.text = new text(this,"Or-gate");
|
||||||
this.activation = function(){
|
this.activation = function() {
|
||||||
if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)){
|
if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = function(){
|
this.x = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
return parseFloat($(name).attr("x"));
|
return parseFloat($(name).attr("x"));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.y = function(){
|
this.y = function() {
|
||||||
let name = "#" + this.id;
|
let name = "#" + this.id;
|
||||||
//console.log("y"+parseFloat($(name).attr("y")));
|
//console.log("y"+parseFloat($(name).attr("y")));
|
||||||
return parseFloat($(name).attr("y"));
|
return parseFloat($(name).attr("y"));
|
||||||
}
|
}
|
||||||
|
|
||||||
//design
|
//design
|
||||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
$(g).attr({
|
$(g).attr({
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%"
|
height: "100%"
|
||||||
});
|
});
|
||||||
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
|
||||||
x: "50",
|
x: "50",
|
||||||
y: "50",
|
y: "50",
|
||||||
id: (id+"-skin"),
|
id: (id + "-skin"),
|
||||||
width:"80",
|
width: "80",
|
||||||
height:"80"
|
height: "80"
|
||||||
});
|
|
||||||
var img = $(document.createElement('img')).attr({
|
|
||||||
height:"80",
|
|
||||||
width:"80",
|
|
||||||
src:"textures/gates/xor.jpg"
|
|
||||||
});
|
});
|
||||||
var iDiv = document.createElement("div");
|
let img = $(document.createElement('img')).attr({
|
||||||
$(iDiv).append(img);
|
height: "80",
|
||||||
this.skin = skin;
|
width: "80",
|
||||||
this.img = img;
|
src: "textures/gates/xor.jpg"
|
||||||
$(skin).append(iDiv);
|
});
|
||||||
//noname(this);
|
let iDiv = document.createElement("div");
|
||||||
$(g).append(skin);
|
$(iDiv).append(img);
|
||||||
var elem = document.getElementById("svg1");
|
this.skin = skin;
|
||||||
|
this.img = img;
|
||||||
|
$(skin).append(iDiv);
|
||||||
|
//noname(this);
|
||||||
|
$(g).append(skin);
|
||||||
|
let elem = document.getElementById("svg1");
|
||||||
elem.appendChild(g);
|
elem.appendChild(g);
|
||||||
|
|
||||||
//updating
|
//updating
|
||||||
this.update = function(){
|
this.update = function() {
|
||||||
//the main object and his pins
|
//the main object and his pins
|
||||||
let x = this.x();
|
let x = this.x();
|
||||||
let y = this.y();
|
let y = this.y();
|
||||||
this.pin1.set(x-20,y);
|
this.pin1.set(x - 20, y);
|
||||||
this.pin2.set(x-20,y+60);
|
this.pin2.set(x - 20, y + 60);
|
||||||
this.o.set(x+80,y+30);
|
this.o.set(x + 80, y + 30);
|
||||||
|
|
||||||
//and the skin
|
//and the skin
|
||||||
var name = "#"+this.id+"-skin";
|
let name = "#" + this.id + "-skin";
|
||||||
var skin = $(name);
|
let skin = $(name);
|
||||||
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
|
skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
|
||||||
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
|
skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
|
||||||
}
|
}
|
||||||
pieces[pieces.length] = this;
|
pieces[pieces.length] = this;
|
||||||
clk(this,[this.pin1,this.pin2,this.output]);
|
clk(this, [this.pin1, this.pin2, this.output]);
|
||||||
}
|
}
|
||||||
20
st.css
20
st.css
|
|
@ -1,22 +1,24 @@
|
||||||
body {
|
body {
|
||||||
background-color:rgba(0,0,0,0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
/*
|
/*
|
||||||
background-image: url("bg.jpg");
|
background-image: url("bg.jpg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
*/
|
*/
|
||||||
margin:0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heavy { font: bold 20px sans-serif; }
|
.heavy {
|
||||||
|
font: bold 20px sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 17px;
|
border-radius: 17px;
|
||||||
height: 74;
|
height: 74;
|
||||||
width: 74;
|
width: 74;
|
||||||
}
|
}
|
||||||
|
|
||||||
#butt {
|
#butt {
|
||||||
rx: 10;
|
rx: 5;
|
||||||
ry: 10;
|
ry: 5;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue