Skip to content

Commit 0136803

Browse files
64json64json
authored
Merge pull request algorithm-visualizer#203 from nadr0/auto-generate-tracers
Auto generate tracers
2 parents ea94f34 + 10f14a3 commit 0136803

File tree

11 files changed

+396
-5
lines changed

11 files changed

+396
-5
lines changed

‎algorithm/scratch_paper/code.js

Whitespace-only changes.

‎css/stylesheet.css

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ nav h3 {
230230

231231
nav,
232232
section,
233+
.sandbox_container,
233234
.viewer_container,
234235
.editor_container {
235236
position: absolute;
@@ -249,6 +250,11 @@ section {
249250
right: 50%;
250251
}
251252

253+
.sandbox_container{
254+
left: 50%;
255+
z-index: 100;
256+
}
257+
252258
.editor_container {
253259
left: 50%;
254260
}
@@ -258,6 +264,10 @@ section {
258264
border: none;
259265
}
260266

267+
.hide{
268+
display: none;
269+
}
270+
261271
.tab_container {
262272
top: 30px;
263273
background: #242424;
@@ -332,6 +342,7 @@ section {
332342
border-bottom: none;
333343
}
334344

345+
.close_bar,
335346
.files_bar {
336347
height: 30px;
337348
border-bottom: 1px solid #505050;
@@ -376,6 +387,11 @@ section {
376387
box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6), inset -16px 0 16px -16px rgba(0, 0, 0, .6);
377388
}
378389

390+
.close_bar {
391+
width: 100%;
392+
background-color: #3f3f3f;
393+
}
394+
379395
.explanation_container {
380396
border: none;
381397
top: 30px;
@@ -657,4 +673,55 @@ input[type=number]::-webkit-outer-spin-button {
657673
top: 30px;
658674
left: 0;
659675
}
660-
}
676+
}
677+
678+
.buttonContainer {
679+
width: 75px;
680+
height: 25px;
681+
display: block;
682+
position: relative;
683+
z-index: 100;
684+
background-color: white;
685+
}
686+
687+
.inputField {
688+
width: 25px;
689+
border: 0;
690+
}
691+
692+
.sb-button {
693+
border: 1px solid #515151;
694+
height: 25px;
695+
margin: 0 auto;
696+
}
697+
698+
.auto-gen {
699+
top: 30px;
700+
height: 100%;
701+
width: 100%;
702+
text-align: center;
703+
background-color: #262626;
704+
align-items: center;
705+
}
706+
707+
.inputs {
708+
display: inline-block;
709+
border: 0;
710+
background-color: #505050;
711+
height: 25px;
712+
width: 75px;
713+
}
714+
715+
.grid {
716+
width: 50%;
717+
height: 50%;
718+
float: left;
719+
-webkit-box-sizing: border-box;
720+
-moz-box-sizing: border-box;
721+
box-sizing: border-box;
722+
}
723+
724+
.fields {
725+
margin-top: 5px;
726+
margin-bottom: 5px;
727+
}

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ <h3>
3030
</h3>
3131
</button>
3232
<div class="top-menu-buttons">
33+
<div class="btn" id="btn_generate">
34+
<div class="wrapper">
35+
<i class='fa fa-pencil' aria-hidden='true'></i>
36+
<span class="btn-text">Generate</span>
37+
</div>
38+
</div>
39+
3340
<div class="btn" id="btn_share">
3441
<div class="wrapper">
3542
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">

‎js/create/array1d.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use strict';
2+
3+
const array2D = require('./array2d');
4+
const modules = require('../module');
5+
const util = require('./util');
6+
7+
const getTracerName = () =>{
8+
return document.getElementById("tracerName-1D").value;
9+
}
10+
11+
const getNumColumns = () => {
12+
var column_field = document.getElementById('numColumns-1D');
13+
return column_field.value;
14+
};
15+
16+
const setup = () => {
17+
var button_1DMatrix = document.getElementById("button-1DMatrix");
18+
var logger;
19+
var arr1DTracer;
20+
button_1DMatrix.addEventListener('click',function(){
21+
util.clearModules();
22+
arr1DTracer = new modules.Array1DTracer();
23+
var arrElem = document.querySelector('.module_wrapper');
24+
arrElem.addEventListener("mousewheel", array2D.mousescroll, false);
25+
arrElem.addEventListener("DOMMouseScroll", array2D.mousescroll, false);
26+
logger = new modules.LogTracer('Generated Javascript');
27+
28+
var numColumns = getNumColumns();
29+
var data = array2D.fauxData(1,numColumns)[0];
30+
31+
arr1DTracer.setData(data);
32+
array2D.tableToInputFields(1, numColumns);
33+
util.positionModules();
34+
arr1DTracer.refresh();
35+
},false);
36+
var button_JS = document.getElementById('button-generateJS-1D');
37+
button_JS.addEventListener('click',function(){
38+
array2D.generateJS(logger, 'Array1DTracer',getTracerName());
39+
},false);
40+
};
41+
42+
43+
module.exports = {
44+
setup
45+
};

‎js/create/array2d.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
'use strict';
2+
3+
const modules = require('../module');
4+
const util = require('./util');
5+
6+
7+
const getTracerName = () =>{
8+
return document.getElementById("tracerName-2D").value;
9+
}
10+
11+
const getNumRows = () => {
12+
var row_field = document.getElementById('numRows-2D');
13+
return row_field.value;
14+
}
15+
16+
const getNumColumns = () => {
17+
var column_field = document.getElementById('numColumns-2D');
18+
return column_field.value;
19+
}
20+
21+
const fauxData = (r, c) => {
22+
var D = [];
23+
for (var i = 0; i < r; i++) {
24+
D.push([]);
25+
for (var j = 0; j < c; j++) {
26+
D[i].push(Math.floor(Math.random()* 10 + 1));
27+
}
28+
}
29+
return D;
30+
}
31+
32+
const tableToInputFields = (numRows, numColumns) => {
33+
var table = document.querySelector('.mtbl-table');
34+
35+
for(var i = 0; i < numRows; i++){
36+
for(var j = 0; j < numColumns; j++){
37+
var elem = document.createElement('input');
38+
elem.type = 'Number';
39+
elem.value = Math.floor(Math.random() * 10 + 1);
40+
elem.classList.add('mtbl-col','inputField');
41+
table.childNodes[i].childNodes[j].innerHTML = '';
42+
table.childNodes[i].childNodes[j].appendChild(elem);
43+
}
44+
}
45+
}
46+
47+
const generateJS = (logger, tracer, tracerName) => {
48+
if(!logger) return;
49+
50+
logger.clear();
51+
var table = document.querySelector('.mtbl-table');
52+
53+
var numRows = table.childNodes.length;
54+
var numColumns = table.childNodes[0].childNodes.length;
55+
56+
logger.print('Copy and paste this code in your data.js file!');
57+
logger.print('');
58+
59+
logger.print('let myTable = [');
60+
61+
var line = '';
62+
var i;
63+
var j;
64+
var comma = ',';
65+
for(i = 0; i < numRows; i++){
66+
line = '[';
67+
for(j = 0; j < numColumns-1; j++){
68+
line += table.childNodes[i].childNodes[j].childNodes[0].value + ',';
69+
}
70+
if(i === numRows - 1){comma = '';}
71+
line += table.childNodes[i].childNodes[j++].childNodes[0].value + ']' + comma;
72+
logger.print(line);
73+
}
74+
logger.print(']');
75+
76+
77+
logger.print("let myTableTracer = new "+ tracer +" ('"+tracerName+"')");
78+
logger.print('myTableTracer._setData (myTable)');
79+
80+
util.enabledHightlighting();
81+
}
82+
83+
const mousescroll = (e) =>{
84+
var colmElem = document.querySelector('.mtbl-col');
85+
var delta = (e.wheelDelta !== undefined && e.wheelDelta) ||
86+
(e.detail !== undefined && -e.detail);
87+
88+
var inputFields = document.getElementsByClassName("inputField");
89+
for (var i = 0; i < inputFields.length; i++) {
90+
inputFields[i].style.width = (parseFloat(colmElem.style.fontSize) * 2.5) + "px";
91+
}
92+
93+
}
94+
95+
const setup = () => {
96+
var button_2DMatrix = document.getElementById("button-2DMatrix");
97+
var logger;
98+
var arr2DTracer;
99+
button_2DMatrix.addEventListener('click',function(){
100+
util.clearModules();
101+
arr2DTracer = new modules.Array2DTracer();
102+
var arrElem = document.querySelector('.module_wrapper');
103+
arrElem.addEventListener("mousewheel", mousescroll, false);
104+
arrElem.addEventListener("DOMMouseScroll", mousescroll, false);
105+
logger = new modules.LogTracer('Generated Javascript');
106+
107+
var numRows = getNumRows();
108+
var numColumns = getNumColumns();
109+
var data = fauxData(numRows, numColumns);
110+
111+
arr2DTracer.setData(data);
112+
tableToInputFields(numRows, numColumns);
113+
util.positionModules();
114+
arr2DTracer.refresh();
115+
},false);
116+
var button_JS = document.getElementById('button-generateJS-2D');
117+
button_JS.addEventListener('click',function(){
118+
generateJS(logger, 'Array2DTracer', getTracerName());
119+
},false);
120+
}
121+
122+
module.exports = {
123+
setup,
124+
mousescroll,
125+
fauxData,
126+
tableToInputFields,
127+
generateJS
128+
};

‎js/create/index.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
const modules = require('../module');
4+
const array2d = require('./array2d');
5+
const array1d = require('./array1d');
6+
const util = require('./util');
7+
const Server = require('../server');
8+
const DOM = require('../dom');
9+
10+
const {
11+
getPath
12+
} = require('../server/helpers');
13+
14+
const closeCreate = () => {
15+
const $btnClose = $('#btn_close');
16+
17+
$btnClose.click(() => {
18+
$('.sandbox_container').remove();
19+
util.clearModules();
20+
reloadAlgorithm();
21+
});
22+
};
23+
24+
const reloadAlgorithm = () => {
25+
const {
26+
category,
27+
algorithm,
28+
file
29+
} = getPath();
30+
31+
Server.loadAlgorithm(category, algorithm).then((data) => {
32+
DOM.showAlgorithm(category, algorithm, data);
33+
});
34+
};
35+
36+
const createHTML = () => {
37+
$('.workspace').append("<div class='sandbox_container'>\
38+
<section class='close_bar'>\
39+
<div class='btn' id='btn_close'>\
40+
<div class='wrapper'>\
41+
<i class='fa fa-times' aria-hidden='true'></i>\
42+
</div>\
43+
</div>\
44+
</section>\
45+
<section class='auto-gen'>\
46+
<div class='grid' id='array1D-gen'>\
47+
<div> array1DTracer </div>\
48+
<i class='fa fa-ellipsis-h fa-5x' aria-hidden='true'></i>\
49+
<div class='fields'>\
50+
# of Columns: <input class='inputs'id='numColumns-1D' type='number' value='5'>\
51+
</div>\
52+
<div class='fields'>\
53+
Tracer Name: <input class='inputs'id='tracerName-1D' type='text' value='default'>\
54+
</div>\
55+
<button class='sb-button' id='button-1DMatrix'>Create 1DMatrix</button>\
56+
<button class='sb-button' id='button-generateJS-1D'>Generate Javascript</button>\
57+
</div>\
58+
<div class='grid' id='array2D-gen'>\
59+
<div> array2DTracer </div>\
60+
<i class='fa fa-th fa-5x' aria-hidden='true'></i>\
61+
<div class='fields'>\
62+
# of Rows: <input class='inputs'id='numRows-2D' type='number' value='5'>\
63+
</div>\
64+
<div class='fields'>\
65+
# of Columns: <input class='inputs'id='numColumns-2D' type='number' value='5'>\
66+
</div>\
67+
<div class='fields'>\
68+
Tracer Name: <input class='inputs'id='tracerName-2D' type='text' value='default'>\
69+
</div>\
70+
<button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
71+
<button class='sb-button' id='button-generateJS-2D'>Generate Javascript</button>\
72+
</div>\
73+
<div class='grid' id='chart-gen'></div>\
74+
<div class='grid' id='graph-gen'></div>\
75+
</section>\
76+
</div>");
77+
};
78+
79+
const init = () => {
80+
81+
var check = $('.sandbox_container');
82+
if(!check.length){
83+
util.clearModules();
84+
createHTML();
85+
array2d.setup();
86+
array1d.setup();
87+
closeCreate();
88+
}
89+
};
90+
91+
module.exports = {
92+
init
93+
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy