Forge viewer model position after transformation

Forge viewer model position after transformation - javascript

I've used the Model transformation extension to move the model from one point to another. Now How can I get the new location/coordinates/position of the transformed model or its bounding box as when I query the bounding box min and max points they are the same all the time. Any ideas??
My target is to get the new position of the model according to the origin after translation.

I isolated the core section of that extension and check the position and bounding box before and after transformation. To be simple, only translate. It looks those values are updated after transformation. Could you check if it could help to diagnose your problem?
To test it, select one object and run the function.
getModifiedWorldBoundingBox (fragIds, fragList) {
const fragbBox = new THREE.Box3()
const nodebBox = new THREE.Box3()
fragIds.forEach(function(fragId) {
fragList.getWorldBounds(fragId, fragbBox)
nodebBox.union(fragbBox)
})
return nodebBox
}
$('#test').click(function(rt){
var dbids = NOP_VIEWER.getSelection();
var it = NOP_VIEWER.model.getData().instanceTree;
var fragList = NOP_VIEWER.model.getFragmentList();
fragIds = [];
it.enumNodeFragments(dbids[0], function(fragId) {
fragIds.push(fragId);
}, false);
var bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox before transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS before transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix before transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
fragProxy.position.x += 10;
fragProxy.position.y += 10;
fragProxy.position.z += 10;
fragProxy.updateAnimTransform()
});
NOP_VIEWER.impl.sceneUpdated(true)
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS after transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix after transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
});
bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox after transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
});

Related

How to dynamically change size of the new window? [duplicate]

This question already has answers here:
How to get the image size (height & width) using JavaScript
(33 answers)
Closed 3 years ago.
I have a JS file connected with my JSP file. I want to show new window with a photo, every time I hit the link.
So far everything is okay, new window appears, but it has strictly specified width and height.
else if (nameClass == "label3"){
var myWindow = window.open("", "MsgWindow", "width=1600, height=1000");
myWindow.document.write("<img src='images/images/szafa.png'>");
}
How can I change that to have a dynamically changed size of the window, depends of the image size?

I have not tested this code but you will get the idea:
var myWindow = window.open("", "MsgWindow", "width=100, height=100, resizable=1, scrollbars=1, menubar=1");
myWindow.document.write(
'<script language="Javascript" type="text/javascript">' +
'function getElById(idVal)' +
'{' +
' if (document.getElementById != null)' +
' return document.getElementById(idVal)' +
' if (document.all != null)' +
' return document.all[idVal]' +
' alert("Problem getting element by id")' +
' return null' +
'}' +
'function resizer()' +
'{' +
' var elem = getElById("pic");' +
' if(elem)' +
' {' +
' var oH = elem.clip ? elem.clip.height : elem.offsetHeight;' +
' var oW = elem.clip ? elem.clip.width : elem.offsetWidth;' +
' window.resizeTo( oW, oH );' +
' var myW = 0, myH = 0, d = window.document.documentElement, b = window.document.body;' +
' if( window.innerWidth ) ' +
' { ' +
' myW = window.innerWidth; ' +
' myH = window.innerHeight; ' +
' }' +
' else if( d && d.clientWidth ) ' +
' { ' +
' myW = d.clientWidth; ' +
' myH = d.clientHeight; ' +
' }' +
' else if( b && b.clientWidth ) ' +
' { ' +
' myW = b.clientWidth; ' +
' myH = b.clientHeight; ' +
' }' +
' window.resizeTo(6+ oW + ( oW - myW ),6+ oH + ( oH - myH ) );' +
' }' +
'}' +
'</script>'
);
myWindow.document.write("<img id='pic' src='images/images/szafa.png'>");
myWindow.document.body.onLoad='resizer';
Or you can prepare a PHP script which will output the above HTML and provide the image name as URL query parameter to the script.

Declared variable returns 'undefined'

I have tried everything I can think of to resolve the fact that my variable is returning 'undefined'.
I have gone console.log crazy checking everything is working as it should be and am now up against the proverbial brick wall.
The script is located just before the closing body tag.
I tried putting it in the head section of the page but this began returning NaN on the variables R and X.
Putting the variables just after the opening script tag before calling the function did likewise. I am somewhat new to javascript and would very much appreciate any help.
function DisplayInputValues() {
var funds = document.getElementById("funds").value;
var s = document.getElementById("sum").innerText;
var j = document.getElementById('debt').value; //number of input fields
var txtin; //class name of text input element
var numin; // class name of number input element
var L = 0;
while (L < j) {
console.log('funds= ' + funds); //just checking amount of funds shows correctly
console.log('debt = ' + s); //just checking Debt sum shows correctly
console.log('Loop = ' + L);
var userinput1 = document.getElementsByClassName('txtin')[L].value;
console.log('Loop = ' + L + ' Text input = ' + userinput1);
document.getElementById("showresults").innerHTML += userinput1 + "<br />";
var userinput2 = document.getElementsByClassName('numin')[L].value;
console.log('Loop = ' + L + ' Number input = ' + userinput2);
document.getElementById("showresults").innerHTML += userinput2 +
"<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";
var FP = funds / 100; // 1% of funds available
var SP = s / 100; // 1% of debt total
var R = userinput2 / SP;
R = R.toFixed(2);
var X = FP * R;
X = X.toFixed(2); //amount to offer in settlement
console.log('Loop = ' + L + ' FP = ' + FP);
console.log('Loop = ' + L + ' SP = ' + SP);
console.log('Loop = ' + L + ' R = ' + R);
console.log('Loop = ' + L + ' X = ' + X);
console.log('Loop = ' + L + ' Amount to offer = ' + X);
console.log('');
L = L + 1;
}
}

