Ticket Hash: | 014f736b43951825f5f0266ee595ce129f58a090 | |||
Title: | jsmpeg modification for full iPad use | |||
Status: | Closed | Type: | Feature_Request | |
Severity: | Important | Priority: | Immediate | |
Subsystem: | Resolution: | Fixed | ||
Last Modified: | 2020-11-09 07:11:01 | |||
Version Found In: | ||||
User Comments: | ||||
john added on 2020-07-31 03:37:57:
(text/x-markdown)
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: (text/x-markdown) 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: (text/x-markdown) 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: (text/x-markdown) 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: (text/x-fossil-plain) Patches applied in check-in [15fc2fdc12]. chw added on 2020-11-09 07:11:01: (text/x-fossil-plain) Closing ticket now. |
Attachments:
- mkmin [download] added by chw on 2020-08-02 17:08:08. [details]