My First Hype Project!

[mhmdshawqi (mohamed shawqi)]

This is my first project in Hype and I am super hyped !

My project consists of 4 screens.
Screen 1: List of Buttons. Click on a button, takes you to Screen 2.
Screen 2: Images displayed based on the selected button. Has 2 more options buttons to take you to screen 3 and 4 respectively.
Screen 3 and 4: Transitioned from Screen 2. Has different images like previous screen, based on the button selected from screen 1.

I need to do it programmatically to avoid recreating the same scene for each button.

1. My first scene should display list of images and when I click on them it should take me to the next screen. Should I create these as images with OnClick actions or can I create a button and fill it with an image?
2. How do I define the name of the objects in the scene so that I can use them in the function ? Is it the unique element ID under the Identity tab?
3. How do I create the ‘set’ function in Screen 2 that will set the image value of my objects that I defined programmatically?
4. How can I call the set function from the first scene and set a parameter of the clicked object, or how do I pass a value from one scene to another (like segues in iOS, intents in Android)

Any suggestions or best practices? I have been searching around the forum and the documentation and found some useful examples.

I have plans to make an iOS and Android App based on this as well.

[DBear]

@mhmdshawqi

My first scene should display list of images and when I click on them it should take me to the next screen. Should I create these as images with OnClick actions or can I create a button and fill it with an image?

This is one way to do it.

@mhmdshawqi

How do I define the name of the objects in the scene so that I can use them in the function ? Is it the unique element ID under the Identity tab?

You can use the ID yes. I would run a conditional (if ... else) to check which image has been clicked. (Hint: You can also use the "element" argument as this would point to whatever element you clicked to run the function.) e.g

if (element.id == "myID"){
// do something...
}

I would store whatever reference to the image you need for the next scene in a global variable and set it here.

@mhmdshawqi

How do I create the 'set' function in Screen 2 that will set the image value of my objects that I defined programmatically?

If you do what I suggested above with the global variable then you can use this and the Hype API

hypeDocument.setElementProperty(globalVariable, 'background-image')

@mhmdshawqi

How can I call the set function from the first scene and set a parameter of the clicked object, or how do I pass a value from one scene to another (like segues in iOS, intents in Android)

kind of answered this previously.

Best thing to do is start working on a doc and come back if you need anything. And, of course share a document if you can.