Restore sectionBox in forge viewer - autodesk-forge

How to get bounding box info of intersection box in forge viewer?
i want to restore section extension box bounding value to be restored.for that for below method i get box value.
getSelectionbox
now i want to restore that to viewer/set that saved value to viewer for that is there any method is available?
i used setSectionBox(box) but it isn't worked for me.
Thank you
Here is code sample:
viewer.restoreState(currentState, null, false);
viewer.hide(Object.values(val.hiddenNodes));
if(Object.values(val.isolateNodes).length > 0){
viewer.isolate(Object.values(val.isolateNodes));
}
if(val.cutPlanes.length !== 0){
viewer.loadExtension("Autodesk.Section").then(function(sectionTool){
sectionTool.activate(val.sectionStyle);
var sectionTool = markupsExt.tool.getSectionBoxValues();
const sectionbboxmin = new THREE.Vector3(val.sectionBox[0], val.sectionBox[1], val.sectionBox[2]);
const sectionbboxmax = new THREE.Vector3(val.sectionBox[3], val.sectionBox[4], val.sectionBox[5]);
const box = new THREE.Box3(sectionbboxmin,sectionbboxmax);
box.transform = val.sectionBoxTransform;
sectionTool.setSectionBox(box);
});
}

I just tried applying a custom section box to a model in Forge Viewer using this code snippet:
let box = new THREE.Box3(new THREE.Vector3(-100,-100,-100), new THREE.Vector3(100,100,100));
let sectionExt = viewer.getExtension('Autodesk.Section');
sectionExt.setSectionBox(box);
And the result is this:
So this seems to be working ok. Could you provide more details about how you tried to set the section box?
EDIT:
Here's how you can restore the section box from a list of cutplanes (like the one you can obtain from viewer.getState()):
function restoreSectionBox(viewer, cutplanes) {
let box = new THREE.Box3();
for (const cutplane of cutplanes) {
const normal = new THREE.Vector3(cutplane[0], cutplane[1], cutplane[2]);
const offset = cutplane[3];
const pointOnPlane = normal.negate().multiplyScalar(offset);
box.expandByPoint(pointOnPlane);
}
const sectionExt = viewer.getExtension('Autodesk.Section');
sectionExt.setSectionBox(box);
}
// ...
let cutplanes = [
[1, 0, 0, 40],
[0, 1, 0, 50],
[0, 0, 1, 30],
[-1, 0, 0, 60],
[0, -1, 0, 20],
[0, 0, -1, 70]
];
restoreSectionBox(viewer, cutplanes);

Related

How to achieve hooking markups with blinking on forge viewer?

I have developed blinking markups on my model viewer and used below code part for it. But, when I changed camera viewing on my model, the location of markups has been changed and they were located incorrectly. I want to hook them and not to change the state of them.
$('#mymk'+randomId).append('<svg id="mysvg'+randomId+ '"></svg>')
$('#mysvg'+randomId ).css({
'width': '50px'
});
var rad = 12;
const size=300;
var s = Snap($('#mysvg'+randomId)[0]);
s.attr({viewBox: "0 0 " + size + " " + size});
const userPath = s.path("M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490S770.6,10,500,10z M496.2,255c70,0,126.7,56.7,126.7,126.7s-56.7,126.7-126.7,126.7s-126.7-56.7-126.7-126.7C369.5,311.7,426.3,255,496.2,255z M629.1,745h-266c-25.8,0-78.2-21.1-78.2-46.8v0c0-85.8,70.4-156,156.4-156h109.5c86,0,156.4,70.2,156.4,156C707.4,723.9,654.9,745,629.1,745z")
.attr({fill: "#029e02"});
const userBox = userPath.getBBox();
const circleBg = s.circle(userBox.cx, userBox.cy, userBox.width / 2)
.attr({fill: "#029e02", stroke: "#029e02", strokeWidth: 800});
const user = s.group(circleBg, userPath);
const userScaleFactor = 0.09;
const userMtx = new Snap.Matrix();
userMtx.translate(size/2 - userBox.width*userScaleFactor / 2, size/2 - userBox.height*userScaleFactor/2);
userMtx.scale(userScaleFactor);
user.attr({transform: userMtx, cursor: "pointer"});
const smallUserMtx = userMtx.clone().scale(0.9, 0.9, userBox.cx, userBox.cy);
setInterval(blink, 3000);
function blink(){
user.animate({transform: smallUserMtx}, 200, mina.easein, () => user.animate({transform: userMtx}, 200));
const newCircle = s.circle(size/2, size/2, 40);
user.before(newCircle);
newCircle.attr({fill: "rgb(244, 203, 217)", strokeWidth: "20", stroke: "#015401"});
newCircle.animate({r: size/2, opacity: 0}, 2000, mina.easeout, () => newCircle.remove());
};
user.attr({
pointerEvents: "auto",
cursor: "pointer"
});
In the viewer this is typically handled by locking the camera navigation, basically preventing the user from moving the camera while the overlay markups are displayed. You can use the setNavigationLock method to control the navigation.

