new button design, now its a slider and more styling also for EssenPC done

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 &emsp; </strong>
-      <button class="myButtonGreen" type="button" onclick="TurnOnRGBPC()">On</button>
-      <button class="myButtonRed" type="button" onclick="TurnOffRGBPC()">Off</button>
-      <br>
-      <br>         
-      <strong>Blue PointCloud &emsp; </strong>
-      <button class="myButtonGreen" type="button" onclick="TurnOnLargePC()">On</button>
-      <button class="myButtonRed" type="button" onclick="TurnOffLargePC()">Off</button>
-      <br>
-      <br>         
-      <strong>Buildings 3DTiles  &nbsp; &emsp; </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>
             
     

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;
 }
 
 

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;

public/css/roundedButton.css

+/* 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