How to move a Helix sphere object in WPF? - helix-3d-toolkit

I'm new to Helix and liking it so far, I'm building a WPF app that loads the Helix viewport window inside a panel, I then instantiate a cube (CubedVisual3D) via a create button in WPF and it creates the cube, however when I go to click or drag/move it, it doesn't move around. How do I do this? Best approach?
example image
private void Helix_ViewPort_MouseDown(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("Mouse down.");
Point mousePos = e.GetPosition(MyViewPort);
PointHitTestParameters hitParams = new PointHitTestParameters(mousePos);
HitTestResult result = VisualTreeHelper.HitTest(MyViewPort, mousePos);
RayMeshGeometry3DHitTestResult rayMeshResult = result as
RayMeshGeometry3DHitTestResult;
if (rayMeshResult != null)
{
MeshGeometry3D mesh = new MeshGeometry3D(); mesh.Positions.Add(rayMeshResult.MeshHit.Positions[rayMeshResult.VertexIndex1]);
mesh.Positions.Add(rayMeshResult.MeshHit.Positions[rayMeshResult.VertexIndex2]);
mesh.Positions.Add(rayMeshResult.MeshHit.Positions[rayMeshResult.VertexIndex3]);
mesh.TriangleIndices.Add(0);
mesh.TriangleIndices.Add(1);
mesh.TriangleIndices.Add(2);
GeometryModel3D marker = new GeometryModel3D(mesh, new DiffuseMaterial(Brushes.Blue));
}
Console.WriteLine(result);
}

Please refer to the manipulator demo. There are many demos under helixtoolkit github source.

Related

How to drag and drop 2D UI image on 3D Game object and then instantiate 3D game object at the position where we dropped Our 2D UI image?

I have a cube in my scene so what I want is to drag and drop a 2d UI image of wrench tool over the cube and as soon as I drop that image on 3d cube the wrench prefab must be instantiated there.
Here is an image showing what I need
I am using below code to drag my UI Image around the scene but dont know how to drop this on 3D Cube and instantiate a wrench prefab
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class wrench : MonoBehaviour {
public bool Dragging = false;
public bool collision = false;
Vector3 position;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
public void BeginDrag(){
position = gameObject.transform.position;
Dragging = true;
}
public void Drag(){
transform.position = Input.mousePosition;
}
public void Drop(){
if (!collision) {
gameObject.transform.position = position;
}
Dragging = false;
}
}
usually on stack overflow you should add some information about what you did and show some code so we can help figure out what is the problem in your approach. People won't write all the code for you without knowing what your project currently look like.
That being said, if you don't have anything to show yet and just wonder where to start, here are an idea:
You can get the position of the mouse in the world, and shoot a ray from it. Then check if this ray hits and object. like this:
if (Input.GetMouseButtonUp(0))
{
ray = Camera.main.ScreenPointToRay(Input.mousePosition);
if (Physics.Raycast(ray, out hit))
{
Debug.Log(hit); // Find a way to figure out what object you hit
}
}

How to display globe view (3D view) of Maps in Xamarn.forms

We need to show selected cities on 3D map of earth in Android, iOS & Windows.UWP using Xamarin.Forms. Currently we are using Xamarin.Forms.Maps, but it only shows 2D map of earth.
How do we go for 3D map of earth?
Note: We will require zoom-in feature of map as well.
If you want something like Google Earth you're probably going to have to create your own implementation. What you can do in Xamarin Forms however is use the existing Xamarin.Forms.Maps controls and add what's called a camera. Basically this is a viewpoint from which you look upon the map. These can be in 3D space so it looks like you have a 3D map. You can create this using custom renderers.
Within these custom renderers you will come across things like pitch, heading and distance. This image show what's what:
iOS custom renderer
[assembly: ExportRenderer(typeof(Map3d), typeof(MapView3dRenderer))]
namespace MyApp.iOS.Renderers
{
public class MapView3dRenderer : MapRenderer
{
MKMapView _nativeMap;
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.NewElement != null && Control != null)
{
_nativeMap = Control as MKMapView;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (_nativeMap == null)
return;
if (e.PropertyName == "VisibleRegion")
UpdateCameraView();
}
void UpdateCameraView()
{
var target = new CLLocationCoordinate2D(50.890119f, 5.857798f);
//Enable 3D buildings
_nativeMap.ShowsBuildings = true;
_nativeMap.PitchEnabled = true;
// Attach the camera
var camera = MKMapCamera.CameraLookingAtCenterCoordinate(target, 650, 60, 0);
_nativeMap.Camera = camera;
}
}
}
Android
For Android I don't have a custom renderer ready but you should be able to figure it out. It also involves attaching a Camera object. This time you add it to an instance of GoogleMap.
// Create the camera
CameraPosition cameraPosition = new CameraPosition.Builder()
.Target(location)
.Tilt(45)
.Zoom(10)
.Bearing(0)
.Build();
// Convert to an update object
CameraUpdate cameraUpdate = CameraUpdateFactory.NewCameraPosition(cameraPosition);
// Attach the camera
map.MoveCamera(cameraUpdate); // map is of type GoogleMap
Check out the Android docs on how this works.

Add Image dynamically in runtime - Unity 5

