JS element and event properties on desktop versus iPad

Using JavaScript with Hype
1

This is a problem of coding elegance rather than how to do it. But I'm hooked on getting it work elegantly.

I'm currently building a photorealistic Hype emulation of an Enigma cipher machine. I need to be able to use the thumbwheels on the three rotors to move their settings up and to set their codebook initial positions for the day. The JS is much neater if I use the same function for all six operations (3 rotors x up/down). The three rotors and their properties are all stored in a single rotors JS object. I've done this by creating a single invisible mouse button as a large rectangle around all three rotors, and then sensing where inside the rectangle the click occurs by using event.offsetX/element.offsetWidth and event.offsetY/element.offsetHeight.

This works great on the desktop, but it's useless on an iPad (the target device). It just moves the wrong rotor or no rotor at all. And because I can't get console.log() to print numerical values on the iPad, I can't diagnose what's going on. So I'm thrown back to appealing to those who have a deeper understanding of JS element and event properties in a Hype environment on different devices in order to point me in the right direction.

Should I admit defeat and built six separate mouse-click functions?

Any comments gratefully received.

2

Generally speaking, these shouldn't behave differently. I think it would be difficult to advise without seeing a zip of the .hype document.

A shot in the dark though might be that you should uncheck Use Touch Events in the Mobile Options section of the Document Inspector and/or check Position with CSS left/top in the Advanced Options section of the Document Inspector.

Note that Hype Reflect does have a quasi-console that should let you see string-formatted console.log statements.

But more importantly, if you plug your iPad via USB into your computer, you can use Safari's debugging tools. See:

Another option is to setup some div where you do a .innerHTML += and add debug info.

2 Likes
3

Keep firing shots in the dark, Jonathan, if they're all as good as that one! I just did as you suggested: unchecked Use Touch Events and checked Position with CSS left/top in the Document Inspector and, lo and behold, it all works perfectly on both desktop and iPad.

Brilliant! Now I'll have a think to try and understand why that is so. I'll try stringifying console.log() outputs in Hype Reflect before and after. Other suggestions also useful.

This is great forum for me to use. Being in the UK, I can post my problem while packing up for the end of the day, knowing that people across the Atlantic might see it and respond to it before I go to bed! Keep up the good work!

1 Like
4

Haha, glad that worked!

Off the top of my head I don't remember some of the nuance, but basically:

  • Use Touch Events touch events are only available on mobile platforms, and have different event structures than "mouse" events. So it might have been the way you were getting the offset fields was different. The mouse event flow is a bit weird on mobile (since there is no mouse) and can feel less responsive sometimes, so touch is the default.

  • Position with CSS left/top typically hype uses the transform:translate() CSS commands for positioning since this typically performs better and allows for subpixel rendering to make animations appear more smooth. I don't recall how the offsetLeft/offsetTop interacts with it, and there shouldn't be a difference in mobile, but sometimes this happens to solve weird quirks. It is more likely you just need to uncheck the touch events and could possibly leave this one (if you didn't try it by itself).

Glad that helped from across the pond :smiley:.

1 Like