TopoEmbedding/index.html at main · DaVisLab/TopoEmbedding · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<header>
    <link rel="stylesheet" href="style/style.css">
    <script src="js/d3/d3.js"></script>
    <script src="js/threejs/three.js"></script>
    <script src="js/inputimage.js" type="module"></script>
    <script src="js/force.js" type="module"></script>
    <script src="js/persistence-image.js"></script>
    <script src="js/showMinkowski.js"></script>
    <script src="js/cycle.js" type="module"></script>
    <script src="js/updateEmbedding.js"></script>
    <link rel="stylesheet" href="js/introjs.css">
    <script src="js/intro.js"></script>
    <script src="js/onboarding.js"></script>
</header>

<body>

    <h3>TopoEmbedding</h3>
    <help>
        <a id="help" href="javascript:void(0);" onclick = "helpOnClick();" style="margin-right: 10px;">help?</a>
    </help>
    <table>
      <tr>
         <td>
            <div id = "selectEmbeddingDiv"> Select embedding
                   <select onchange="changeEmbedding(this.value)">
                      <option value="Isomap">Isomap</option>
                      <option value="MDS">MDS</option>
                      <option value="t-SNE">t-SNE</option>
                   </select>
            </div>
         </td>
         <td>
            Persistence images and Persistence cycles
         </td>
         <td>
            Pixel-wise differences
         </td>
      </tr>

      <tr>
         <td>
             <svg id="svg_force" > </svg>
         </td>
         <td valign="top">
            <table>
               <tr>
                  <td>Persistence Image</td>
                  <td>Persistence Cycles</td>
               </tr>
               <tr>
                  <td><svg id="svg_psImage"  > </svg></td>
                  <td><canvas id="webgl_surface" ></canvas></td>
               </tr>

               <tr>
                  <td>Persistence Image</td>
                  <td>Persistence Cycles</td>
               </tr>
               <tr>
                  <td><svg id="svg_psImage2"  > </svg></td>
                  <td><canvas id="webgl_surface2" ></canvas></td>
               </tr>
               <tr>
                  <td colspan="2">
                     <div class="slider">
                        <input  type="range" id = "filterCycles"></input>
                        Filter cycles based on weights
                      </div>
                  </td>
               </tr>
               <tr>
                <td><canvas id="webgl_surface3" ></canvas></td>
               </tr>
            </table>
         </td>
         <td valign="top">
            <table>
               <tr>
                  <td>
                     <div class="slidecontainer">
                        <input  type="range"  id="compareRange1"  onchange="updatePersistenceImages(this.value, document.getElementById('compareRange2').value)">Set minimum difference</input><br>
                        <input  type="range"  id="compareRange2"  onchange="updatePersistenceImages(document.getElementById('compareRange1').value, this.value)">Set maximum difference</input>
                     </div>
                  </td>
               </tr>
               <tr>
                  <td>
                     <svg id="compare"  > </svg>
                  </td>
               </tr>
            </table>

         </td>
      </tr>
    <table>
     <tr>
         <td><svg id="persistence_atlas"  > </svg></td>
    </tr>
    <script type="module">
            import { loadJsonFile } from "./js/force.js"
            loadJsonFile();
            createWindow();
            createPersistenceImage("#svg_psImage");
            createPersistenceImage("#svg_psImage2");
   </script>
    <script>

      var working_on_layer1 = true
      var folder_1, folder_2, id_1, id_2

      var sizeSvg = document.body.clientWidth/10

      var canv = document.getElementById( "webgl_surface" );
      canv.setAttribute("width", sizeSvg)
      canv.setAttribute("height", sizeSvg)

      var canv = document.getElementById( "webgl_surface2" );
      canv.setAttribute("width", sizeSvg)
      canv.setAttribute("height", sizeSvg)

      d3.select("body")
         .on("keydown", function(e) {
            if(e.keyCode == 93||e.keyCode == 17){
               working_on_layer1 = !working_on_layer1;
            }
         })
    </script>

</body>


</html>