input file button

[odelia]

I want to do an input button in phaser. 

Now I have it in the HTML but I want it to be part of the game...

<input id="browseinput" type="file" accept="image/*" onchange="getImage(this)" class="inputfile" />
<label for="browseinput"><img id="browserBtn" src="assets/images/UI/uploadBtn.jpg"></label>

Is there any way to do this?

[mattstyles]

Sounds like you've already done it.

There are no problems with mixing Phaser with using vanilla input methods. Why reinvent an input to use canvas rendering if you dont have to?

[odelia]

When I set the Phaser to scale = show_all I don't get the real data of the size and location that i need... 

I want the button to look like it part of the UI...

Do you have any suggestion?  

[mattstyles]

Using standard input boxes is a separate issue to Phaser, if you want them to look a certain way then you'll have to style them. You can do this inline in your JS if that makes sense or you can use CSS.

If you scale your canvas instance/s (via Phaser for example) then  you'll have to also move your input, again, styling is the way to achieve this (just as the canvas element changes size/position via styling).

If you have already implemented your UI using canvas/phaser then it may make more sense for you to continue in canvas rather than extract your UI out to the HTML.

[odelia]

I do style the button with inline css. I just need to figure how to get the correct data (size, location) from the phaser canvas with the scaling.. 

for example - if the phaser canvas scale in 2.5 then i would scale the button the same.. but how do I get the phaser scaling?...

[mattstyles]

I'd guess the answer lies somewhere around http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleFactor