Adding and Updating labels on screen

Question

The problem that I have seems pretty easy and obvious, but I couldn't find a way to do it with Cesium. I want to have labels, or info box to show the progress of the problem, so labels are adding to the screen in time (I can have all labels at the beginning of the program and change the color of them by time too).

1. I don't know how to create label such that its location only depends on the screen or page (for example top of the page) and not on the position of an object, such as world or cesium widget. (a kind of position with direct visual representation)
2. To update labels, can I define two intervals with different texts?
3. Can I make my labels as buttons which are appearing sequentially and then for example will change the current time of the program?

Thanks,

Answer 1

If you want labels fixed in screen-space, the best way is to simply overlay HTML on top of the Cesium widget. You can have a translucent background, and clickable HTML buttons. You can use viewer.clock.onTick to update the labels based on the current time. Here's an example, click "Run code snippet" at the bottom of this.

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false
});
viewer.scene.globe.enableLighting = true;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

var hourPlusButton = document.getElementById('hourPlus');
var hourMinusButton = document.getElementById('hourMinus');
var timeLabel = document.getElementById('timeLabel');

// The clock tick listener gets called every animation frame.
// Keep it fast and try not to allocate any memory if possible.
viewer.clock.onTick.addEventListener(function(clock) {
    var elapsed = Cesium.JulianDate.secondsDifference(
        clock.currentTime, clock.startTime);
    var hours = Math.floor(elapsed / 3600);
    elapsed -= (hours * 3600);
    var minutes = Math.floor(elapsed / 60);
    elapsed -= (minutes * 60);
    timeLabel.textContent = hours + ' hr ' + minutes + ' min ' +
        elapsed.toFixed(1) + ' sec';
});

// Button click callbacks are free to allocate memory.
hourPlusButton.addEventListener('click', function() {
    viewer.clock.currentTime = Cesium.JulianDate.addSeconds(
        viewer.clock.currentTime, 3600, new Cesium.JulianDate());
}, false);

hourMinusButton.addEventListener('click', function() {
    viewer.clock.currentTime = Cesium.JulianDate.addSeconds(
        viewer.clock.currentTime, -3600, new Cesium.JulianDate());
}, false);

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0;
  overflow: hidden; font-family: sans-serif;
}
.controlPanel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(42, 42, 42, 0.8);
  color: #edffff;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
}

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>
<div class="controlPanel">
    <h5>Elapsed time: <span id="timeLabel"></span></h5>
    <div>
        <button type="button" class="cesium-button" id="hourMinus">-1 hour</button>
        <button type="button" class="cesium-button" id="hourPlus">+1 hour</button>
    </div>
</div>