Css control over rectangle

1

How can I control the height and width of objects using css. Imagine a graph describing information using rectangular objects, Now I want to change the values using css

2

You would use a transform in your css…
There are some examples of using transforms on the forum but you would do better by googling your question on the web.
for example

3

In general, the first step is to assign a Unique Element ID in the Identity Inspector. This will let you reference in CSS. However the Hype runtime does like to have control over the CSS width/height properties. You can override with the !important directive, but generally it is better to use the Hype JavaScript setElementProperty() API to set the width/height values so the Hype runtime knows about it and there aren’t conflicts. Please see this part of the docs.

4

Thanks for the detailed answer. I used the functions, but the problem is that the bars in My graph growing down direction and not up direction. How do I change the growing direction?

5

@musa

Is this the type of functionality You are referencing?

Hype Demo: GraphBarGrow_JHSv1.hype.zip (12.4 KB)

Clicking on one of the bars in this demo runs the function “GraphBarGrow” (code below) which extends them downwards from a stationary top position:

hypeDocument.setElementProperty(element, 'top', 0, 1.0, 'easeinout')
hypeDocument.setElementProperty(element, 'height', 200, 1.0, 'easeinout')
2 Likes
6

Hey guys, thanks for the interesting discussion. Any advice on how to continue this and adjust this via a text form?

snap

I’ve attempted to give it an ID and then link up the height/top to the BlueGraph and use a On Scene Load js function, but no love:

var y = hypeDocument.getElementProperty('BlueGraphValue', 'innerHTML')
hypeDocument.setElementProperty('BlueGraph', 'top', 200-y, 1.0, 'easeinout')
hypeDocument.setElementProperty('BlueGraph', 'height', y, 1.0, 'easeinout')

And my form:

<textarea rows="1" id="BlueGraphValue" placeholder="30" cols="4" style="border: 0px; background-color: black; color:white;font-size:24px;text-align: right;"></textarea>

Thank you!

GraphBarGrow_Function.hype.zip (15.7 KB)

7 
	///onsceneload
	
	//attach an event to the textarea
	BlueGraphValue.oninput = function(e){
	//try to change the input to a number
var input = Number(e.target.value);
//check wether the input is a number
if(!isNaN(input)){
//set the new height
	hypeDocument.setElementProperty(BlueGraph, 'height', input, 1.0, 'easeinout')

}
3 Likes
8

Sweeeeeeeeet. Danke Hans-Gerd, this is instructive as always, and well-appreciated.