Getting position .gltf model (babylon.js) - babylonjs

I am using colyseus and adding gltf model as a character. So, I need to sync the character position perfectly I am able to get position inside import mesh only which is not so proper for sending and setting the positional data model.
I'm using this playground
This I've added as a question in babylon forum
createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera(
"camera1",
new BABYLON.Vector3(0, 5, -10),
scene
);
// Targeting the camera to scene origin
camera.setTarget(new BABYLON.Vector3.Zero());
// Attaching the camera to canvas
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight(
"light1",
new BABYLON.Vector3(0, 1, 0),
scene
);
//create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
var sphere = BABYLON.MeshBuilder.CreateSphere("Sphere", {diameter: 2, segments: 32}, scene);
// Move the Sphere upward meanse in y axis
sphere.position.y = 1;
var inputMap = {};
// This sceneloader is for loading gltf models it constructor takes : location, name, scene
var character = BABYLON.SceneLoader.ImportMesh(
"",
"https://ak228212.github.io/babylonJs/assets/undercover_cop_-_animated/",
"scene.gltf",
scene,
async function (newMeshes, particleSystems, skeletons, animationGroups) {
try {
var dude = newMeshes[0];
var animations = animationGroups;
console.log(animations);
var idleRange = animations[2];
var walkRange = animations[0];
var breathingIdleRange = animations[1];
animations[0].stop();
dude.position = new BABYLON.Vector3(1.5, 1, 0);
scene.actionManager = new BABYLON.ActionManager(scene);
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
BABYLON.ActionManager.OnKeyDownTrigger,
function (evt) {
inputMap[evt.sourceEvent.key] =
evt.sourceEvent.type == "keydown";
}
)
);
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
BABYLON.ActionManager.OnKeyUpTrigger,
function (evt) {
inputMap[evt.sourceEvent.key] =
evt.sourceEvent.type == "keydown";
}
)
);
scene.onBeforeRenderObservable.add(() => {
if (inputMap["ArrowUp"]) {
dude.position.z += 0.1;
animations[0].play();
}
if (inputMap["ArrowLeft"]) {
dude.position.x -= 0.1;
animations[0].play();
dude.rotation.y -= 90;
}
if (inputMap["ArrowDown"]) {
dude.position.z -= 0.1;
animations[0].play();
dude.rotation.y += 180;
}
if (inputMap["ArrowRight"]) {
dude.position.x += 0.1;
animations[0].play();
dude.rotation.y += 90;
}
// scene.createDefaultCameraOrLight(true, true, true);
// scene.createDefaultEnvironment();
//Adding follow Camera
});
} catch (e) {
console.log(e);
}
}
);
// create a built-in "ground" shape;
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width:20, height:10}, scene);
// To add the texture
var groundTexture = new BABYLON.StandardMaterial("grounfTexture", scene);
// Give the location of texture
groundTexture.diffuseTexture = new BABYLON.Texture(
"https://dl.dropbox.com/s/hrnnq3mv0w3yqo9/ground_texture.jpg",
scene
);
ground.material = groundTexture;
return scene;
};

Related

I am trying to programmatically add images to a list/array and access them in a for each loop to change their source image

