In my never-ending quest to make my life easier, I've encountered something to make it more difficult.
Has anyone had any experience with why creating or editing objects in a Google Slide with Google Apps Script results in an inaccurate floating point version that's kinda close?
Example, creating an object:
SlidesApp
.getActivePresentation()
.getSlides()[0]
.insertShape(SlidesApp.ShapeType.RECTANGLE, 20, 20, 200, 200);
But the resulting rectangle has these properties:
Top: 20
Left: 20
Width: 200.00787401574803
Height: 200.00787401574803
And what's just as bad is the top and left 1px borders aren't pixel perfect as you'd expect given the correct top and left whole number value.
I discovered this because my first attempt at all this was to round the x/y,w/h to get shapes to at least be clean on the page, and that resulted in the same issues.
Some more digging shows 2 things.
1) These crazy floats (rounding errors) aren't the cause of the blurring of my objects on the slide. They can safely be ignored.
2) It seems the pixel values a slide has are a multiple of .375. So to move an object 1px to the right, you actually have to move it .375 to the right. If you want to round the values of a slide's objects, you need to round the result of the value * 2.66666, then multiply the result by .375.
Example:
pageElements[0].setTop(Math.round((pageElements[0].getTop() * 2.6666666666666))*.375);
So now the original goal of pixel-perfect editing of objects in a sidebar tool I create is now possible. Whew!
Related
For example there is an image using canvas with a rectangle in World Space. In doing so the camera/device can look around freely with the image placed into the "real" world. I wonder if there is a way to limit that "movement", spanning left to right, top to bottom but the device/camera view is limited at a certain point. Even if users turn the device/camera 360degrees, the view is stuck at a certain point. Say if the user pans left the camera/device stops at rotationY: 9, If right then stops at rotationY :-15, rotationX is stuck at 0.
I saw there's a BoundBox in the documentation but not sure what that is. There's a DeviceMotionModule but no idea how to use it. I don't know what the script example given is suppose to do.
Look into using DeviceMotion. https://sparkar.com/ar-studio/learn/documentation/reference/classes/devicemotionmodule
The script example rotates the 3d plane according to the rotation of the phone.
You will have to do some maths to position your objects according to rules and signal you get from DeviceMotion.
Using the reactive module you can access the "Clamp" method which is actually made to restrict values between two bounds. I recently found this out because I had a similar problem. From this page
clamp(x: ScalarSignal, min: ScalarSignal, max: ScalarSignal): ScalarSignal
Returns a signal with the value that is the value of the given x signal constrained to lie between the values of the given min and max signals.
Note: The behavior is undefined if min is greater than max.
Does anyone know how to put a margin at the top of the chart? I don't know if it's possible or a bug.
I already tried to modify the .margin({top: x, right: x, bottom: x, left: x}) but this is not the margin that I'm looking for. Setting the chart.yDomain() isn't good because I want the chart to rescale.
EDIT
My interest is that the linewithfocuschart rescale, not just force the domain.
The issue seems to be when the tooltip appears at the highest point in the chart. Maybe a bug, not really sure.
But here's one way of doing it, might not be the best way:
chart.forceY([0,160]);
By looking at your chart I'm assuming that 140 is the highest value in you chart. So I'm forcing the Y axis on the chart to show values between 0-160.
Update
Earlier I suggested the use of chart.forceY([0,160]); as a work around to adding margin to the chart top so the tooltips are clearly visible with the highest points. Although this approach only makes changes to the main chart and not the focus chart.
After some further investigation, I found out that you could use the following to rescale the chart and the focus:
chart.lines.forceY([0, yMax])
chart.lines2.forceY([0, yMax])
Here's a working example of using with a NVD3 lineWithFocusChart(). I have also got the yMaxdynamically in line 15 of my code.
Following up on my question from yesterday:
SciChart - showing labels for all ticks
Thanks to the answer I was able to get the label density where I needed it. But I still have problems with label placement. As you can see in the screenshot, rotating the labels caused them to stick upwards into the graph. I need them below the axis. I've tried everything I could find in the API that I thought might help me:
a TranslateTransform - I tried moving both X and Y both ways. No
result.
VerticalAnchorPoint and HorizontalAnchorPoint - setting
VerticalAnchorPoint to Center actually moved the labels, but only by
3mm and in the wrong direction.
Horizontal/Vertical
Alignment/ContentAlignment - didn't do anything.
I've even tried
bloating the labels by appending a lot of spaces to the strings. A desperate attempt, I know.
Furthermore, the horizontal position of the labels is not correct either. In the screenshot you can see the first bump on the graph goes down on what looks like CF.02. But in reality it's set to CF.01. It would seem the labels are moved to the left of their corresponding tick. I need them to be displayed below the center of their respective tick, like the original solution.
[edit: image removed to prevent potential client IP issues]
In the SciChart's WPF Xaml Styling a Chart example there is a demonstration of how to rotate labels by changing the AxisBase.TickLabelStyle.
This uses RenderTransform to rotate labels by 15 degrees. However, if you use 90 degrees, the labels overlap the surface.
Changing the RenderTransform to LayoutTransform forces labels to be drawn in the correct place (below the axis).
You can read more about the difference between RenderTransform and LayoutTransform here.
I'm not very good with radial calculations, I can't imagine thus I can't be sure. I need some explanation of Math.atan2() thing, please.
Usual task - to make an object rotate after the mouse. I get the differences, get the angle, I see angles in the text areas and DIRECTLY the object does follow the mouse. What I need now is everything to be smooth. I need angles to be 0-360 but after 180 object rotation becomes -180 and counts backwards, and mouse rotation becomes -90 after 270 and also counts back to 0.
More deeply, I want a smooth rotation, it means a set speed of say 2 per frame, to meet the mouse angle the shortest way. It takes to set conditions and I can't do that cause I don't even understand the logic of these values. They are almost random! I don't need it to be done or copied, I need to understand to move on so if you could please explain how does it work and what I do wrong...
Code is simple:
angle = Math.atan2(deltaY,deltaX)/(Math.PI/180) + 90; //+90 cause it lacks it to look at the mouse//
Object01.rotation = angle;
So the problem is I don't even get how it works... if 2 values are different the object can't point at the mouse but it does. Numbers lie and if I need something based on these numbers it will be wrong. Very wrong... Need organization. Meaning I want everything to be ready for further coding that will be based on the rotations to not jump up and down cause of misfit ends.
Add: Explanation of how does it happen, what I described above. Why such a chaos of the values? And an advice on how could I arrange it for further coding, just as I said. Animation alone wont work if I want to make rotation an element of important events such as shooting direction and aiming speed. Or changes of speed rotation of a lockpicked lock. Or anything much more complicated that wont work if I don't make straight and clear values: from A to Z, from 1 to 10, no 8s between 2 and 3, no R before B, no mouse angle 270 when object facing it -90 when they both started from 0 and reached 180 together.
Oh, and as I said, mouse facing works but when I try to make a certain speed of chasing mouse the shortest way it turns the object wrong directions in all 4 quarters. I assume it's also about this arctangens thing that has issues with delta values becoming negative in different quarters. And when I change it, some other value goes wrong... So I need to know exactly what I'm doing to know what's wrong and how to fix it. So yep. Need explanation. Please.
Add2: angleZ = Math.atan2(oppSide,adjSide)/(Math.PI/180);
So I divided rotation to 4 quarters, for each I count atan as opp. side to adj. side, then add 90, 180 and 270 respectively. My mouse rotation does 360, but the object that follow through simple object.rotation = angleZ; still goes to 180, then from -180 to 0 on the left side. Why does it ignore the simple command? The rotation fits but I need it to be equal, no surprises! Why is it happening? How can a number I directly set to be equal to another number as a base of the action change itself to the one of same rotation but completely different number? It doesn't even know it's degrees! It's as simple as "object.rotation, please be equal to the number I choose!"
It's just different coordinate systems. Like how x starts at 0 at the left of the stage, goes +x to the right, and -x to the left, object rotation starts at 0˚ pointing up, and goes +180˚ clockwise and -180˚ anti-clockwise.
Math.atan2 happens to start at 0 pointing left (-x), and go +270˚ clockwise and -90˚ anti-clockwise, which is annoying, but it just means you have to convert between coordinate systems by adding 90˚.
You can spin something around over and over of course, so the numbers jump so that they always stay within the same range, because 361˚ is the same as 1˚, and -270˚ is the same as 90˚. You can tell an object to rotate outside of the -180˚ to 180˚ range, and it will normalise the rotation to within those values.
As mitim described, to smoothly animate rotation you'll either need to use Event.ENTER_FRAME, a Timer, or a tweening library like TweenLite. Most tweening libraries can work out the shortest rotation direction for you, but otherwise you can simply calculate both and see which is smaller.
As an idea, since it seems like you know the angle you need to rotate towards and it's direction, would it be easier to just animate towards that angle to get your smooth rotation? Basically treat it like any other animatable property and just add on your rotation speed (2 degrees it looks like) per frame tick, until it reaches the desired rotation.
Find angle amount needed to rotate by
Figure out if clockwise or counter clockwise direction and set the rotation amount. This can be figured out by checking if the angle is great then 180 / positive or negative
Add the rotation amount * direction every frame tick, until the desired rotation is less then or equal to the rotation amount per frame
Set rotation to desired rotation
I'm wonderring if anyone can help me with making sure my... uhhh ... Z-index (bad pun, you'll see why in a moment) is in the wrong order. I've been doing this for a few hours straight now and my eyes are going buggy - but - maybe leaving a question on Stack overnight will help push this in the right direction.
I've been working on the code for https://github.com/AlexChesser/jsSprite and I'm as far as the 6th test. Use the W key to run, A and D to turn left and right: http://chesser.ca/jsSprite/06-brainnsss....php (Gettit? Z-Index?! Hilarious).
Anyways, You'll notice that if you run around the screen for a bit. the individual Zombies' white squares / dirty rectangles overlap the other zombies' squares. When working with multiple overlapping sprites, how does one go about making sure they all get drawn without upsetting any of the other sprites?
(You see z is for zombies, but z index like when you're dealing with overlapping in CSS - probably way funnier when you've been coding for a number of hours straight).
Thanks for your
Brainsss......
It's not a z-index issue, your zombies themselves are okay.
Your problem is really with the second line of drawFrame
drawFrame: function(){
Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
// I am trouble:
MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);
It is clearing a rectangle of the main canvas where the zombie once was every time you draw a zombie, which can affect nearby objects!
So instead you should be clearing the entire canvas each time.
Try commenting out the MainContext.clearRect in drawFrame, and instead add one in runloop like below. It should fix your problems.
runloop = function(m) {
// New clear put here!
MainContext.clearRect(0,0,canvas.width,canvas.height);
m.drawFrame();
for (Z in Zarr) { // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh...
Zarr[Z].pointTo(m);
Zarr[Z].drawFrame();
MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
};
MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};
How about sorting your array (Zarr) by the y coordinate Ypos of each zombie before rendering? Or are you getting at the problem with (a lack of) transparency?