Modifying one series to have dashed lines on Google Sheets Chart

I have the following code which I believe should modify the third line on the chart to have dashed lines, but it doesn't seem to work and the line just stays solid.
var chart = sheet.getCharts()[0];
chart = chart.modify()
// dynamically set y limits
.setOption('vAxes.0.viewWindow.max', max) // set y max
.setOption('vAxes.0.viewWindow.min', min) // set y min
.setOption('title', title) // set title
.setOption('curveType', smooth) // smooth/unsmooth graph
// format series objects
.setOption('series', {0: {color: 'rgba(76, 114, 176, 0.5)', labelInLegend: "2021"},
1: {color: '#dd8452', labelInLegend: "2022", lineWidth: 3},
2: {color: '#55a868', labelInLegend: "2022 goal", lineDashStyle: [2, 2]}})
.build();
sheet.updateChart(chart);
Am I doing something wrong here? All the other series options work fine.
Full code:
// main function to update graph
function update_graph() {
// get sheet
var sheet = SpreadsheetApp.getActive().getSheetByName('plot graph');
// get min and max limits for y axis
var min = sheet.getRange("P1").getValue();
var max = sheet.getRange("P2").getValue();
// control for smoothing graph
var smooth = 'none';
var smooth_status = sheet.getRange("B4").getValue();
if (smooth_status == true) {
smooth = 'function' // smoothed
} else {
smooth = 'none' // normal
}
// get country and metric values used for the graph title
var country = sheet.getRange("B1").getValue();
var metric = sheet.getRange("B2").getValue();
var channel = sheet.getRange("B3").getValue();
// // call graph_title function to create title
var title = graph_title(country, metric, channel)
var chart = sheet.getCharts()[0]; // get primary chart only and apply modifications
chart = chart.modify()
// dynamically set y limits
.setOption('vAxes.0.viewWindow.max', max) // set y max
.setOption('vAxes.0.viewWindow.min', min) // set y min
.setOption('title', title) // set title
.setOption('curveType', smooth) // smooth/unsmooth graph
// format series objects
.setOption('series', {0: {color: 'rgba(76, 114, 176, 0.5)', labelInLegend: "2021"},
1: {color: '#dd8452', labelInLegend: "2022", lineWidth: 3},
2: {color: '#55a868', labelInLegend: "2022 goal", lineDashStyle: [2, 2]}})
.build();
sheet.updateChart(chart);
}

Google Charts column chart how to change vertical axis scale?

