Developing interactive web apps for High Fidelity Web Entity


#1

Limitations

The Web Entity browser is shown as a mobile browser on current implementation, so we don’t have the access to some features like in a desktop browser. For instance, drag & drop, sliders, sortable items, based on jQueryUI doesn’t work.

Solution

Using a simulated events to map touch events. First include jQuery and jQuery-UI in your page:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

Download this javascript:

http://transmissiongate.com/jquery.ui.touch-punch.min.js

Include it in your page:

<script src="jquery.ui.touch-punch.min.js"></script>

Now you can use jQuery-UI as you want

<script>$('#widget').draggable();</script>

More datils on:
http://touchpunch.furf.com/


#2

As a web developer with over a decade of experience I feel it’s my right to chime in. I don’t want my message taken out of context, so I’ll attempt to lighten the impact and remind folks that read this, it is my opinion; however this opinion has developed from working with the web for so long.

That being said…

I will thank you for providing what is effectively a ’ pollyfill ’ to users that rely on jQuery and jQueryUI. I think there is a time and a place for jQ, and it will certainly help users that just want to get up and running quickly.

I do however have my concerns…

If the browser that is built into Interface doesn’t support basic HTML5 and ES6 (current support ES5) then all you are doing is putting a band-aid on a gaping wound. Let us not (as developers) accept another technology relapse like all of the cross-browser non-sense we dealt with from 2006-2010. It was a nightmare and I’m glad (most of it) is over.

I know of at least one other web-dev that would back me in this stance. You know him as @Menithal and I think he would agree that going backwards is not the way forward. We need to push for present-day compatibility and not pollyfill our way forward.

I really respect and appreciate all you’ve done so far @GeorgeDeac, so do please understand I’m only stating what I think is best for the platform, and again, this solution will help many other developers get started quickly if their app is running on jQ.


#3

I do have to agree with @AlphaVersionD here

While the JS does not support some of the functions that modern browsers have, there very good support for HTML5 and CSS3 features that require absolutely no js to create.

The polyfill for jquery is nice, but you have to remember that the web entities and interactions of the users with the web entity are by entirely mouse based. so multitouch is out of the window. It will allow those who are not as deep into the JS world to jump in, but performance wise its not ideal due to the nature of high fidelity web entity instancing: Each Entity and each Overlay with a web site, even if closed will create a instance (tab), and they are much harder to close than tabs in a browser. Thus I highly suggest overoptimizing unlike in the regular web so the behemoth of jquery should be light use as possible.

Sliders are completely doable using HTML5 spec and CSS3 styling. Drag and drop is also doable with current version of Qt high fidelity uses. https://doc.qt.io/qt-5.10/qtwebengine-features.html.

So while ES6 support is not in, HTML5 and CSS3 functionality is and should be utilised to their fullest extent and tested extensively. Fortunately, ES6 can be polyfilled, and Promises work nicely with it as well, but unfortunately, this still does mean lambdas will not work.


#4

I tried Qt Chromium from High Fidelity with these examples and it does not work because it’s seen as a mobile version.

https://html5demos.com/drag/

#5

That’s probably because it cannot recognize the custom user agent. The features are there but none recognize it


#6

This isn’t a problem only in Web Entities. If you open a regular browser window inside Interface (using Ctrl+B), and visit https://html5demos.com/drag/ , it won’t quite work either. The drag & drop operation will start, but it will never finish (you can’t drop whatever you’re dragging).

The same problem happens in the Tablet, too (if you make it show a web page that supports drag & drop).

I suspect that Interface isn’t forwarding the mouse events to the Qt browser while a drag & drop operation is in progress.