Adding qmake project file for wasm
This changeset contains the prerequisites required to compile StoryBook on wasm_32 and the README file with instructions
This commit is contained in:
alexjba
Alex Jbanca
parent
ba4c4b3e93
commit
1b2fd40b20
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
#include <QGuiApplication>
|
||||
#include <QQmlApplicationEngine>
|
||||
|
||||
#ifdef QT_WEBENGINE_LIB
|
||||
#include <QtWebEngine>
|
||||
#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<CacheCleaner>(
|
||||
"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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue