small changes to code
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
parent
cfd5714220
commit
c0ea9eb319
18
index.html
18
index.html
|
@ -1,4 +1,5 @@
|
|||
<html>
|
||||
|
||||
<head>.
|
||||
<title>
|
||||
Logic simulator
|
||||
|
@ -14,6 +15,7 @@
|
|||
!--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 id="body">
|
||||
<svg height="100%" width="100%" id="svg1" viewbox="0 0 700 700">
|
||||
</svg>
|
||||
|
@ -67,8 +69,7 @@
|
|||
<option value = "nand">Nand gate</option>
|
||||
<option value = "nand3">Nand gate (3 inputs)</option>
|
||||
<option value = "xor">Xor gate</option>
|
||||
</select>
|
||||
Quantity:
|
||||
</select> Quantity:
|
||||
<input id="times" type="number">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
@ -81,16 +82,5 @@
|
|||
</div>
|
||||
<link href="st.css" rel="Stylesheet" type="text/css" />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
console.log("and");
|
||||
function and(id){
|
||||
|
||||
class and {
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
this.rep = add(80, 80, "blue", "black", this.id, false);
|
||||
this.pin1 = new pin(0);
|
||||
|
@ -11,47 +13,43 @@ function and(id){
|
|||
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');
|
||||
let 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({
|
||||
let 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({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "72",
|
||||
width: "72",
|
||||
src: "textures/gates/and_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
this.update = function() {
|
||||
//the main object and his pins
|
||||
|
@ -60,24 +58,22 @@ function and(id){
|
|||
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);
|
||||
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) {
|
||||
var rep = ob.rep;
|
||||
|
||||
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||
e.preventDefault();
|
||||
var svg = document.getElementById("svg1");
|
||||
let svg = document.getElementById("svg1");
|
||||
$(svg).append(ob.rep);
|
||||
$(svg).append($(ob.pin1.rep));
|
||||
$(svg).append($(ob.pin2.rep));
|
||||
|
@ -85,20 +81,7 @@ function addclk(ob){
|
|||
$(svg).append($(ob.skin));
|
||||
selected = ob.id;
|
||||
});
|
||||
$((ob.img)).on("mouseup touchend",function(e){
|
||||
$((ob.img)).on("mouseup touchend", function() {
|
||||
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";
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
@ -25,31 +25,31 @@ function buffer(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "80",
|
||||
width: "80",
|
||||
src: "textures/gates/buffer_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -61,8 +61,8 @@ function buffer(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
console.log("nut");
|
||||
|
||||
function but(id) {
|
||||
this.wait = true;
|
||||
this.id = id;
|
||||
|
@ -36,21 +37,11 @@ function but(id){
|
|||
}
|
||||
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");
|
||||
let svg = document.getElementById("svg1");
|
||||
$(svg).append(ob.rep);
|
||||
$(svg).append($(ob.o.rep));
|
||||
selected = ob.id;
|
||||
|
@ -59,21 +50,14 @@ function addevt(ob){
|
|||
ob.val = (ob.val + 1) % 2;
|
||||
if (ob.val) {
|
||||
$((ob.rep)).attr("fill", "red");
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
$((ob.rep)).attr("fill", "orange");
|
||||
}
|
||||
ob.wait = false;
|
||||
}
|
||||
});
|
||||
$((ob.rep)).on("mouseup touchend",function(e){
|
||||
$((ob.rep)).on("mouseup touchend", function() {
|
||||
selected = "yay";
|
||||
ob.wait = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
var l_count = 0;
|
||||
var lines = [];
|
||||
let l_count = 0;
|
||||
let lines = [];
|
||||
console.log("started2");
|
||||
|
||||
function edge(start, end) {
|
||||
this.id = l_count.toString() + "line";
|
||||
l_count++;
|
||||
|
@ -13,12 +14,12 @@ function edge(start,end){
|
|||
|
||||
lines[lines.length] = this;
|
||||
|
||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
let 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({
|
||||
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
|
||||
x1: "50",
|
||||
y1: "50",
|
||||
x2: "55",
|
||||
|
@ -29,7 +30,7 @@ function edge(start,end){
|
|||
});
|
||||
$(el).attr("stroke-width", "2");
|
||||
$(g).append(el);
|
||||
var elem = document.getElementById("svg1");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//console.log("succes"+lines);
|
||||
|
@ -58,8 +59,7 @@ function edge(start,end){
|
|||
//and the color based on the state
|
||||
if (this.start.val) {
|
||||
$((this.rep)).attr("stroke", "yellow");
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
$((this.rep)).attr("stroke", "black");
|
||||
}
|
||||
}
|
||||
|
@ -72,7 +72,7 @@ function rem_edge(ob){
|
|||
$((ob.rep)).on("click touchstart", function(e) {
|
||||
e.preventDefault();
|
||||
//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)) {
|
||||
lines.splice(i, 1);
|
||||
}
|
||||
|
@ -89,7 +89,3 @@ function rem_edge(ob){
|
|||
ob.end.state = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -4,10 +4,10 @@ window.addEventListener("keydown", function(e) {
|
|||
e.preventDefault();
|
||||
}
|
||||
}, false);
|
||||
var xvb = 0;
|
||||
var yvb=0;
|
||||
var zoomx = window.innerWidth;
|
||||
var zoomy = window.innerHeight;
|
||||
let xvb = 0;
|
||||
let yvb = 0;
|
||||
let zoomx = window.innerWidth;
|
||||
let zoomy = window.innerHeight;
|
||||
|
||||
updatescr();
|
||||
|
||||
|
@ -26,20 +26,16 @@ document.addEventListener("keydown",e=> {
|
|||
if (e.keyCode == 40) {
|
||||
yvb += 10;
|
||||
updatescr();
|
||||
}
|
||||
else if(e.keyCode == 39){
|
||||
} else if (e.keyCode == 39) {
|
||||
xvb += 10;
|
||||
updatescr();
|
||||
}
|
||||
else if(e.keyCode == 38){
|
||||
} else if (e.keyCode == 38) {
|
||||
yvb -= 10;
|
||||
updatescr();
|
||||
}
|
||||
else if(e.keyCode == 37){
|
||||
} else if (e.keyCode == 37) {
|
||||
xvb -= 10;
|
||||
updatescr();
|
||||
}
|
||||
else if(e.keyCode == 187){
|
||||
} else if (e.keyCode == 187) {
|
||||
if (!(zoomx < 101) && !(zoomy < 101)) {
|
||||
xvb += 25;
|
||||
yvb += 25;
|
||||
|
@ -47,8 +43,7 @@ document.addEventListener("keydown",e=> {
|
|||
zoomx -= 50;
|
||||
zoomy -= 50;
|
||||
updatescr();
|
||||
}
|
||||
else if(e.keyCode == 189){
|
||||
} else if (e.keyCode == 189) {
|
||||
xvb -= 25;
|
||||
yvb -= 25;
|
||||
zoomx += 50;
|
||||
|
@ -58,10 +53,10 @@ document.addEventListener("keydown",e=> {
|
|||
}, false);
|
||||
|
||||
|
||||
var zooming = false;
|
||||
var xbeg = 0;
|
||||
var ybeg = 0;
|
||||
var moveing = false;
|
||||
let zooming = false;
|
||||
let xbeg = 0;
|
||||
let ybeg = 0;
|
||||
let moveing = false;
|
||||
|
||||
$("svg").on("mousemove touchmove", function(e) {
|
||||
if (moveing && selected == "yay") {
|
||||
|
@ -78,8 +73,8 @@ $("svg").on("mousemove touchmove",function(e){
|
|||
//moveing = (moveing +1)%2;
|
||||
}
|
||||
|
||||
var newx = e.pageX * zoomx/window.innerWidth;
|
||||
var newy = e.pageY * zoomy/window.innerHeight;
|
||||
let newx = e.pageX * zoomx / window.innerWidth;
|
||||
let newy = e.pageY * zoomy / window.innerHeight;
|
||||
|
||||
newx += xvb;
|
||||
newy += yvb;
|
||||
|
@ -93,7 +88,7 @@ $("svg").on("mousemove touchmove",function(e){
|
|||
});
|
||||
|
||||
|
||||
$("svg").on("mousedown touchstart",function(e){
|
||||
$("svg").on("mousedown touchstart", function() {
|
||||
//e.preventDefault();
|
||||
moveing = true;
|
||||
});
|
||||
|
@ -105,14 +100,3 @@ $("svg").on("mouseup touchend",function(e){
|
|||
zooming = false;
|
||||
moveing = false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
console.log("bulb");
|
||||
|
||||
function light(id) {
|
||||
this.id = id;
|
||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
let 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({
|
||||
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
|
||||
cx: "50",
|
||||
cy: "50",
|
||||
r: "40",
|
||||
|
@ -19,7 +20,7 @@ function light(id){
|
|||
$(g).append(el);
|
||||
//$(el).attr("onmousedown","selected='"+this.id+"';");
|
||||
$(el).attr("onmouseup", "selected='yay';");
|
||||
var elem = document.getElementById("svg1");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
this.rep = el;
|
||||
|
||||
|
@ -52,8 +53,7 @@ function light(id){
|
|||
if (this.i.val != "yay") {
|
||||
if ((this.activation())) {
|
||||
$((this.rep)).attr("fill", "yellow");
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
$((this.rep)).attr("fill", "white");
|
||||
}
|
||||
}
|
||||
|
@ -68,17 +68,11 @@ function light(id){
|
|||
}
|
||||
|
||||
function addclk_light(ob) {
|
||||
var rep = ob.rep;
|
||||
$(ob.rep).on("mousedown touchstart", function(e) {
|
||||
e.preventDefault();
|
||||
var svg = document.getElementById("svg1");
|
||||
let svg = document.getElementById("svg1");
|
||||
$(svg).append(ob.rep);
|
||||
$(svg).append($(ob.i.rep));
|
||||
selected = ob.id;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -6,22 +6,19 @@
|
|||
//====================first adding the modal=================================
|
||||
|
||||
//order is used to generate new id's for components
|
||||
var order = 0;
|
||||
|
||||
//selected indicates what is the last element the user clicked on
|
||||
var selecte="yay"
|
||||
let order = 0;
|
||||
|
||||
//piece would contain all the components
|
||||
//(without pins and edges)
|
||||
//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
|
||||
var modal = add(40,40,"blue","black","butt",false);
|
||||
let modal = add(40, 40, "blue", "black", "butt", false);
|
||||
|
||||
//adding the event for clicking
|
||||
$(modal).on("mousedown touchstart",function(e){
|
||||
$(modal).on("mousedown touchstart", function() {
|
||||
|
||||
//showing the modal
|
||||
//actually 'modal' is just the button
|
||||
|
@ -36,7 +33,7 @@ $(modal).on("mousedown touchstart",function(e){
|
|||
});
|
||||
|
||||
//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
|
||||
selected = "yay";
|
||||
});
|
||||
|
@ -46,7 +43,7 @@ $(modal).on("mouseup touchend",function(e){
|
|||
$(modal).attr("y", "500");
|
||||
$(modal).attr("x", "500");
|
||||
|
||||
//var desc = new text(modal,"+")
|
||||
//let desc = new text(modal,"+")
|
||||
|
||||
|
||||
//used for actually getting the new ids
|
||||
|
@ -60,8 +57,8 @@ function getname(){
|
|||
|
||||
//the function that fires when you tap 'add'
|
||||
function addel() {
|
||||
for (var i = 0;i < parseFloat($("#times").val());i++){
|
||||
var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())");
|
||||
for (let i = 0; i < parseFloat($("#times").val()); i++) {
|
||||
let added = eval("new " + $("#sel option:selected").attr("value") + "(getname())");
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -84,19 +81,19 @@ $("img").on("click touchstart",function(e){
|
|||
|
||||
|
||||
|
||||
//===============================variables============================================
|
||||
//===============================letiables============================================
|
||||
|
||||
//setting the drag and drop to our value
|
||||
//'yay' means 'nothing selected'
|
||||
var selected = "yay";
|
||||
let selected = "yay";
|
||||
|
||||
//the first positios of the clicks
|
||||
var firstx = 0;
|
||||
var firsty = 0;
|
||||
let firstx = 0;
|
||||
let firsty = 0;
|
||||
|
||||
//the first position of an element dragged
|
||||
var fx = 0;
|
||||
var fy = 0;
|
||||
let fx = 0;
|
||||
let fy = 0;
|
||||
|
||||
//snap settings
|
||||
let snap = false;
|
||||
|
@ -133,8 +130,7 @@ $("body").on("mousedown touchstart",function(e){
|
|||
if ($(name).attr("class") == "light") {
|
||||
fx = parseFloat($(name).attr("cx"));
|
||||
fy = parseFloat($(name).attr("cy"));
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
fx = parseFloat($(name).attr("x"));
|
||||
fy = parseFloat($(name).attr("y"));
|
||||
}
|
||||
|
@ -165,7 +161,7 @@ function drag(e,selected){
|
|||
|
||||
//our main place to change things
|
||||
function set_position(name, x, y) {
|
||||
var obj,objx,objy;
|
||||
let obj, objx, objy;
|
||||
obj = "#" + selected;
|
||||
|
||||
x = parseFloat(x);
|
||||
|
@ -177,7 +173,7 @@ function set_position(name,x,y){
|
|||
|
||||
|
||||
if ($(name).attr("class") != "light") {
|
||||
//getting the variables
|
||||
//getting the letiables
|
||||
obj = "#" + selected;
|
||||
objx = parseFloat($(obj).attr("x"));
|
||||
objy = parseFloat($(obj).attr("y"));
|
||||
|
@ -201,10 +197,9 @@ function set_position(name,x,y){
|
|||
//setting the new positions
|
||||
$(obj).attr("x", (x).toString());
|
||||
$(obj).attr("y", (y).toString());
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
//for circles
|
||||
//getting the variables
|
||||
//getting the letiables
|
||||
obj = "#" + selected;
|
||||
objx = parseFloat($(obj).attr("cx"));
|
||||
objy = parseFloat($(obj).attr("cy"));
|
||||
|
@ -232,12 +227,12 @@ function set_position(name,x,y){
|
|||
}
|
||||
|
||||
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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: id,
|
||||
|
@ -254,20 +249,21 @@ function add(h,w,color,stroke,id,on){
|
|||
}
|
||||
$(el).attr("stroke-width", "4");
|
||||
$(g).append(el);
|
||||
var elem = document.getElementById("svg1");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
return el;
|
||||
}
|
||||
|
||||
console.log(pieces);
|
||||
|
||||
setInterval(function() {
|
||||
for (var i = 0;i < pieces.length;i++){
|
||||
for (let i = 0; i < pieces.length; i++) {
|
||||
pieces[i].update();
|
||||
}
|
||||
for (var i = 0;i < lines.length;i++){
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
lines[i].update();
|
||||
}
|
||||
for (var i = 0;i < pins.length;i++){
|
||||
for (let i = 0; i < pins.length; i++) {
|
||||
pins[i].update();
|
||||
}
|
||||
}, 0.001);
|
||||
|
|
|
@ -26,31 +26,31 @@ function nand(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "80",
|
||||
width: "80",
|
||||
src: "textures/gates/nand_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -63,8 +63,8 @@ function nand(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
|
|
@ -25,31 +25,31 @@ function nand3(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "72",
|
||||
width: "72",
|
||||
src: "textures/gates/nand_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -63,8 +63,8 @@ function nand3(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
@ -75,19 +75,18 @@ function nand3(id){
|
|||
}
|
||||
|
||||
function clk(ob, arr) {
|
||||
var rep = ob.rep;
|
||||
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||
e.preventDefault();
|
||||
var svg = document.getElementById("svg1");
|
||||
let svg = document.getElementById("svg1");
|
||||
$(svg).append(ob.rep);
|
||||
$(svg).append($(ob.pin1.rep));
|
||||
for (var i = 0; i < arr.length;i++){
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
$(svg).append($(i.rep));
|
||||
}
|
||||
$(svg).append($(ob.skin));
|
||||
selected = ob.id;
|
||||
});
|
||||
$((ob.img)).on("mouseup touchend",function(e){
|
||||
$((ob.img)).on("mouseup touchend", function() {
|
||||
selected = "yay";
|
||||
});
|
||||
}
|
|
@ -25,31 +25,31 @@ function not(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "80",
|
||||
width: "80",
|
||||
src: "textures/gates/not_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -61,8 +61,8 @@ function not(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
@ -72,23 +72,16 @@ function not(id){
|
|||
}
|
||||
|
||||
function addclk11(ob) {
|
||||
var rep = ob.rep;
|
||||
$((ob.img)).on("mousedown touchstart", function(e) {
|
||||
e.preventDefault();
|
||||
var svg = document.getElementById("svg1");
|
||||
let 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)).on("mouseup touchend",function(e){
|
||||
$((ob.img)).on("mouseup touchend", function() {
|
||||
selected = "yay";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,31 +26,31 @@ function or(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "80",
|
||||
width: "80",
|
||||
src: "textures/gates/or_gate.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -63,8 +63,8 @@ function or(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
@ -72,15 +72,3 @@ function or(id){
|
|||
|
||||
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));
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
var count = 0;
|
||||
var pins = [];
|
||||
var sels = "yay";
|
||||
var sele = "yay";
|
||||
var num;
|
||||
let count = 0;
|
||||
let pins = [];
|
||||
let sels = "yay";
|
||||
let sele = "yay";
|
||||
let num;
|
||||
|
||||
function pin(type) {
|
||||
this.state = true;
|
||||
this.nei = "yay";
|
||||
|
@ -10,8 +11,7 @@ function pin(type){
|
|||
if (type == 0) {
|
||||
this.type = true;
|
||||
color = "black";
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
this.type = false;
|
||||
color = "red";
|
||||
}
|
||||
|
@ -19,15 +19,13 @@ function pin(type){
|
|||
if (this.nei != "yay") {
|
||||
if (!(this.type)) {
|
||||
this.val = this.nei.activation();
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
this.val = this.nei.val;
|
||||
}
|
||||
}
|
||||
if (this.val) {
|
||||
$((this.rep)).attr("fill", "red");
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
$((this.rep)).attr("fill", "yellow");
|
||||
}
|
||||
}
|
||||
|
@ -50,8 +48,7 @@ function clicked(ob){
|
|||
e.preventDefault();
|
||||
if (ob.type == true) {
|
||||
sels = ob;
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
sele = ob;
|
||||
}
|
||||
console.log("click" + sels + sele + ob.type);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
var t_count = 0;
|
||||
let t_count = 0;
|
||||
|
||||
function text(parent, value) {
|
||||
//variables
|
||||
//letiables
|
||||
this.parent = parent;
|
||||
this.val = value;
|
||||
this.id = t_count.toString() + "text";
|
||||
|
@ -8,12 +9,12 @@ function text(parent,value){
|
|||
this.name = "#" + this.id;
|
||||
|
||||
//adding the text to the SVG
|
||||
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
let 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({
|
||||
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
|
||||
x: "50",
|
||||
y: "50",
|
||||
id: this.id,
|
||||
|
@ -23,7 +24,7 @@ function text(parent,value){
|
|||
$(el).text(value);
|
||||
$(el).attr("class", "heavy");
|
||||
$(g).append(el);
|
||||
var elem = document.getElementById("svg1");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
this.rep = el;
|
||||
$((this.rep)).on("click touchstart", function(e) {
|
||||
|
|
|
@ -26,31 +26,31 @@ function xor(id){
|
|||
}
|
||||
|
||||
//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({
|
||||
width: "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",
|
||||
y: "50",
|
||||
id: (id + "-skin"),
|
||||
width: "80",
|
||||
height: "80"
|
||||
});
|
||||
var img = $(document.createElement('img')).attr({
|
||||
let img = $(document.createElement('img')).attr({
|
||||
height: "80",
|
||||
width: "80",
|
||||
src: "textures/gates/xor.jpg"
|
||||
});
|
||||
var iDiv = document.createElement("div");
|
||||
let 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");
|
||||
let elem = document.getElementById("svg1");
|
||||
elem.appendChild(g);
|
||||
|
||||
//updating
|
||||
|
@ -63,8 +63,8 @@ function xor(id){
|
|||
this.o.set(x + 80, y + 30);
|
||||
|
||||
//and the skin
|
||||
var name = "#"+this.id+"-skin";
|
||||
var skin = $(name);
|
||||
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());
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue