Qlik Community

QlikView Extensions

Discussion Board for collaboration on QlikView Extensions.

Announcements

Breathe easy -- you now have more time to plan your next steps with Qlik!
QlikView 11.2 Extended Support is now valid through December 31, 2020. Click here for more information.

adamdavi3s
Honored Contributor

simple on click

I am trying to add a simple on click event to some three.js to fire a function.

As this code stands, it seems to do my console.log on load but then not for any clicks


The relevant code is line 135 and also lines 168+

var _this = this;

  //setup html

  var html = "";

  //add a unique name to the extension in order to prevent conflicts with other extensions.

  //basically, take the object ID and add it to a DIV

  var divName = _this.Layout.ObjectId.replace("\\", "_");

  if (_this.Element.children.length == 0) { //if this div doesn't already exist, create a unique div with the divName

     var ui = document.createElement("div");

     ui.setAttribute("id", divName);

     _this.Element.appendChild(ui);

  } else {

     //if it does exist, empty the div so we can fill it again

     $("#" + divName).empty();

  }

  //****************************************************************************************************************

  //start your extension code here

  //****************************************************************************************************************

  //****************************************************************************************************************

  //Contained here is a nice simple example of drawing a sphere

  initscene(); //kick off the scene build function

  function initscene() {

     // set the scene size

     var WIDTH = 1000,

         HEIGHT = 700;

     // set some camera attributes

     var VIEW_ANGLE = 45,

         ASPECT = WIDTH / HEIGHT,

         NEAR = 0.1,

         FAR = 10000;

     // get the DOM element to attach to

     // - assume we've got jQuery to hand

     var $container = $("#" + divName);

     // create a WebGL renderer, camera

     // and a scene

     var renderer = new THREE.CanvasRenderer();

     renderer.setClearColor(0xff0000, 0); //clear the background

     var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

     var scene = new THREE.Scene();

     // add the camera to the scene

     scene.add(camera);

     // the camera starts at 0,0,0

     // so pull it back

     camera.position.z = 300;

     // create a point light

     var pointLight = new THREE.PointLight(0xFFFFFF);

     // set its position

     pointLight.position.x = 10;

     pointLight.position.y = 50;

     pointLight.position.z = 10000;

     // add to the scene

     scene.add(pointLight);

     var particlesTotal = 20;

     var positions = [];

     var objects = [];

     var radius = 5,

         segments = 16,

         rings = 16;

     var current = 0;

     var sphereMaterial =

         new THREE.MeshLambertMaterial({

             color: 0xCC0000

         });

     for (var i = 0; i < particlesTotal; i++) {

         var object = new THREE.Mesh(new THREE.SphereGeometry(20 * Math.random(), segments, rings), sphereMaterial);

         object.position.x = Math.random() * 100,

             object.position.y = Math.random() * 100,

             object.position.z = Math.random() * 100;

         scene.add(object);

         objects.push(object);

     }

     renderer.setSize(WIDTH, HEIGHT);

     // attach the render-supplied DOM element

     $container.append(renderer.domElement);

     render();

     _this.click(onclicktest());

     /* var offset = current * particlesTotal * 3;

      var duration = 2000;

      for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {

      var object = objects[ i ];

      new TWEEN.Tween( object.position )

      .to( {

      x: positions[ j ],

      y: positions[ j + 1 ],

      z: positions[ j + 2 ]

      }, Math.random() * duration + duration )

      .easing( TWEEN.Easing.Exponential.InOut )

      .start();

      console.log(123);

      }*/

     function render() {

         renderer.render(scene, camera);

     }

  } //end initscene function

  function onclicktest() {

     console.log("got clicked");

  }