I have been trying to add images to an array and then access their properties to change their source image in a loop.
Detailed: I create a grid with a layout for each for each grid element, in that layout there is a GridImage, who's source folder is set to "ClosedFolder.png", when I click one of the layouts it should change the clicked layouts folder to "OpenFolder.png".
for (int eachCount = 0; eachCount <= MaxRows / MaxCols; eachCount++)
{
Selectedrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(80, GridUnitType.Absolute) });
for (int newCol = 0; newCol <= MaxCols; newCol++)
{
for (int newRow = 0; newRow <= MaxRows / MaxCols; newRow++)
{
if (folderIndex >= DirectoryArrayList.Count) { break; }
var folder = DirectoryArrayList[folderIndex];
var label = new Label()
{
Text = folder.Name,
FontSize = 12,
VerticalTextAlignment = TextAlignment.Center,
HorizontalTextAlignment = TextAlignment.Center
};
var GridImage = new Image() { Source = "ClosedFolder.png", StyleId = "Image" };
var GridTap = new TapGestureRecognizer();
var Layout = new StackLayout() { StyleId = "StackContent" };
var folderSelection = _mainFolder + "/" + folder.Name;
GridTap.Tapped += async(object sender, EventArgs e) =>
{
FileHandler.CreateTextFiles(folderSelection, "File_" + FileID + ".txt");
files = FolderOptions.AddFilesToList(folderSelection);
lst.ItemsSource = files;
//foreach (Image img in ImageList) I know this i incorrect, just an example of what I think!
//{
// img.Source = "ClosedFolder.png";
//}
GridImage.Source = "OpenFolder.png"; // clicked layout gets its openfolder.png
};
Layout.Children.Add(label);
Layout.Children.Add(GridImage);
Layout.GestureRecognizers.Add(GridTap);
Selectedrid.Children.Add(Layout, newCol, newRow);
folderIndex += 1;
FileID += 1;
}
}
}
Not sure on the declaration of the array and how to implement it.
I added the following into my BasicGrid method ...
var GridImage = new Image() { Source = "ClosedFolder.png", StyleId = "Image" };
var ImageList = new List<Image>{};
ImageList.Add( GridImage );
for (var i = 0; i < ImageList.Count; i++)
{
var img = ImageList[i];
img.Source = "ClosedFolder.png";
} GridImage.Source = "OpenFolder.png"
Just adding to say that Jason's information is the most likely direction I will go in, but as I am still learning it will take me time and I dint want to keep this open while I do that :-)

A button to start in highcharts

Here is my charts, dynamically update. Now im trying to add a button which, to start the dynamic charts.
Ideally, i wish the data to be initialized when i press the button, however it seems that the data could not be initialized simultaneously with the method.Or let's be simply, is it possible to add a button that i could control, when to start the chart and, when to stop or pause?
var time = null;
var bol = false;
var chart;
var data = [];
// function play(){
// var time = (new Date()).getTime(), i;
// for(i = -1999; i <= 0; i += 1){
// data.push([
// time + i *1000,
// Math.round(Math.random() * 100)
// ]);
// }
// }
data = (function () {
var data = [], time = (new Date()).getTime(), i;
for (i = -1999; i <= 0; i += 1) {
data.push([time + i * 1000, Math.round(Math.random() * 100)]);
}
return data;
}());

Avatar image clickable and display on screen Xamarin.Forms

I want to make my avatar image which is in a circle clickable. After click it has to be displayed on screen like in FB. So how I can implement this in my code?
listView.Header = "";
listView.HeaderTemplate = new DataTemplate(() =>
{
var avatarLayout = new StackLayout()
{
HeightRequest = 350,
};
var grid = new Grid();
grid.HeightRequest = 400;
grid.BackgroundColor = Color.White;
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
var bgrImg = new Image();
bgrImg.Aspect = Aspect.Fill;
bgrImg.Source = ImageSource.FromFile("abstract_background.jpg");
var avImg = new CircleImage();
avImg.VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false);
avImg.Source = ImageSource.FromFile("about_background.png");
grid.Children.Add(bgrImg, 0, 0);
grid.Children.Add(avImg);
Grid.SetRowSpan(avImg, 2);
avatarLayout.Children.Add(grid);
Example of my
avatar
You can make an element tappable by using a GestureRecognizer
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
// handle the tap
};
image.GestureRecognizers.Add(tapGestureRecognizer);

Dynamic button background change

I wonder if this possible:
I have added my own button (see follow), and now I wonder if I can change button background color dynamically upon click.
The idea is to simulate a check box enable/disable.
exporting: {
enabled: true,
buttons: {
'realTimeButton': {
id: 'realTimeButton',
symbol: 'diamond',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
_titleKey: "realTimeButtonTitle",
onclick: function() {
// handle change to real time
if ( enable_lastRoundsChart_realtime )
{
enable_lastRoundsChart_realtime = 0;
}
else
{
enable_lastRoundsChart_realtime = 1;
}
}
}
}
It is not possible in simple way, but you can use renderer to prepare your own button and hover / pressed styles.
http://jsfiddle.net/AvpDk/
normalState = new Object();
normalState.stroke_width = null;
normalState.stroke = null;
normalState.fill = null;
normalState.padding = null;
normalState.r = null;
hoverState = new Object();
hoverState = normalState;
hoverState.fill = 'red';
pressedState = new Object();
pressedState = normalState;
var custombutton = chart.renderer.button('button', 74, 10, function(){
alert('aaa');
},null,hoverState,pressedState).add();

Flex, Problem when jpegencoding two bitmaps in sequence

I am creating this "drawing application", where the user can click "preview" and it will take what they made, draw a bitmap, and then I want to split that bitmap into left and right images. I create the first bitmap, encode it as a jpeg, and then use that to cut the left and right out using copypixels. I then reform the images together with a space inbetween in one canvas, and draw that canvas. Everything works fine up there.
When I go to encode the new bitmap, and then offer it to save out, the saved image is blank. I have tested everything up to that point and it all works fine. I see the images on screen, I can save out the first bitmap fine.. but the second one is always blank. Here is some sample code, possibly someone can help me out.
_mainBmd = new BitmapData(_jacketWidth, _jacketHeight);
_mainBmd.draw(_imageHolder);
startEncode(_mainBmd);
private function startEncode(imageBitmapData:BitmapData):void
{
var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
encoder.PixelsPerIteration = 150;
encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encodeDone);
encoder.encode(imageBitmapData);
}
private function encodeDone(event:JPEGAsyncCompleteEvent):void
{
_leftBmd = new BitmapData(sideWidth, sideHeight);
var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
var lPoint:Point = new Point(0,0);
_leftBmd.copyPixels(_mainBmd, lRect, lPoint);
_rightBmd = new BitmapData(sideWidth, sideHeight);
var bWidth:Number = 200;
var sWidth:Number = 111;
var rRectWidth:Number = (bWidth/2 + sWidth) * Constants.print_dpi;
var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
var rPoint:Point = new Point(0, 0);
_rightBmd.copyPixels(_mainBmd, rRect, rPoint);
var lbm:Bitmap = new Bitmap(_leftBmd);
var rbm:Bitmap = new Bitmap(_rightBmd);
//now combine the two images into one holder with a space in the middle
//left Image
var l_Image:Image = new Image();
l_Image.source = lbm;
//right image
var r_Image:Image = new Image();
r_Image.source = rbm;
var newRender:Canvas = new Canvas();
newRender.clipContent = false;
newRender.minHeight = 0;
newRender.minWidth = 0;
newRender.addChild(l_Image);
r_Image.x = 500;
newRender.addChild(r_Image);
fcBMD = new BitmapData(renderW, renderH);
fcBMD.draw(newRender);
startEncode2(fcBMD);
}
private function startEncode2(imageBitmapData:BitmapData):void
{
var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
encoder.PixelsPerIteration = 150;
encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encode2Done);
encoder.encode(imageBitmapData);
}
private function encode2Done(event:JPEGAsyncCompleteEvent):void
{
_data = event.ImageData;
}
private function onSaveRenderClick(e:MouseEvent):void //save button listener
{
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, onSaveComplete);
fileRef.save(_data, 'testImage.jpg');
}
Is there a special reason why you go trough all the loops of creating a Canvas holder and adding Images?
Why not use copyPixels directly on the final BitmapData that you want to encode:
var backgroundColor:uint = 0xffffff;
fcBMD = new BitmapData(renderW, renderH, false, backgroundColor);
var lPoint:Point = new Point(0,0);
var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
fcBMD.copyPixels(_mainBmd, lRect, lPoint);
var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
var rPoint:Point = new Point(renderW - sideWidth, 0);
fcBMD.copyPixels(_mainBmd, rRect, rPoint);
startEncode2(fcBMD);

Resources