Sharing variables with a HTML UI (a scope problem)

18 July 2017 20:21

#17977

Charlie

posts: 50

Hi Guys,

I've been using the 'cartoon interior', to help build my project, although I'm finding it quite difficult to extrapolate some simple features, from what is quite a complex set of code.

My app works like this.

Scene objects all have a JS callback on them. The JS callback uses a custom script in the .JS, to display menus that are relevant to the object clicked.

Something like this:

function switch_cb(in_params, out_params) {
  
       document.getElementById("cssmenu").style.display='none';
       document.getElementById("cssmenu2").style.display='block';

     }

With me so far?

The challenge after pulling in the correct menu, is to have the object and it's material 'selected' globally, so I can use the HTML menu to affect it's appearance (by applying mat's and textures).

The cartoon interior does a pretty good job of getting me started, especially with the delete and rotate functions… I'm just not there yet.

So far, I've used a separate (to the JS callback custom script - I want to use that simply for menu allocation) 'pick object' script, and that works great:

function main_canvas_down(e) {
   
    if (_disable_interaction)
        return;

    if (e.preventDefault)
        e.preventDefault();

    var x = m_mouse.get_coords_x(e);
    var y = m_mouse.get_coords_y(e);

    var obj = m_scenes.pick_object(x, y);
    
    
    if (obj)
    console.log(m_scenes.get_object_name(obj));
	console.log(material.get_materials_names(obj));
    }

My console reports are just in there, because at some point in the future, I'll be using the inherit material function… I have no idea how to append those variables yet, but I'll deal with that when I get to it.

The problem I have now, is getting my menu to affect the SELECTED object.

I've used this technique to successfully get the menu to affect the scene:

CSSMenu has a <span> id "action1"

<li class='has-sub'><a href='#'><span id="action1">FUNCTION LINK</span></a>

And the function is appended to it (just like in cartoon_scene) like this

function init_controls() {

    document.getElementById("action1").addEventListener("click", function(e) {
       m_data.load(APP_ASSETS_PATH + "my_project_Tex2.json", null, null, true);
});

I'm not really interested in importing an object, I was just testing the function and it works fine.

Things start to get tricky if I try to have my menu execute a function on an object that is selected, and I don't really understand how it's been achieved in cartoon_scene.

Something like this (which doesn't work)

function init_controls() {

     
      document.getElementById("action1").addEventListener("click", function(e) {
        if (obj) {
            console.log("Object is affected");
           var id = m_scenes.get_object_data_id(obj);
           m_data.unload(id);
            obj = null;
        }
    });

I've tried messing around with the scope, by declaring obj as a global, and various other iterations that a noob might try, but I'm having no success.

The cartoon interior uses a more complex structure, but I don't understand it… It has a top level function (init_controls), then those functions are mapped to the scene somehow, like this:

function init_buttons() {
    var ids = ["delete", "rot-ccw", "rot-cw"];

    for (var i = 0; i < ids.length; i++) {
        var id = ids[i];

        document.getElementById(id).addEventListener("mousedown", function(e) {
            var parent = e.target.parentNode;
            parent.classList.add("active");
        });
        document.getElementById(id).addEventListener("mouseup", function(e) {
            var parent = e.target.parentNode;
            parent.classList.remove("active");
        });
        document.getElementById(id).addEventListener("touchstart", function(e) {
            var parent = e.target.parentNode;
            parent.classList.add("active");
        });
        document.getElementById(id).addEventListener("touchend", function(e) {
            var parent = e.target.parentNode;
            parent.classList.remove("active");
        });
    }
}

This is where I'm out of my depth. I simply want to be able to (at this stage) delete an object, that's selected, using my HTML, but I'm stuck. Any pointers???

Thanks in advance

19 July 2017 21:45

#17989

Will Welker

posts: 558

Hi Charlie,
Have a look the answer in this post: LINK
Basically the addEventListener function, by default, passes information into the e parameter. If you console.log it you can see what got put in to it.

document.getElementById(id).addEventListener("mousedown", function(e) {
            var parent = e.target.parentNode;
            console.log("What is  e = " + e);
            console.log("What is  e.target = " + e.target);

Log results:

What is  e = [object MouseEvent]
What is  e.target = [object HTMLDivElement]

Twitter
3dxmedia.com

Forum

Sharing variables with a HTML UI (a scope problem)

Please register or log in to leave a reply.