How to use UrhoSharp 3D Moving Imageview in xamarin forms - xamarin

async void CreateScene()
{
Input.SubscribeToTouchEnd(OnTouched);
//want add image view in UrhoSharp Surface for rotatable and 3D image
var imageview = new Xamarin.Forms.Image { Source = "icon.", HeightRequest = 150, WidthRequest = 150 };
scene = new Scene();
octree = scene.CreateComponent<Octree>();
plotNode = scene.CreateChild();
var baseNode = plotNode.CreateChild().CreateChild();
var plane = baseNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Plane;
var cameraNode = scene.CreateChild();
camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
bars = new List<Bar>(size * size);
for (var i = 0f; i < size * 1.5f; i += 1.5f)
{
for (var j = 0f; j < size * 1.5f; j += 1.5f)
{
var boxNode = plotNode.CreateChild();
boxNode.Position = new Vector3(size / 2f - i, 0, size / 2f - j);
var box = new Bar(new Color(RandomHelper.NextRandom(), RandomHelper.NextRandom(), RandomHelper.NextRandom(), 0.9f));
boxNode.AddComponent(box);
box.SetValueWithAnimation((Math.Abs(i) + Math.Abs(j) + 1) / 2f);
bars.Add(box);
}
}
SelectedBar = bars.First();
SelectedBar.Select();
try
{
await plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
movementsEnabled = true;
}

Related

Move an object between two ml5js poseNet keypoints using p5js

I'm trying to make a circle move between two body keypoints – i.e between left and right shoulder. I started with this code to make an object following some position:
var rectLocation;
var x = 50;
var y = 50;
function setup() {
createCanvas(640,400);
rectLocation = createVector(width/2,height/2);
}
function draw() {
background(255);
var target = createVector(x,y);
var distance = target.dist(rectLocation);
var mappedDistance = map(distance, 100, 0, 1.5, 0.5);
target.sub(rectLocation);
target.normalize();
target.mult(mappedDistance);
rectLocation.add(target);
text('hello',rectLocation.x, rectLocation.y);
x = x + 1 ;
if (x > width) {
x = 50;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
So with poseNet I converted x and y values of each keypoint into p5 Vectors and made one location follow another, but it doesn't seem to move and I can't get why. Sketch: https://editor.p5js.org/sebyakin/sketches/LQ7gqwGZH and my code here:
let video;
let poseNet;
let noseX = 0;
let noseY = 0;
let eyelX = 0;
let eyelY = 0;
let shoulderX = 0;
let shoulderY = 0;
let firstLocation;
let target;
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.hide();
poseNet = ml5.poseNet(video, modelReady);
poseNet.on('pose', gotPoses);
// creating empty vectors
firstLocation = createVector(0,0);
target = createVector(0,0);
}
function gotPoses(poses) {
if (poses.length > 0) {
let nX = poses[0].pose.keypoints[0].position.x;
let nY = poses[0].pose.keypoints[0].position.y;
let eX = poses[0].pose.keypoints[1].position.x;
let eY = poses[0].pose.keypoints[1].position.y;
let sX = poses[0].pose.keypoints[5].position.x;
let sY = poses[0].pose.keypoints[5].position.y;
noseX = nX;
noseY = nY;
eyelX = eX;
eyelY = eY;
shoulderX = sX;
shoulderY = sY;
}
}
function modelReady() {
console.log('model ready');
}
function draw() {
image(video, 0, 0);
fill(0,0,255);
// set vectors to keypoints values
firstLocation.set(noseX, noseY);
target.set(shoulderX, shoulderY)
// make a circle follow target loaction
let distance = target.dist(firstLocation);
let mappedDistance = map(distance, 100, 0, 1.5, 0.5);
target.sub(firstLocation);
// target.normalize();
// target.mult(mappedDistance);
firstLocation.add(target);
ellipse(firstLocation.x, firstLocation.y, 50);
console.log(target.x);
}
Where did I go wrong?

Drag ball over the circle in iOS.Xamarin (monotouch)

I am beginner in Xamarin iOS platform. I want the drag ball over the circle border. Please find below image for more details. Thanks in advance :)
I just convert the Swift to C# , origin code here.
nfloat midViewX;
nfloat midViewY;
UIBezierPath circlePath2;
CAShapeLayer shapeLayer2 = new CAShapeLayer();
public override void ViewDidLoad()
{
base.ViewDidLoad();
midViewX = UIScreen.MainScreen.Bounds.Width / 2;
midViewY = UIScreen.MainScreen.Bounds.Height / 2;
var circlePath = UIBezierPath.FromArc(new CGPoint(midViewX, midViewY), 100, 0, (nfloat)(Math.PI*2), true);
var shapeLayer = new CAShapeLayer();
shapeLayer.Path = circlePath.CGPath;
shapeLayer.FillColor = UIColor.Clear.CGColor;
shapeLayer.StrokeColor = UIColor.Red.CGColor;
shapeLayer.LineWidth = 3;
View.Layer.AddSublayer(shapeLayer);
var angleEarthAfterCalculate = (nfloat)(180 * Math.PI / 180 - Math.PI / 2);
var earthX = midViewX + Math.Cos(angleEarthAfterCalculate) * 100;
var earthY = midViewY + Math.Sin(angleEarthAfterCalculate) * 100;
circlePath2 = UIBezierPath.FromArc(new CGPoint(earthX, earthY), 10, 0, (nfloat)(Math.PI * 2), true);
shapeLayer2.Path = circlePath2.CGPath;
shapeLayer2.FillColor = UIColor.Blue.CGColor;
shapeLayer2.StrokeColor = UIColor.Clear.CGColor;
shapeLayer2.LineWidth = 7;
View.Layer.AddSublayer(shapeLayer2);
var dragBall = new UIPanGestureRecognizer(DragBall);
View.AddGestureRecognizer(dragBall);
}
void DragBall(UIPanGestureRecognizer recognizer)
{
var point = recognizer.LocationInView(View);
var earthX = point.X;
var earthY = point.Y;
var midViewXDouble = midViewX;
var midViewYDouble = midViewY;
var angleX = earthX - midViewXDouble;
var angleY = earthY - midViewYDouble;
var angle = Math.Atan2(angleY, angleX);
var earthX2 = midViewXDouble + Math.Cos(angle) * 100;
var earthY2 = midViewYDouble + Math.Sin(angle) * 100;
circlePath2 = UIBezierPath.FromArc(new CGPoint(earthX2, earthY2), 10, 0, (nfloat)(Math.PI * 2), true);
shapeLayer2.Path = circlePath2.CGPath;
}

zxing barcode not displaying any text

I made Barcode generator using ZXing Library but when barcode generate then it wont display text below barcode like
try {
Map<EncodeHintType, Object> hints = null;
hints = new EnumMap<EncodeHintType, Object>(EncodeHintType.class);
hints.put(EncodeHintType.CHARACTER_SET, "ABC-abc-1234");
BitMatrix bitMatrix = new Code128Writer().encode("ABC-abc-1234", BarcodeFormat.CODE_128, 350, 150, hints);
int width = bitMatrix.getWidth();
int height = bitMatrix.getHeight();
int[] pixels = new int[width * height];
// All are 0, or black, by default
for (int y = 0; y < height; y++) {
int offset = y * width;
for (int x = 0; x < width; x++) {
pixels[offset + x] = bitMatrix.get(x, y) ? Color.BLACK : Color.WHITE;
}
}
Bitmap bitmap = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
bitmap.setPixels(pixels, 0, width, 0, 0, width, height);
mImageView.setImageBitmap(bitmap);
} catch (Exception e) {
// TODO: handle exception
}
Maybe it's late to help you but I went through the same problem and was able to solve the following in a C#
var barcodeWriter = new BarcodeWriter
{
Format = BarcodeFormat.CODE_128,
Options = new EncodingOptions
{
Height = 160,
Width = 300,
Margin = 0,
PureBarcode = false
},
Renderer = new BitmapRenderer()
{
TextFont = new Font(FontFamily.GenericSerif, 15)
}
};
var bitmap = barcodeWriter.Write("your content");
bitmap.Save(#"C:\\FULL\PATH\FILE.JPG");

Key down event to change background canvas

So I'm trying to have the down arrow make the background of my canvas change. I'm having trouble just getting the button press to work itself.
Also I was told that I would have to have a function redraw all the shapes that are already there at the beginning as well, which I am also stuck on what to change.
Here is a JSFiddle of what I have going so far, any suggestions are appreciated!
https://jsfiddle.net/u8avnky2/
var mainCanvas = document.getElementById("canvas");
var mainContext = mainCanvas.getContext('2d');
//rotate canvas
function buttonClick() {
mainContext.rotate(20*Math.PI/180);
}
//key down event
window.addEventListener('keydown', function(event) {
if (event.keyCode === 40) {
fillBackgroundColor();
}
});
function fillBackgroundColor() {
var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
var color = colors[Math.floor(Math.random()*colors.length)];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
mainContext.fillStyle = color;
mainContext.fillRect(0, 0, canvas.width, canvas.height);
}
function check() {
mainContext.clearRect(square.x,square.y,square.w,square.h);
}
var circles = new Array();
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function Circle(radius, speed, width, xPos, yPos) {
this.radius = radius;
this.speed = speed;
this.width = width;
this.xPos = xPos;
this.yPos = yPos;
this.opacity = .1 + Math.random() * .5;
this.counter = 0;
var signHelper = Math.floor(Math.random() * 2);
if (signHelper == 1) {
this.sign = -1;
} else {
this.sign = 1;
}
}
//drawing circle
Circle.prototype.update = function () {
this.counter += this.sign * this.speed;
mainContext.beginPath();
mainContext.arc(this.xPos + Math.cos(this.counter / 100) * this.radius,
this.yPos + Math.sin(this.counter / 100) * this.radius,
this.width,
0,
Math.PI * 2,
false);
mainContext.closePath();
mainContext.fillStyle = 'rgba(255, 255, 51,' + this.opacity + ')';
mainContext.fill();
};
function setupCircles() {
for (var i = 0; i < 25; i++) {
var randomX = Math.round(-200 + Math.random() * 700);
var randomY = Math.round(-200 + Math.random() * 700);
var speed = .2 + Math.random() * 3;
var size = 5 + Math.random() * 100;
var radius = 5 + Math.random() * 100;
var circle = new Circle(radius, speed, size, randomX, randomY);
circles.push(circle);
}
drawAndUpdate();
}
setupCircles();
function drawAndUpdate() {
mainContext.clearRect(0, 0, 1000, 1000);
for (var i = 0; i < circles.length; i++) {
var myCircle = circles[i];
myCircle.update();
}
requestAnimationFrame(drawAndUpdate);
}
jsFiddle : https://jsfiddle.net/CanvasCode/u8avnky2/1/
I added a variable known as color globally, so the fillBackgroundColor can access that instead.
var color = "white";
Then in your drawAndUpdate function we just do a fillRect with the color variable using the canvas width and height and it works.
function drawAndUpdate() {
mainContext.fillStyle = color;
mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
for (var i = 0; i < circles.length; i++) {
var myCircle = circles[i];
myCircle.update();
}
requestAnimationFrame(drawAndUpdate);
}

Algorithm of resizing rectangles but keeping the distances between them

i am looking for an algorithm that will resize all rectangles to new width, height of all objects on the scene but keep the distances between them. Is that possible ?
The anchor for each rectangle is Top-Left (0,0). Thank you.
I have found the algorithm, not sure if its the best or optimized.
Basically finding depths and then sorting but depth adding extra or x multiplied by depth. The algorithm should be applied for Y as well.
1.First get the most left unmarked element. (mark when make depths)
2.Find all siblings top/bottom (sibling element which is from pos.x-width to pos.x+width)
3.Mark elements depth.
4.Repeat
Using stacks instead of recursion code is not completely DRY.
vt.iccode.DrawScene.prototype.ClearDepths = function () {
for (var i=0,ii=this.nodes.length;i<ii;i++) {
var node = this.nodes[i];
node.ClearDepths();
}
};
/*
* #private
*/
vt.iccode.DrawScene.prototype.MarkTopSiblings = function(node_start, depth) {
var stack = new Array();
stack.push(node_start);
while (stack.length > 0) {
var node = stack[stack.length - 1];
stack.splice(stack.length - 1, 1);
console.info("marking top :"+node.name+" depth ->"+depth);
node.depth_x = depth;
var pos = node.GetPosition();
var size = node.GetSize();
var next_node = this.GetClosestElementWithinBounds(node, pos.x - size.width, pos.x + size.width, Number.NEGATIVE_INFINITY, pos.y);
if (next_node) {
stack.push(next_node);
}
}
};
vt.iccode.DrawScene.prototype.MarkBottomSiblings = function(node_start, depth) {
var stack = new Array();
stack.push(node_start);
while (stack.length > 0) {
var node = stack[stack.length - 1];
stack.splice(stack.length - 1, 1);
console.info("marking bottom :"+node.name+" depth ->"+depth);
node.depth_x = depth;
var pos = node.GetPosition();
var size = node.GetSize();
var next_node = this.GetClosestElementWithinBounds(node, pos.x - size.width, pos.x + size.width, pos.y + size.height, Number.POSITIVE_INFINITY);
if (next_node) {
stack.push(next_node);
}
}
};
vt.iccode.DrawScene.prototype.GetMostLeftUnmarked = function() {
var s_x = Number.POSITIVE_INFINITY;
var best_match = null;
for (var i=0,ii=0;i<this.nodes.length;i++) {
var node = this.nodes[i];
var pos = node.GetPosition();
if (goog.isNull(node.depth_x) && pos.x < s_x) {
s_x = pos.x;
best_match = node;
}
}
return best_match;
};
vt.iccode.DrawScene.prototype.GetClosestElementWithinBounds = function(node, x_min, x_max, y_min, y_max) {
var found = new Array();
for (var i = 0, ii = this.nodes.length; i < ii; i++) {
var node_test = this.nodes[i];
var pos = node_test.GetPosition();
if (pos.x >= x_min && pos.x <= x_max && pos.y >= y_min && pos.y <= y_max && goog.isNull(node_test.depth_x) && goog.isNull(node_test.depth_y)) {
found.push(node_test);
}
}
var s_distance = Number.POSITIVE_INFINITY;
var best_match = null;
for (var i = 0, ii = found.length; i < ii; i++) {
var node_test = found[i];
var dist = node.FindDistanceBetweenAnchorPoints(node_test);
if (dist < s_distance) {
s_distance = dist;
best_match = node_test;
}
}
;
return best_match;
};
Use like :
this.ClearDepths();
var most_left_node = this.nodes[0];
var stack = new Array();
stack.push(most_left_node);
var depth_x = 0;
while(stack.length>0) {
var node = stack[stack.length - 1];
stack.splice(stack.length - 1, 1);
this.MarkBottomSiblings(node,depth_x);
this.MarkTopSiblings(node, depth_x);
var node_next = this.GetMostLeftUnmarked();
if (!goog.isNull(node_next)) {
//
console.info(node_next.name);
stack.push(node_next);
// return;
}
depth_x++;
}
After we know the depths we can move by x vise versa for y.

Resources