From 78844bc80f201173d80e30dca702ff782aae1314 Mon Sep 17 00:00:00 2001 From: Sven Schneider <sven.schneider@hft-stuttgart.de> Date: Thu, 16 Dec 2021 12:46:03 +0100 Subject: [PATCH] added fellbach data sets and adjusted menu --- public/HFT.js | 52 +++++- public/Testgebiete.html | 159 +++++++++++++++++ public/Testgebiete.js | 378 ++++++++++++++++++++++++++++++++++++++++ public/css/index.css | 32 +++- 4 files changed, 617 insertions(+), 4 deletions(-) create mode 100644 public/Testgebiete.html create mode 100644 public/Testgebiete.js diff --git a/public/HFT.js b/public/HFT.js index 01ed0b5..93331ca 100644 --- a/public/HFT.js +++ b/public/HFT.js @@ -18,7 +18,9 @@ var viewer = new Cesium.Viewer("cesiumContainer", { // set home button extend -var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855); +// this is the HFT +// var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855); +var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895); Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; @@ -88,6 +90,10 @@ var zoomAll = function (tileset) { } load3DTiles() + + + + //////// important value. to find the correct value trail and error is needed for a perfect fit const BUILDIG_TILESET_HEIGHT_OFFSET = 54; @@ -114,7 +120,7 @@ var zoomAll = function (tileset) { // now shift / translate the tileset by the translation vector defined above tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); - return zoomAll(tileset); // zoom or rather go to the translated tileset + // return zoomAll(tileset); // zoom or rather go to the translated tileset }); tileset.show = false; @@ -156,7 +162,7 @@ hftLargePC.readyPromise.then(function (hftLargePC) { // now shift / translate the tileset by the translation vector defined above hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation); - return zoomAll(hftLargePC); // zoom or rather go to the translated tileset + // return zoomAll(hftLargePC); // zoom or rather go to the translated tileset }); hftLargePC.style = new Cesium.Cesium3DTileStyle({ @@ -229,4 +235,44 @@ var togglePrettyBuildingTiles = function () { } +//////////////////////////////////////////////////// + // Fellbach building tiles + fellbachBuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: "buildingTiles/fellbachTiles/tileset.json", + show: true, + })); + + fellbachBuildings.readyPromise.then(function (fellbachBuildings) { + var height = 51; + var cartographic = Cesium.Cartographic.fromCartesian( + fellbachBuildings.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + // now shift / translate the tileset by the translation vector defined above + fellbachBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + return zoomAll(fellbachBuildings); + + + }); + // var fellbachBuildings = viewer.scene.primitives.add( + // new Cesium.Cesium3DTileset({ + // // url: Cesium.IonResource.fromAssetId(679236), // in wgs84 srs + // url: Cesium.IonResource.fromAssetId(679239), // in erts89Z32 srs + // }) + // ); + diff --git a/public/Testgebiete.html b/public/Testgebiete.html new file mode 100644 index 0000000..9159dcc --- /dev/null +++ b/public/Testgebiete.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Pointcloud Demo at HFT</title> + + <link + href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" + rel="stylesheet" + /> + + + <script + src="https://code.jquery.com/jquery-2.2.4.min.js" + integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" + crossorigin="anonymous" + ></script> + <script + src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" + integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" + crossorigin="anonymous" + ></script> + <script + src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" + integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" + crossorigin="anonymous" + ></script> + <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script> + <link + rel="stylesheet" + href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" + integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" + crossorigin="anonymous" + /> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> + + <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"> + + + + + + +</head> + + <body> + + + <style> + @import url(templates/bucket.css); + </style> + + + + <div id="cesiumContainer" class=""> </div> + <script src="Testgebiete.js"></script> + + <div class="backdrop mainbackdrop" id="DCMO" style="display:show"> + + + <button style="margin: 5px 0px 5px 0px;" type="button" class="btn btn-danger btnMod" onclick="gotoHFT()">HFT</button> + + <div class="backdrop mainbackdrop"> + <h6 style="color: rgb(8, 228, 118);"> Pointclouds </h6> + <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> + </tbody> + </table> + </div> + + <div class="backdrop mainbackdrop"> + <h6 style="color: rgb(8, 228, 118);"> CityGML Buildings </h6> + <table> + <tbody> + <tr> + <td style=" padding-bottom: 10px;"><strong>LOD1 Buildings </strong> </td> + <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch"> + <input id="simpleBuildingsCheckbox" type="checkbox" onclick="toggleBuildingTiles()" unchecked> + <span class="slider round"></span> + </label> + </td> + </tr> + </tr> + <tr> + <td style=" padding-bottom: 10px;"><strong>LOD3 Buildings </strong> </td> + <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch"> + <input id="prettyBuildingsCheckbox" type="checkbox" onclick="togglePrettyBuildingTiles()" checked> + <span class="slider round"></span> + </label> + </td> + </tr> + </tbody> + </table> + + </div> + + <button style="margin: 20px 0px 5px 0px;" type="button" class="btn btn-warning btnMod" onclick="gotoFellbach()">Fellbach</button> + + + <div class="backdrop mainbackdrop"> + <h6 style="color: rgb(8, 228, 118);">CityGML Buildings </h6> + <table> + <tbody> + <tr> + <td style=" padding-bottom: 10px;"><strong>LOD2 Buildings </strong> </td> + <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch"> + <input id="FellbachBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTiles()" unchecked> + <span class="slider round"></span> + </label> + </td> + </tr> + <tr> + <td style=" padding-bottom: 10px;"><strong>LOD2 Textured </strong> </td> + <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch"> + <input id="FellbachTexturedBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTexturedTiles()" checked> + <span class="slider round"></span> + </label> + </td> + </tr> + </tbody> + </table> + + </div> + + + +</div> + + + + <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> --> + <!-- JavaScript Bundle with Popper --> + + + <!-- CSS only --> + + </body> +</html> diff --git a/public/Testgebiete.js b/public/Testgebiete.js new file mode 100644 index 0000000..232b364 --- /dev/null +++ b/public/Testgebiete.js @@ -0,0 +1,378 @@ + +// specifiy credentials and assets from Cesium ION account +Cesium.Ion.defaultAccessToken = + "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o"; + +// setting up Cesium Viewer +var viewer = new Cesium.Viewer("cesiumContainer", { + imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), //3 bing maps with labels // use Sentinel2 imagery as default assetID:3954 + ///////////////////////////////////////// + // Note the next 3 lines specify that the Cesium Terrain should be used. ION account is needed + // For a 'flat' Earth the z-offsets below for each of the tilesets needs to be adjusted + // comment the next 3 lines to remove the Cesium terrain (Resulution approx. 30m) + ///////////////////////////////////////// + terrainProvider: new Cesium.CesiumTerrainProvider({ + url: Cesium.IonResource.fromAssetId(1), + }), +}); + + +// set home button extend +// this is the HFT +// var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855); +var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895); +Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; +Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; + +viewer.scene.globe.enableLighting = true; // set lighting to true + +// load 3d Tile set of HFT from Cesium ION. +var tileset = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: Cesium.IonResource.fromAssetId(656401), + }) +); + +// define a function to zoom to the tileset (invoke later) +var zoomAll = function (tileset) { + return new Promise(function (resolve, reject) { + if (!tileset) { + reject("Tileset is undifined"); + } + viewer.camera.viewBoundingSphere( + tileset.boundingSphere, + new Cesium.HeadingPitchRange(0, -0.5, 400) + ); + viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); + resolve(); + }); +}; + + + + + + var load3DTiles = function () { + tilesetLOD1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: "https://steinbeis-3dps.eu/3DGeoVolumes/collections/Stuttgart/HFTBuildings_3DModel_noTexture/3dtiles/tileset.json", //Cesium.IonResource.fromAssetId(656401), + })); + + + + Cesium.when(tilesetLOD1.readyPromise).then(function (tilesetLOD1) { + viewer.flyTo(tilesetLOD1) + tilesetLOD1.style = new Cesium.Cesium3DTileStyle({ + color: { + conditions: [ + ["${featureType} === 'Window'", "color('blue')"], + ["${featureType} === 'WallSurface'", "color('gray')"], + ["${featureType} === 'RoofSurface'", "color('red')"], + ["${featureType} === 'OuterFloorSurface'", "color('white')"], + ["true", "color('white')"], + ], + }, + show: true + }); + // tilesetLOD1.style = new Cesium.Cesium3DTileStyle({ + // color: "color('BLACK', 0.3)", + // show: true + // }); + + var heightOffset = 50.0; + var boundingSphere = tilesetLOD1.boundingSphere; + var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + tilesetLOD1.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + }) + + } + load3DTiles() + + + + + + //////// important value. to find the correct value trail and error is needed for a perfect fit + const BUILDIG_TILESET_HEIGHT_OFFSET = 54; + + tileset.readyPromise.then(function (tileset) { + var height = BUILDIG_TILESET_HEIGHT_OFFSET; + var cartographic = Cesium.Cartographic.fromCartesian( + tileset.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + // now shift / translate the tileset by the translation vector defined above + tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + + // return zoomAll(tileset); // zoom or rather go to the translated tileset + }); + + tileset.show = false; + + +//////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// HFT PointCloud Tileset. +//////////////////////////////////////////////////////////////////////////////////// + +const PCOFFSET = 0; + +var hftLargePC = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: Cesium.IonResource.fromAssetId(655879), + }) +); + +hftLargePC.readyPromise.then(function (hftLargePC) { + var height = PCOFFSET; + var cartographic = Cesium.Cartographic.fromCartesian( + hftLargePC.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + // now shift / translate the tileset by the translation vector defined above + hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + + // return zoomAll(hftLargePC); // zoom or rather go to the translated tileset +}); + +hftLargePC.style = new Cesium.Cesium3DTileStyle({ + color: "color('blue',0.3)", + // color: "color('red')" , + pointSize: 3 +}); + + + + +///////////////////////////// innenhof PC + +var hftInnehofRGB_PC = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: Cesium.IonResource.fromAssetId(656854), + }) +); + +hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({ + // color: "color('blue',0.3)", + // color: "color('red')" , + pointSize: 3 +}); + + + +////////////////////////// Control Pointclouds and Tileset with switches + +var toggleLargePC = function () { + if (hftLargePC.show === true) { + hftLargePC.show = false + } + else { + hftLargePC.show = true + } +} +// or use tenrary operator as for the other two +var toggleRGBPC = function () { + hftInnehofRGB_PC.show = hftInnehofRGB_PC.show ? false : true; +} + +var toggleBuildingTiles = function () { + if (tileset.show === true) { + tileset.show = false + } + else { + tileset.show = true + if (tilesetLOD1.show === true){ + $('#prettyBuildingsCheckbox').prop('checked', false); + tilesetLOD1.show = false + } + } +} + +var toggleFellbachTiles = function () { + if (fellbachBuildings.show === true) { + fellbachBuildings.show = false + } + else { + fellbachBuildings.show = true; + if (fellbachBuildingsTextured.show === true){ + $('#FellbachTexturedBuildingsCheckbox').prop('checked', false); + fellbachBuildingsTextured.show = false; + } + } +} + + +var toggleFellbachTexturedTiles = function () { + if (fellbachBuildingsTextured.show === true) { + fellbachBuildingsTextured.show = false + } + else { + fellbachBuildingsTextured.show = true; + if (fellbachBuildings.show === true){ + $('#FellbachBuildingsCheckbox').prop('checked', false); + fellbachBuildings.show = false; + } + } +} + +var togglePrettyBuildingTiles = function () { + // tilesetLOD1.show = tilesetLOD1.show ? false : true; + if (tilesetLOD1.show === true) { + tilesetLOD1.show = false + } + else { + tilesetLOD1.show = true + if (tileset.show === true){ + $('#simpleBuildingsCheckbox').prop('checked', false); + tileset.show = false + } + } + // $('#prettyBuildingsCheckbox').prop('checked', true); // Checks it +//$('#myCheckbox').prop('checked', false); // Unchecks it +} + + + + +//////////////////////////////////////////////////// + // Fellbach building tiles + fellbachBuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2/3dtiles/", + // url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500", + show: true, + })); + + fellbachBuildings.readyPromise.then(function (fellbachBuildings) { + var height = 51; + var cartographic = Cesium.Cartographic.fromCartesian( + fellbachBuildings.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + // now shift / translate the tileset by the translation vector defined above + fellbachBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + return zoomAll(fellbachBuildings); + + + }); + + + fellbachBuildings.show = false; + //////////////////////////////////////////////////// + // Fellbach building tiles + fellbachBuildingsTextured = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500", + show: true, + })); + + fellbachBuildingsTextured.readyPromise.then(function (fellbachBuildingsTextured) { + var height = 51; + var cartographic = Cesium.Cartographic.fromCartesian( + fellbachBuildingsTextured.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + // now shift / translate the tileset by the translation vector defined above + fellbachBuildingsTextured.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + return zoomAll(fellbachBuildingsTextured); + + + }); + + + + + var gotoFellbach = function () { + + // var extent = Cesium.Rectangle.fromDegrees(9.26530042893943,48.818436808301705, 9.275552393133086, 48.81387520377022); + // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; + // Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; + + + viewer.camera.flyTo({ + destination : Cesium.Cartesian3.fromDegrees(9.269968312784966, 48.815644351028965, 600.0), + orientation : { + heading : Cesium.Math.toRadians(-30.0), + pitch : Cesium.Math.toRadians(-45), + roll : 0 + } + }); + new Cesium.HeadingPitchRange(0, -0.5, 400) + + // viewer.camera.viewBoundingSphere(Cesium.Cartesian3.fromDegrees(9.26530042893943,48.818436808301705, 1500.0), ); + // viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); + + // viewer.canera.setView({ + // destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0) + // }); + // zoomAll(fellbachBuildings); + // viewer.scene.camera.lookAt(fellbachBuildings.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0,0,200)); + } + + var gotoHFT = function () { + + var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895); + Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; + Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; + + viewer.flyTo(tilesetLOD1); + + + + } \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css index 36d2adf..cccb54c 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: 170px; + width: 210px; /* font: 1em "Fira Sans", sans-serif; */ } @@ -34,10 +34,40 @@ h3 { font-family: 'Lato', sans-serif; color: rgb(179, 245, 209); } + +.h1c { + /* font-family: 'Lato', sans-serif; */ + font-family: 0.75em 'Lato', sans-serif; + font-style: bold; + color: red; + background-color: rgba(42, 42, 42, 0); + text-shadow: 3px 3px #000000 +} +.h2c { + font-family: 0.75em 'Lato', sans-serif; + font-weight: bold; + color: rgb(8, 228, 118); +} +.h3c { + /* font: 1em 'Lato', sans-serif; + font-style: bold; */ + font-family: 'Lato', sans-serif; + color: rgb(179, 245, 209); +} + strong{ font-family: 'Lato', sans-serif; } + +.btnMod{ + width: 100px; + height: 25px; + font-size: 1; + font-weight: bold; + padding: 0 0; +} + #heightSliderLabel, #heightValue { vertical-align: top; } -- GitLab