Web App / HTMLViewer and zooming breaking some controls

Targets Web
1

I don’t know if this is on the server side or the htmlviewer side.

I’m running both a Xojo web app (API1) and an HTMLViewer is a second project with the most current build of Xojo.

From the viewer, I am issuing a Javascript to alter the zoom level of the app so that it fits the screen without scrolling or going off the edge.

Once do this, I no longer get CellClick events on a listbox. I can tap from list box to list box and see that the control is selected. Once I have a listbox selected, I can cursor up and down to highlight individual cells, but the CellClick never fires.

Help?!?

2

If you share a sample maybe someone can take a look and help.

3

I’ve put the most simple example of this in the above link.
There is a browser app to be run in Xojo 2022 and a web app example to be run in Xojo 2019.

When simplifying the problem I now see that it’s not that the LIstBox does not receive clicks it appears that the zoom has messed up the interaction with the control due to the scaling.
It is possible to click on a row, but a different row highlights.

Very frustrating.
This is probably the cause of a previously noted WebSegmentedControl issue.

I haven’t checked to see if this occurs with web apps under Xojo 2022 as I inherited this project and it’s too complex to quickly migrate to 2022 (although I’ll do so in the future).

If anyone can think of any magic to fix this, I’d sure appreciate it.

4

I should also say that zooming in Safari doesn’t have the same challenges.

5

Hi @Chris_Halford, I’ve seen you’re modifying document.body.style.zoom by JavaScript.

Please give this code a try. Place it into a constant and send it to the browser on Session.Open, using ExecuteJavaScript:

Xojo.input.getCoordinates = function (target, event)
{
	var results = [];
	var result;
	var offset = {x: 0, y: 0};
	if (target) {
		offset = getPosition(target);
	}
	if (event.touches !== undefined && event.touches.length>0) {
		for (var i = 0; i < event.touches.length; i++) {
			result = {pageX: event.touches[i].pageX, pageY: event.touches[i].pageY};
			result.x = result.pageX - offset.x;
			result.y = result.pageY - offset.y;
			results.push(result);
		}
	} else {
		if (event.pageX !== undefined) {
			result = {pageX: event.pageX, pageY: event.pageY};
		} else {
			result = {
				pageX: event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft),
				pageY: event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)
			};
		}
		result.x = result.pageX - offset.x;
		result.y = result.pageY - offset.y;

		var zoom = document.body.style.zoom || 1;
		result.x /= zoom;
		result.y /= zoom;

		results.push(result);
	}
	return results;
};

What this does is overwriting one of the Xojo’s internal framework functions, to have your modified document.body.style.zoom into account.

This can maybe also fix your issue with WebSegmentedControl. I hope it helps :crossed_fingers:

1 Like
6

I’ve tried, and it’s not working.
Did you mean to excite the javascript within open event of the session to do a “me.ExecuteJavaScript”?

Thanks for the effort.

7

For me it makes a difference. Without the code the click selects a different row, with the code it selects the correct row.

Without Ricardo’s code:
ezgif.com-gif-maker (21)

With Ricardo’s code:
ezgif.com-gif-maker (22)

Code here (kRicardo is the constant):

image
image731×202 62.5 KB

8

Yes @Chris_Halford, try with the steps @AlbertoD just posted.

9

I’ll try tonight with a simple project.
I tried with my “big” project and it didn’t work.

10

I used the sample that you shared with dropbox.
I hope this works on your big project too.

11

Well, happy to confirm that this fix does work for the simple example project I provided.
Thanks to both of you.

Note: if you zoom (overly) small, it seems to trip up again, but you’d have to really be trying to break it if you were using it that small.

Unfortunately, this doesn’t fix my larger project. The project I’m working on is inherited and quite complex so there could be something in it that is fighting against this fix. I’ll investigate further.

I also want to note that I made use of the MBS HTML Viewer and I can get it all to work thanks to Norman Palardy for the assist there!

3 Likes