A Qt Journey
from Desktop to Mobile

Nicolas Froment / @lasconic

MuseScore

Helping people to make more music

MuseScore

Free music notation editor for desktop

Built with Qt since 2002

MuseScore notation software

  • Qt 5.3
  • Qt Widgets
  • ~200 000 LOCs for layout and painting

MuseScore.com

Community website

Users shares scores created with MuseScore

Mobile apps features

  • Render, display and play the scores
  • Integrated with MuseScore.com API
  • Open external files
  • For Android and iOS
  • Free & paid app

Legacy

  • Layout code
  • Painting code: QPainter

Work and maintainance cost

  • ObjectiveC and Java skills
  • Maintaining two codebases

Qt5

  • Bring iOS and Android support
  • Qt Quick 2 and Controls
  • QQuickPaintedItem

QQuickPaintedItem


void QQuickPaintedItem::paint(QPainter * painter);

Qt Creator

  • Better with every release!
  • Refactoring
  • Direct deployment on iOS and Android device and simulator
  • Qt Quick Designer :(
  • Lacks: Packaging iOS, some Java support

Qt Quick Compiler

37% faster startup on iOS

App demo

Design choices

  • No native theme
  • A single UI scalable on all platforms
  • Use more icons, less text

Tips and Tricks

  • Use Screen DPI

Tips and Tricks

  • Use Screen DPI
  • Style parameters component

Style parameters component

GlobalAppSettings.qml


// store some global app settings
QtObject {
    id: app
    property double mm:                     nativeSettings.mm
    property double buttonBorder:           mm * 0.75

    //colors
    property string bgColor:               "#F8F2E5"
    property string bgHighlightColor:      "#F1EBDE"
}

Tips and Tricks

  • Use Screen DPI
  • Style parameters component
  • Qt Quick Controls, Layouts and Styles

Qt Quick Controls, Layouts and Styles

Example: a custom busy indicator

Tips and Tricks

  • Use Screen DPI
  • Style parameters component
  • Qt Quick Controls, Layouts and Styles
  • Icon Font

Icon Font


import "MyFont.js" as MyFont  
Label {  
   text: MyFont.Icon.logo
   font.family: "MyFont"
}
  • Font Awesome anyone?
  • IcoMoon: SVG to font
  • Use the TTF in QML app
  • Small utility script to extract JavaScript

http://blog.lasconic.com

Useful external services

  • Google Analytics
  • Crashlytics
  • Testflight
  • Transifex

Calling native code

  • Share a URL
  • Google Analytics

Distribution

  • Distribution on
    • Apple App Store
    • Google Play
    • Amazon
    • Samsung
  • Don't use Ministro
  • No copy protection for the moment

Conclusion

One codebase: 4 apps

Tools are good and evolve quickly

Integration with OS and 3rd party tools

Questions