RuleVis/index.html at master · CreativeCodingLab/RuleVis · 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
117
118
119
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>RuleVis</title>
      <link rel="stylesheet" href="index.css">

      <script type="text/javascript" src="d3.js"></script>
      <script type="text/javascript" src="earley-oop.js"></script>
      <script type="text/javascript" src="cola.min.js"></script>
      <script type="text/javascript" src="d3-save-svg.min.js"></script>
      <script type="text/javascript" src="circular-json.js"></script>
    </head>

    <body>
      <!-- <div id="header">
      </div> -->
      <script type="text/javascript" src="KappaRule.js"></script>
      <!--<script type="text/javascript" src="interface.js"></script>-->

      <div id="main">
        <div id="sidebar" class="column">
          <div id="header"><h1>RuleVis</h1></div>
          <div id="sidebarMenu">
            <button id="gui" class="menuOption active">GUI Editor</button>
            <button id="inputText" class="menuOption">Text Input</button>
            <button id="export" class="menuOption">Export</button>
          </div>

          <div id="inputDiv">
            <textarea id="inputBox" rows="30" cols="90" name="expression" placeholder="Begin typing an expression to visualize it."></textarea>
          </div>

          <div id="exportDiv">
            <button id="download" onclick="downloadSVG()">Export SVG</button>
            <button id="downloadJSON" onclick="downloadJSON()">Download JSON</button>
          </div>


          <div id="guiDiv">

            <!--Div ids are named for that functionality
                Append "Button" or "Input" to the div id to access the button and input associated w/ that fuctionality, respectively.-->
            <div class="gui-button-div gui-button-div-active" id="noEdit">
              <button id="noEditButton" class="gui-button">
                  <img class="icon" src="./icons/move.svg">
                  Move
              </button>
            </div>
            <div class="gui-button-div" id="addAgent">
              <button id="addAgentButton" class="gui-button">
                <img class="icon" src="./icons/agent.svg">
                Add Agent
              </button>
              <input class="gui-input" type=text id="addAgentInput" placeholder="Agent A">
            </div>

            <div class="gui-button-div" id="addSite">
              <button id="addSiteButton" class="gui-button">
                  <img class="icon" src="./icons/site.svg">
                  Add Site
              </button>
              <input class="gui-input" type=text id="addSiteInput" placeholder="Site X">
            </div>

            <div class="gui-button-div" id="addLink">
              <button id="addLinkButton" class="gui-button">
                  <img class="icon" src="./icons/link.svg">
                  Add Link</button>
            </div>

            <!-- <div class="gui-button-div" id="editAgent">
              <button id="editAgentButton" class="gui-button">Edit Agent</button>
              <input class="gui-input" type=text id="editAgentInput">
            </div>

            <div class="gui-button-div" id="editSite">
              <button id="editSiteButton" class="gui-button">Edit Site</button>
              <input class="gui-input" type=text id="editSiteInput">
            </div>

            <div class="gui-button-div" id="editState">
              <button id="editStateButton" class="gui-button">Edit Internal State</button>
              <input class="gui-input" type=text id="editStateInput">
            </div> -->

            <div class="gui-button-div" id="deleteItem">
              <button id="deleteItemButton" class="gui-button">
                  <img class="icon" src="./icons/delete.svg">
                  Delete
                </button>
            </div>
            <div class="gui-button-div" id="history">
                <button id="historyButton" class="gui-button">
                    <img class="icon" src="./icons/history.svg">
                    History
                  </button>
              </div>

          </div>
        </div>

        <div id="svgBG">
          <div id="svgDiv" class="column"></div>
        </div>
      </div>

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


      <a id="downloadAnchorElem" style="display:none"></a>

      <form id="svgform" method="post" action="download.pl">
          <input type="hidden" id="output_format" name="output_format" value="">
          <input type="hidden" id="data" name="data" value="">
      </form>

    </body>
</html>