Skip to content

Commit

Permalink
added runtime flow visualization
Browse files Browse the repository at this point in the history
  • Loading branch information
Ankush committed Apr 6, 2023
1 parent a6e09cf commit 05264fb
Show file tree
Hide file tree
Showing 7 changed files with 403 additions and 92 deletions.
Binary file added base/__pycache__/utils.cpython-38.pyc
View file
Binary file not shown.
Binary file modified base/__pycache__/views.cpython-38.pyc
View file
Binary file not shown.
256 changes: 189 additions & 67 deletions base/templates/base/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,121 +3,243 @@

<head>
<meta charset="UTF-8">
<title>Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="line_order" name="line_order" content="{{line_order}}">
<meta id="outputs" name="outputs" content="{{outputs}}">
<title>Code Visualizer</title>

<style>
/* Add any custom styles here */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.125;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: left;
text-align: center;
}

.container {
padding: 20px;
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
}

nav {
background-color: #f2f2f2;
display: flex;
justify-content: space-between;
textarea {
border: 1px solid #ccc;
padding: 10px;
width: 220%;
min-height: 500px;
resize: vertical;
font-family: monospace;
line-height: 1.5;
margin-left: -450px;
box-sizing: border-box;
}

nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
.short_textarea {
border: 1px solid #ccc;
padding: 10px;
width: 25%;
min-height: 300px;
resize: vertical;
font-family: monospace;
line-height: 1.5;
margin-left: 128px;
margin-right: -15px;
box-sizing: border-box;
}

nav ul li {
margin-right: 20px;
.input_field {
border: 1px solid #ccc;
padding: 10px;
width: 100%;
min-height: 300px;
resize: vertical;
font-family: monospace;
line-height: 1.5;
margin-left: -250px;
box-sizing: border-box;
}

.linenumbers {
display: inline-block;
user-select: none;
pointer-events: none;
color: #888;
width: 40px;
padding-right: 10px;
text-align: right;
position: absolute;
left: -490px;
top: 10px;
bottom: 10px;
box-sizing: border-box;
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

#code {
padding: 20px;
min-height: 400px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 20px;
.editor-container {
position: relative;
}

#evaluate {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #4CAF50;
.button-container {
margin-left: auto;
text-align: center;
}

button {
display: inline-block;
margin: 40px 40px;
padding: 10px 30px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.inline-div {
display: inline-block;
margin-left: 360px;
button:hover {
background-color: #0062cc;
}


@media only screen and (max-width: 600px) {
.linenumbers {
display: none;
}

textarea {
margin-left: 0;
}

.button-container {
margin-left: 0;
}
}

.arrow-container {
position: relative;
width: 100px;
height: 200px;
}

.inline-txtarea {
resize: none;
border: 2px solid;
height: 325px;
.arrow {
position: absolute;
top: 105%;
right: 585px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
transform: translateX(0);
animation: move-arrow 2s infinite;
}

@keyframes move-arrow {
50% {
transform: translateX(50%);
}
}
</style>
</head>

<body>
<header>
<h1>CODE VISUALIZER</h1>
<h1>Code Visualizer</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</nav>

<form method="POST" action="/execute">
<form method="post" action="/execute">
{% csrf_token %}
<textarea id="code" name="code" rows="10" cols="226">{{ code }}</textarea>
<button type=submit id="evaluate">Evaluate</button>

<div class="inline-div">
<p align="center">User Input</p>
<textarea id="input" name="input" cols="50" rows="15" class="inline-txtarea">{{ input }}</textarea>
<div class="container">
<div class="arrow-container">
<div class="arrow"></div>
</div>

<div class="editor-container">
<div class="linenumbers"></div>
<div class="row">
<div class="column">
<textarea name="editor" id="editor" placeholder="Code Field">{{ code }}</textarea>
</div>
</div>
<div class="button-container">
<button name="execute" type="submit">Execute</button>
<button name="debug" type="submit">Visualize</button>
</div>
</div>
</div>
<div class="inline-div">
<p align="center">Output</p>
{% if error %}
<textarea style="color: red;" id="output" name="output" cols="50" rows="15"
class="inline-txtarea">{{ output }}</textarea>
{% else %}
<textarea id="output" name="output" cols="50" rows="15" class="inline-txtarea">{{ output }}</textarea>
{% endif %}
</div>
</form>

<div style="height:280px;"></div>

<textarea name="input" id="input" class="short_textarea" placeholder="Input Field">{{ input }}</textarea>
<textarea name="output" id="output" class="short_textarea" placeholder="Output Field">{{ output }}</textarea>
<textarea name="debug" id="debug" class="short_textarea" placeholder="Debug Output"></textarea>
</form>
<div style="height: 250px;"></div>
<footer>
<p>&copy; 2023 Editor. All rights reserved.</p>
<p>Copyright &copy; 2023</p>
</footer>
<script>
// Add any custom scripts here
const editor = document.getElementById('editor');
const lineNumberContainer = document.querySelector('.linenumbers');

function updateLineNumbers() {
const lines = editor.value.split('\n');
const lineNumberHTML = [];
for (let i = 1; i <= lines.length; i++) {
lineNumberHTML.push('<div class="line">' + i + '</div>');
}
lineNumberContainer.innerHTML = lineNumberHTML.join('');
}

editor.addEventListener('input', updateLineNumbers);

// Call the updateLineNumbers function once when the page loads
updateLineNumbers();

const textarea = document.getElementById("editor");
textarea.addEventListener("keyup", e => {
textarea.style.height = "63px";
let scHeight = e.target.scrollHeight;
textarea.style.height = `${scHeight}px`;
});

let arrow = document.querySelector(".arrow");
let topPos = 105; // initial top position
let interval = setInterval(moveArrowDown, 2000); // call moveArrowDown every second

line_order = JSON.parse(document.getElementById("line_order").content);
outputs = document.getElementById("outputs").content;
outputs = outputs.replace(/'/g, '"');
outputs = JSON.parse(outputs);
var c = 0;
let debug_textarea = document.getElementById('debug');
function moveArrowDown() {
if (c < line_order.length) {
console.log(line_order);
console.log(outputs);
topPos = 96 + 9 * line_order[c]; // move the arrow down by 5 pixels
arrow.style.top = `${topPos}%`; // update the top position of the arrow
if (outputs[c] != "")
debug_textarea.value += outputs[c] + "\n";
c += 1;
}
}
</script>
</body>

Expand Down
Loading

0 comments on commit 05264fb

Please sign in to comment.