Skip to content

Commit

Permalink
Added tutorials for circular lists and arrays 1,2 and 3D.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lestrell
lestrell committed Jan 30, 2017
1 parent 50abc1d commit 8259994
Show file tree
Hide file tree
Showing 11 changed files with 1,410 additions and 6 deletions.
284 changes: 284 additions & 0 deletions Hello_World_Tutorials/ARRAY1D.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="Bridges"/>
<meta name="description" content="Bridges Tutorials"/>

<link rel="stylesheet" type="text/css" href="./tutorial.css" />
<link rel="shortcut icon" href="http://bridgesuncc.github.io/favicon.png"/>
<script src="./tutorial.js"></script>
<title>Bridges - Hello World Visualization Tutorial</title>
</head>

<body>
<div>

<header w3-include-html="./Tutorial_Header.html"></header>

<main>
<br>
Array&lt;E&gt; implements a <i>array</i> in BRIDGES, and it can be used to create arrays of type Element&lt;E&gt;
<!-- SLelement&lt;E&gt; implements a <i>doubly linked list</i> in BRIDGES and is
inherited from Element&lt;E&gt;
<br><br><img width="175em" src="./images/slelement-cd.png"><br><br>
<h2>How does the SLelement&lt;E&gt; work?</h2>
<p>
SLelement&lt;E&gt; stands for Singly Linked Element and is a type
of container that has one link, pointing to another SLelement&lt;E&gt;.
So an SLelement&lt;E&gt; "knows" who it is pointing at but it does not know
who is pointing at it(if any).
<br/><br/><img width="600em" src="./SLelement.png"/><br/><br/>
In the above example, SLelement1 points to SLelement2. Calling getNext()
on SLelement1 will return a link to SLelement2, and calling getNext() on
SLelement2 will return a link to SLelement3. SLelement3 is not pointing
to another SLelement so calling getNext() on SLelement3 will return NULL.
This is desirable since you will know that you have reached the end of the
singly linked list (as NULL is a unique value and not a legal memory address
for an object).
<br/><br/>
Also notice that there is no getPrev(). SLelement2 has no idea what
element came before it. So, you CANNOT go backwards.
</p>
<hr/> -->

<h2>1D Array - An Example BRIDGES program</h2>
<div class="tabs">
<div onclick="displayCode('Java',this)">Java</div>
<div onclick="displayCode('C++',this)">C++</div>
</div>
<div class="tabContents">
<div id="Java" class="tab">
<h3>Create a new .java file</h3>

<h3>Imports</h3>
<ul>
<li>We need to include these Bridges files to give access to all the classes/methods needed to interact with Bridges</li>
<li>In your .java file, enter the following code snippets:</li>
<code>
import bridges.connect.Bridges;
import bridges.base.Array;
import bridges.base.Element;
</code>
</ul>

<h3>Main Exception</h3>
<ul>
<li>By adding a throw exception we can forgo messy try/catch blocks in our code for our Bridges calls</li>
<li>In your .java file, add a throw exception to the main function so it looks like this:</li>
<code>public static void main(String[] args) throws Exception</code>
</ul>

<h3>Inside our Main</h3>
<ul>
<li>First we need to create our BRIDGES object and initialize our BRIDGES Credentials</li>
<code>Bridges&lt;String, String&gt; bridge = new Bridges&lt;String,String&gt;(1, "YOUR_API_KEY", "YOUR_USER_ID");</code> Note that you will need to replace the two fields in this call with your BRIDGES credentials.
<p>
<li>Then we can create our Array</li>
<code>
//declare array size
int arraySize = 10;

//declare the array dimension
//(10,1,1) for 1D array, where 10 is the array size
int[] dims = &#123;arraySize, 1, 1&#125;;
Array&lt;Integer&gt; my_array = new Array&lt;Integer&gt; (1, dims);
</code>
<li>Now populate the array with dummy data.</li>
<code>
for (int k = 0; k &lt; my_array.getSize(); k++)&#123;
my_array.setValue(k, new Element&lt;Integer&gt;(String.valueOf(k), k*k));
my_array.getValue(k).getVisualizer().setColor("red");
&#125;
</code>


<li>Now change the color of the elements.</li>
<code>
my_array.getValue(1).getVisualizer().setColor("green");
my_array.getValue(3).getVisualizer().setColor("blue");
my_array.getValue(5).getVisualizer().setColor("magenta");
my_array.getValue(7).getVisualizer().setColor("cyan");
my_array.getValue(9).getVisualizer().setColor("yellow");
</code>


<li>Now we pass the array object to BRIDGES</li>
<code>bridge.setDataStructure(my_array);</code>
<li>Finally we call the visualize function</li>
<code>bridge.visualize();</code>
</ul>
<h4><strong>Code Summary:</strong> Your .java file should look like this</h4>
<code>

import bridges.connect.Bridges;
import bridges.base.Array;
import bridges.base.Element;

public class arr1d &#123;
public static void main(String[] args) throws Exception&#123;

//create the Bridges object
Bridges&lt;String, Integer&lt; bridges
= new Bridges&lt;String, Integer&lt;(10, "486749122386", "kalpathi60");



