diff --git a/public/HFT.html b/public/HFT.html
index 8e4729ed4fbc6f3566b6e31a01c22519d1d0772a..c3b8f1c994367020d5889c830602d5fa887358b4 100644
--- a/public/HFT.html
+++ b/public/HFT.html
@@ -35,6 +35,7 @@
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
+ <link rel="stylesheet" href="css/roundedButton.css" media="screen">
@@ -62,23 +63,36 @@
<h2 class="" onclick="open3DCMO()" style="cursor:pointer; color:rgb(155, 0, 0)">
<strong><i class="fas fa-copy"></i> Menu</strong>
</h2> -->
- <div class="backdrop mainbackdrop" id="DCMO" style="display:show">
+ <div class="backdrop mainbackdrop" id="DCMO" style="display:show">
<h3> Layer selection </h3>
- <strong>RGB PointCloud   </strong>
- <button class="myButtonGreen" type="button" onclick="TurnOnRGBPC()">On</button>
- <button class="myButtonRed" type="button" onclick="TurnOffRGBPC()">Off</button>
- <br>
- <br>
- <strong>Blue PointCloud   </strong>
- <button class="myButtonGreen" type="button" onclick="TurnOnLargePC()">On</button>
- <button class="myButtonRed" type="button" onclick="TurnOffLargePC()">Off</button>
- <br>
- <br>
- <strong>Buildings 3DTiles   </strong>
- <button class="myButtonGreen" type="button" onclick="TurnOnHFTBld()">On</button>
- <button class="myButtonRed" type="button" onclick="TurnOffHFTBld()">Off</button>
- <br>
- <br>
+ <table>
+ <tbody>
+ <tr>
+ <td style=" padding-bottom: 10px;"><strong>RGB PointCloud</strong> </td>
+ <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+ <input type="checkbox" onclick="toggleRGBPC()" checked>
+ <span class="slider round"></span>
+ </label>
+ </td>
+ </tr>
+ <tr>
+ <td style=" padding-bottom: 10px;"><strong>Blue PointCloud</strong> </td>
+ <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+ <input type="checkbox" onclick="toggleLargePC()" checked>
+ <span class="slider round"></span>
+ </label>
+ </td>
+ </tr>
+ <tr>
+ <td style=" padding-bottom: 10px;"><strong>Buildings </strong> </td>
+ <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+ <input type="checkbox" onclick="toggleBuildingTiles()" checked>
+ <span class="slider round"></span>
+ </label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
diff --git a/public/HFT.js b/public/HFT.js
index a0e65770251313e249907d6258a4ff18ae1df350..3f22900eb49a666846e6495e8388012aa75a354d 100644
--- a/public/HFT.js
+++ b/public/HFT.js
@@ -18,7 +18,7 @@ var viewer = new Cesium.Viewer("cesiumContainer", {
// set home button extend
-var extent = Cesium.Rectangle.fromDegrees( 9.162794728779428,48.78605872069245, 9.181827683763427, 48.77616123564855);
+var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
@@ -124,16 +124,16 @@ tileset.style = new Cesium.Cesium3DTileStyle({
const PCOFFSET = 0;
-var HFTBuildingsPC = viewer.scene.primitives.add(
+var hftLargePC = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(655879),
})
);
-HFTBuildingsPC.readyPromise.then(function (HFTBuildingsPC) {
+hftLargePC.readyPromise.then(function (hftLargePC) {
var height = PCOFFSET;
var cartographic = Cesium.Cartographic.fromCartesian(
- HFTBuildingsPC.boundingSphere.center
+ hftLargePC.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
@@ -151,12 +151,12 @@ HFTBuildingsPC.readyPromise.then(function (HFTBuildingsPC) {
new Cesium.Cartesian3()
);
// now shift / translate the tileset by the translation vector defined above
- HFTBuildingsPC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+ hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
- return zoomAll(HFTBuildingsPC); // zoom or rather go to the translated tileset
+ return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
});
-HFTBuildingsPC.style = new Cesium.Cesium3DTileStyle({
+hftLargePC.style = new Cesium.Cesium3DTileStyle({
color: "color('blue',0.3)",
// color: "color('red')" ,
pointSize: 3
@@ -167,13 +167,13 @@ HFTBuildingsPC.style = new Cesium.Cesium3DTileStyle({
///////////////////////////// innenhof PC
-var HFTInnehof = viewer.scene.primitives.add(
+var hftInnehofRGB_PC = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(656854),
})
);
-HFTInnehof.style = new Cesium.Cesium3DTileStyle({
+hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({
// color: "color('blue',0.3)",
// color: "color('red')" ,
pointSize: 3
@@ -183,28 +183,21 @@ HFTInnehof.style = new Cesium.Cesium3DTileStyle({
////////////////////////// Control Pointclouds and Tileset with switches
-var TurnOnRGBPC = function () {
- HFTInnehof.show = true;
+var toggleLargePC = function () {
+ if (hftLargePC.show === true) {
+ hftLargePC.show = false
+ }
+ else {
+ hftLargePC.show = true
+ }
}
-var TurnOffRGBPC = function () {
- HFTInnehof.show = false;
+// or use tenrary operator as for the other two
+var toggleRGBPC = function () {
+ hftInnehofRGB_PC.show = hftInnehofRGB_PC.show ? false : true;
}
-
-
-var TurnOnLargePC = function () {
- HFTBuildingsPC.show = true;
-}
-var TurnOffLargePC = function () {
- HFTBuildingsPC.show = false;
-}
-
-
-var TurnOnHFTBld = function () {
- tileset.show = true;
-}
-var TurnOffHFTBld = function () {
- tileset.show = false;
+var toggleBuildingTiles = function () {
+ tileset.show = tileset.show ? false : true;
}
diff --git a/public/css/index.css b/public/css/index.css
index 09074db619d8a3a930094e9f0c0fde63b3d04ceb..717516fcaedd568f9c7a4c949759358d5a6b6425 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -5,7 +5,7 @@
border: 1px solid #444;
padding: 10px 10px;
color: #fff;
- width: 250px;
+ width: 170px;
/* font: 1em "Fira Sans", sans-serif; */
}
@@ -31,8 +31,12 @@ h2 {
h3 {
/* font: 1em 'Lato', sans-serif;
font-style: bold; */
+ font-family: 'Lato', sans-serif;
color: rgb(179, 245, 209);
}
+strong{
+ font-family: 'Lato', sans-serif;
+}
#heightSliderLabel, #heightValue {
vertical-align: top;
diff --git a/public/css/roundedButton.css b/public/css/roundedButton.css
new file mode 100644
index 0000000000000000000000000000000000000000..477f1c1c4e41eacd740daea9361499d5a5dc8011
--- /dev/null
+++ b/public/css/roundedButton.css
@@ -0,0 +1,62 @@
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 18px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 10px;
+ width: 10px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 30px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
\ No newline at end of file