I have created a UI for my game.
after published project from cocostudio I have got .csb file.
how to use it in my game?
Add the header file
#include"cocostudio.h"
Node* node = CSLoader::createNode("background.csb");
this->addChild(node);
//get animation data
cocostudio::timeline::ActionTimeline* action = CSLoader::createTimeline("background.csb");
node->runAction(action);
action->gotoFrameAndPlay(0, true);
it will be helpful for you
Example with js:
var node = ccs.csLoader.createNode("res/node.csb");
var node_action = ccs.actionTimelineCache.createAction("res/node.csb");
node.runAction(node_action);
node.attr({
scale: 0.6,
x: 130,
y: 10,
})
node_action.gotoFrameAndPlay(0, 40, true);
this.addChild(node);
Related
I'm working on an app that can reproduce the section box cut from revit in forge viewer. I've got the max point and min point of section box using the code below in revit api:
BoundingBoxXYZ currentSectionBox = view3D.GetSectionBox();
double[] minPt = new double[] {
currentSectionBox.Transform.Origin.X + currentSectionBox.Min[0],
currentSectionBox.Transform.Origin.Y + currentSectionBox.Min[1],
currentSectionBox.Transform.Origin.Z + currentSectionBox.Min[2]
};
double[] maxPt = new double[] {
currentSectionBox.Transform.Origin.X + currentSectionBox.Max[0],
currentSectionBox.Transform.Origin.Y + currentSectionBox.Max[1],
currentSectionBox.Transform.Origin.Z + currentSectionBox.Max[2]
};
And it can be reproduced by this code same in the revit:
...
// View3D is the current opened 3d view in revit
View3D.SetSectionBox(new BoundingBoxXYZ() {
Max = new XYZ(maxPt[0], maxPt[1], maxPt[2]),
Min = new XYZ(minPt[0], minPt[1], minPt[2])
});
So far so good, then I used the same max and min point in forge viewer. I expected to see the same result in revit, but it didn't. Is anything wrong in my code or I just misunderstand some concept about it?
let offset = this.Viewer3D.model.getData().globalOffset
offset = new THREE.Vector3(offset.x, offset.y, offset.y)
const sectionBoxPosition = new THREE.Box3(minPt.sub(offset), maxPt.sub(offset))
this.Viewer3D.loadExtension('Autodesk.Section').then(function (Section) {
Section.setSectionBox(sectionBoxPosition)
})
The way you used to apply the global offset looks incorrect.
I would advise you to do the calculation like the below using viewer.model.getModelToViewerTransform() to get the correct model to transform in the viewer. Sometimes, there are other transforms made to the model except for the global offset.
var boxMinFromRvt = new THREE.Vector3(-20.9539269351606, -128.710696355516, -43.8630604978775); //!<<< From Revit API's BoundingBoxXYZ.Min
var boxMaxFromRvt = new THREE.Vector3(73.7218284399634, 102.143481472216, 43.8630604978775); //!<<< From Revit API's BoundingBoxXYZ.Max
var boxTransformFromRvt = new Autodesk.Viewing.Private.LmvMatrix4(true).fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.49058457162347, -35.3016883690933, 16.5749846091418, 1]); //!<<< From Revit API's BoundingBoxXYZ. Transform
var modelTransform = viewer.model.getModelToViewerTransform();
var minOffseted = boxMinFromRvt.clone().applyMatrix4(boxTransformFromRvt).applyMatrix4(modelTransform);
var maxOffseted = boxMaxFromRvt.clone().applyMatrix4(boxTransformFromRvt).applyMatrix4(modelTransform);
var box = new THREE.Box3(minOffseted, maxOffseted);
viewer.getExtension('Autodesk.Section').setSectionBox(box);
Here are the snapshots of my tests:
In Revit
In Forge Viewer
I'm trying to get snapshot of the table and generate a pdf using html2canvas and jsPDF in React. But the isssue is only the part of table that is visible gets generated where as horizontal and vertical scrollable part of table which is invisible is not getting in the pdf. Any help to this issue is highly appreciated. Thanks in advance.
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
Since I dont know exactly the page you are working with but I hope my code in old project can help you. Your problem may come from the width and heigh is not defined.
processPdf = () => {
const foo = document.getElementById('canvas');
html2canvas(foo)
.then((canvas) => {
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
const handledImage = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'px', 'a4');
pdf.addImage(handledImage, 'JPEG', 0, 0, width, height);
pdf.save("test.pdf");
});
};
If you need to export table on a pdf file you shouldn't use html2canvas for that purpose. I think its better to use jsPDF and jspdf-autotable for exporting table to pdf.
example : Export to PDF in React-Table
What is the correct process for getting a transform between Forge coordinates and Revit's shared coordinates? I know there is globalOffset, but does it reference the Revit project internal coordinate system or shared coordinates?
Update Jun 11th, 2021
Now my MultipleModelUtil.js supports the alignments I shared below. Also, we can easily tell Forge Viewer to use By shared coordinates to aggregate models. Here is the code snippet, and you can check out here to know supported alignments
const util = new MultipleModelUtil( viewer );
util.options = {
alignment: MultipleModelAlignmentType.ShareCoordinates
};
const models = [
{ name: '1.rvt', urn: 'urn:dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLlNpaHgxOTVuUVJDMHIyWXZUSVRuZFE_dmVyc2lvbj0x' },
{ name: '2.rvt', urn: 'urn:dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLldVRHJ4ajZ6UTBPLTRrbWZrZ3ZoLUE_dmVyc2lvbj0x' },
{ name: '3.rvt', urn: 'urn:dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLjRyZW5HRTNUU25xNHhYaW5xdWtyaWc_dmVyc2lvbj0x' }
];
util.processModels( models );
==================
First, Forge Viewer supports 3 kinds of Revit link methods as the below, and you can take a look at the 3rd one (By shared coordinates).
Origin to origin: Apply the globalOffset of the 1st model to others. Check MultipleModelUtil/MultipleModelUtil.js for the demo
Center to center: the default way of the viewer.
By shared coordinates: set up applyRefpoint: true and make the globalOffset to the refPoint. This method is the one you are looking for.
The refPoint is the Revit survey point location inside Revit internal coordinate system. It's accessible with the AecModelData. Meanwhile, you can take advantage of the AggregatedView to use this aligning option. Here is an example of telling how to use AggregatedView:
https://gist.github.com/yiskang/c404af571ba4d631b5929c777503891e
If you want to use this logic with the Viewer class directly, here is a code snippet for you:
let globalOffset = null;
const aecModelData = bubbleNode.getAecModelData();
const tf = aecModelData && aecModelData.refPointTransformation; // Matrix4x3 as array[12]
const refPoint = tf ? { x: tf[9], y: tf[10], z: 0.0 } : { x: 0, y: 0, z: 0 };
// Check if the current globalOffset is sufficiently close to the refPoint to avoid inaccuracies.
const MaxDistSqr = 4.0e6;
const distSqr = globalOffset && THREE.Vector3.prototype.distanceToSquared.call(refPoint, globalOffset);
if (!globalOffset || distSqr > MaxDistSqr) {
globalOffset = new THREE.Vector3().copy(refPoint);
}
viewer.loadDocumentNode(doc, bubbleNode, { applyRefpoint: true, globalOffset: globalOffset, keepCurrentModels: true });
The bubbleNode can be either of the following:
bubbleNode = doc.getRoot().getDefaultGeometry()
//Or
const viewables = viewerDocument.getRoot().search({'type':'geometry'});
bubbleNode = viewables[0];
To get AecModelData, please refer to my gist: https://gist.github.com/yiskang/c404af571ba4d631b5929c777503891e#file-index-html-L67
// Call this line before using AecModelData
await doc.downloadAecModelData();
// doc.downloadAecModelData(() => resolve(doc));
See here for details of the AecModelData: https://forge.autodesk.com/blog/consume-aec-data-which-are-model-derivative-api
I've also found success feeding the refPointTransformation into a matrix4.
This way, the orientation of the model is also taken into account. (This is based off Eason's Answer).
const bubbleNode = doc.getRoot().getDefaultGeometry();
await doc.downloadAecModelData();
const aecModelData = bubbleNode.getAecModelData();
const tf = aecModelData && aecModelData.refPointTransformation;
const matrix4 = new THREE.Matrix4()
.makeBasis(
new THREE.Vector3(tf[0], tf[1], tf[2]),
new THREE.Vector3(tf[3], tf[4], tf[5]),
new THREE.Vector3(tf[6], tf[7], tf[8])
)
.setPosition(new THREE.Vector3(tf[9], tf[10], tf[11]))
viewer.loadDocumentNode(doc, viewables, {
placementTransform: matrix4,
keepCurrentModels: true,
globalOffset: {
"x": 0,
"y": 0,
"z": 0
},
applyRefpoint: true,
applyScaling: 'ft',
})
i want disabling context menu , i never worked with actionscript , after some search i find this code for disabling context menu :
stage.addEventListener(MouseEvent.RIGHT_CLICK, function(e:MouseEvent):void {});
stage.addEventListener(MouseEvent.CONTEXT_MENU, function(e:MouseEvent):void {});
Mouse.hide();
i want know how can apply it in VideoJS.as.
Here is source code in ActionScript https://github.com/videojs/video-js-swf/tree/master/src
"I find this code for disabling context menu... I want know how can apply it in VideoJS.as".
Open VideoJS.as... Find the following code (line 57 onwards):
// add content-menu version info
var _ctxVersion:ContextMenuItem = new ContextMenuItem("VideoJS Flash Component v" + VERSION, false, false);
var _ctxAbout:ContextMenuItem = new ContextMenuItem("Copyright © 2014 Brightcove, Inc.", false, false);
var _ctxMenu:ContextMenu = new ContextMenu();
_ctxMenu.hideBuiltInItems();
_ctxMenu.customItems.push(_ctxVersion, _ctxAbout);
this.contextMenu = _ctxMenu;
Change it to become
// add content-menu version info
/*
var _ctxVersion:ContextMenuItem = new ContextMenuItem("VideoJS Flash Component v" + VERSION, false, false);
var _ctxAbout:ContextMenuItem = new ContextMenuItem("Copyright © 2014 Brightcove, Inc.", false, false);
var _ctxMenu:ContextMenu = new ContextMenu();
_ctxMenu.hideBuiltInItems();
_ctxMenu.customItems.push(_ctxVersion, _ctxAbout);
this.contextMenu = _ctxMenu;
*/
this.addEventListener(MouseEvent.RIGHT_CLICK, function(e:MouseEvent):void {});
this.addEventListener(MouseEvent.CONTEXT_MENU, function(e:MouseEvent):void {});
Now try compiling a new SWF output of VideoJS. If it worked correctly there should be no response when right-clicking. Above code is untested (no time) but it's the correct code logic.
Let me know if it's a working solution.
This is my first time on stackoverflow and working with Openlayers & Google Maps.
I've been browsing different forums & sites, including OpenLayers.org, to solve my issue. I've done searches on a combination of the following: openlayers, google map projections, and spherical mercator... but I have not found a solution.
Problem: The KML data from a web service call (func setDataSource) is shifting as I zoom in and out of the map. My guess is that the projections in my code are wrong or perhaps wrongly placed. I don't have any background on map projections so it is difficult to digest mapping terminology online :-(. Can someone help?
//start here
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508)};
//*map = new OpenLayers.Map('map');
map = new OpenLayers.Map('map', options);
var gphy = new OpenLayers.Layer.Google(
"Google Street",
{'sphericalMercator':true});
// Add the background images via WMS
var bglayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {'reproject': true});
//map.addLayer(bglayer);
map.addLayers([gphy, bglayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent(); //* Zoom all the way out, this command also initalizes the map
OpenLayers.Console.log("initialized");
}
function setDataSource() {
OpenLayers.Console.log("Setting data source to " + OpenLayers.Util.getElement('loc').value);
if (layer != undefined) {map.removeLayer(layer)};
if (selectControl != undefined) {map.removeControl(selectControl)};
// Encode the destination url as a parameter string.
var params = OpenLayers.Util.getParameterString({url:OpenLayers.Util.getElement('loc').value})
// Make the http request to the transformer, with the destination url as a parameter.
layer = new OpenLayers.Layer.GML("KML", transformerURL + params,
{
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2,
//projection: new OpenLayers.Projection("EPSG:4326"),
}
});
map.addLayer(layer);
Thank you!!!
I figured out the problem. Instead of GML, I tried using Vector instead like this:
layer = new OpenLayers.Layer.Vector("KML", {
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: transformerURL + params,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
});
I found the solution in this sundials example: http://openlayers.org/dev/examples/sundials-spherical-mercator.html :-) Hope this helps anyone w/ the same problem.