Merge pull request #76 from jagerman/vectorize-button

Redraw vectorized connection button and shrink it

.drone.jsonnet

@@ -1,4 +1,4 @@
-local default_deps_base='libsystemd-dev qtbase5-dev qtdeclarative5-dev qml-module-qtquick-controls qml-module-qtquick-controls2 qml-module-qtquick-dialogs qml-module-qt-labs-platform qml-module-qtcharts libqt5charts5-dev liblokimq-dev';
+local default_deps_base='libsystemd-dev qtbase5-dev qtdeclarative5-dev qml-module-qtquick-controls qml-module-qtquick-controls2 qml-module-qtquick-dialogs qml-module-qt-labs-platform qml-module-qtcharts libqt5charts5-dev libqt5svg5-dev liblokimq-dev';
 local default_deps_nocxx=default_deps_base;
 local default_deps='g++ ' + default_deps_nocxx; // g++ sometimes needs replacement
 local default_windows_deps='mingw-w64-binutils mingw-w64-gcc mingw-w64-crt mingw-w64-headers mingw-w64-winpthreads perl openssh zip bash binutils'; // deps for windows cross compile
@@ -88,7 +88,8 @@ local windows_cross_pipeline(name, image,
                 'cd /drone/src',
                 'mkdir build',
                 'cd build',
-                'cmake .. -G Ninja -DCMAKE_CROSSCOMPILING=ON -DCMAKE_EXE_LINKER_FLAGS=-fstack-protector -DCMAKE_TOOLCHAIN_FILE=$PWD/../mingw32.cmake -DCMAKE_BUILD_TYPE=Release -DQt5_DIR=/drone/src/qt5-win32/lib/cmake/Qt5 -DQt5Qml_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Qml -DQt5Network_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Network -DQt5Core_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Core -DQt5Quick_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Quick -DQt5Gui_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Gui -DQt5Widgets_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Widgets -DQt5Charts_DIR=/drone/src/qt5-win32/lib/cmake/Qt5Charts -DQt5QmlModels_DIR=/drone/src/qt5-win32/lib/cmake/Qt5QmlModels -DBUILD_SHARED_LIBS=OFF -DBUILD_STATIC_DEPS=ON',
+                'cmake .. -G Ninja -DCMAKE_CROSSCOMPILING=ON -DCMAKE_EXE_LINKER_FLAGS=-fstack-protector -DCMAKE_TOOLCHAIN_FILE=$PWD/../mingw32.cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=OFF -DBUILD_STATIC_DEPS=ON ' +
+                    std.join(" ", ['-DQt5' + x + '_DIR=/drone/src/qt5-win32/lib/cmake/Qt5' + x for x in ['', 'Qml', 'Network', 'Core', 'Quick', 'Gui', 'Widgets', 'Charts', 'QmlModels', 'Svg']]),
                 'ninja -v'
             ] + extra_cmds,
         }

CMakeLists.txt

@@ -3,7 +3,7 @@ cmake_minimum_required(VERSION 3.10)
 set(CMAKE_OSX_DEPLOYMENT_TARGET 10.12)  # Has to be set before `project()`, and ignored on non-macos
 
 project(lokinet-gui
-    VERSION 0.3.1
+    VERSION 0.3.3
     DESCRIPTION "Lokinet graphical control panel"
     LANGUAGES CXX)
 
@@ -37,7 +37,7 @@ else()
   find_package(LokiMQ 1.2 REQUIRED)
 endif()
 