Output everything after calculation
X is used before you declared it. In your original code you had
document.getElementById("showresults").innerHTML += userinput2 + "<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";
before X was declared so of course it is going to give you undefined
I have changed the order of things so that X is first calculated then used
var userinput1 = document.getElementsByClassName('txtin')[L].value;
var userinput2 = document.getElementsByClassName('numin')[L].value;
var FP = funds / 100; // 1% of funds available
var SP = s / 100; // 1% of debt total
var R = userinput2 / SP;
R = R.toFixed(2);
var X = FP * R;
X = X.toFixed(2); //amount to offer in settlement
console.log('Loop = ' + L + ' Text input = ' + userinput1);
document.getElementById("showresults").innerHTML += userinput1 + "<br />";
console.log('Loop = ' + L + ' Number input = ' + userinput2);
document.getElementById("showresults").innerHTML += userinput2 +
"<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";

Script only working in the console even with document.ready

I have a script that runs on a page. It doesn't work, but when I type it into the console then run it it works perfectly.
This might sound like other questions such as this one, but I already have $(document).ready(). All the variables already defined here have been defined earlier in the document.
$(document).ready(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
});

Add setTime out function in your code.please try below code:
$(document).ready(function(){ setTimeout(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
},5000);});

TypeError: $source.offset is not a function

I have a tree structure where the elements can be dragged and dropped into another element. My objective is when a element or node from a tree is dragged and dropped to the external element I want a line to be drawn from the element of the tree to the external location.
I have the code separate for dragging and dropping. I tried to integrate the code into my tree structure and getting this error. I did see similar errors but could not get an exact idea about what exactly the error is. Here is the code that is giving me the error.
end: function(item, hover, placeholder, helper) {
if (placeholder.parent().length) {
var tree = $('#tree1').aciTree('api');
if (tree.isItem(item)) {
var id = tree.getId(item);
var label = tree.getLabel(item);
if (this._instance.jQuery.hasClass('any')) {
this._instance.jQuery.find('li:not(.aciSortablePlaceholder)').remove();
}
var item = $('<li id="item-' + id + '">' + label + '</li>');
var sourceId = id;
var destinationId = sourceId;
drawLine(sourceId, destinationId);
//This is how the function is called
placeholder.after(item).detach();
}
else {
placeholder.detach();
}
}
helper.detach();
}});
function drawLine(eTarget, eSource) {
setTimeout(function () {
var $source = eSource;
var $target = eTarget;
var originX = $source.offset().left + $source.width() + 20 + 4;
// In the $source.offset() I am getting the error.
var originY = $source.offset().top + (($source.height() + 20 + 4) / 2);
var endingX = $target.offset().left;
var endingY = $target.offset().top + (($target.height() + 20 + 4) / 2);
var space = 20;
var color = "black";
var a = "M" + originX + " " + originY + " L" + (originX + space) + " " + originY; // beginning
var b = "M" + (originX + space) + " " + originY + " L" + (endingX - space) + " " + endingY; // diagonal line
var c = "M" + (endingX - space) + " " + endingY + " L" + endingX + " " + endingY; // ending
var all = a + " " + b + " " + c;
console.log("New Line ----------------------------");
console.log("originX: " + originX + " | originY: " + originY + " | endingX: " + endingX + " | endingY: " + endingY + " | space: " + space + " | color: " + color );
console.log(all);
myLines[myLines.length] = svg
.path(all)
.attr({
"stroke": color,
"stroke-width": 1,
"stroke-dasharray": "-"
});
}, 1000);
PS: I am using firefox. The eTarget and eSource and getting the values as supplied.

window.open parameters as a variable

Within a function I have a line of code that opens a window whilst drawing its parameters either from the functions own parameters (u.n) or variables created within the function.
This works fine in the script.
win2 = window.open(u, n, 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools);
As this is called several other times in the script but as win3, win4 etc. , to reduce code, I wanted to put the parameters, which are the same each time, into a variable and just use that each time.
myparameters = u + ',' + n + ',width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(myparameters);
I have tried playing around with this without much luck, can it be done?
Thanks.

Yes you can, to some extent by wrapping it in function call. What I typically do is to have a utility function which I can call upon whenever required.
Something like this:
popOpen: function (url, target, height, width) {
var newWindow, args = "";
args += "height=" + height + ",width=" + width;
args += "dependent=yes,scrollbars=yes,resizable=yes";
newWindow = open(url, target, args);
newWindow.focus();
return newWindow;
}
You can further reduce the parameters by making it an object like:
popOpen: function (params) {
var newWindow, args = "";
args += "height=" + params.height + ",width=" + params.width;
args += "dependent=yes,scrollbars=yes,resizable=yes";
newWindow = open(params.url, params.target, params.args);
newWindow.focus();
return newWindow;
}
And you can call it like this:
var param = { url: '...', height: '...', width: '...' };
popOpen(param);
Or,
var param = new Object;
param.url = '...';
param.height = '...';
popOpen(param);

The way you are trying is not possible. You might want to do this:
var myparameters = 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(u, n, myparameters);
Fiddle: http://jsfiddle.net/aBR7C/

You are missing some additional parameters in your function call:
var myparameters = 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(u, n, myparameters);
^ ^ ^
//Here you are passing parameters

Develop Reference

JavaScript is the programming language of the Web.

Forge viewer model position after transformation - javascript

Related

How to dynamically change size of the new window? [duplicate]

Declared variable returns 'undefined'

Script only working in the console even with document.ready

TypeError: $source.offset is not a function

window.open parameters as a variable

Categories

Resources