Mobile html5 game for Librem5


#1

Hi

I am developing a web based html5 game.
Try it on:
https://www.pracedru.dk:8888/index.html
(Its designed for portrait mode. movement on keyboard with “wasd” and throw/kick on space)


I would like to test it in the kvm VM build of PureOS with touch simulation. I have the VM running but it is with mouse (simulation).
Does anyone know if this is possible?
Also I would like to add a link to a full screen page to the launcher, but i am not sure if this feature is already built into PureOS…

Br Magnus Jørgensen


#2

Oh i see there is a function for making a launcher


But it does not seem to work.


#3

I got some help from Guido (thanks Guido) to get my launcher on the favorites in the start screen. This is not automated as of todays date 16-Jan-2019, so added it manually with:

gsettings set sm.puri.phosh favorites “[‘org.gnome.Contacts.desktop’, ‘sm.puri.Calls.desktop’, ‘sm.puri.Chatty.desktop’, ‘org.gnome.Calendar.desktop’, ‘org.gnome.Evince.desktop’, ‘org.gnome.Epiphany.desktop’, ‘org.gnome.Terminal.desktop’, ‘epiphany-pracedru.dk-61accde35455eb18a88d72fd1bea6e34fa0b620e.desktop’]”

The last entry is the shortcut entry that Epiphany made (see previous reply) .
Now my start shortcut is in the favorites

Getting it to start in full screen seems to be missing in Epiphany. I have added an issue in the purism source repo about this.


#4

I installed Chromium and did the same thing.
Chromium has a bit better performance on html5 canvas and also has the possibility to go full screen. In fact Chromium covers both the top bar and the bottom bar when it goes fill screen, which is not optimal. But maybe that can be fixed. I’m not even sure if chromium will be built for the arm version of Phosh. Does any one know about that?


#5

I can’t say for sure, but if chromium is packaged for PureOS then there is at least a chance.


#6

This locks like its available for arm64.


#7

I have found a much better solution.
I was trying to make it work with GTK WebKit2, but for some reason loading the page fails. I’m more familiar with Qt so i tried with QWebEngineView.
This works perfectly.

#!/usr/bin/python3

import sys

from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QEvent, Qt, QUrl, QMargins
from PyQt5.QtWidgets import *

app = QApplication(sys.argv)


class WebView(QWebEngineView):
	def __init__(self, parent):
		QWebEngineView.__init__(self, parent)

		self.load(QUrl("http://www.pracedru.dk:8889"))


class MainWindow(QWidget):
	def __init__(self):
		QWidget.__init__(self, None)
		self.setMinimumHeight(720)
		self.setMinimumWidth(360)
		self.setMaximumHeight(720)
		self.setMaximumWidth(360)
		web_view = WebView(self)
		layout = QVBoxLayout()
		self.setLayout(layout)
		layout.setContentsMargins(QMargins(0, 0, 0, 0))
		layout.addWidget(web_view)
		self.installEventFilter(self)

	def eventFilter(self, obj, event):
		if event.type() == QEvent.KeyRelease:
			if event.key() == Qt.Key_Escape:
				print("closing")
				self.close()
				return True
		return False




mw = MainWindow()
mw.showFullScreen()
# mw.show()
app.exec_()

This gives the same performance as on Chromium. and i can control the WebView behavior.
Strangely i have to set the windows size to half the resolution.
Unfortunately the window reference does not show up in the list of open apps.


#8

The need for half of the resolution might be due to the fact that on the phone there is HiDPI scaling on. So that things are in are reasonable size and not super tiny.


#9

I have added tls to my service with letsencrypt:
https://www.pracedru.dk:8888/index.html

This works with the newest versions of firefox and chrome, but not with Epiphany, my QWebEngineView solution or with Firefox 60 (from the Librem5 repo).
Does anyone know why this is?
If so, is there a solution?

The QWebEngineView solutions outputs the following to console:

qt5ct: using qt5ct plugin
[22379:22391:0129/073748.263239:ERROR:nss_ocsp.cc(591)] No URLRequestContext for NSS HTTP handler. host: cert.int-x3.letsencrypt.org
[22379:22391:0129/073748.263265:ERROR:cert_verify_proc_nss.cc(918)] CERT_PKIXVerifyCert for www.pracedru.dk failed err=-8179
js: Uncaught ReferenceError: jstProcess is not defined

Epiphany result:


#11

Guido and Sean quickly found my mistake (thanks Guido and Sean).
I did not use the full certificate chain. It works now.


How powerful is the Librem 5, and how could I make games for it?