Skip to content

UI update #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

UI update #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b391be
styling updates
AdiChops May 2, 2021
c3d1fa9
added missing navs
AdiChops May 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 121 additions & 4 deletions JavascriptVisualRelease/AVLtree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,123 @@
<h1>AVL Tree</h1>
</div>

<div = id = "mainContent">
<div id = "mainContent">
<a href="#" id="hamburger"><i class="fas fa-bars"></i></a>
<nav>
<a href="#" id="closebtn">&times;</a>
<ul>

<li> Basics </li>
<ul>
<li> <a href = "StackArray.html">Stack: Array Implementation</a> </li>
<li><a href = "StackLL.html">Stack: Linked List Implementation</a> </li>
<li> <a href = "QueueArray.html">Queues: Array Implementation</a> </li>
<li> <a href = "QueueLL.html">Queues: Linked List Implementation</a> </li>

</ul>

<li> Recursion </li>
<ul>
<li> <a href = "RecFact.html">Factorial</a> </li>
<li><a href = "RecReverse.html">Reversing a String</a> </li>
<li><a href = "RecQueens.html">N-Queens Problem</a> </li>
</ul>

<li> Indexing </li>

<ul>
<li> <a href = "Search.html">Binary and Linear Search (of sorted list)</a> </li>
<li> <a href = "BST.html">Binary Search Trees</a> </li>
<li> <a href = "AVLtree.html">AVL Trees (Balanced binary search trees)</a> </li>
<li> <a href = "RedBlack.html">Red-Black Trees</a> </li>
<li> <a href = "SplayTree.html">Splay Trees</a> </li>
<li> <a href = "OpenHash.html">Open Hash Tables (Closed Addressing)</a> </li>
<li> <a href = "ClosedHash.html">Closed Hash Tables (Open Addressing)</a> </li>
<li> <a href = "ClosedHashBucket.html">Closed Hash Tables, using buckets</a> </li>
<li> <a href = "Trie.html">Trie (Prefix Tree, 26-ary Tree)</a> </li>
<li> <a href = "RadixTree.html">Radix Tree (Compact Trie)</a> </li>
<li> <a href = "TST.html">Ternary Search Tree (Trie with BST of children)</a> </li>
<li> <a href = "BTree.html">B Trees</a></li>
<li> <a href = "BPlusTree.html">B+ Trees</a></li>
</ul>

<li> Sorting </li>
<ul>
<li> <a href = "ComparisonSort.html">Comparison Sorting</a>
<ul>
<li> Bubble Sort </li>
<li> Selection Sort </li>
<li> Insertion Sort</li>
<li> Shell Sort </li>
<li> Merge Sort </li>
<li> Quck Sort </li>
</ul>
</li>
<li> <a href = "BucketSort.html">Bucket Sort</a> </li>
<li> <a href = "CountingSort.html">Counting Sort</a> </li>
<li> <a href = "RadixSort.html">Radix Sort</a> </li>
<li> <a href = "HeapSort.html">Heap Sort</a> </li>
</ul>

<li> Heap-like Data Structures </li>
<ul>
<li> <a href = "Heap.html">Heaps</a> </li>
<li> <a href = "BinomialQueue.html">Binomial Queues</a> </li>
<li> <a href = "FibonacciHeap.html">Fibonacci Heaps</a> </li>
<li> <a href = "LeftistHeap.html">Leftist Heaps</a> </li>
<li> <a href = "SkewHeap.html">Skew Heaps</a> </li>
</ul>

<li> Graph Algorithms </li>
<ul>
<li> <a href = "BFS.html">Breadth-First Search</a> </li>
<li> <a href = "DFS.html">Depth-First Search</a> </li>
<li> <a href = "ConnectedComponent.html">Connected Components</a> </li>
<li> <a href = "Dijkstra.html">Dijkstra's Shortest Path</a> </li>
<li> <a href = "Prim.html">Prim's Minimum Cost Spanning Tree</a> </li>
<li> <a href = "TopoSortIndegree.html">Topological Sort (Using Indegree array) </a> </li>
<li> <a href = "TopoSortDFS.html">Topological Sort (Using DFS) </a> </li>
<li> <a href = "Floyd.html">Floyd-Warshall (all pairs shortest paths)</a> </li>
<li> <a href = "Kruskal.html">Kruskal Minimum Cost Spanning Tree Algorithm</a></li>

</ul>


<li> Dynamic Programming </li>
<ul>
<li> <a href = "DPFib.html">Calculating nth Fibonacci number</a></li>
<li> <a href = "DPChange.html">Making Change</a></li>
<li> <a href = "DPLCS.html">Longest Common Subsequence</a></li>
</ul>


