-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added tutorials for circular lists and arrays 1,2 and 3D.
- Loading branch information
Showing
11 changed files
with
1,407 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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<E> implements a <i>array</i> in BRIDGES, and it can be used to create arrays of type Element<E> | ||
| <!-- SLelement<E> implements a <i>doubly linked list</i> in BRIDGES and is | ||
| inherited from Element<E> | ||
| <br><br><img width="175em" src="./images/slelement-cd.png"><br><br> | ||
| <h2>How does the SLelement<E> work?</h2> | ||
| <p> | ||
| SLelement<E> stands for Singly Linked Element and is a type | ||
| of container that has one link, pointing to another SLelement<E>. | ||
| So an SLelement<E> "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<String, String> bridge = new Bridges<String,String>(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 = {arraySize, 1, 1}; | ||
| Array<Integer> my_array = new Array<Integer> (1, dims); | ||
| </code> | ||
| <li>Now populate the array with dummy data.</li> | ||
| <code> | ||
| for (int k = 0; k < my_array.getSize(); k++){ | ||
| my_array.setValue(k, new Element<Integer>(String.valueOf(k), k*k)); | ||
| my_array.getValue(k).getVisualizer().setColor("red"); | ||
| } | ||
| </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 { | ||
| public static void main(String[] args) throws Exception{ | ||
|
|
||
| //create the Bridges object | ||
| Bridges<String, Integer< bridges | ||
| = new Bridges<String, Integer<(10, "486749122386", "kalpathi60"); | ||
|
|
||
|
|
||
|
|
||
| // for 1D array | ||
| int arraySize = 10; | ||
| int[] dims = {arraySize, 1, 1}; | ||
| Array<Integer> my_array = new Array<Integer> (1, dims); | ||
|
|
||
| for (int k = 0; k < my_array.getSize(); k++){ | ||
| my_array.setValue(k, new Element<Integer>(String.valueOf(k), k*k)); | ||
| my_array.getValue(k).getVisualizer().setColor("red"); | ||
| } | ||
|
|
||
| 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(); | ||
| } | ||
| } | ||
| </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<string> *el_array = new Element<string>[10]; | ||
|
|
||
| </code> | ||
| <li>Now populate the array with dummy data.</li> | ||
| <code> | ||
| for (int k = 0; k < 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()->setColor(Color("red")); | ||
| el_array[1].getVisualizer()->setColor(Color("green")); | ||
| el_array[3].getVisualizer()->setColor(Color("blue")); | ||
| el_array[5].getVisualizer()->setColor("magenta"); | ||
| el_array[7].getVisualizer()->setColor("cyan"); | ||
| el_array[9].getVisualizer()->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 <iostream> | ||
| #include <string> | ||
|
|
||
| using namespace std; | ||
|
|
||
| #define LOCAL_SERVER 0 | ||
|
|
||
| #include "Bridges.h" | ||
| #include "Element.h" | ||
|
|
||
| using namespace bridges; | ||
| int main() { | ||
|
|
||
| #if LOCAL_SERVER | ||
| Bridges<string, string> *bridges = new Bridges<string, string>(0, | ||
| "856807706412", "kalpathi60"); | ||
| #else | ||
| Bridges::initialize(0, "kalpathi60", "486749122386"); | ||
| #endif | ||
|
|
||
| Element<string> *el_array = new Element<string>[10]; | ||
|
|
||
| el_array[0].setLabel("Element 0"); | ||
|
|
||
| for (int k = 0; k < 10; k++) | ||
| el_array[k].setLabel("Element " + to_string(k)); | ||
|
|
||
| el_array[0].getVisualizer()->setColor(Color("red")); | ||
| el_array[1].getVisualizer()->setColor(Color("green")); | ||
| el_array[3].getVisualizer()->setColor(Color("blue")); | ||
| el_array[5].getVisualizer()->setColor("magenta"); | ||
| el_array[7].getVisualizer()->setColor("cyan"); | ||
| el_array[9].getVisualizer()->setColor("yellow"); | ||
|
|
||
|
|
||
| Bridges::setTitle("Array Example"); | ||
| Bridges::setDataStructure(el_array, 10); | ||
| Bridges::visualize(); | ||
|
|
||
| return 0; | ||
| } | ||
| </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> |
Oops, something went wrong.