power_plant_visualization/index.html at main · IMMM-SFA/power_plant_visualization · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>CesiumJS Geospatial Visualization</title>
  <script src="https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <div id="appContainer">
    <div id="cesiumContainer"></div>

    <div id="uiControls">

      <h2 id="mainLegendTitle" style="text-align: center;">
        <img src="./data/markers/im3.png" alt="Logo" style="vertical-align: middle; width: 24px; height: 24px; margin-right: 8px;">
        IM3 Scene Builder
      </h2>


      <!-- Camera Controls Section -->
      <h4 id="controlsTitle" style="cursor: pointer;">Camera Controls ▾</h4>

      <div id="cameraControlsContent">

          <label>Pitch:</label>
          <input type="range" id="pitchSlider" min="-90" max="0" value="-30" step="1">
          <span id="pitchValue">-30</span>°<br>

          <label>Heading:</label>
          <input type="range" id="headingSlider" min="0" max="360" value="0" step="1">
          <span id="headingValue">0</span>°<br>

          <label>Height:</label>
          <span id="heightValue">--</span> m<br>

          <label>Current Latitude:</label>
          <span id="centerLat">--</span>°<br>

          <label>Current Longitude:</label>
          <span id="centerLon">--</span>°<br>
      </div>

      <!-- A little spacing between sections -->
      <div style="margin-top: 20px;"></div>

      <!-- Sequence Design Section -->
      <h4 id="sequenceTitle">Sequence Design</h4>
      <button id="sequenceButton">Start Sequence</button>

      <!-- A little spacing between sections -->
      <!-- <div style="margin-top: 20px;"></div> -->

      <h4 id="recordingTitle">Recording</h4>

      <label style="display: flex; align-items: center;">
        <input type="checkbox" id="recordMapCheckbox" style="margin-right: 12px;">
        Record Map Sequence
      </label>
    </div>

    <div id="legendDiv">

      <div id="legendHeader" style="text-align: center;">

        <img id="legendLogo" src="./data/markers/im3.png"
             alt="IM3 Scene Builder"
             style="width: 54px; height: 40px; vertical-align: middle;">

        <h4 id="legendHeaderTitle" style="margin: 8px 0 0 0; color: white; font-size: 20px; text-align: center;">
          CERF Siting Demonstration
        </h4>
      </div>

      <!-- Legend title container-->
      <div id="legendTitleContainer" style="text-align: center;">
        <h4 id="legendTitle" style="margin: 8px 0 0 0; color: white; font-size: 18px;"></h4>
      </div>
      <div id="primaryLegendItemsContainer" style="margin-top: 8px;"></div>

      <!-- Primary Legend items will be appended here by your JavaScript -->

      <!-- Alternative Legend Title Container -->
      <div id="alternativeLegendTitleContainer" style="text-align: center; margin-top: 20px;">
        <h4 id="alternativeLegendTitle" style="margin: 8px 0 0 0; color: white; font-size: 18px;"></h4>
      </div>

      <div id="alternativeLegendItemsContainer" style="margin-top: 8px;"></div>

      <!-- Second Alternative Legend Title Container -->
      <div id="bottomLegendTitleContainer" style="text-align: center; margin-top: 20px;">
        <h4 id="bottomLegendTitle" style="margin: 8px 0 0 0; color: white; font-size: 18px;"></h4>
      </div>

      <div id="bottomLegendItemsContainer" style="margin-top: 8px;"></div>

    </div>

    <script type="module" src="app.js"></script>

</body>
</html>