<li> Geometric Algorithms</li>

<!-- <li> B-Trees -->

<ul>

<li> <a href = "RotateScale2D.html">2D Rotation and Scale Matrices</a> </li>
<li> <a href = "RotateTranslate2D.html">2D Rotation and Translation Matrices</a> </li>
<li> <a href = "ChangingCoordinates2D.html">2D Changing Coordinate Systems</a> </li>
<li> <a href = "RotateScale3D.html">3D Rotation and Scale Matrices</a> </li>
<li> <a href = "ChangingCoordinates3D.html">3D Changing Coordinate Systems</a> </li>

</ul>


<li> Others ... </li>

<!-- <li> B-Trees -->

<ul>

<li> <a href = "DisjointSets.html">Disjoint Sets</a> </li>

</ul>

</ul>
</nav>

<div id = "algoControlSection">
<!-- Table for buttons to control specific animation (insert/find/etc) -->
Expand All @@ -59,7 +175,7 @@ <h1>AVL Tree</h1>
<!-- Table for buttons to control general animation (play/pause/undo/etc) ->
<!-- (filled in by javascript code, specifically AnimationMain.js) -->

<table id="GeneralAnimationControls"> </table>
<div id="GeneralAnimationControls"> </div>
</div>

</div> <!-- mainContent -->
Expand All @@ -69,5 +185,6 @@ <h1>AVL Tree</h1>
</div>

</div><!-- container -->
</body>
</html>
<script src="AnimationLibrary/navigation.js"></script>

</body></html>
6 changes: 3 additions & 3 deletions JavascriptVisualRelease/Algorithms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
<li><a href = "StackLL.html">Stack: Linked List Implementation</a> </li>
<li> <a href = "QueueArray.html">Queues: Array Implementation</a> </li>
<li> <a href = "QueueLL.html">Queues: Linked List Implementation</a> </li>
<li> Lists: Array Implementation (available in <a href = "java/visualization.html">java</a> version)</li>
<li> Lists: Linked List Implementation (available in <a href = "java/visualization.html">java</a> version) </li>
<li> Lists: Array Implementation (available in <a href = "./java/visualization.html">java</a> version)</li>
<li> Lists: Linked List Implementation (available in <a href = "./java/visualization.html">java</a> version) </li>
</ul>

<li> Recursion </li>
Expand Down Expand Up @@ -144,7 +144,7 @@
<ul>

<li> <a href = "DisjointSets.html">Disjoint Sets</a> </li>
<li> Huffman Coding (available in <a href = "java/visualization.html">java</a> version) </li>
<li> Huffman Coding (available in <a href = "./java/visualization.html">java</a> version) </li>

</ul>

Expand Down
86 changes: 46 additions & 40 deletions JavascriptVisualRelease/AnimationLibrary/AnimationMain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ function doPlayPause()
paused = !paused;
if (paused)
{
playPauseBackButton.setAttribute("value", "play");
playPauseBackButton.firstChild.setAttribute("class", "fas fa-play");
if (skipBackButton.disabled == false)
{
stepBackButton.disabled = false;
Expand All @@ -231,7 +231,7 @@ function doPlayPause()
}
else
{
playPauseBackButton.setAttribute("value", "pause");
playPauseBackButton.firstChild.setAttribute("class", "fas fa-pause");
}
animationManager.SetPaused(paused);
}
Expand Down Expand Up @@ -268,17 +268,30 @@ function addControlToAnimationBar(type,name,containerType)
element.setAttribute("type", type);
element.setAttribute("value", name);

var controlBar = document.getElementById("GeneralAnimationControls");

var tableEntry = document.createElement("td");
//Append the element in page (in span).
controlBar.appendChild(element);
return element;

tableEntry.appendChild(element);
}

function addFAButtonToAnimationBar(faClass){
var element = document.createElement("button");

element.setAttribute("type", "button");
element.setAttribute("class", "btn btn-outline-dark");
element.innerHTML = `<i class="${faClass}"></i>`;

var controlBar = document.getElementById("GeneralAnimationControls");

//Append the element in page (in span).
controlBar.appendChild(tableEntry);
if(!controlBar.firstElementChild){
let newDiv = document.createElement("div");
controlBar.appendChild(newDiv);
}
controlBar.firstElementChild.appendChild(element);
return element;

}


Expand All @@ -287,54 +300,29 @@ function initCanvas()
canvas = document.getElementById("canvas");
objectManager = new ObjectManager();
animationManager = new AnimationManager(objectManager);

