how can I add the hint or pop windows when click the element ?

[yichingwu]

I would like to add some labels and hints on the 3D web page when use click the specific element? is it possible to do it?

[andyward]

If you mean you want to show data relating to an element when the user selects it, I think one way would be to use the xBrowser.js library.

Otherwise take a look at #28 if you want to query the model data directly

[yichingwu]

I just review the xBrowser.js but still not found how to do? I am trying to add pop windows like

When I selection the green element, it should show the relation information at pop window.

[andyward]

xBrowser gives you something like this (from the XbimAzure project):

You could probably use the same approach (using xVisualModel COBieLite data) to display selected values in a tooltip, but you'd have to wire it up yourself.

[martin1cerny]

Hi @boosterwu I'd recommend to have a look at this tutorial and this documentation entry. It shows you how to listen to events you need to do any user interaction like pop up windows. As @andyward said already you will have to write this wiring yourself. xBrowser class provides an access to semantic COBie data extracted from the model. That includes spatial hierarchy containment, system relations, most of properties and other information. If you need full access to BIM model you should have a look at this issue #28 where it is discussed.

[yichingwu]

hi @martin1cerny , thank you for your reply. I will refer your suggestions and feed to you my solution later.

[yichingwu]

hi @andyward and @martin1cerny , I still working on this feature, so far I can draw a quadrangle like pop window on 3D graph using WebGL directly, but I have no idea to draw the same into the xBim Web UI , could you please give me some hints that I can draw something with xBim API ?

Thanks. James

[LloydPickering]

Do you have to do it in WebGL? You are in a browser which already has a HTML rendering engine in it, and WebGL is ultimately just a HTML element (canvas). Why not just use a standard html popup using javascript and save yourself the headache of rendering in WebGL?

[martin1cerny]

Hi @boosterwu, I agree 100% with @LloydPickering. It will be much easier to do in HTML. WeXplorer API doesn't support any kind of custom WebGL rendering. You can certainly branch and hack it but you'll be on your own in that case.

[yichingwu]

thank you @LloydPickering and @martin1cerny , I totally agree what your suggestion . I'll try to use HTML element to show pop windows directly.

[yichingwu]

Sorry for my late reply. I already add the tooltip inside the xBimWebUi using the qtip2 jquery plugin. I add some javascript code in entityActive event of browser.js as below.

    $("#viewer-canvas").qtip({
    show: {
        event:'click'
    },
    hide: {
        event: 'false' 
    },
    content: {        
        text: function (event, api) {
            $.ajax({
                url: 'http://qtip2.com/demos/data/owl' // Use href attribute as URL
            })
            .then(function (content) {                
               api.set('content.text', content);
            }, function (xhr, status, error) {
                // Upon failure... set the tooltip content to error
                api.set('content.text', status + ': ' + error);
            });
            return 'Loading...'; // Set some initial text
        }
    },
    position: {
        target: 'mouse', // Use the mouse position as the position origin       
        adjust: {
            // Don't adjust continuously the mouse, just use initial position
            mouse: false
        }
    }});

when you click any entity will show the tooltips windows on the XBim.

if you would like to represent the ifc data, just add a prototype function in xbim-browser.debug.js

xBrowser.prototype.getXEntity = function (id) {
    if (!this._model) return;
    var entity = this._model.getEntity(id);
    if (!entity) return;
    return entity;
};

then you can get clicked entity like:

var entity = browser.getXEntity(args.entity.id);

[martin1cerny]

Thanks for the suggestion @boosterwu . It might be useful function so I'll add it once I get to do something with xBrowser. You might also like to use built-in functions like renderAttributes() to render into HTML straight away. It might boost your development.

I suppose your issue is solved now. Can I close this issue?

[yichingwu]

@martin1cerny ,sure please close this issue. thank you.