How to import a html into a existing qt application with C++ architecture

htjane

Hi all,
I'm new to QT so I'm trying to provide as many details as I can.
I have a QApplication from a colleague that was built in a C++ architecture:

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "Communications/logger.h"

int main(int argc, char *argv[])
{
    #if defined(Q_OS_WIN)
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    #endif

    QApplication app(argc, argv);
    app.setApplicationName("OUCH Testbed");

    qmlRegisterType<Logger>("Logger", 1, 0, "Logger");

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:///OUCHTestbed.qml"));
    engine.rootContext()->setContextProperty("applicationDirPath", QApplication::applicationDirPath());

    return app.exec();
}

It looks like this:
Screenshot 2023-07-28 140102.png

I have a game developed in javascript that runs on the local host in browser window using the extension "live server" in VS CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bubble Popping Game</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- <div class="bubble bubble-one"></div> -->
  <div class="score-board">
    <h2>High Score <span id="goal">60</span> Bubbles!</h2>
    <h2>You Popped <span class="score">0</span> Bubbles</h2>
    <!-- <p><br></p> -->
    <h3><span id="timeRemaining">0</span> seconds remaining</h3>
  </div>


  <button id="start-camera">Start Camera</button>
  <button id="start-record">Start Recording</button>
  <button id="stop-record">Stop Recording</button>
  <a id="download-video" download="name">Download Video</a>
  
  
  <!-- <video id="video" width="4" height="3"></video> -->

  <div class="shadow">
    <div class="total-score">
      <div class="wrapper winner">
        <h4>Congratulations</h4>
        <h4>You popped <span class="score">0</span> Bubbles</h4>
        <p>You are a winner!</p>
      </div>
      <div class="wrapper loser">
        <h4>Sorry</h4>
        <h4>You Popped <span class="score">0</span> Bubbles</h4>
      </div>
        <!-- <p>Play Again?</p>
        <button class="restart">Yes</button>
        <button class="cancel">No</button> -->
        <p>Download logs?</p>
        <button class="download">Download</button>
      
    </div>
  </div>

  <div class="main-game">
    <h2>Ready to Start</h2><br>
    <div class="container">
    <label for="PID">User ID:</label>
    <input type="text" id="PID" name="PID"><br><br>
    </div>
    
    <div class="container">
        <!-- <label for="moving-type">Type:</label> -->
        <!-- <input type="radio" name="moving-type" value="nothing" checked> 1 -->
        <!-- <input type="radio" name="moving-type" value="move"> 2 -->
        <!-- <input type="radio" name="moving-type" value="frozen" checked><br><br> -->
<!-- 
        <label for="time-constriant">Timer:</label>
        <input type="radio" name="time-constriant" value="60000" checked> 1 minute
        <input type="radio" name="time-constriant" value="30000"> 0.5 minute<br><br>
-->
        <label for="game-level">Level:</label>
        <input type="radio" name="game-level" value="0" checked> 0
        <input type="radio" name="game-level" value="1"> 1
        <input type="radio" name="game-level" value="2"> 2<br><br>
    </div>
    
    <button class="start-btn">Start</button>
  </div>

  <script src="script.js"></script>
  
  <!-- <script>
    let name = document.querySelector("#PID");
    //console.log(name.querySelector("value"));
    let btnSend = document.querySelector('#download-video');
    btnSend.setAttribute('download', name);
  </script> -->
</body>
</html>

<!--https://www.youtube.com/watch?v=B-QKjhE3IC4&t=78s-->

Screenshot 2023-07-28 140428.png

Now I want to make the HTML game display in the same window as the QApplication, so that when I press space at the instructions page, I can automatically jump to the next page that shows the game without manually switching between windows (so Qt.openUrlExternally("http://localhost:5500"); may not be what I want), and the game should be interactable.
I'm using Qt 5.15.2 and Qt Creator 5.0.2
My question is : should I use QTwebengine? which one in the following example is close to what I want to implement?https://doc.qt.io/qt-5/webengine-examples.html
Also, is there any other resources/workarounds that can do this easier?

SGaist

Hi and welcome to devnet,

From your description, it seems you either want to load your web game from the server or directly from your hard drive. In both cases, the QtWebEngine module seems to be what you want. The Quick NanoBrowser example is likely what you need.

htjane

@SGaist Thank you very much! I'll look into it!