// for 1D array
int arraySize = 10;
int[] dims = &#123;arraySize, 1, 1&#125;;
Array&lt;Integer&gt; my_array = new Array&lt;Integer&gt; (1, dims);

for (int k = 0; k &lt; my_array.getSize(); k++)&#123;
my_array.setValue(k, new Element&lt;Integer&gt;(String.valueOf(k), k*k));
my_array.getValue(k).getVisualizer().setColor("red");
&#125;

my_array.getValue(1).getVisualizer().setColor("green");
my_array.getValue(3).getVisualizer().setColor("blue");
my_array.getValue(5).getVisualizer().setColor("magenta");
my_array.getValue(7).getVisualizer().setColor("cyan");
my_array.getValue(9).getVisualizer().setColor("yellow");

//set visualizer type
bridges.setDataStructure(my_array);

bridges.getVisualizer().setVisualizeJSON(true);

// visualize the list
bridges.visualize();
&#125;
&#125;
</code>

</div>
<div id="C++" class="tab">
<h3>Create a new .cpp file</h3>

<h3>Includes</h3>
<ul>
<li>We need to include these Bridges headers to give access to all the classes/methods needed to interact with Bridges</li>
<li>In your .cpp file, enter the following code snippets:</li>
<code>
#include "Bridges.h"
#include "Element.h"
</code>
</ul>

<h3>Namespace</h3>
<ul>
<li>By using this namespace we can forgo messy scope specifiers in our code for our Bridges calls</li>
<li>In your .cpp file, enter the following code snippet:</li>
<code>using namespace bridges;</code>
</ul>

<h3>Inside our Main</h3>
<ul>
<li>First we need to initialize our Bridges Credentials</li>
<code>Bridges::initialize(1, "YOUR_API_KEY","YOUR_USER_ID");</code>
<p>
Note that you must replace the two strings above with your BRIDGES credentials.
<p>
<li>Then we can create our Array.</li>
<code>
Element&lt;string> *el_array = new Element&lt;string>[10];

</code>
<li>Now populate the array with dummy data.</li>
<code>
for (int k = 0; k &lt; 10; k++)
el_array[k].setLabel("Element " + to_string(k));
</code>
<li>Now change the color of the elements.</li>
<code>
el_array[0].getVisualizer()-&gt;setColor(Color("red"));
el_array[1].getVisualizer()-&gt;setColor(Color("green"));
el_array[3].getVisualizer()-&gt;setColor(Color("blue"));
el_array[5].getVisualizer()-&gt;setColor("magenta");
el_array[7].getVisualizer()-&gt;setColor("cyan");
el_array[9].getVisualizer()-&gt;setColor("yellow");
</code>
<li>Now we pass the first element of our singly linked list to Bridges</li>
<code>Bridges::setDataStructure(el_array, 10);</code>
<li>Finally we call the visualize function</li>
<code>Bridges::visualize();</code>
</ul>
<h4><strong>Code Summary:</strong> Your .cpp file should look like this</h4>
<code>
#include &lt;iostream&gt;
#include &lt;string&gt;

using namespace std;

#define LOCAL_SERVER 0

#include "Bridges.h"
#include "Element.h"

using namespace bridges;
int main() &#123;

#if LOCAL_SERVER
Bridges&lt;string, string&gt; *bridges = new Bridges&lt;string, string&gt;(0,
"856807706412", "kalpathi60");
#else
Bridges::initialize(0, "kalpathi60", "486749122386");
#endif

Element&lt;string&gt; *el_array = new Element&lt;string&gt;[10];

el_array[0].setLabel("Element 0");

for (int k = 0; k &lt; 10; k++)
el_array[k].setLabel("Element " + to_string(k));

el_array[0].getVisualizer()-&gt;setColor(Color("red"));
el_array[1].getVisualizer()-&gt;setColor(Color("green"));
el_array[3].getVisualizer()-&gt;setColor(Color("blue"));
el_array[5].getVisualizer()-&gt;setColor("magenta");
el_array[7].getVisualizer()-&gt;setColor("cyan");
el_array[9].getVisualizer()-&gt;setColor("yellow");


Bridges::setTitle("Array Example");
Bridges::setDataStructure(el_array, 10);
Bridges::visualize();

return 0;
&#125;
</code>

</div>
</div>

<h3>Bridges Visualization</h3>
<ul>
<li>Once all your code is in order, run your file.</li>
<li>Assuming all your code is correct and it compiles correctly, a
link to the Bridges website will be generated on the console.</li>
<li>Copy/paste this link into your favorite browser to view a visualization
of the data structure you just created.</li>
<li>It should look something like this:</li>
</ul>
<div class="iframe-wrapper">
<iframe src="http://bridges-cs.herokuapp.com/assignments/1/bridges_public" scrolling="no">
<p>Sorry, your browser doesn't seem to support iframes -
<a href="http://bridges-cs.herokuapp.com/assignments/1/bridges_public">Frame Link</a>
</p>
</iframe>
</div>
<p>Well done! You’ve just created your first Bridges project!</p>
</main>

<footer w3-include-html="./Tutorial_Footer.html"></footer>

</div>
<script>
w3IncludeHTML();
document.querySelector("*.tabs > *").click();
</script>
</body>
</html>
Loading

0 comments on commit 8259994

Please sign in to comment.