Loading images from resources (#508)

Author: vkjr

ReactQt/application/src/CMakeLists.txt

@@ -11,6 +11,7 @@ set(CMAKE_INCLUDE_CURRENT_DIR ON)
 set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")
 set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -std=c11")
 set(FONTS_RESOURCE "")
+set(IMAGES_RESOURCE "")
 
 find_package(Qt5Core REQUIRED)
 find_package(Qt5Qml REQUIRED)
@@ -31,6 +32,15 @@ foreach(FONT_PATH ${DESKTOP_FONTS})
 endforeach(FONT_PATH)
 
 
+# Add all external desktop images to resources. Images will be outside of directory with qrc,
+# so we are using aliases to load them
+foreach(IMAGE_PATH ${DESKTOP_IMAGES})
+    get_filename_component(IMAGE_FILENAME ${IMAGE_PATH} NAME_WE)
+    STRING(CONCAT TMP ${IMAGES_RESOURCE} "<file alias=\"${IMAGE_FILENAME}\">${IMAGE_PATH}</file>")
+    SET(IMAGES_RESOURCE ${TMP})
+endforeach(IMAGE_PATH)
+
+
 # Format EXTERNAL_MODULES to contain array of external modules type names defined as strings
 string (REPLACE ";" "," EXTERNAL_MODULES "${REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_TYPE_NAMES}")
 

ReactQt/application/src/main.cpp

@@ -127,7 +127,7 @@ class ReactNativeProperties : public QObject {
     QString m_packagerTemplate = "http://%1:%2/index.desktop.bundle?platform=desktop&dev=true";
     QUrl m_codeLocation;
     QString m_pluginsPath;
-    QString m_executor = "LocalServerConnection";
+    QString m_executor = "RemoteServerConnection";
     QVariantMap m_initialProps;
 };
 

ReactQt/application/src/main.qrc.in

@@ -13,6 +13,7 @@
     <file>main.qml</file>
     ${JS_BUNDLE_RESOURCE}
     ${FONTS_RESOURCE}
+    ${IMAGES_RESOURCE}
     ${ICON_PNG_RESOURCE}
   </qresource>
 </RCC>

ReactQt/runtime/src/componentmanagers/imagemanager.cpp

@@ -43,6 +43,7 @@ class ImageManagerPrivate {
 public:
     bool isBase64ImageUrl(const QUrl& url) const;
     void setSource(QObject* image, const QUrl& url);
+    bool isStoredInResources(const QString& fileName);
 };
 
 ImageManager::ImageManager(QObject* parent) : ViewManager(parent), d_ptr(new ImageManagerPrivate) {}
@@ -70,26 +71,28 @@ void ImageManager::manageSource(const QVariantMap& imageSource, QQuickItem* imag
 
     auto imageLoader = bridge()->imageLoader();
 
-    QUrl source = imageSource[URI_KEY].toUrl();
+    QUrl imageSourceUrl = imageSource[URI_KEY].toUrl();
+    QString imageSourceStr = imageSource[URI_KEY].toString();
 
-    if (d->isBase64ImageUrl(source)) {
-        d->setSource(image, source);
+    if (d->isBase64ImageUrl(imageSourceUrl)) {
+        d->setSource(image, imageSourceUrl);
         return;
     }
 
-    image->setProperty("isSVG", source.toString(QUrl::RemoveQuery).endsWith("svg"));
+    image->setProperty("isSVG", imageSourceUrl.toString(QUrl::RemoveQuery).endsWith("svg"));
 
-    if (source.scheme() == "file" && imageSource[URI_KEY].toString().startsWith(FILE_SCHEME)) {
-        source = QUrl(imageSource[URI_KEY].toString().replace(FILE_SCHEME, ""));
+    if (imageSourceUrl.scheme() == "file" && imageSource[URI_KEY].toString().startsWith(FILE_SCHEME)) {
+        imageSourceUrl = QUrl(imageSourceStr.replace(FILE_SCHEME, ""));
     }
-
-    if (source.isRelative()) {
-        source = QUrl::fromLocalFile(QFileInfo(source.toString()).absoluteFilePath());
+    if (d->isStoredInResources(imageSourceStr)) {
+        imageSourceUrl = QUrl(QString("qrc:/") + imageSourceStr);
+    } else if (imageSourceUrl.isRelative()) {
+        imageSourceUrl = QUrl::fromLocalFile(QFileInfo(imageSourceUrl.toString()).absoluteFilePath());
     }
 
-    imageLoader->loadImage(source, [=](ImageLoader::Event event, const QVariantMap& data) {
+    imageLoader->loadImage(imageSourceUrl, [=](ImageLoader::Event event, const QVariantMap& data) {
         if (event == ImageLoader::Event_LoadSuccess) {
-            d->setSource(image, source);
+            d->setSource(image, imageSourceUrl);
         }
         bool eventHandlerSet =
             image->property(QString(QML_PROPERTY_PREFIX + eventNames[event]).toStdString().c_str()).toBool();
@@ -117,4 +120,10 @@ void ImageManagerPrivate::setSource(QObject* image, const QUrl& url) {
     image->setProperty("managedSource", url);
 }
 
+bool ImageManagerPrivate::isStoredInResources(const QString& fileName) {
+
+    QFile file(QString(":/") + fileName);
+    return file.exists();
+}
+
 #include "imagemanager.moc"

local-cli/desktop/build.js

@@ -26,6 +26,8 @@ function build(args, dependencies) {
   console.log("Found desktop JS bundle path: " + desktopJSBundlePath);
   var desktopFonts = _findDesktopFonts(args);
   console.log("Found desktop fonts: " + desktopFonts);
+  var desktopImages = _findDesktopImages(args);
+  console.log("Found desktop images: " + desktopImages);
 
   return _findModules(args).then((dependencies) => {
     return new Promise((resolve, reject) => {
@@ -40,7 +42,7 @@ function build(args, dependencies) {
       }
     });
   }).then(() => {
-    return _buildApplication(args, desktopExternalModules, desktopJSBundlePath, desktopFonts);
+    return _buildApplication(args, desktopExternalModules, desktopJSBundlePath, desktopFonts, desktopImages);
   });
 }
 
@@ -59,6 +61,11 @@ function _findDesktopFonts(args) {
   return JSON.parse(data).desktopFonts;
 }
 
+function _findDesktopImages(args) {
+  var data = fs.readFileSync(path.join(args.root, 'package.json'));
+  return JSON.parse(data).desktopImages;
+}
+
 function _findModules(args) {
   return new Promise((resolve, reject) => {
     fs.readFile(path.join(args.root, 'package.json'), (err, data) => {
@@ -121,7 +128,7 @@ function _buildModules(args, dependencies, resolve, reject) {
   });
 }
 
-function _buildApplication(args, desktopExternalModules, desktopJSBundlePath, desktopFonts) {
+function _buildApplication(args, desktopExternalModules, desktopJSBundlePath, desktopFonts, desktopImages) {
   return new Promise((resolve, reject) => {
     console.log(chalk.bold('Building the app...'));
 
@@ -140,6 +147,10 @@ function _buildApplication(args, desktopExternalModules, desktopJSBundlePath, de
       buildArguments.push("-f");
       buildArguments.push(desktopFonts.toString().replace(/,/g, ';'));
     }
+    if (typeof desktopImages !== 'undefined' && desktopImages !== null) {
+      buildArguments.push("-i");
+      buildArguments.push(desktopImages.toString().replace(/,/g, ';'));
+    }
     if (process.platform === "win32") {
       buildArguments.push("-g");
       buildArguments.push("MinGW Makefiles");

local-cli/generator-desktop/templates/build.bat

@@ -25,11 +25,12 @@ SET option
 echo "build.bat external modules paths: "%option-e%
 echo "build.bat JS bundle path: "%option-j%
 echo "build.bat desktop fonts: "%option-f%
+echo "build.bat desktop images: "%option-i%
 echo "build.bat cmake generator: "%option-g%
 
 @rem Workaround
 @rem rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile
 
 @rem Build project
 echo %CD%
-cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% . && cmake --build .
+cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% -DDESKTOP_IMAGES=%option-i% . && cmake --build .

local-cli/generator-desktop/templates/build.sh

@@ -23,15 +23,20 @@ if [[ $1 == "-f" ]]; then
   shift
 	desktopFonts="$1"
 fi
+if [[ $1 == "-i" ]]; then
+  shift
+  desktopImages="$1"
+fi
 shift
 done
 
 echo "build.sh external modules paths: "$ExternalModulesPaths
 echo "build.sh JS bundle path: "$JsBundlePath
 echo "build.sh desktop fonts: "$desktopFonts
+echo "build.sh desktop images: "$desktopImages
 
 # Workaround
 rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile
 
 # Build project
-cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" . && make
+cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" -DDESKTOP_IMAGES="$desktopImages" . && make

local-cli/templates/HelloWorld/desktop/build.bat

@@ -25,11 +25,12 @@ SET option
 echo "build.bat external modules paths: "%option-e%
 echo "build.bat JS bundle path: "%option-j%
 echo "build.bat desktop fonts: "%option-f%
+echo "build.bat desktop images: "%option-i%
 echo "build.bat cmake generator: "%option-g%
 
 @rem Workaround
 @rem rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile
 
 @rem Build project
 echo %CD%
-cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% . && cmake --build .
+cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% -DDESKTOP_IMAGES=%option-i% . && cmake --build .

local-cli/templates/HelloWorld/desktop/build.sh

@@ -23,15 +23,20 @@ if [[ $1 == "-f" ]]; then
   shift
 	desktopFonts="$1"
 fi
+if [[ $1 == "-i" ]]; then
+  shift
+  desktopImages="$1"
+fi
 shift
 done
 
 echo "build.sh external modules paths: "$ExternalModulesPaths
 echo "build.sh JS bundle path: "$JsBundlePath
 echo "build.sh desktop fonts: "$desktopFonts
+echo "build.sh desktop images: "$desktopImages
 
 # Workaround
 rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile
 
 # Build project
-cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" . && make
+cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" -DDESKTOP_IMAGES="$desktopImages" . && make