I have a column chart which I am trying to set the vertical axis scale to whole numbers i.e. 0, 1, 2... instead of 0, 0.5, 1...
Using vAxis : {format : '#'} merely rounds up the decimals, leaving duplicates i.e. 0, 1, 1, 2, 2...
Using vAxis : { gridlines : { count : 5 // for example } } does not seem to have an effect.
Ticks look like a solution but my question is what if my chart is to be dynamic? If I don't know what the max number of jobs would be, so as to set the ticks?
The last resort seems to be putting a height constraint on the chart, forcing the v-axis unit to be larger.
Thank you in advance!
to use ticks and still be dynamic,
you can use data table method getComumnRange(columnIndex)
to determine the min and max values of the y-axis values
then use those values to build the ticks array,
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'value'],
['a', 1],
['b', 10],
['c', 4],
['d', 3],
['e', 7]
]);
var yAxisRange = data.getColumnRange(1);
var ticks = [];
for (var i = 0; i <= yAxisRange.max; i++) {
ticks.push(i);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
vAxis: {
format: '0',
ticks: ticks
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

node js mysql query result rendered to chart.js labels in pug page

I've this strange behaviour when i make a get request. A query to mysql calls for totals of sells(float) group by days (nvarchar). I've made 2 arrays (for totals and datas) where i push the content of the result
router.get('/movmensili', function(req, res ,next){
if(!req.session.user){
return res.redirect('/');
}
executeQuery("SELECT SUM(price) as Totale, Data FROM db10101.10101 group by Data order
by Data", function(error, resmov){
var dateArray = [];
var totaliArray = [] ;
for (var i = 0; i<resmov.length; i++) {
dateArray.push(resmov[i].Data)
}
for (var i = 0; i<resmov.length; i++) {
totaliArray.push(resmov[i].Totale)
}
res.render('movmensili', {title: 'movs', date: (dateArray), totali: totaliArray
});
});
});
console.log(dateArray); //['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05']
console.log(totaliArray); //[ '4.00', '5.50', '3.00', '1.75', null ]
so far so good
once I open my Pug page i got to draw a bar chart with Chart.js
the two arrays used for the chart axes, contains numeric values, no problems for the sell totals, but the xlabels should be strings. So far the xlabes are 2016(=2022 minus 05 minus 01), 2015, 2014 and so on....
canvas#myChart(style='width: 100%; height: 100%; margin: 10 auto')
script.
const xlabels = [#{date}] //[2022-05-01,2022-05-02,2022-05-03,2022-05-04,2022-05-05]
const ydatas = [#{totali}] //[4.00,5.50,3.00,1.75,]
I wasn't able to convert / cast / stringify the x values to get the result needed.
Any suggestions?
David, this worked for me. Are you sure you are passing the labels correctly on render (try date: dateArray instead of date: (dateArray)). I didn't create a render function for this page so hard coded the labels and data arrays:
script.
var labels = ['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05',]
var data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: ['4.00', '5.50', '3.00', '1.75', null],
}]
};
var config = {type: 'line',data: data,options: {}};
var myChart = new Chart(document.getElementById("myChart"),config);
Not best solution, but it works....
async function GetData()
var xlabel = '#{date}';
var xlabel = xlabel.replace(/"/g, '"');
alert(xlabel);
var xlabel = xlabel.split(",");
alert(xlabel);
for(i = 0; i < xlabel.length; i += 1){
xlabel[i] = xlabel[i];
//alert(numarray[i]);
xlabels.push(xlabel[i]);
}
if I hardcode the labels in:
const xlabels = [#{date}]
instead of importing from page render, everything works fine. It's exactly that the point. The console.log of dateArray is perfectly as I would like to be in the xlabels, while once imported the quotes disappear
console.log(dateArray); // ['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05']
const xlabels = [#{date}]; // [2022-05-01,2022-05-02,2022-05-03,2022-05-04,2022-05-05]

Add a group to a follower - Phaser 3

I'm noob at Phaser 3 and trying to add a group (2 sprites) in a follower. The code works when I use a sprite at 'add.follower'.
function create () {
var bola = this.add.group();
bola.create(0, 0, 'bola15');
bola.create(0, 0, 'bolasombra');
var line1 = new Phaser.Curves.Line([ 100, 100, 500, 100 ]);
var line2 = new Phaser.Curves.Line([ 500, 100, 500, 500 ]);
path1 = this.add.path();
path1.add(line1);
path1.add(line2);
var mover = this.add.follower(path1, 0, 0, bola);
mover.startFollow({
positionOnPath: true,
duration: 3000,
yoyo: false,
repeat: 0,
rotateToPath: false,
verticalAdjust: true
});
}
That's what I got:
Any solution for that, or other way to make something like that?
Edit:
Have tried with 'container' and got the same result:
bola = this.add.container(0,0);
bola1 = this.add.sprite(0,0,'bola15');
bola2 = this.add.sprite(0,0,'bolasombra');
bola.add(bola1);
bola.add(bola2);
At current state, PathFollower is set up to take in only a single GameObject. Unfortunately, this means you'll have to add your group items to a follower one by one. You can set up a loop to run through your group items and create the path followers like this:
for (var i = 0; i < bola.children.entries.length; i++) {
var mover = this.add.follower(path1, 0, 0, bola.children.entries[i].texture.key);
mover.startFollow({
positionOnPath: true,
duration: 3000,
yoyo: false,
repeat: 0,
rotateToPath: false,
verticalAdjust: true
});
}
Check this example from the Phaser 3 labs to see another example of how you can use multiple items with the same path if the group structure isn't important to your game.