From 1b2fd40b208d5cd3ace189a7200c791decc290ed Mon Sep 17 00:00:00 2001 From: alexjba <47811206+alexjba@users.noreply.github.com> Date: Thu, 17 Nov 2022 08:17:03 +0200 Subject: [PATCH] Adding qmake project file for wasm This changeset contains the prerequisites required to compile StoryBook on wasm_32 and the README file with instructions --- storybook/CMakeLists.txt | 2 +- storybook/README.md | 93 ++++++++++++++++++++++ storybook/StoryBook.pro | 73 +++++++++++++++++ storybook/main.cpp | 21 +++-- storybook/pages/CreateChannelPopupPage.qml | 4 +- ui/imports/Themes/Theme.qml | 24 ++++-- ui/imports/utils/Constants.qml | 7 -- 7 files changed, 198 insertions(+), 26 deletions(-) create mode 100644 storybook/README.md create mode 100644 storybook/StoryBook.pro diff --git a/storybook/CMakeLists.txt b/storybook/CMakeLists.txt index 76401ec269..4802ea3604 100644 --- a/storybook/CMakeLists.txt +++ b/storybook/CMakeLists.txt @@ -34,7 +34,7 @@ add_executable( ) target_compile_definitions(${PROJECT_NAME} - PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}") + PRIVATE QML_IMPORT_ROOT="${CMAKE_CURRENT_LIST_DIR}") target_link_libraries( ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2 Qt5::WebEngine SortFilterProxyModel) diff --git a/storybook/README.md b/storybook/README.md new file mode 100644 index 0000000000..5caec1712a --- /dev/null +++ b/storybook/README.md @@ -0,0 +1,93 @@ +# Building Storybook with Webassembly and Qt 5.14 + + + +## Configuring the environment +### Install Emscripten v1.38.27 + + + # Get the emsdk repo + git clone https://github.com/emscripten-core/emsdk.git + + #go to emsdk folder + cd emsdk + + #install Emscripten v1.38.27 + ./emsdk install emscripten-1.38.27 + + #activate emscripten-1.38.27 + ./emsdk activate emscripten-1.38.27 + + #install Fastcomp backend + ./emsdk install fastcomp-clang-tag-e1.38.27-64bit + + #activate Fastcomp backend + ./emsdk activate fastcomp-clang-tag-e1.38.27-64bit + + #add emsdk tools to env variables + #this can be done by following instructions received from previous activate command + #there are two options: + + #1. Configure the env variables for the current shell only: + source emsdk_env.sh + + #2. Configure the env variables using the shell startup script: + echo 'source "[path to emsdk folder]/emsdk_env.sh"' >> $HOME/.zprofile + + #WARNING: this will configure the environment to use the emsdk compiler + #Ex:"which clang" command will now point to the emscripten clang instead of the system clang + #to disable the env configuration comment the source command added earlier in ~/.zprofile + + #check environment + #python needs to be installed. The emsdk scripts state that it should work with pyton 2 and 3 + #make sure python command can be resolved + which python + em++ --version + emcc --version + #clang should point to fastcomp-clang-tag-e1.38.27-64bit + which clang + which clang++ +More documentation: https://emscripten.org/docs/getting_started/downloads.html + +### Configure QtCreator (optional) +Newer versions of QtCreator won't support Qt5.14 with Webassembly. Latest version found to support Qt5.14 with WebAssembly is 4.14.2 +Download: https://download.qt.io/archive/qtcreator/4.14/ + +Adding the Emscripten compilers (emcc and em++) +Details here: https://doc.qt.io/qtcreator/creator-tool-chains.html + +Adding Qt version 5.14: +https://doc.qt.io/qtcreator/creator-project-qmake.html + +Adding Qt5.14 for Webassembly kit: +https://doc.qt.io/qtcreator/creator-targets.html + +Open StoryBook.pro in Qt Creator and configure it using the new kit. + +Qt creator might not set the env paths correctly. In this case manually set build environment variables (Projects -> 5.14.2 kit -> Build -> Build Environment -> Batch edit). Ex: + + EMSCRIPTEN=~/Repos/emsdk/emscripten/1.38.27 + EMSDK=~/Repos/emsdk + EMSDK_NODE=~/Repos/emsdk/node/14.18.2_64bit/bin/node + EMSDK_PYTHON=~/Repos/emsdk/python/3.9.2_64bit/bin/python3 + EM_CONFIG=~/Repos/emsdk/.emscripten + LLVM_ROOT=~/Repos/emsdk/fastcomp-clang/tag-e1.38.27/build_tag-e1.38.27_64/bin + PATH=[check echo $PATH] + +### Running qmake (without qt Creator) + + #create build folder + mkdir buildStoryBook + + #go to folder + cd buildStoryBook + + #run qmake (add CONFIG+=debug CONFIG+=qml_debug to qmake command for debug build) + ~/Qt/5.14.2/wasm_32/bin/qmake [path to StoryBook.pro] -spec wasm-emscripten && /usr/bin/make qmake_all + + #build (add -j[nb of cores] for parallel execution) + make + + #run + emrun StoryBook.html + diff --git a/storybook/StoryBook.pro b/storybook/StoryBook.pro new file mode 100644 index 0000000000..6ae6362395 --- /dev/null +++ b/storybook/StoryBook.pro @@ -0,0 +1,73 @@ +QT += core \ + quick \ + quickcontrols2 \ + svg \ # + xml \ # svg, xml and gui modules are needed to render .svg files + gui \ # + +CONFIG += c++17 \ + qtquickcompiler \ #enable Qt Qtuick compiler by default + import_plugins #Run qmlimportscanner on current folder and on the folders defined in QMLPATHS + +#Add storybook qml code +storybook_resources.files += $$files("$$PWD/*.qml", true) +storybook_resources.files += $$files("$$PWD/*.js", true) +storybook_resources.files += $$files("$$PWD/*qmldir", true) +storybook_resources.files += $$files("$$PWD/*.json", true) +#Adding storybook prefix to match the folder structure +storybook_resources.prefix = storybook + +#Add status desktop qml code +ui_resources.files += $$files("$$PWD/../ui/*.qml", true) +ui_resources.files += $$files("$$PWD/../ui/*.js", true) +ui_resources.files += $$files("$$PWD/../ui/*qmldir", true) +ui_resources.files += $$files("$$PWD/../ui/*.json", true) +#Add status desktop assets +ui_resources.files += $$files("$$PWD/../ui/*.svg", true) +ui_resources.files += $$files("$$PWD/../ui/*.png", true) +ui_resources.files += $$files("$$PWD/../ui/*.ico", true) +ui_resources.files += $$files("$$PWD/../ui/*.icns", true) +ui_resources.files += $$files("$$PWD/../ui/*.mp3", true) +ui_resources.files += $$files("$$PWD/../ui/*.wav", true) +ui_resources.files += $$files("$$PWD/../ui/*.otf", true) +ui_resources.files += $$files("$$PWD/../ui/*.ttf", true) +ui_resources.files += $$files("$$PWD/../ui/*.webm", true) +ui_resources.files += $$files("$$PWD/../ui/*.qm", true) +ui_resources.files += $$files("$$PWD/../ui/*.txt", true) +ui_resources.files += $$files("$$PWD/../ui/*.gif", true) + +RESOURCES += \ + storybook_resources \ #Storybook qrc file + ui_resources \ #Status desktop qrc file + +#Get all header files recursively +HEADERS += $$files("$$PWD/*.h", true) +HEADERS -= $$files("$$PWD/tests/*.h", true) +#Get all cpp files recursively +SOURCES += $$files("$$PWD/*.cpp", true) +SOURCES -= $$files("$$PWD/tests/*.cpp", true) + +#Hint qmlimportscanner where to look for dependencies +QMLPATHS += "$$PWD/../ui" \ + "$$PWD/../ui/imports" \ + "$$PWD/../ui/app" \ + "$$PWD/../ui/StatusQ" \ + "$$PWD/../ui/StatusQ/src" \ + "$$PWD/../ui/StatusQ/src/StatusQ" + +#Hint Qt Creator what qml modules will be using +QML_IMPORT_PATH += "$$QMLPATHS" + +#QML_IMPORT_ROOT is used to compose the qml import paths set in the qmlEngine +DEFINES += QML_IMPORT_ROOT=\\\"qrc:/storybook\\\" + +#Include SortFilterProxyModel plugin +include(../ui/StatusQ/vendor/SortFilterProxyModel/SortFilterProxyModel.pri) + +#We need to explicitly set -s TOTAL_MEMORY at least to the linker, otherwise the linking step will fail +#while validating the resulted .js file +#1Gb is probably the max amount of memory the browser will allow +QMAKE_WASM_TOTAL_MEMORY=1GB + +#In case we might use threads +QMAKE_WASM_PTHREAD_POOL_SIZE = 4 diff --git a/storybook/main.cpp b/storybook/main.cpp index 2163c3a8ed..a8837d0c1a 100644 --- a/storybook/main.cpp +++ b/storybook/main.cpp @@ -1,6 +1,9 @@ #include #include + +#ifdef QT_WEBENGINE_LIB #include +#endif #include "cachecleaner.h" #include "directorieswatcher.h" @@ -12,7 +15,9 @@ int main(int argc, char *argv[]) QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); #endif QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts); +#ifdef QT_WEBENGINE_LIB QtWebEngine::initialize(); +#endif QGuiApplication app(argc, argv); QGuiApplication::setOrganizationName(QStringLiteral("Status")); QGuiApplication::setOrganizationDomain(QStringLiteral("status.im")); @@ -23,13 +28,13 @@ int main(int argc, char *argv[]) QQmlApplicationEngine engine; const QStringList additionalImportPaths { - SRC_DIR + QStringLiteral("/../ui/StatusQ/src"), - SRC_DIR + QStringLiteral("/../ui/app"), - SRC_DIR + QStringLiteral("/../ui/imports"), - SRC_DIR + QStringLiteral("/src"), - SRC_DIR + QStringLiteral("/pages"), - SRC_DIR + QStringLiteral("/stubs"), - SRC_DIR + QStringLiteral("/mocks"), + QML_IMPORT_ROOT + QStringLiteral("/../ui/StatusQ/src"), + QML_IMPORT_ROOT + QStringLiteral("/../ui/app"), + QML_IMPORT_ROOT + QStringLiteral("/../ui/imports"), + QML_IMPORT_ROOT + QStringLiteral("/src"), + QML_IMPORT_ROOT + QStringLiteral("/pages"), + QML_IMPORT_ROOT + QStringLiteral("/stubs"), + QML_IMPORT_ROOT + QStringLiteral("/mocks"), }; for (const auto& path : additionalImportPaths) @@ -53,7 +58,7 @@ int main(int argc, char *argv[]) qmlRegisterSingletonType( "Storybook", 1, 0, "CacheCleaner", cleanerFactory); - const QUrl url(SRC_DIR + QStringLiteral("/main.qml")); + const QUrl url(QML_IMPORT_ROOT + QStringLiteral("/main.qml")); QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app, [url](QObject *obj, const QUrl &objUrl) { if (!obj && url == objUrl) diff --git a/storybook/pages/CreateChannelPopupPage.qml b/storybook/pages/CreateChannelPopupPage.qml index a3567e11d2..9dc993f1c4 100644 --- a/storybook/pages/CreateChannelPopupPage.qml +++ b/storybook/pages/CreateChannelPopupPage.qml @@ -48,12 +48,12 @@ SplitView { } - onCreateCommunityChannel: (chName, chDescription, chEmoji, chColor, chCategoryId) => { + onCreateCommunityChannel: function(chName, chDescription, chEmoji, chColor, chCategoryId) { logs.logEvent("onCreateCommunityChannel", ["chName", "chDescription", "chEmoji", "chColor", "chCategoryId"], arguments) } - onEditCommunityChannel: (chName, chDescription, chEmoji, chColor, chCategoryId) => { + onEditCommunityChannel: function(chName, chDescription, chEmoji, chColor, chCategoryId) { logs.logEvent("onEditCommunityChannel", ["chName", "chDescription", "chEmoji", "chColor", "chCategoryId"], arguments) } diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index f1c28d9be1..a03876af9e 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -1,8 +1,16 @@ import QtQuick 2.14 -import utils 1.0 - QtObject { + + enum FontSize { + FontSizeXS, + FontSizeS, + FontSizeM, + FontSizeL, + FontSizeXL, + FontSizeXXL + } + readonly property FontLoader baseFont: FontLoader { source: "../../fonts/Inter/Inter-Regular.otf" } readonly property FontLoader monoFont: FontLoader { source: "../../fonts/InterStatus/InterStatus-Regular.otf" } readonly property FontLoader codeFont: FontLoader { source: "../../fonts/RobotoMono/RobotoMono-Regular.ttf" } @@ -103,42 +111,42 @@ QtObject { function updateFontSize(fontSize) { switch (fontSize) { - case Constants.fontSizeXS: + case Theme.FontSizeXS: primaryTextFontSize = 13 secondaryTextFontSize = 12 tertiaryTextFontSize = 10 asideTextFontSize = 8 break; - case Constants.fontSizeS: + case Theme.FontSizeS: primaryTextFontSize = 14 secondaryTextFontSize = 13 tertiaryTextFontSize = 11 asideTextFontSize = 9 break; - case Constants.fontSizeM: + case Theme.FontSizeM: primaryTextFontSize = 15 secondaryTextFontSize = 14 tertiaryTextFontSize = 12 asideTextFontSize = 10 break; - case Constants.fontSizeL: + case Theme.FontSizeL: primaryTextFontSize = 16 secondaryTextFontSize = 15 tertiaryTextFontSize = 13 asideTextFontSize = 11 break; - case Constants.fontSizeXL: + case Theme.FontSizeXL: primaryTextFontSize = 17 secondaryTextFontSize = 16 tertiaryTextFontSize = 14 asideTextFontSize = 12 break; - case Constants.fontSizeXXL: + case Theme.FontSizeXXL: primaryTextFontSize = 18 secondaryTextFontSize = 17 tertiaryTextFontSize = 15 diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml index 4689b2174f..92aca4f872 100644 --- a/ui/imports/utils/Constants.qml +++ b/ui/imports/utils/Constants.qml @@ -573,13 +573,6 @@ QtObject { readonly property string lightThemeName: "light" readonly property string darkThemeName: "dark" - readonly property int fontSizeXS: 0 - readonly property int fontSizeS: 1 - readonly property int fontSizeM: 2 - readonly property int fontSizeL: 3 - readonly property int fontSizeXL: 4 - readonly property int fontSizeXXL: 5 - readonly property int notifyAllMessages: 0 readonly property int notifyJustMentions: 1 readonly property int notifyNone: 2