In my unity based Android game I wish to add the image dynamically based on the number of questions in each level. The image is shown for reference. Each correct answer will be marked in green and the wrong one in red. I am new to unity and trying hard to find steps to achieve this.
Any help with an example for this requirement will be a great help.
I once wrote a script for dynamically creating buttons based on each level. What I did was creating the first button on the scene and adding the other buttons based on the first one. Below is the shell of my code:
// tutorialButton and levelButtons are public variables which can be set from Inspector
RectTransform rect = tutorialButton.GetComponent<RectTransform> ();
for (int i = 1; i < levelSize; i++) {
// Instantiate the button dynamically
GameObject newButton = GameObject.Instantiate (tutorialButton);
// Set the parent of the new button (In my case, the parent of tutorialButton)
newButton.transform.SetParent (levelButtons.transform);
//Set the scale to be the same as the tutorialButton
newButton.transform.localScale = tutorialButton.transform.localScale;
//Set the position to the right of the tutorialButton
Vector3 position = tutorialButton.transform.localPosition;
position.x += rect.rect.width*i;
newButton.transform.localPosition = position;
}
I am not exactly sure if this is the right approach as it may or may not give unexpected results depending on different screen sizes and your canvas, but hopefully it gives you an idea about dynamically creating objects.
I'm not sure if this helps, but if you have all the images in the scene under a canvas, with this you just need to drag the canvas on the script and use
//level-1 is to keep the array notation
FindObjectOfType<NameOfScript>.ChangeColor(level-1,Color.green);
or you can do also
//level-1 is to keep the array notation
FindObjectOfType<NameOfScript>.RevertColor(level - 1);
This is the script:
//Keep it private but you still see it in inspector
//#Encapsulation :)
[SerializeField]
private Canvas _canvas;
private Image[] _images;
//keep the original colors in case you want to change back
private Color[] _origColors;
void Start () {
_images = GetComponentsInChildren<Image>();
_origColors = new Color[_images.Length];
for (int i = 0; i < _images.Length; i++)
{
_origColors[i] = _images[i].color;
}
}
//Reverts the color of the image back to the original
public void RevertToOriginal(int imageIndex)
{
_images[imageIndex].color = _origColors[imageIndex];
}
//Change to color to the coresponding index, starts from 0
public void ChangeColor(int imageIndex, Color color)
{
_images[imageIndex].color = color;
}
P.S If you want it visible only at the end you can make a method where you enable = (true or false) for the canvas. So you keep it false till the end of the level and you make it true when you want to show, while after every answer you call the ChangeColor depending on the result.
To make it easier you can use:
NameOfScript variableName = FindObjectOfType<NameOfScript>();
and after that you just call
variableName.ChangeColor(level - 1, Color.green);
Also it does not matter where you put the script. I would make some kind of manager(empty GameObject) in the scene and put it there.

Custom ListPopupWindow rendered in different widths

I am using Android.Support.V7.Widget.ListPopupWindow as a Drop-Down Menu from a Button within my layout. Here is the code snippet I am using
void MenuIcon_Click (object sender, EventArgs e)
{
popupWindow = new Android.Support.V7.Widget.ListPopupWindow (this);
popupAdapter = new MenuPopUpAdapter (this,selectedIndex,menuList);
popupAdapter.ItemClick+= PopupAdapter_ItemClick;
popupWindow.SetAdapter (popupAdapter);
popupWindow.AnchorView = menuButton;
Display display = WindowManager.DefaultDisplay;
Point size = new Point();
display.GetSize (size);
int width = size.X;
popupWindow.Width =160;
popupWindow.Show ();
}
But while debugging I noted that, even though I have given it a static width, it is rendered differently in different devices. What is causing this issue ?
This is because of the different screen densities in Android devices. You need to mention dimensions in DPs(Density Independent Pixels) to overcome this issue. This documentation from Google will be a nice read
You can get the corresponding pixel value to be mentioned while setting dimensions programatically from this method.
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = Resources.DisplayMetrics;
int px = (int)Math.Round(dp * (displayMetrics.Density));
return px;
}
You may modify the code as above to fix the issue
popupWindow.Width =dpToPx(160);

Cancel touches events on Windows Phone

I have a list on images in a Pivot control. If you touch an image, it navigates to another view. If if flick through a new pivot and touch the image meanwhile, it navigates.
I noticed the Facebook app or the native photo albums don't have this bug.
Any idea ?
edit: the code :
Image img = new Image();
Delay.LowProfileImageLoader.SetUriSource(img, new Uri(adViewModel.Photos[k].ThbUrl));
img.Width = 150;
img.Tag = k;
img.Height = 150;
img.MouseLeftButtonDown += new MouseButtonEventHandler(launch_Diapo);
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
PhotosGrid.Children.Add(img);
If you can show your code we can probably provide a more specific answer.
However:
I'm guessing you're using MouseButtonLeftDown or similar to detect the touching of the image. Rather than this, use the Tap gesture from the toolkit. This should prevent the issue you're having.
There is a possible alternative to disable the pivot gesture while you're touching the image, but depending on how you're using the image within the pivotItem this may end up preventing proper pivot navigation.
You can add the Tap event in code like this:
var gl = GestureService.GetGestureListener(img);
gl.Tap += new EventHandler<GestureEventArgs>(gl_Tap);
and the handler would be something like this. (but actually doing something useful-obviously.)
void gl_Tap(object sender, GestureEventArgs e)
{
MessageBox.Show("tapped");
}
Even I had a similar problem . What i did is ,check for MouseButtonLeftDown position and MouseButtonLeftUp position .If they are Equal navigate else do nothing .I will paste the code below.
Point temp;
void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
temp = e.GetPosition(null);
}
void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Point point = e.GetPosition(null);
if (point == temp)
{
this.NavigationService.Navigate(new Uri(...));
}
}

Resources