<style>
#banner {
   position: absolute;
   top: 30px;
   text-align: center;
   font-size: 3em;
   width: 100%;
   z-index: 10;
   visibility: hidden
}
</style>

<div id="banner"></div>
<script>
(function() {
  var messageId = 0;

  function hideBanner(bannerElement, messageIdArg) {
    return function() {
      // Hide the message only if it wasn't replaced with a new one.
      if (messageId === messageIdArg) {
        bannerElement.style.visibility = 'hidden';
      }
    }
  }

  function showMessage(message) {
    var bannerElement = document.getElementById('banner');
    bannerElement.textContent = message;
    bannerElement.style.visibility = 'visible';
    messageId += 1;
    setTimeout(hideBanner(bannerElement, messageId), 4000);
  }
  var viewer = WALK.getViewer();
  viewer.onSceneReadyToDisplay(function() {
    var setMaterialForNodeOriginal = viewer.setMaterialForNode;
    viewer.setMaterialForNode = function(material, node) {
      setMaterialForNodeOriginal.apply(this, [material, node]);
      showMessage('material: ' + material.name);
    }
  });
}());
</script>