skipBackButton = addControlToAnimationBar("Button", "Skip Back");
skipBackButton = addFAButtonToAnimationBar("fas fa-fast-backward");
skipBackButton.onclick = animationManager.skipBack.bind(animationManager);
stepBackButton = addControlToAnimationBar("Button", "Step Back");
stepBackButton = addFAButtonToAnimationBar("fas fa-step-backward");
stepBackButton.onclick = animationManager.stepBack.bind(animationManager);
playPauseBackButton = addControlToAnimationBar("Button", "Pause");
playPauseBackButton = addFAButtonToAnimationBar("fas fa-pause");
playPauseBackButton.onclick = doPlayPause ;
stepForwardButton = addControlToAnimationBar("Button", "Step Forward");
stepForwardButton = addFAButtonToAnimationBar("fas fa-step-forward");
stepForwardButton.onclick = animationManager.step.bind(animationManager) ;
skipForwardButton = addControlToAnimationBar("Button", "Skip Forward");
skipForwardButton = addFAButtonToAnimationBar("fas fa-fast-forward");
skipForwardButton.onclick = animationManager.skipForward.bind(animationManager);


var element = document.createElement("div");
element.setAttribute("display", "inline-block");
element.setAttribute("float", "left");


var tableEntry = document.createElement("td");

var tableEntry = document.createElement("div");

var controlBar = document.getElementById("GeneralAnimationControls");



var newTable = document.createElement("table");

var midLevel = document.createElement("tr");
var bottomLevel = document.createElement("td");
midLevel.appendChild(bottomLevel);
bottomLevel.appendChild(element);
newTable.appendChild(midLevel);



midLevel = document.createElement("tr");
bottomLevel = document.createElement("td");
bottomLevel.align = "center";
var txtNode = document.createTextNode("Animation Speed");
midLevel.appendChild(bottomLevel);
bottomLevel.appendChild(txtNode);
newTable.appendChild(midLevel);



tableEntry.appendChild(newTable);

tableEntry.appendChild(txtNode);

tableEntry.appendChild(element);

//Append the element in page (in span).
controlBar.appendChild(tableEntry);
Expand All @@ -350,7 +338,15 @@ function initCanvas()
{
speed = parseInt(speed);
}

var spanMinus = document.createElement("span");
var iMinus = document.createElement("i");
iMinus.setAttribute("class", "fas fa-minus-circle");
spanMinus.appendChild(iMinus);
spanMinus.style.left = "-30px";
spanMinus.style.top = "-7px";
spanMinus.style.position = "absolute";
element.appendChild(spanMinus);

$(element).slider({
animate: true,
value: speed,
Expand All @@ -369,6 +365,16 @@ function initCanvas()
element.setAttribute("style", "width:200px");


var spanPlus = document.createElement("span");
var iPlus = document.createElement("i");
iPlus.setAttribute("class", "fas fa-plus-circle");
spanPlus.appendChild(iPlus);
spanPlus.style.left = "210px";
spanPlus.style.top = "-7px";

spanPlus.style.position = "absolute";
element.appendChild(spanPlus);


var width=getCookie("VisualizationWidth");
if (width == null || width == "")
Expand Down
10 changes: 7 additions & 3 deletions JavascriptVisualRelease/AnimationLibrary/CustomEvents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@
// authors and should not be interpreted as representing official policies, either expressed
// or implied, of the University of San Francisco

document.getElementsByTagName("head")[0].innerHTML +=`<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">`;
document.querySelector("body").innerHTML += `<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
document.getElementsByTagName("head")[0].innerHTML +=`
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>`;
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
`;

Function.prototype.bind = function() {
var _function = this;
Expand Down
39 changes: 39 additions & 0 deletions JavascriptVisualRelease/AnimationLibrary/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
let navToggled = false;
let activateNavigation = ()=>{
navToggled = true;
if(window.innerWidth > 768){
document.querySelector('nav').style.width = "25%";
document.querySelector('main').style.marginLeft = "25%";
document.querySelector('main').style.width = "auto";
}
else{
document.querySelector('nav').style.width = "100%";
}
};

let closeNavigation = () => {
navToggled = false;
document.querySelector('nav').style.width = "0px";
document.querySelector('main').style.margin = "auto";

if(window.innerWidth > 768){
document.querySelector('main').style.width = "90%";
}
};

document.getElementById('closebtn').addEventListener('click', ()=>{
closeNavigation();
});

document.getElementById('hamburger').addEventListener('click', ()=>{
activateNavigation();
});

window.addEventListener('resize', ()=>{
if(navToggled){
activateNavigation();
}
else{
closeNavigation();
}
});
Loading