Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Q QML Online
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Releases
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Web applicationsWeb applications
  • QML Online
  • Issues
  • #3
Closed
Open
Issue created Aug 03, 2020 by patrick pereira@patrickpereira🏃Developer

Can't load multiple qml elements in the same page

Minimal example to replicate the problem:

<html>
<head>
    <title>Qml Online minimal example</title>
</head>
<body>
    <script type="text/javascript" src="https://qmlonline.kde.org/qtloader.js"></script>
    <script type="text/javascript" src="https://qmlonline.kde.org/qml.js"></script>

    <div id="qmlonline"></div>

    <script type='text/javascript'>
        const qml = new QmlOnline("qmlonline")
        qml.registerCall({
            qmlMessage: function(msg) {
                console.log(`qml message: ${msg}`)
            },
            qmlError: function(data) {
                console.log(`qml message: ${JSON.stringify(msg)}`)
            },
            posInit: function() {
                qml.setCode(`
                    import QtQuick 2.7
                    import QtQuick.Controls 2.3
                    Rectangle {
                        color: "#179AF3"
                        anchors.fill: parent
                        Text {
                            text: "KDE"
                            font.pixelSize: 80
                            font.bold: true
                            color: "#82CB38"
                            anchors.centerIn: parent
                            RotationAnimator on rotation {
                                running: true
                                loops: Animation.Infinite
                                from: 0
                                to: 360
                                duration: 1500
                            }
                        }
                    }
                `)
            },
        })
        qml.init()
    </script>

    <div id="qmlonline2"></div>

    <script type='text/javascript'>
        const qml2 = new QmlOnline("qmlonline2")
        qml2.registerCall({
            qmlMessage: function(msg) {
                console.log(`qml message: ${msg}`)
            },
            qmlError: function(data) {
                console.log(`qml message: ${JSON.stringify(msg)}`)
            },
            posInit: function() {
                qml2.setCode(`
                    import QtQuick 2.7
                    import QtQuick.Controls 2.3
                    Rectangle {
                        color: "#179AF3"
                        anchors.fill: parent
                        Text {
                            text: "KDE"
                            font.pixelSize: 80
                            font.bold: true
                            color: "#82CB38"
                            anchors.centerIn: parent
                            RotationAnimator on rotation {
                                running: true
                                loops: Animation.Infinite
                                from: 0
                                to: 360
                                duration: 1500
                            }
                        }
                    }
                `)
            },
        })
        qml2.init()
    </script>
</body>
</html>
Edited Aug 09, 2020 by patrick pereira
Assignee
Assign to
Time tracking