Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
Q
QML Online
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 5
    • Issues 5
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Web applications
  • QML Online
  • Issues
  • #3

Closed
Open
Opened 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
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: webapps/qmlonline#3