Skip to content
GitLab
Commit ab2ded61 authored by Sven Schneider's avatar Sven Schneider
Browse files

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

parent 4d4e9bdd
master
No related merge requests found
Pipeline #5255 passed with stages
in 27 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 118 additions and 45 deletions
+118 -45
public/HFT.html
+ 30
- 16
View file @ ab2ded61
......@@ -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
+ 21
- 28
View file @ ab2ded61
......@@ -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
- 1
View file @ ab2ded61
......@@ -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 0 → 100644
+ 62
- 0
View file @ ab2ded61
/* 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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal