cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
616
Views
0
Helpful
2
Replies

Qt and WASM Part Deux

npetrele
Cisco Employee
Cisco Employee

 

Allow me to confess to the mistakes I made right from the start. My biggest mistake was being a man. Men in general don't read the fine manual. Apologies to you more intelligent and less lazy men who do. More on that later.

To begin with, I install Visual Studio Community in order to get a C++ compiler on the system. Just to be sure I have all my bases covered to build anything, let alone a Qt app, I install the MINGW installer to get all the GNU versions of compilers and debuggers. (Incidentally, this is primarily because I choose Windows as my OS for this project. My Linux box already has a plethora of build tools installed.)

I need a program called enscripten to create a WASM, and you get it from emsdk. So I git clone emsdk and build, install and activate it. I run emsdk_env.bat to set the environment variables. I even use the --permanent switch to make sure they were added permanently. They weren't added permanently. I had to go into the environment variables settings to do it, myself. 

For some reason I can't even recall, I was under the impression I would also need LLVM installed. I couldn't build LLVM because I didn't have a cmake.exe in my path anywhere. I'll spare you the deep rabbit hole I went through to get LLVM built and installed because none of it mattered. The bottom line is don't bother to install a separate Cmake like I did, and don't build LLVM. It's not necessary. You don't need LLVM and Qt Creator has its own Cmake

I still can't get any WASM samples to run. That leads me to my RTFM error: Follow that link and you'll see you need emsdk 3.1.25. I let emsdk build, install and activate 3.1.40. When I tell the Qt engineer I can't get the simple WASM sample running, he tells me to check the emsdk version Qt Creator is using, and it is 3.1.40, not surprisingly. He points me to the fine online manual I should have read. I run emsdk install 3.1.25 and emsdk activate 3.1.25. Voila, a basic WASM sample app now runs fine.

There are some great sample WASM apps, but I don't want any of the sample apps they provide for WASM. I want an app called EBikeDesign for my WASM sample. This app lets you examine things like bike speed and even watch the bike navigate. Cisco developers should immediately appreciate the metaphor. Imagine instead that the bike is a network packet, or even data being transferred or synchronized. 

It is still a Qt sample app (I didn't write it), but not designed to be used as a WASM app. The Qt engineer modified the CMakeLists.txt to make it appropriate for WASM for me and walked me through the process of fixing a few things that you should never have to fix -- they updated Qt Designer since then, thus removing some of the roadblocks I experienced. My roadblocks were born from moving my default Documents directory to a larger drive and using a USB external drive for my projects, which is probably atypical for most developers. It confused the hell out of Qt Creator, but shouldn't anymore. 

Anyway, here is the fruit of our labor, the EBikeDesign app: https://www.petreley.net/Qt/EBikeDesignApp.html Granted, it's not a video editor or CAD app, but it pops up virtually instantaneously and runs great. Click on various things, especially the navigate icon, and you'll see what I mean about it being a nice metaphor for packet or data transfer monitoring.

Being a Qt fanboy, I'd love to write some of my own apps for web assembly, but I haven't the time even if Qt extended my evaluation period. I highly recommend licensing Qt Creator. Qt Creator is really for enterprise development, so your company should easily be able to afford it. I'm just a tinkerer, so it's out of my budget. I do still have a couple weeks left of my evaluation period, so I'm going to tinker with some other apps. If I build anything interesting, I'll come back and update you with a Part 三 (Sān). 

Resources:

Fruit of our labor: https://www.petreley.net/Qt/EBikeDesignApp.html

Qt: https://www.qt.io/

Qt Creator: https://www.qt.io/product/development-tools?utm_term=qt%20creator

EMSDK: https://github.com/emscripten-core/emsdk

MINGW-64: https://www.mingw-w64.org/downloads/

A couple of my favorite Qt apps:

Notepad Next (A WIP Qt clone of Notepad++): https://github.com/dail8859/NotepadNext

Shotcut (video editor): https://shotcut.org/

A List of Qt Applications (confession: I do not run Manjaro Linux, I run Kubuntu): https://wiki.manjaro.org/index.php/List_of_Qt_Applications

 

2 Replies 2

npetrele
Cisco Employee
Cisco Employee

As an aside, I used Qt to write quiz show software for "The Golden Penguin Bowl" keynote for Linuxworld. Unfortunately, there was a race condition that I didn't catch until after using the software a couple times. I used a timer on an object and if I pressed a key a split second too late after contestants timed out, the app jumped too far ahead in the questions. I actually wrote the progress to a log so that if the app crashed, I could restart it from the same location. But it was still embarrassing. I fixed the problem later, but never got the opportunity to do the show again. 

Ruben Cocheno
Spotlight
Spotlight

It sounds all fun!

 

Tag me to follow up.
Please mark it as Helpful and/or Solution Accepted if that is the case. Thanks for making Engineering easy again.
Connect with me for more on Linkedin https://www.linkedin.com/in/rubencocheno/