View Ticket
Not logged in
Ticket Hash: 014f736b43951825f5f0266ee595ce129f58a090
Title: jsmpeg modification for full iPad use
Status: Review Type: Feature_Request
Severity: Important Priority: Immediate
Subsystem: Resolution: Fixed
Last Modified: 2020-08-03 05:54:19
Version Found In:
User Comments:
john added on 2020-07-31 03:37:57:

The current jsmpeg suffers from two minor issues:

  • there is a 5 pixel grey border around the mpeg stream, which prevents a resolution match between a tablet (say, iPad) and the app

  • browser chrome is displayed, which prevents full screen use on iPads, again causing resolution mismatch

The file in question is: https://www.androwish.org/index.html/file?name=jni/SDL2/src/video/jsmpeg/data/index.html&txt=1

Another programmer (Jonathan Li) has worked on this problem, and has the recommended patches to solve these two issues.

I am inviting him to add info to this ticket.


john added on 2020-08-02 07:41:52:

Apologies if this is answered elsewhere, but is there a way for me to unpack undroidwish, modify a file, and repack it?

I can unzip undroidwish, but I'm unclear how to put it back into an executable again afterwards.

I wanted to do this, to test the jsmpeg modifications we're working on, mentioned above.

Also FYI another of my customers has made a very simple "webview" iPad/iPhone app, which goes to a predefined TCP/IP-port combination.

In combination with undroidwish/jsmpeg, this makes for a very simple "native" iPad app, without Christian Werner ever needing to learn anything about iOS.

It's open source, available at https://gitlab.com/bkeller/decent-example

Example of this iPAd app, running on undroidwish. http://magnatune.com/p/IMG_0049.png

There are a few small HTML things for us to improve in the jsmpeg code, and then this becomes a fairly acceptable iPad solution for Androwish programmers.


chw added on 2020-08-02 17:07:52:
See the attached snippet "mkmin" which should give an idea
on how a undroid/vanillawish app can be repackaged.

anonymous added on 2020-08-02 22:17:30:

The proposed changes will:

  • allow iOS Safari to open a bookmark pinned to the home screen without showing the browser controls
  • re-use favicon.ico as the pinned icon
  • disable the border and margin properties for touch/mobile devices
--- jni/SDL2/src/video/jsmpeg/data/index.html
+++ jni/SDL2/src/video/jsmpeg/data/index.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
   <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/favicon.ico">
+  <meta name="apple-mobile-web-app-capable" content="yes">
   <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
   <meta name='viewport' content='width=device-width, initial-scale=1.0 user-scalable=no' />
   <title></title>
   <style type='text/css'>
     body {
@@ -23,10 +25,17 @@
       /* transform: translate(-50%, -50%); */
       border: 5px solid #777;
       margin: 10px;
       /* cursor: crosshair; */
       cursor: none;
+    }
+    @media only screen and (hover: none) and (pointer: coarse) {
+      #videoCanvas {
+        border: 0px;
+        margin: 0px;
+        cursor: none;
+      }
     }
     .fkeys {
       /* position: absolute; */
       top: 0%;
       left: 0%;

anonymous added on 2020-08-03 00:44:43:

One more possible change to automatically resize the canvas style for touch/mobile devices. Left it as a func in case you want to add a button for it in the future. I'd noticed that going from window->full screen->window on desktop will leave the canvas style set for the full screen resolution.

--- jni/SDL2/src/video/jsmpeg/data/jsmpg-vnc.js
+++ jni/SDL2/src/video/jsmpeg/data/jsmpg-vnc.js
@@ -356,10 +356,31 @@
 
 var touchKeys = document.querySelectorAll('.key');
 for( var i = 0; i < touchKeys.length; i++ ) {
 	defineTouchButton(touchKeys[i], touchKeys[i].dataset.code);
 }
+
+var resizeFunc = function() {
+	var w = 1.0 * window.screen.width / window.screen.height;
+	var c = 1.0 * canvas.width / canvas.height;
+	if (w > c) {
+		sw = Math.round(100 * c / w);
+		sw = '' + sw + '%';
+		sh = '100%';
+	} else {
+		sw = '100%';
+		sh = Math.round(100 * w / c);
+		sh = '' + sh + '%';
+	}
+	canvas.style.width = sw;
+	canvas.style.height = sh;
+	canvas.style.border = '0px';
+}
+
+if (matchMedia('only screen and (hover: none) and (pointer: coarse)').matches) {
+	resizeFunc();
+}
 
 var zoomFunc = function(ev) {
 	var notfull = false;
 	if ( document.webkitFullscreenElement ) {
 		document.webkitExitFullscreen();
@@ -378,24 +399,11 @@
 		canvas.style.width = null;
 		canvas.style.height = null;
 		canvas.style.border = canvas.savedBorder;
 		return;
 	}
-	var w = 1.0 * window.screen.width / window.screen.height;
-	var c = 1.0 * canvas.width / canvas.height;
-	if (w > c) {
-		sw = Math.round(100 * c / w);
-		sw = '' + sw + '%';
-		sh = '100%';
-	} else {
-		sw = '100%';
-		sh = Math.round(100 * w / c);
-		sh = '' + sh + '%';
-	}
-	canvas.style.width = sw;
-	canvas.style.height = sh;
-	canvas.style.border = '0px';
+	resizeFunc();
 	if ( gui.webkitRequestFullscreen ) {
 		gui.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
 	} else if ( gui.mozRequestFullScreen ) {
 		gui.mozRequestFullScreen();
 	} else if ( gui.msRequestFullscreen ) {

chw added on 2020-08-03 05:54:19:
Patches applied in check-in [15fc2fdc12].

Attachments: