I have made a 3-sided polygon in the shape of a right triangle. I'm attempting to change the height and width of it as per user input. I'm using
var triangle = hypeDocument.getElementById('Triangle');
hypeDocument.setElementProperty(triangle, 'width', 200);
I don't see a visible change in the triangle. When I use hypeDocument.getElementProperty, the triangle has a width of 200 despite the lack of any visible change. I am able to change the location and scale but I really need to be able to change the height and width.
Any ideas one what's going on or tips on how to control the triangle's height and width? Thanks in advance.
What you're trying to do makes sense, especially given how the Hype editor UI works. I've filed this as a bug.
Under the hood, the Hype element (a <div>) has a <svg> element which represents the vector shape. If you just change the width, it will change the width of the element, but the shape's internal anchor points won't change.
Luckily, you can workaround this by using the scaleX instead of the width property. The main difference is that scales are a percentage, so if you want the end result to be 200px, then you'll just need to do a little math to find the proper scale factor.
var triangle = hypeDocument.getElementById('Triangle');
var width = hypeDocument.getElementProperty(triangle, 'width');
var scaleFactor = 200 / width;
hypeDocument.setElementProperty(triangle, 'scaleX', scaleFactor);
Thanks.
I was trying to avoid scale since my triangle has a border and it was scaling that as well. I may just drop the border and use scaleX and scaleY.
If your input is only a number and has min/max values, you could probably also replicate the effect a bit better by having an alternate timeline with two keyframes and a linear timing function. Then you could use the goToTimeAtTimelineNamed() API which would map onto the values via some basic math.
(at least as a "hype" way of doing things... you could of course get a bit crazier with your own code)
I have inputs for both the width and the height. They will increment by as little as 1 pixel between max and min values so it might be easier to use a timeline for width and another for height.
Thanks.
What I was proposing would be a shape morph -- this really can only operate on one timeline since it considers the shape as a whole. With two values (width and height) you're probably doing the correct approach, as long as you don't mind or avoid the line width issue.
I'm trying to produce the effect of shading in the area under the line between the two vertical hashmarks and the time axis as shown in the graphic. The line's placement and slope will be based on a motion the user controls. And the two vertical hashmarks are controlled by the user as well. In half the cases, the area will be the shape of a rectangle. In the remaining cases it will be the shape of a trapezoid. So I was hoping to use a rectangle and a triangle element to do the shading. The rectangle location, width, and height can easily be controlled. But the triangle would be a challenge. Now I'm thinking it might be easiest to make the rectangle and triangle outside of Hype and control their height, width, and location with Javascript.
I was trying one just using three rects. had not got to coding drags, angle etc.
One angled rect and single red border,
one rect with left & right dashed border and below first rect.
The last rect for the black line with sing border.
But ran into the obvious issue of background grid. (visable/hidden overflows)
Was taking too much time this morning so abandoned it.
I was going to suggest that it might be worth using a bit of SVG - the path string for a shape is pretty easy to get going and more relies on just the math being right. However this shows sometimes a Hype-only setup can work quite well .
Finally got back to this project and got the area calculation working using two imported images - a rectangle and a triangle - with setElementProperty. I made the image opacity 50% so that the background grid would show through. Thanks for all the useful advice.
.