Cesium Sensor

CesiumJS
1

I am trying to run cesium sensor in cesium-1.17.
I get error “Length” attribute is not defined.

How can it be fixed

2

Hello did you check https://github.com/kaktus40/cesium-sensors

3

Great. It works. Thanks

4

How can we edit a sensor. I created a rectangular sensor and now want to change its radius and x y angles.
I created sensor using this example https://github.com/AnalyticalGraphicsInc/cesium-sensors/tree/master/Examples/[api.html](https://github.com/AnalyticalGraphicsInc/cesium-sensors/blob/master/Examples/api.html)

5

How can we edit a sensor. I created a rectangular sensor and now want to change its radius and x y angles.

I created sensor using this example https://github.com/AnalyticalGraphicsInc/cesium-sensors/tree/master/Examples/api.html

Hello my sample :

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Cesium Sensors simple</title>

  <link rel="stylesheet" href="//cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" />
  <script src="//cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js"></script>
  <script src="CesiumSensors.js"></script>

  <style>
    #cesiumContainer {
      position: absolute;
      top: 0;
      left: 0;
      height: 80%;
      width: 100%;
      margin: 0;
      overflow: hidden;
      padding: 0;
    }

    html {
      height: 100%;
    }

    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      height: 100%;
      background-color: black;
      color:white;
      font-family: sans-serif;
    }

    #toolbar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 20%;
      width: 100%;
      margin: 0;
      overflow:auto;
      padding: 0;
    }
    
    #toolbar>div{
      margin-left: 30px;
    }

    table {
      width: 80%;
    }
    tbody{
    }
    th, td {
      padding: 7px;
      text-align: left;
    }

    >img {
      max-width: 30px;
      max-height: 30px;
    }

  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="toolbar">
    <div>
      <span>coordonnées de la pointe </span>
      <label for="latOrigine">latitude (en °):</label>
      <input type="number" value="30" min="-90" max="90" step="0.1" id="latOrigine" name="latOrigine"/>
      <label for="longOrigine">longitude (en °):</label>
      <input type="number" value="-90" min="-180" max="180" step="0.1" id="longOrigine" name="longOrigine"/>
      <label for="hauteurOrigine">hauteur (en m):</label>
      <input type="number" value="3000000" min="0" max="10000000" step="100" id="hauteurOrigine" name="hauteurOrigine"/>
      <label for="couleurLat" style="margin-left: 30px;">couleur latérale:</label>
      <input type="color" value="#FFFFFF" id="couleurLat" name="couleurLat"/>
      <label for="couleurInter" style="margin-left: 10px;">couleur intersection:</label>
      <input type="color" value="#FFFFFF" id="couleurInter" name="couleurInter"/>
      <label for="rayon" style="margin-left: 10px;">rayon (en m):</label>
      <input type="number" value="10000000" min="1" max="100000000" step="10" id="rayon" name="rayon"/>
      <label for="epaisseur" style="margin-left: 10px;">epaisseur intersection: </label>
      <input type="number" value="1" min="1" max="15" step="1" id="epaisseur" name="epaisseur"/>
    </div>
    <div>
      <span>orientation du senseur (référentiel local: 1er axe=>vers le nord, 2ème axe vers l'est, 3ème axe vers le centre de la Terre) </span>
      <label for="heading">heading (en °):</label>
      <input type="number" value="0" min="0" max="359.9" step="0.1" id="heading" name="heading"/>
      <label for="pitch">pitch (en °):</label>
      <input type="number" value="0" min="-90" max="90" step="0.1" id="pitch" name="pitch"/>
      <label for="roll">roll (en °):</label>
      <input type="number" value="0" min="-90" max="90" step="0.1" id="roll" name="roll"/>
    </div>
    <div>
      <table id="table">
        <thead>
          <tr>
            <td>azimut en (°)</td>
            <td>elevation en (°)</td>
            <td>action</td>
          </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
            <td><input type="number" value="0" min="0" max="359.9" step="1" id="azimut"/> </td>
            <td><input type="number" value="0" min="-90" max="90" step="1" id="elevation"/> </td>
            <td><image src="ajouter.png"/></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <script>
    const toRad=Math.PI/180;

    var scratchHPRQuaternion = new Cesium.Quaternion();
    var scratchScale = new Cesium.Cartesian3(1.0, 1.0, 1.0);
    var scratchHPRMatrix4 = new Cesium.Matrix4();

    headingPitchRollToFixedFrame = function(origin, heading, pitch, roll, ellipsoid, result) {
      var hprQuaternion = Cesium.Quaternion.fromHeadingPitchRoll(heading, pitch, roll, scratchHPRQuaternion);
      var hprMatrix = Cesium.Matrix4.fromTranslationQuaternionRotationScale(Cesium.Cartesian3.ZERO, hprQuaternion, scratchScale, scratchHPRMatrix4);
      result = Cesium.Transforms.northEastDownToFixedFrame(origin, ellipsoid, result);
      return Cesium.Matrix4.multiply(result, hprMatrix, result);
    };

    var viewer = new Cesium.Viewer('cesiumContainer', {
     sceneModePicker : false,
     // globe: false
   });
    var customSensor = new CesiumSensors.CustomSensorVolume();
viewer.scene.primitives.add(customSensor);
    var listDirections=;
    for (var i = 0; i < 3; ++i) {
      var clock = Cesium.Math.toRadians(120.0 * i);
      var cone = Cesium.Math.toRadians(25.0);
      listDirections.push(new Cesium.Spherical(clock, cone));
    }

    function getValueNumber(id){
      var element=document.getElementById(id);
      var value= parseFloat(element.value);
      var min =parseFloat(element.min);
      var max =parseFloat(element.max);
      if(isNaN(value)){
        value=0;
      }
      if(value<min){
        value=min;
      }
      if(value>max){
        value=max;
      }
      return value;
    }

    function getValue(id){
      return document.getElementById(id).value;
    }

    function updateViewer(){
      // viewer.scene.primitives.removeAll();
      
      var origineLat=getValueNumber("latOrigine")*toRad;
      var origineLong=getValueNumber("longOrigine")*toRad;
      var origineHauteur=getValueNumber("hauteurOrigine");
      var origine=Cesium.Cartesian3.fromDegrees(origineLong, origineLat, origineHauteur);

      var heading=getValueNumber("heading")*toRad;
      var pitch=getValueNumber("pitch")*toRad;
      var roll=getValueNumber("roll")*toRad;

      var modelMatrix=headingPitchRollToFixedFrame(origine,heading,pitch,roll);
      customSensor.modelMatrix = modelMatrix;
      customSensor.radius=getValueNumber("rayon");
      customSensor.intersectionWidth=getValueNumber("epaisseur");

      customSensor.lateralSurfaceMaterial= Cesium.Material.fromType('Color', {
        color:Cesium.Color.fromCssColorString(getValue('couleurLat'))
      });;
      customSensor.intersectionColor=Cesium.Color.fromCssColorString(getValue('couleurInter'));
      customSensor.directions = listDirections;
      
    }

    function updateTable(){
      var tBody=document.querySelector('#table>tbody');
      var content='';
      listDirections.forEach(function(spherical,index){
        var elevation=(spherical.cone/toRad).toFixed(1);
        var azimut=(spherical.clock/toRad).toFixed(1);
        content+='<tr><td>'+azimut+'</td><td>'+elevation+'</td><td><image src="supprimer.png" data-id="'+index+'"/></td></tr>';
      });
      tBody.innerHTML=content;
    }

    function addSpherical(){
      var clock=getValueNumber("azimut")*toRad;
      var cone=getValueNumber("elevation")*toRad;
      listDirections.push(new Cesium.Spherical(clock, cone));
      updateTable();
      updateViewer();
    }

    function removeSpherical(index){
      listDirections.splice(index,1);
      updateTable();
      updateViewer();
    }

    document.getElementById('table').addEventListener('click',function(evt){
      var element = evt.target;
      if (element.tagName.toLowerCase() === 'img') {
        var identification = parseInt(element.getAttribute("data-id"), 10);
        if(isNaN(identification)){
          addSpherical();
        }
        else{
          removeSpherical(identification);
        }
      }
    });

    var listInput=document.querySelectorAll("div>input");
    for(var i=0;i<listInput.length;i++){
      listInput[i].addEventListener('input',function(){
        updateViewer();
      });
    }
    updateTable();
    updateViewer();
  </script>
</body>
</html>

6

Thanks it works.
Now I want sensor not to bypass if I place any gltf or shape object in place. How can this be achieved!

7

https://github.com/kaktus40/cesium-sensors
dist directory can not find…

also,it has no cesium.js file,what should it makes it work? thanks.
在 2016年1月28日星期四 UTC+8下午1:53:32，farouk abdou写道：

8

how can i show the intersection of the sensor with gltf models or objects and stop the sensor passing through the object,
i used showIntersection = true, but it is not working.

9

Hi sankin,

The cesium-senor plugin has been deprecated for a while, so we won’t be providing support or fixing bugs. Sorry!

Thanks,

Gabby