-find_package(Qt5 COMPONENTS Qml Quick Widgets Charts REQUIRED)
+find_package(Qt5 COMPONENTS Qml Quick Widgets Charts Svg REQUIRED)
 find_package(Threads)
 
 add_executable(lokinet-gui
@@ -54,7 +54,7 @@ add_executable(lokinet-gui
     )
 
 target_link_libraries(lokinet-gui PRIVATE
-    Qt5::Core Qt5::Qml Qt5::Quick Qt5::Widgets Qt5::Charts
+    Qt5::Core Qt5::Qml Qt5::Quick Qt5::Widgets Qt5::Charts Qt5::Svg
     Threads::Threads
     lokimq
     )

contrib/build-win32-deps.sh

@@ -24,7 +24,12 @@ cd $SRCDIR
 mkdir qt5-build
 cd qt5; perl init-repository --module-subset=default,-qtwebengine,-qtactiveqt,-qtlocation
 cd $SRCDIR/qt5-build
-$SRCDIR/qt5/configure -prefix $SRCDIR/qt5-win32 -qt-zlib -qt-libjpeg -qt-libpng -qt-freetype -qt-pcre -qt-harfbuzz -opensource -confirm-license -platform $QT_HOST_PLATFORM -xplatform win32-g++ -release -device-option 'CROSS_COMPILE=ccache i686-w64-mingw32-' -opengl desktop -no-angle -skip qtwebengine -optimize-size -strip -ssl -openssl-linked -qt-sqlite -sql-sqlite -qt-assimp -qt-tiff -qt-webp OPENSSL_PREFIX=$SRCDIR/ssleay-win32 'OPENSSL_LIBS_DEBUG=-lssl -lcrypto' 'OPENSSL_LIBS_RELEASE=-lssl -lcrypto' 'OPENSSL_LIBS=-lws2_32 -lgdi32 -ladvapi32 -lcrypt32 -luser32' OPENSSL_INCDIR=$SRCDIR/ssleay-win32/include OPENSSL_LIBDIR=$SRCDIR/ssleay-win32/lib -qt3d-simd sse2 -ccache -skip qtactiveqt -skip qtlocation -nomake examples -nomake tests
+$SRCDIR/qt5/configure -prefix $SRCDIR/qt5-win32 -qt-zlib -qt-libjpeg -qt-libpng -qt-freetype -qt-pcre -qt-harfbuzz -opensource -confirm-license \
+    -platform $QT_HOST_PLATFORM -xplatform win32-g++ -release -device-option 'CROSS_COMPILE=ccache i686-w64-mingw32-' -opengl desktop -no-angle \
+    -skip qtwebengine -optimize-size -strip -ssl -openssl-linked -qt-sqlite -sql-sqlite -qt-assimp -qt-tiff -qt-webp \
+    OPENSSL_PREFIX=$SRCDIR/ssleay-win32 'OPENSSL_LIBS_DEBUG=-lssl -lcrypto' 'OPENSSL_LIBS_RELEASE=-lssl -lcrypto' \
+    'OPENSSL_LIBS=-lws2_32 -lgdi32 -ladvapi32 -lcrypt32 -luser32' OPENSSL_INCDIR=$SRCDIR/ssleay-win32/include OPENSSL_LIBDIR=$SRCDIR/ssleay-win32/lib \
+    -qt3d-simd sse2 -ccache -skip qtactiveqt -skip qtlocation -nomake examples -nomake tests
 make -j$JOBS; make install
 #cd $SRCDIR/libsodium
 #CC='ccache i686-w64-mingw32-gcc' ./configure --host=i686-w64-mingw32 --target=i686-w64-mingw32 --disable-shared --prefix=$SRCDIR/sodium-win32

res/images/connection_button.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1in" height="1in" version="1.1" viewBox="0 0 25.4 25.4" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g>
+  <path d="m12.699 12.132v-2.282" fill="none" stroke="#000" stroke-linecap="round" stroke-width=".5" style="paint-order:normal"/>
+  <circle cx="12.7" cy="12.7" r="11.25" fill-opacity="0" stroke="#212121" stroke-width=".45"/>
+  <path d="m15.143 11.232a2.85 2.85 0 0 1-0.59831 3.6404 2.85 2.85 0 0 1-3.6892 0 2.85 2.85 0 0 1-0.59831-3.6404" fill-opacity="0" stroke="#212121" stroke-width=".45"/>
+ </g>
+ <circle cx="12.7" cy="12.7" r="11.25" fill-opacity="0" stroke="#dfdfdf" stroke-width=".35"/>
+ <rect x="12.525" y="9.6656" width=".35" height="2.655" fill="#dfdfdf" style="paint-order:normal"/>
+ <path d="m15.168 11.275a2.85 2.85 0 0 1-0.63623 3.6082 2.85 2.85 0 0 1-3.6639 0 2.85 2.85 0 0 1-0.63623-3.6082" fill-opacity="0" stroke="#dfdfdf" stroke-width=".35"/>
+</svg>

res/images/connection_button_outline.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1in" height="1in" version="1.1" viewBox="0 0 25.4 25.4" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <circle cx="12.7" cy="12.7" r="12.065" fill-opacity="0" stroke="#22252e" stroke-opacity=".66667" stroke-width="1.1684" style="paint-order:normal"/>
+</svg>

res/qml/ConnectionButtonPanel.qml

@@ -16,7 +16,7 @@ Container {
     onRunningChanged: updateState();
     onHoveringChanged: updateState();
 
-    Layout.preferredHeight: 168
+    Layout.preferredHeight: 110
     Layout.preferredWidth: Style.appWidth
 
     contentItem: Rectangle {
@@ -28,7 +28,9 @@ Container {
     Image {
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
-        source: "qrc:/res/images/connection_button_outline.png"
+        source: "qrc:/res/images/connection_button_outline.svg"
+        sourceSize.width: 0.9 * parent.height
+        sourceSize.height: 0.9 * parent.height
     }
 
     // white connection image; we will colorize with LevelAdjust to indicate
@@ -38,7 +40,9 @@ Container {
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
         smooth: true
-        source: "qrc:/res/images/connection_button.png"
+        source: "qrc:/res/images/connection_button.svg"
+        sourceSize.width: 0.9 * parent.height
+        sourceSize.height: 0.9 * parent.height
     }
 
     // colorize connectionButtonImage

res/resources.qrc

@@ -19,9 +19,8 @@
         <!-- images -->
         <file>images/icon.svg</file>
         <file>images/banner.png</file>
-        <file>images/connection_indicator.png</file>
-        <file>images/connection_button.png</file>
-        <file>images/connection_button_outline.png</file>
+        <file>images/connection_button.svg</file>
+        <file>images/connection_button_outline.svg</file>
         <file>images/up_chevron.png</file>
     </qresource>
 </RCC>