signalflowgraph/index.html at master · ziadhishamali/signalflowgraph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en" id="html">
<head>

    <meta charset="UTF-8">
    <title>Flow Signal Graph</title>
    <link rel="stylesheet" href="app.css">
    <script src="./vis/dist/vis.js"></script>
    <link rel="stylesheet" href="./vis/dist/vis.css">
    <script type="text/javascript" src="app.js"></script>

</head>

<body onload="init();">

    <div class="container" id="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>

    <div class="sideBar" id="sideBar">

        <div class="menuBtn" id="menuBtn">

            <li class="homeBtn" id="homeBtn">Home</li>
            <li class="howBtn" id="howBtn">How to use ...</li>
            <li class="aboutBtn" id="aboutBtn">About</li>

        </div>

    </div>


    <div class="sideBarHow" id="sideBarHow">

        <div class="inst">
            <ul class="instructions">1) Add The Nodes Of the graph by clicking on “Add Node” Button and give them labels.</ul>
            <ul class="instructions">2) Add The Edges Of the graph by clicking on “Add Edges” Button and give them labels.</ul>
            <ul class="instructions">3) Edit any of the Nodes or Edges Of the graph by selecting them and click on “Add Edges” Button then give them new labels.</ul>
            <ul class="instructions">4) Click “Evaluate” Button.</ul>
            <ul class="instructions">5) The Overall Transfer Function Result will be calculated.</ul>
            <ul class="instructions">6) To Draw another Graph, Click “return to draw” Button.</ul>
            <ul class="instructions">7) Click On “Reset” Button And Repeat The previous steps …</ul>
        </div>

    </div>


    <div class="sideBarAbout" id="sideBarAbout">

        <div class="inst">
            <p class="description">This application was made for educational purposes as a linear control system course project.</p><br><br>
            <p class="description">Made by: </p>
            <p class="names"> Ziad Hisham Ali Abdel-Hameed: <span class="gmail"> ziadhesham97@gmail.com</span></p>
            <p class="names"> Youssef Ahmed Sayed Gabriel: <span class="gmail"> Usseif97@gmail.com</span></p>
        </div>

    </div>

    <div class="allContent" id="allContent">

        <input type="button" id="moveToTop" class="moveToTop" value="return to draw"  href="#answer"/>

        <div class="sub1" id="sub1">

            <p class="mainPar"><span class="initial">S</span>ignal <span class="initial">F</span>low <span class="initial">G</span>raph</p>

            <div class="main">
                <script src="Node.js"></script>
                <script src="Edge.js"></script>
            </div>

            <div id="node-popUp">
                <span id="node-operation">node</span> <br>
                <table style="margin:auto;">
                    <tr>
                        <td>label</td><br><td><input id="node-label" value="y" autofocus/></td>
                    </tr>
                </table>
                <input type="button" value="save" id="node-saveButton" class="button"/>
                <input type="button" value="cancel" id="node-cancelButton" class="button"/>
            </div>

            <div id="edge-popUp">
                <span id="edge-operation">edge</span> <br>
                <table style="margin:auto;">
                    <tr>
                        <td>label</td><br><td><input id="edge-label" value="y" autofocus/></td>
                    </tr>
                </table>
                <input type="button" value="save" id="edge-saveButton" class="button"/>
                <input type="button" value="cancel" id="edge-cancelButton" class="button"/>
            </div>

            <br/>

            <div id="mynetwork"></div>

            <input type="button" id="evaluateBtn" class="button-evaluate" value="Evaluate"/>
            <input type="button" id="resetBtn" class="button-reset" value="Reset"/>

            <script type="text/javascript" src="visLogic.js"></script>

        </div>

        <h2 class="answer" id="answer">Result</h2>

        <div class="output" id="output"></div>

    </div>

</body>
</html>