Planet KDE https://planet.kde.org Planet KDE https://planet.kde.org Planet KDE https://planet.kde.org/assets/img/planetkde.svg 48 48 Thu, 28 May 2020 11:09:02 +0000 https://www.kdab.com/?p=22669 Using Visual Studio Code for Qt Applications – Part Two Thu, 28 May 2020 09:00:55 +0000 https://www.kdab.com/using-visual-studio-code-for-qt-apps-pt-2/ <p>In the <a href="https://www.kdab.com/using-visual-studio-code-for-qt-apps-pt-1/">last blog post</a> we saw an essential, C++ oriented, Visual Studio Code setup. That was enough to get going right away, but we can still definitely do more and better. Here I’ll show you how to get a complete setup for your qmake and CMake projects, all this while also wearing a Qt hat (on top of my C++ hat) and having a deeper look at the Qt side.</p> <h2>Build qmake Qt projects</h2> <p>Qmake is not integrated with Visual Studio Code the way CMake is, so setting up a qmake project for build is slightly more convoluted than doing the same with CMake. This means we’ll have to define our own build tasks. We’re going to do this in two stages: build steps definition and build steps combination, leveraging the fact that Visual Studio Code implements task dependencies and ordered sequential execution of dependencies.</p> <h5>Create build steps</h5> <p>As far as build steps are concerned, the following are, in a nutshell, the ones that will cover most cases:</p> <ul> <li> <b>Create the build directory</b> (in a way that doesn’t fail if the directory already exists) <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Create build dir", "type": "shell", "command": "mkdir -Force path/to/build/dir" } </pre> <p>Here, <code>-Force</code> is a powershell parameter that will prevent the command to fail if the directory already exists. On Unix based systems, you can use <code>mkdir -p</code> instead.</p> </li> <li> <b>Run qmake</b> <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Run qmake", "type": "shell", "command": "qmake", "arg": [ ... add your qmake arguments here ... ], "options": &#123; "cwd": "path/to/build/dir" } } </pre> </li> <li> <b>Run make/nmake/jom</b>, depending on the platform <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Run make", "type": "shell", "command": "jom", "options": &#123; "cwd": "path/to/build/dir" } } </pre> </li> <li> <b>Clear build folder</b> This can mean different things depending on how the build file is configured. It could be a simple <code>make clean</code>, or a more thorough removal of the whole content of the build folder. <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Clear build folder", "type": "shell", "command": "jom clean", "options": &#123; "cwd": "path/to/build/dir" } } </pre> </li> </ul> <h5>Combine build steps</h5> <p>Now that our steps are defined, we can go on and define the actual build tasks. We’ll prepare two for this example, one for running a build, and one for running a clean build. Let’s see the task for a regular build:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Build", "dependsOn": [ "Create build dir", "Run qmake", "Run make" ], "dependsOrder": "sequence" } </pre> <p>There are two new properties here: <code>"dependsOn"</code> is a list of task labels, and it means that those tasks need to be executed before the current task is built, while <code>"dependsOrder"</code>, when set to <code>"sequence"</code>, will tell Visual Studio Code to run all dependent tasks sequentially and in the given order.</p> <p>The task for a clean build is very similar and will only have an extra step where the project is cleaned before being built again:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; "label": "Clean build", "dependsOn": [ "Clear build folder", "Create build dir", "Run qmake", "Run make" ], "dependsOrder": "sequence" } </pre> <p>And that’s it, now it’s just a matter to open the command palette (Ctrl+Shift+P), select <b>“Task: Run Task”</b> and then <b>“Build”</b>.</p> <h5>Use a default task</h5> <p>As an alternative (or better, an addition) to selecting manually the build task from a list every time, Visual Studio Code also allows to run a default task with a key combination (Ctrl+Shift+B). To mark a task as default, you need to add a few extra lines to the task configuration:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; // ... task configuration "group": &#123; "kind": "build", "isDefault": true } } </pre> <h5>Use your own Qt</h5> <p>If Qt is not configured at a system level, or you want to use a Qt version other than the default one installed and configured in your system, you need to explicitly configure the environment so that every task is run with the right Qt version in the path. Visual Studio Code allows you to do this every time a terminal is launched for running a task, so our environment customizations are set before running the task command.</p> <p>This is done in the settings file (or in the workspace settings if you’re working with a workspace), and the property name for this setting is system dependent: either <code>"terminal.integrated.env.windows"</code>, <code>"terminal.integrated.env.linux"</code>, or <code>"terminal.integrated.env.osx"</code>. The property requires an object, where each property is the name of an environment variable, and the associated value is the value for the variable. Below is an example configuration for Windows:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; // All other settings... "terminal.integrated.env.windows": &#123; "PATH": "C:/Qt/5.12.4/msvc2017_64/bin;$&#123;env:PATH}" } } </pre> <h2>Build CMake Qt projects</h2> <p>Setting up a CMake based project using <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools">the CMake extension</a> doesn’t require any settings manipulation if Qt is already configured on your system. What you will need is to select a CMake kit (the CMake extension finds them automatically), a build variant, and launch the build with F7.</p> <p><a href="https://www.kdab.com/wp-content/uploads/stories/build-with-cmake-extension.gif"><img class="aligncenter size-medium wp-image-22184" style="display: block; margin-left: auto; margin-right: auto;" src="//www.kdab.com/wp-content/uploads/stories/build-with-cmake-extension.gif" alt="Short video showing how to launch a CMake build with Visual Studio Code"></a></p> <p>However, you may want to use extra arguments in the configuration step or specify your build directory so for instance it doesn’t end up being inside the source directory. You can customize CMake configuration arguments by setting the property <code>"cmake.configureSettings"</code> in your settings file. This property expects a list of string arguments that will be passed to CMake during the configuration step:</p> <pre class="brush: cpp; title: ; notranslate"> "cmake.configureSettings": &#123; "CMAKE_PREFIX_PATH": "my/prefix/path", "ENABLE_FEATURE": "1", "ENABLE_OTHER_FEATURE": "0" } </pre> <p>To customize the build directory, just set <code>"cmake.buildDirectory"</code> to the desired path. This value may contain variables, so it can be configured, for instance, to point a path relative to the project folder:</p> <pre class="brush: cpp; title: ; notranslate"> "cmake.buildDirectory": "$&#123;workspaceFolder}/../build-cmake-project" </pre> <p>If you want to use a custom Qt version, or Qt is not configured system-wide (as is the case on Windows) it’s enough to set <code>CMAKE_PREFIX_PATH</code> properly in the <code>"cmake.configureSettings"</code> property in the settings file. For example:</p> <pre class="brush: cpp; title: ; notranslate"> "cmake.configureSettings": &#123; "CMAKE_PREFIX_PATH": "otherprefixpath;C:/Qt/5.12.4/msvc2017_64" // ... other args ] </pre> <p>You can find a complete documentation for the CMake Tools extension <a href="https://vector-of-bool.github.io/docs/vscode-cmake-tools/">here</a>, featuring <a href="https://vector-of-bool.github.io/docs/vscode-cmake-tools/getting_started.html">a guide</a> on how to use CMake Tools from the UI, and a <a href="https://vector-of-bool.github.io/docs/vscode-cmake-tools/settings.html">documentation for all available settings</a>.</p> <h2>Running and debugging our Qt application</h2> <p>Now that your application has been built, let’s see how we can launch it and, most importantly, debug it.</p> <h5>Running qmake projects</h5> <p>For projects built with qmake, we don’t have any help from extensions and the only option we have is to bake our own launch configurations in the way we’ve seen in the last blog post. This is done in the launch configurations file (<code>launch.json</code>) or in the workspace file, and this is how a launch configuration looks:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; "name": "My application", "type": "cppvsdbg", "request": "launch", "program": "path/to/application", "stopAtEntry": false, "cwd": "$&#123;workspaceFolder}", "environment": [], "externalConsole": false } </pre> <p>You can run launch configurations both with or without debugger, using <b>“Debug: Start Debugging”</b> (F5) or <b>“Run: Start Without Debugging”</b> (Ctrl+F5) respectively. If Qt is not configured at a system level, or you want to use a custom Qt version, the corresponding launch configuration will need to be explicitly configured to include Qt in its path.</p> <p>You can do this by updating the <code>"environment"</code> property in the launch configuration. Below is an example for Windows, setting only the <code>"PATH"</code> environment variable. Configurations for other systems need to be adjusted but are essentially similar.</p> <pre class="brush: cpp; title: ; notranslate"> "environment": [ &#123; "name": "PATH", "value": "C:/Qt/5.12.4/msvc2017_64/bin;$&#123;env:PATH}" } ] </pre> <p>Side note: here <code>$&#123;env:PATH}</code> means whaterever value the environment variable <code>PATH</code> has before the launch configuration is run. In general, the syntax <code>$&#123;env:VARNAME}</code> can be used to get an environment variable in a task or a launch configuration.</p> <h5>Running CMake projects</h5> <p>Working with CMake is easier in principle, as the CMake extension provides the commands <b>“CMake: Run Without Debugging”</b> and <b>“CMake: Debug”</b>, allowing you to respectively launch and debug CMake targets.</p> <p>However, this approach has a number of shortcomings:</p> <ul> <li>It’s not possible to specify per-target run arguments for debug runs.</li> <li>It’s not possible at all to specify run arguments for non-debug runs.</li> <li>Some debugging options such as source mapping or custom views with natvis are not configurable using cmake settings.</li> </ul> <p>So in conclusion using the CMake extension for running targets is not really convenient if you want a comprehensive debugging experience, and the best way to go is still to create your own launch configurations.</p> <p>The CMake extension provides a few convenient variables for launch configurations:</p> <ul> <li> <code>$&#123;command:cmake.launchTargetPath}</code>: resolves to the full path of the executable for the target selected from the launch target menu.</li> <li> <code>$&#123;command:cmake.launchTargetDirectory}</code>: resolves to the directory containing the executable for the target selected from the launch target menu.</li> </ul> <h2>Qt aware debugging</h2> <p>What we’ve seen until now will let you build and run your Qt applications, using either your system provided Qt or your own. Debugging will work out of the box already, as long as the application code is involved. But wouldn’t it be great to also be able to peek inside Qt’s source code while debugging? Or if we had a better visualization for Qt specific types?</p> <p>Turns out we can do both with little manipulation on launch configurations. Let’s see how.</p> <h5>Configure debug symbols</h5> <p>Usually Qt debug symbols are distributed alongside libraries, so there’s no real need to explicitly configure debug symbols paths. If that’s not the case, you can configure the debug symbols path by setting the <code>"symbolSearchPath"</code> property on a launch configuration. This property is a string and contains a list of paths separated by a semicolon.</p> <pre class="brush: cpp; title: ; notranslate">"symbolSearchPath": "otherSearchPath;C:/Qt/5.12.4/msvc2017_64/bin"</pre> <p>This of course can be useful for adding debug symbols for other libraries too.</p> <h5>Source mapping</h5> <p>If the source directory for your Qt differs from the actual source directory (or directories) used while building it, you can configure the debugger to resolve those paths correctly. This happens for instance with binary Qt releases on Windows. You can enable source mapping in launch configurations by adding the <code>"sourceFileMap"</code> property. This property requires an object where each key is the source folder as it’s provided by the debug symbols, and the corresponding value is the path where the source code is in your system. This is how it can be configured for a binary Qt release on Windows:</p> <pre class="brush: cpp; title: ; notranslate"> "sourceFileMap": &#123; "C:/work/build/qt5_workdir/w/s": "C:/Qt/5.12.4/Src", "Q:/qt5_workdir/w/s": "C:/Qt/5.12.4/Src", "C:/Users/qt/work/install": "C:/Qt/5.12.4/Src", "C:/Users/qt/work/qt": "C:/Qt/5.12.4/Src" } </pre> <h5>Using Natvis for Qt aware objects visualization</h5> <p><a href="https://docs.microsoft.com/visualstudio/debugger/create-custom-views-of-native-objects">Natvis</a> is a Visual Studio framework that allows you to customize how native C++ objects are visualized in the debugger. Natvis visualization rules are specified through xml files with a specific schema. A natvis file lists visualization rules for each C++ type, and every visualization rule consists in a series of properties. Such properties are meant to be user friendly and will be displayed on the debug window when visualizing objects of the corresponding type.</p> <p>To name a few examples, a <code>QString</code> is visualized as the string it contains and has a <code>size</code> property and a number of items corresponding to its characters, and <code>QRect</code> will have a <code>width</code> and a <code>height</code> property instead of just the bare (and less intuitive) internal representation of the top left and bottom right points (<code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>).</p> <p>If you want to enable natvis in a debug run, just set the <code>"visualizerFile"</code> property in your launch configuration so that it points to the natvis file.</p> <pre class="brush: cpp; title: ; notranslate"> "visualizerFile": "path/to/qt5.natvis" </pre> <p><a href="https://www.kdab.com/wp-content/uploads/stories/natvis-comparison.png"><img class="aligncenter size-topteaser wp-image-22216" style="display: block; margin-left: auto; margin-right: auto;" src="//www.kdab.com/wp-content/uploads/stories/natvis-comparison.png" alt="" width="800"></a></p> <p class="wp-caption-text" style="text-align: center;">Debug pane before and after configuring natvis</p> <p>You can find a ready to use natvis file for Qt 5 <a href="https://github.com/aambrosano/qt-natvis">at this link</a>.</p> <h2>Updating the code model</h2> <p>In order to be able to navigate Qt headers and enable IntelliSense for the Qt API, it’s enough to adjust the C++ settings for our project (<code>c_cpp_properties.json</code>) by adding the Qt include folder (and all its subfolders):</p> <pre class="brush: cpp; title: ; notranslate"> &#123; // ... "includePath": [ // ... "C:/Qt/5.12.4/msvc2017_64/include/**" ] } </pre> <p>If you’re working on a CMake project, it’s also possible to use the CMake plugin as a configuration provider. Doing so, include paths and defines will be bound to the currently configured CMake build, and won’t need to be specified manually. This simplifies the C++ properties file considerably, as it’s shown in the example below:</p> <pre class="brush: cpp; title: ; notranslate"> &#123; "configurations": [ &#123; "name": "Win32", "intelliSenseMode": "msvc-x64", "configurationProvider": "vector-of-bool.cmake-tools" } ], "version": 4 } </pre> <h2>A note about using Visual Studio compilers on Windows</h2> <p>Visual Studio provides batch files that automate the environment setup necessary to use their C++ compiler and linker. In the last post we saw how it’s possible to configure a task so that it sets up the environment through the vcvars.bat script before running a command.</p> <p>However, if you need to configure the environment with vcvars.bat for most of your build steps, it is also possible to configure Visual Studio Code so that it runs the batch file for every task. To do so, you need to tweak the configured shell (which is powershell by default on windows) and pass a few args. The setting name for doing this is “terminal.integrated.shellArgs.windows” and it’s set as follows:</p> <pre class="brush: cpp; title: ; notranslate"> "terminal.integrated.shellArgs.windows": [ "Invoke-BatchFile 'C:/Program Files (x86)/Microsoft Visual Studio/2017/Professional/VC/Auxiliary/Build/vcvars64.bat' amd64", "; powershell" ] </pre> <p>What’s going on here is this: Visual Studio Code will launch by default every shell task by calling this command:</p> <pre class="brush: cpp; title: ; notranslate"> powershell &lt;terminal.integrated.shellargs.windows&gt; -Command &lt;task command&gt; &lt;task argument list&gt; </pre> <p>So, if you set “terminal.integrated.shellArgs.windows” this way, the final command will look like this:</p> <pre class="brush: cpp; title: ; notranslate"> powershell Invoke-BatchFile 'path/to/vcvars' ; powershell -Command &lt;task command&gt; &lt;task argument list&gt; </pre> <p>As a result, task commands will be effectively run in a powershell with the right environment set.</p> <p>And that’s it for now. Many new things on the table, and some advanced features too. Hopefully this will help you with your workflow.</p> <p>But there is still more to say, so make sure you don’t miss the next post!</p> <div class="panel panel-info"> <div class="panel-heading">About KDAB</div> <div class="panel-body"> <p>If you like this blog and want to read similar articles, consider subscribing via <a href="https://www.kdab.com/category/blogs/feed/">our RSS feed</a>.</p> <p>Subscribe to <a href="https://www.youtube.com/kdabtv">KDAB TV</a> for similar informative short video content. </p> <p>KDAB provides market leading software consulting and development <a href="https://www.kdab.com/software-services/">services</a> and <a href="https://www.kdab.com/software-services/scheduled-training/programming-with-qt/">training</a> in Qt, C++ and 3D/OpenGL. <a href="mailto:sales@kdab.com?subject=Blog%20callout%20enquiry">Contact us</a>.</p> </div> </div> <p>The post <a rel="nofollow" href="https://www.kdab.com/using-visual-studio-code-for-qt-apps-pt-2/">Using Visual Studio Code for Qt Applications – Part Two</a> appeared first on <a rel="nofollow" href="https://www.kdab.com">KDAB</a>.</p> KDAB on Qt http://pointieststick.com/?p=5069 Laptop update Wed, 27 May 2020 03:05:43 +0000 https://pointieststick.com/2020/05/26/laptop-update/ <p>Thanks to the KDE community, I’ve finally chosen and ordered a new laptop: a Lenovo ThinkPad X1 Yoga. People heavily recommended the X1 Carbon, which is essentially the same computer except less touch-focused. That led me to the Yoga which seems to fit the bill perfectly: in addition to the necessary touchscreen, according to reviews it has otherwise excellent screen characteristics, a perfect keyboard, great speakers, and a great trackpad. I also like the look and probable durability of the aluminum case. Though it’s not a Ryzen 4000-series laptop, CPU performance is still three times better than my current laptop, so I’m not complaining. Mine arrives in three weeks. Thanks again everyone!</p> Nate Graham http://www.thelins.se/johan/blog/?p=1166 Photoframe Hack Tue, 26 May 2020 19:30:56 +0000 http://www.thelins.se/johan/blog/2020/05/photoframe-hack/ <p>Sometimes you just want to get something done. Something for yourself.</p> <p>You do not intend it to be reused, or even pretty.</p> <p>You build a tool.</p> <p>My tool was a photoframe with some basic overlays. I wanted the family calendar, some weather information (current temperature + forecast), time, and the next bus heading for the train station.</p> <figure class="wp-block-image size-large"><img src="//www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-1024x768.jpg" alt="" class="wp-image-1167" srcset="http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-1024x768.jpg 1024w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-300x225.jpg 300w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-768x576.jpg 768w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-1536x1152.jpg 1536w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082112-2048x1536.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure> <p>To make this acceptable in a home environment, I built it as a photoframe. You can find the sources in the <a href="https://github.com/e8johan/hassframe-ui">hassframe-ui</a> repository on my github.</p> <p>A hidden feature is that if you tap the screen, a home automation control panel slides up. That way you can control all the lights, as well as heat in the garage and an AC in the bedroom. Very convenient.</p> <figure class="wp-block-image size-large"><img src="//www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-1024x768.jpg" alt="" class="wp-image-1168" srcset="http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-1024x768.jpg 1024w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-300x225.jpg 300w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-768x576.jpg 768w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-1536x1152.jpg 1536w, http://www.thelins.se/johan/blog/wp-content/uploads/2020/05/IMG_20200409_082134-2048x1536.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure> <p>All this is built using QML. Three somewhat useful models are available:</p> <ul> <li> <a href="https://github.com/e8johan/hassframe-ui/blob/master/IcalModel.qml">IcalModel</a>, taking a URL and parsing whatever it gets back as ICAL data. It is a very naive parser and does not care about things such as time zones and other details.</li> <li> <a href="https://github.com/e8johan/hassframe-ui/blob/master/YrWeatherModel.qml">YrWeatherModel</a>, uses <a href="https://yr.no">yr.no</a>‘s <a href="https://hjelp.yr.no/hc/en-us/articles/360009342833-XML-weather-forecasts">public APIs</a> to pull out a weather forecast for a given location.</li> <li> <a href="https://github.com/e8johan/hassframe-ui/blob/master/BusStopModel.qml">ButStopModel</a>, uses the APIs from resrobot to look for departures to the train station from two bus stops close to my home and then merge the results into a model.</li> </ul> <p>I also have a bunch of REST calls to my local <a href="https://www.home-assistant.io/">home assistant</a> server. Most of these reside in the <a href="https://github.com/e8johan/hassframe-ui/blob/master/HassButton.qml">HassButton</a> class, but I also get the current temperature from there. These are hardcoded for my local network, so needs refactoring to be used outside of my LAN.</p> <p>All of these interfaces require API keys of one kind or another – be it a proper key, or a secret URL. These are <a href="https://github.com/e8johan/hassframe-ui/blob/master/main.cpp#L32">pulled from environment variables</a> in <code>main.cpp</code> and then exposed to QML. That way, you can reuse the components without having to share your secrets.</p> <p>All in all the code is quite hacky. Especially <code>main.qml</code>. I refactor out parts from there now and then, but the photoframe works, so its not anything that I prioritize.</p> <p>Currently it runs on a Raspberry Pi on top of Raspbian. I want to build an optimized Yocto image making it less hacky and more pre-packaged. Perhaps there will be a rainy day this summer and I’ll get around to it. Burkhard has prepared the <a href="https://www.embeddeduse.com/2020/05/26/qt-embedded-systems-1-build-linux-image-with-yocto/">instructions needed</a> over at <a href="https://www.embeddeduse.com/">embedded use</a>.</p> Johan Thelin https://rabbitictranslator.com/wordpress/?p=552 Contributing to KDE is easier than you think – Websites from scratch Tue, 26 May 2020 18:00:00 +0000 https://rabbitictranslator.com/wordpress/index.php/2020/05/26/contributing-to-kde-websites-from-scratch/ <p>Sup y’all.</p> <p>This is a series of blog posts explaining different ways to contribute to KDE in an easy-to-digest manner. The purpose of this series originated from how I feel about asking users to contribute back to KDE. I firmly believe that showing users how contributing is easier than they think is more effective than simply calling them out and directing them to the correct resources; especially if, like me, said user suffers from anxiety or does not believe they are up to the task, in spite of their desire to help back.</p> <p>Last time I talked about websites, I taught how to <a href="https://rabbitictranslator.com/wordpress/index.php/2019/12/08/contributing-to-kde-porting-websites-to-markdown/">port current KDE websites to Markdown</a>, and this led to a considerable influx of contributors, since it required very little technical knowledge. This blog post however is directed to people who are minimally acquainted with git, html/css, and Markdown. We will be learning a bit of how Jekyll and scss work too.</p> <p>This post has now been copied over to <a href="https://community.kde.org/KDE.org/Jekyll">https://community.kde.org/KDE.org/Jekyll</a>! Which means the content available on the wiki can serve as a full tutorial explaining how to prepare KDE application websites from scratch using Jekyll. This should in theory enable you to at the very least set up a Jekyll environment, apply content to it, and insert some css in it for a bit of customization!</p> <p>Please be wary that not every project necessarily wants a website of their own, and so you need to contact the website maintainers either directly or by contacting the KDE Web team over <a href="https://t.me/KDEWeb">Telegram</a>, <a href="https://webchat.kde.org/#/room/#freenode_#kde-www:matrix.org">Matrix</a> or <a href="irc://chat.freenode.net/kde-www">IRC</a>!</p> <p>As usual, if you want to skip the explanations and start immediately, you can click <a href="#getonwithit">here</a>.</p> <h2>Preparations</h2> <p>The first thing we’ll need to do is install the programs required to create the website. Just install: <code>ruby-dev bundler git</code> using your distribution package manager, and we’re set to go!</p> <p>Let’s download the KDE repository containing the original KDE Jekyll theme. This way, we can both explore the repo and obtain the examples folder. Run the following command:</p> <p><code>git clone https://invent.kde.org/websites/jekyll-kde-theme.git</code></p> <p>Inside, there are mainly three folders we should take a look at: <code>/css</code>, <code>/_sass</code>, and <code>/examples</code>.</p> <p>Inside <code>/_sass</code>, there are several <code>/.scss</code> files which should be the foundation of the KDE theme. If you already have some experience with these files, you should know that they can be imported to any website that uses the theme by adding an <code>@import</code> inside a <code>/main.scss</code>.</p> <p>Inside <code>/css</code>, the file <code>/main.scss</code> is located. Here you can see that the various <code>.scss</code> files you previously saw in the <code>/_sass</code> folder are being imported into the project. Any extra CSS shoud be contained either within <code>main.scss</code> or any <code>.scss</code> file you create within this folder. </p> <p>If you check the <code>/examples</code> folder, you can see two folders: <code>/application</code> and <code>/application-components</code>. The first is a general example for building any application website; the latter is useful for bundled applications, as is the case of <a href="http://kontact.kde.org">kontact.kde.org</a>. For the purpose of this post, your main concern should be copying the <code>/application</code> folder to another place, more fitting for work.</p> <p>In my case, for instance, I was planning to create the website for Subtitle Composer, so I put the folder inside my home folder. I then renamed it to <code>/subtitlecomposer-kde-org</code>, so as to follow the pattern found over KDE’s Gitlab instance, <a href="https://invent.kde.org/websites">Invent</a>.</p> <h2>How stuff works</h2> <p>With this, we now have an example website to improve. Let’s take a look at what you will change to make it a proper website for a KDE application:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0522_0043.png" alt="" class="wp-image-666" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0522_0043.png 575w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0522_0043-300x222.png 300w" sizes="(max-width: 575px) 85vw, 575px"></figure> <p>First of all, there are the folders <code>/assets/img</code> and <code>/css</code>. <code>/assets/img</code> is pretty straightforward, it’s where you’ll put any media you want to display on the website that’s not displayed by the theme. The already present <code>app_icon.png</code> is what will be displayed on the upper left of the website, <code>screenshot.png</code> will be used to display the application screenshot inside the main example carousel.</p> <p>As already mentioned, the <code>/css</code> folder is where you should store any <code>.scss</code> files you’d like to create, in addition to <code>main.scss</code>. Inside it, you should already see <code>home.scss</code> and <code>download.scss</code>. The absolute minimum required should be <code>home.scss</code>, though.</p> <p>Your example website should also have a <code>.gitignore</code>. This is important since Jekyll generates extra folders and files when compiled, and we don’t want them to be unnecessarily uploaded to our future repository when we push it to Invent.</p> <p>The two main configuration files you should pay attention to are <code>Gemfile</code> and <code>_config.yml</code>. <code>Gemfile</code> is what determines the use of Jekyll and the KDE Jekyll theme, it should have something like:</p> <pre class="wp-block-preformatted"><code>source "https://rubygems.org"<br>ruby RUBY_VERSION<br>gem "jekyll", "3.8"<br>gem "jekyll-kde-theme", path: '../../'</code></pre> <p>You should always change the path of the jekyll-kde-theme to git, it’s the main way the theme is distributed for all KDE application websites to receive fixes as soon as possible. You also need it if you want to use a dark theme on the website. You need to switch that line to include the following:</p> <p><code>gem "jekyll-kde-theme", :git =&gt; 'https://invent.kde.org/websites/jekyll-kde-theme.git'</code></p> <p>As for the <code>_config.yaml</code>, it’s where most metadata for the website will be stored, and it’s also what determines the website’s structure:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0518_0104.png" alt="" class="wp-image-600" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0518_0104.png 585w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0518_0104-300x187.png 300w" sizes="(max-width: 585px) 85vw, 585px"><figcaption>Figure 1 – Default _config.yaml example.</figcaption></figure> <p>You should change the appropriate information there by checking the previous website for the application you’re designing it for, or by contacting the devs directly if they don’t already have a website.</p> <p>I’ll elaborate a bit more on the role of this file on the structure of the website later.</p> <p>After reading the config files, the first file we should take a look at should be <code>index.html</code>.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_2142.png" alt="" class="wp-image-631" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_2142.png 832w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_2142-300x177.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_2142-768x453.png 768w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"><figcaption>Figure 2 – Default index.html example.</figcaption></figure> <p>The section within <code>---</code> is a bit of metadata determining what should be included on the website, it is called <code><strong>Front Matter</strong></code>. It should be present regardless of whether you’ll be working on an HTML or Markdown file.</p> <p>Then, you can see a section containing a carousel with only one image. You may have noticed that <code>kHeader</code> was also present within the KDE Jekyll <code>/_sass/home.scss</code> file. </p> <p>That’s what’s convenient in this kind of setup: you can use resources already available by the theme by just calling them. If you’re already acquainted with those resources, it becomes quite easy to create multiple reproducible builds with them. We will be using a few of those later on.</p> <p>This is how the <code>index.html</code> looks like by default; Konsole is used as a template website in this case.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650-1024x502.png" alt="" class="wp-image-612" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650-1024x502.png 1024w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650-300x147.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650-768x376.png 768w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650-1200x588.png 1200w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1650.png 1343w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"><figcaption>Figure 3 – Default appearance of example website.</figcaption></figure> <p>Carousels are <a href="http://shouldiuseacarousel.com/">generally a bad idea</a> unless they are properly implemented, thus the carousel doesn’t come with more than one image by default. However, it is the website maintainer’s choice as to whether it should be used or not.</p> <p>The line we see there containing <code>&#123;% include blog.html %}</code> serves to insert <code>blog.html</code> in the contents of <code>index.html</code>. <code>blog.html</code>, in turn, pulls the Markdown files inside your <code>/_posts</code> folder. Thus, the result:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1659-1024x509.png" alt="" class="wp-image-614" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1659-1024x509.png 1024w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1659-300x149.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1659-768x382.png 768w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1659.png 1120w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"><figcaption>Figure 4 – Default blog element. Shown using the dark theme so as to not f***ing blind you in my dark theme blog. The following images should also follow a dark theme for readability.</figcaption></figure> <p>Now, let’s take a look at the <code>get-involved.md</code> file now, which should be easier to understand.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1647.png" alt="" class="wp-image-610" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1647.png 666w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1647-300x225.png 300w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"><figcaption>Figure 5 – Default get-involved.md example.</figcaption></figure> <p>Writing in Markdown is particularly easy, and Jekyll interprets each part of Markdown as HTML code, so if you want to add a specific style to something written in Markdown, you’d use its HTML equivalent, so in <code>## Text for a header</code>, <code>##</code> would be considered an <code>&lt;h2&gt;</code> tag.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701-1024x468.png" alt="" class="wp-image-615" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701-1024x468.png 1024w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701-300x137.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701-768x351.png 768w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701-1200x549.png 1200w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1701.png 1321w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"><figcaption>Figure 6 – How default get-involved.md looks like.</figcaption></figure> <p>The <code>konqi: /assets/img/konqi-dev.png</code> does not pull from the <code>/assets/img</code> folder from your local project, but rather from the <a href="https://invent.kde.org/websites/jekyll-kde-theme/-/tree/master/assets/img">Jekyll KDE theme itself</a>. The theme also provides for its layout on the page, so adding this simple line in your Front Matter will show this adorable Konqi icon properly. If any extra Konqi icon is required, they can be added manually to your local installation and called through a <code>konqi:</code> line.</p> <p>One particular thing that is shown twice in this image is the use of variables. With <code>&#123;&#123; site.<em>somedataIwanttoshow</em> }}</code> you can call any information present in your <code>_config.yaml</code>. Image XXXX shows two examples: <code>&#123;&#123; site.title}}</code> and <code>&#123;&#123; site.email }}</code>, which display on Image YYYY as <code>Konsole</code> and <code>konsole-devel@kde.org</code>, respectively.</p> <h2 id="getonwithit">Get on with it!</h2> <p><a href="https://youtu.be/sXE8LdXzeHM">Alright, alright</a>. Let’s build the website already.</p> <p>So what you previously did if you read the previous section was installing ruby-dev, bundler and git, right? It should be noted that you need Ruby 2.6 as of now. If you only have Ruby 2.7, you’ll face an error in which a gem named eventmachine won’t install. I’ll provide you with the respective commands for Ubuntu/Debian, openSUSE and Arch/Manjaro:</p> <pre class="wp-block-preformatted">Ubuntu: <code>sudo apt install ruby-dev bundler git</code> openSUSE: <code>sudo zypper install ruby-devel ruby2.6-devel bundler git</code> Arch: <code>sudo pacman -S ruby ruby2.6 ruby-bundler git</code></pre> <p>After that, you likely already cloned the KDE Jekyll repository by using the command <code>git clone https://invent.kde.org/websites/jekyll-kde-theme.git</code> and copied the <code>/examples/application</code> folder elsewhere, renaming the folder to something like <code>/myproject-kde-org</code>, right?</p> <p>Next you’ll want to change your directory (<code>cd</code>) to the project’s top directory. If it is located in your home folder, you should <code>cd myproject-kde-org</code>.</p> <p>Already inside, run <code>gem install jekyll --user-install</code>. This will run Ruby’s default dependency manager, <code>gem</code>, which will install the <code>jekyll</code> gem with user privileges, that is, inside your home directory. This is convenient because then you don’t fill your system with gems, and you can install different gems according to the project (not like you’ll need to if you’re just planning on creating one website).</p> <p>After the command finishes downloading the gems, run <code>bundle config set path 'vendor/bundle'</code> and afterwards <code>bundle install</code>. The first command determines where to store the gems defined in your <code>Gemfile</code>, namely <code>jekyll</code> and <code>jekyll-kde-theme</code>. The command <code>bundle install</code> subsequently installs them. The later takes a bit to finish.</p> <p>That’s basically it. With that set up, we can generate our website with <code>bundle exec jekyll serve</code>. You’ll see output like this:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1742.png" alt="" class="wp-image-621" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1742.png 640w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_1742-300x120.png 300w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"><figcaption>Figure 7 – Serving Jekyll website on localhost at default port 4000.</figcaption></figure> <p>As you can see, the website should be available by opening a browser and typing <code>127.0.0.1:4000</code>. If you’re working on a server without a GUI interface, get your ip with <code>ip a</code> and use it with the command:</p> <p><code>bundle exec jekyll serve --host my.ip.shouldbe.here --port anyportIwant</code></p> <p>Then access it through another machine on your LAN—this includes your phone, which is convenient when you’re testing your website on mobile.</p> <p>One nicety about Jekyll is the functionality of <code>auto-regeneration</code>. With this properly running, every change you do to a file on your website will show up automatically on it without requiring a “server restart”, so to speak. With this, you can keep the website running on your side monitor (if you have any) while you change files on your main monitor.</p> <p>If you get an error about <a href="https://github.com/guard/listen/wiki/Duplicate-directory-errors">Duplicate Directories</a>, just ignore it. This occurs because of a symlink in <code>/examples/application-components</code> which is quite convenient, and this error does not hinder you from generating your website. If you reeeeeeally don’t want your beautiful terminal output to be plagued by an error message, though, you can just remove the <code>/vendor/bundle/ruby2.6/blablabla/_changelogs</code> and <code>/vendor/bundle/ruby2.6/blablabla/_posts</code> folders which are shown in the error output.</p> <h2>A practical example: Subtitle Composer</h2> <p>Now I’ll show you some ways I customized and worked on the Subtitle Composer website, the website that allowed me to learn how to handle Jekyll.</p> <p>The first thing I noticed was the following line used to add a screenshot to the carousel:</p> <p><code>&lt;div class="slide-background" style="background-image:url(/assets/img/screenshot.png)"&gt;&lt;/div&gt;</code></p> <p>This means I need to add <code>background-image:url(/path/to/image/either/local/or/from/theme.png)</code> whenever I want to have an element link to an image. I prefer to do so in scss since pure Markdown doesn’t allow to apply styling directly, unlike HTML, so everything stays in the same place.</p> <p>I could naturally switch the <code>screenshot.png</code> file in my <code>/assets/img</code> folder in order to switch the screenshot, which is what I did; but what about the wallpaper? I have nothing against Kokkini; however, I think keeping a more up-to-date wallpaper makes more sense for a new website. Well, in all honesty, I also wanted to do this because I particularly like the newest wallpapers. <img src="//s.w.org/images/core/emoji/12.0.0-1/72x72/1f600.png" alt="😀" class="wp-smiley" style="height: 1em; max-height: 1em;"></p> <p>Apparently the wallpaper was showing up despite not existing in my local <code>/assets/img</code> folder, therefore it was being provided by the theme by default.</p> <p>Right clicking on the wallpaper and selecting Inspect element immediately shows the css element <code>div.carousel-item-content</code>. However, after some testing, the actual element that needs to be changed is <code>#kHeader</code>. Therefore, on my <code>main.scss</code> file, I added <code>#kHeader &#123;background-image:url(/assets/img/wallpaper.png)</code>. This managed to override the wallpaper provided by the KDE Jekyll theme, switching Kokkini for Next.</p> <p>The next thing I wanted to do was to add a subtitle effect on the name of Subtitle Composer; it seemed like an awesome thing to do, but I had no idea how to do that (I’m not very experienced with web design at all! I actually took way too much time to learn all of this), and so I searched for it in the internet.</p> <p>The guess that got me in the right direction was thinking that I’d need a thin border around text to convey an effect of subtitle, thus I searched for “css text 1px border”, which led me to this StackOverflow question: <a href="https://stackoverflow.com/questions/2570972/css-font-border">CSS Font Border?</a>, with the following code: <code>h1 &#123;color:yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}</code>.</p> <p>So I included a class named <code>subtitleheader</code> to my original <code>&lt;h1&gt;Subtitle Composer&lt;/h1&gt;</code>, allowing me to add <code>.subtitleheader &#123;font-size:30px;color:yellow; text-shadow:-3px 0 #4d4d4d, 0 3px #4d4d4d, 3px 0 #4d4d4d, 0 -3px #4d4d4d;font-weight:bold;min-width:130%}</code> to <code>main.scss</code> after a ton of experimenting until I achieved the desired result. I added similar code to the paragraph describing Subtitle Composer, namely <code>.subtitleparagraph &#123;font-size:20px;color:#eff0f1; text-shadow:-2px 0 #4d4d4d, 0 2px #4d4d4d, 2px 0 #4d4d4d, 0 -2px #4d4d4d;font-weight:bold;min-width:130%}</code>, and so I arrived at this:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0519_2347.png" alt="" class="wp-image-637"><figcaption>Figure 8 – Subtitle effect.</figcaption></figure> <p>So now I need to change the top navigation bar to fit what I needed.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0006.png" alt="" class="wp-image-642" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0006.png 843w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0006-300x41.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0006-768x104.png 768w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"><figcaption>Figure 9 – Top navigation bar on browser.</figcaption></figure> <p>For that, I need to learn how to change some stuff on <code>_config.yaml</code>. Let’s take a look at the code:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0012.png" alt="" class="wp-image-643"><figcaption>Figure 10 – Top navigation bar on _config.yaml.</figcaption></figure> <p>This is quite straightforward. A navigation bar can be on the top or bottom section, and each <code>- title:</code> represents an element in the navigation bar, and each element can work as a list if you add a <code>subnav</code>. Despite the <code>url:</code> pointing to an html file, markdown files can be used too without specifying the .md file format.</p> <p>I changed it to look like so:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0115.png" alt="" class="wp-image-648"><figcaption>Figure 11 – Changed top navigation bar.</figcaption></figure> <p>Which is way simpler than the default and fits the content I could find about Subtitle Composer that was available both on the <a href="https://invent.kde.org/multimedia/subtitlecomposer">Invent project</a> and its <a href="https://github.com/maxrd2/subtitlecomposer">old Github</a>.</p> <p>I also copy-pasted the bottom navigation bar from the <a href="https://invent.kde.org/websites/kdeconnect-kde-org/-/blob/master/_config.yml">KDE Connect website</a> so it gets quite complete on the bottom of the website too.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0147-1024x286.png" alt="" class="wp-image-656" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0147-1024x286.png 1024w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0147-300x84.png 300w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0147-768x214.png 768w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0147.png 1150w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"><figcaption>Figure 12 – Complete bottom navigation bar.</figcaption></figure> <p>After that I could work on inserting the content inside the respective .md files.</p> <p>Let’s take a look at <code>features.md</code> and <code>get-involved.md</code> now.</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0125.png" alt="" class="wp-image-651" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0125.png 594w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0125-300x144.png 300w" sizes="(max-width: 594px) 85vw, 594px"><figcaption>Figure 13 – Subtitle Composer features.md.</figcaption></figure> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0123.png" alt="" class="wp-image-650" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0123.png 508w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0123-300x154.png 300w" sizes="(max-width: 508px) 85vw, 508px"><figcaption>Figure 14 – Subtitle Composer get-involved.md.</figcaption></figure> <p>Anyone acquainted with HTML and Markdown is likely to know that <code>---</code> is the equivalent to <code>&lt;hr&gt;</code>, it’s an horizontal ruler, that is, it creates a straight horizontal line, which in this case acts sort of like a separator. I used this together with an HTML line break <code>&lt;br&gt;</code> so the header gets more noticeable.</p> <p>Also note that using <code>---</code> after the Front Matter will be interpreted by Jekyll as normal Markdown.</p> <p>The reason I wanted to show this was to exemplify my previous comment about Markdown being interpreted as HTML: if I add a style to the element <code>hr</code> in <code>main.scss</code>, it will work for both the HTML and Markdown notations. So, by adding <code>hr &#123;border-color:#7f8c8d}</code> when using a dark theme, the result should be something like this:</p> <figure class="wp-block-image size-large"><img src="//rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0135-1.png" alt="" class="wp-image-654" srcset="https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0135-1.png 747w, https://rabbitictranslator.com/wordpress/wp-content/uploads/2020/05/Screenshots-0520_0135-1-300x135.png 300w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"><figcaption>Figure 15 – Horizontal ruler with light border.</figcaption></figure> <p>Well, talking about dark themes, what the heck do I need to do to add a dark theme? I already knew <code>prefers-color-scheme</code> was used for that, but I had no idea how it worked. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">Mozilla page</a> explains it very well though, you just need to add any style to:</p> <p><code>@media (prefers-color-scheme: dark) &#123; any.style &#123;should-be:here;} }</code></p> <p>Since the <code>hr</code> element needed to be light only when using a dark theme, and should be standard black everywhere else, I used it inside <code>prefers-color-scheme: dark</code>. So the result was this:</p> <p><code>@media (prefers-color-scheme: dark) &#123; hr &#123;border-color:#7f8c8d} }</code></p> <p>If you want to test <code>prefers-color-scheme</code> on your browser without changing your local theme, on Firefox you can go to <code>about:config</code> and create a config named <code>ui.systemUsesDarkTheme</code> with a number value of <code>0</code> or <code>1</code>, and on Chrome you can open the Developer console, click on the top right hamburger menu, go to More tools, Rendering, and change <code>Emulate CSS media feature prefers-color-scheme</code>.</p> <p>I made a few more customizations to the website, as you can check out <a href="https://invent.kde.org/thiagosueto/subtitlecomposer-kde-org">here</a>. However, the examples I showed are not only enough for anyone to start hacking, but they are also proof of how I managed to learn stuff on my own, search for what I wanted to change on the website, and how I managed to learn all of that in a few months despite working full-time and not having that much free time in general. You can be sure you’re able to do that too!</p> <p>Additionally, Jekyll seems to be quite performant. It doesn’t use JavaScript and most KDE websites done with it render over 90% performance on Google’s PageSpeed Insights, y’know!</p> <p>If you’re interested in building a website from scratch using Jekyll for a KDE application, please contact the KDE Web team over <a href="https://t.me/KDEWeb">Telegram</a>, <a href="https://webchat.kde.org/#/room/#freenode_#kde-www:matrix.org">Matrix</a> or <a href="irc://chat.freenode.net/kde-www">IRC</a> first, yeah? This post was also copied over to <a href="https://community.kde.org/KDE.org/Jekyll">https://community.kde.org/KDE.org/Jekyll</a> if you’d rather to check the wiki for these instructions.</p> Thiago Masato Costa Sueto http://feverfew.home.blog/?p=53 KIO FUSE Beta (4.95.0) Released Tue, 26 May 2020 09:55:28 +0000 https://feverfew.home.blog/2020/05/26/kio-fuse-beta-4-95-0-released/ <p>It’s a great pleasure to announce that KIO FUSE has a second Beta release available for testing! We encourage all who are interested to test and report their findings (good or bad) <a href="https://invent.kde.org/system/kio-fuse/-/issues/7">here</a>. Note that, the more people who test (and let us know that they’ve tested), the quicker we’ll be confident to have a 5.0.0 release. You can find the repository <a href="https://invent.kde.org/kde/kio-fuse">here</a>.</p> <p>To compile KIO FUSE, simply run <code>kdesrc-build kio-fuse</code> or follow the <a href="https://invent.kde.org/kde/kio-fuse/blob/master/README">README</a>. If your distributor is really nice they may already have KIO FUSE packaged but if they don’t, encourage them to do so!</p> <p>In this beta, the hallmark features implemented are the ability to read and write without downloading the whole file (smb/sftp/file protocols only) and expiring local nodes so that changes on the remote side become visible. In addition, a new Dbus API was added to map a FUSE path back to a remote URL, used for syncing the terminal panel in Dolphin the main view (needs Dolphin &gt;= 20.07.80).</p> <p>Thanks,</p> <p>feverfew</p> <p></p> A Saoutkin (feverfew) /2020/05/26/Plasma-Mobile-update-April-May.html Plasma Mobile update: April-May 2020 Tue, 26 May 2020 00:00:00 +0000 https://plasma-mobile.org/2020/05/26/Plasma-Mobile-update-April-May.html <p>It’s been a while since the last status update on Plasma Mobile, so let’s take a look at what happened since then.</p> <p>To assist new people in contributing, we organized a virtual mini Plasma Mobile sprint in April. During the three days, we discussed many things, including our current tasks, the websites and documentation, our apps and many other topics. Most of our important tasks have been asigned to people, many of them have been implemented already.</p> <p>On Saturday, there was a training day, with four training sessions on the technology behind Plasma Mobile:</p> <ul> <li><a href="https://peertube.mastodon.host/videos/watch/ea598f81-fbbb-4010-96e0-952f897d473e">Introduction to Kirigami</a></li> </ul> <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="//peertube.mastodon.host/videos/embed/ea598f81-fbbb-4010-96e0-952f897d473e" frameborder="0" allowfullscreen=""></iframe> <ul> <li><a href="https://peertube.mastodon.host/videos/watch/d257ec00-c029-4448-bce4-e6c750d87738">Porting KDE Applications to Android</a></li> </ul> <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="//peertube.mastodon.host/videos/embed/d257ec00-c029-4448-bce4-e6c750d87738" frameborder="0" allowfullscreen=""></iframe> <ul> <li><a href="https://peertube.mastodon.host/videos/watch/84f24bea-af4c-4ae3-8ef3-7ff587ea17cf">Developing Telephony Functionality using phonesim</a></li> </ul> <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="//peertube.mastodon.host/videos/embed/84f24bea-af4c-4ae3-8ef3-7ff587ea17cf" frameborder="0" allowfullscreen=""></iframe> <ul> <li><a href="https://peertube.mastodon.host/videos/watch/78fb236c-931e-4051-99db-1d203203d673">How to run the Plasma Mobile Shell on your desktop</a></li> </ul> <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="//peertube.mastodon.host/videos/embed/78fb236c-931e-4051-99db-1d203203d673" frameborder="0" allowfullscreen=""></iframe> <p>While the Sprint was not active, we were busy working on Plasma Mobile itself.</p> <p>Nico mostly worked on fixing bugs. First, <a href="https://invent.kde.org/graphics/okular/-/merge_requests/150">files now open correctly in Okular</a> Also, <a href="https://invent.kde.org/frameworks/plasma-framework/-/commit/bc3ccd1782cb59f00cad089dfb5abb1594c6c5da">the busy indicator made invisible when it’s not running</a> In ruqola, he <a href="https://invent.kde.org/network/ruqola/-/commit/75c0309198247bd534694ba22f70484af7e15b01">fixed</a> a few <a href="https://invent.kde.org/network/ruqola/-/commit/802bf35bb5fa53a406ff0decc6667d1952dd22da">bugs</a> regarding the layout on small screens.</p> <p>KTrip now has all providers disabled by default, to make it easier to have a good selection of enabled providers. The list of available connections and the connection details have been redesigned.</p> <p><img src="//www.plasma-mobile.org/img/ktrip-connections-redesign.png" alt="Redesigned connections view" class="blog-post-image-small"> <img src="//www.plasma-mobile.org/img/ktrip-connections-redesign2.png" alt="Redesigned connection details" class="blog-post-image-small"></p> <p>It now also allows to open a station’s position on a map.</p> <p>Tobi has been busy working on the wireless connectivity. Some refactoring and bugfixes allow <a href="https://phabricator.kde.org/D28799">Wi-Fi connections to be editable now</a> and to create custom connections, enabling users to connect to hidden Wi-Fi networks. Also, there is now a <a href="https://phabricator.kde.org/D29019">settings module for creating Wi-Fi hotspots</a></p> <p>Apart from the work on the wireless settings, he put a lot of work into <a href="https://invent.kde.org/kde/alligator">Alligator</a>, the RSS feed reader for Plasma Mobile. Even though it’s been in development since the previous Plasma Mobile Sprint in February, it’s never really been anounced here. By now, most basic functionality is working, and it’s not even slow anymore!</p> <p>In the last few days especially, a lot of work was put into things like <a href="https://invent.kde.org/kde/alligator/-/commit/26c57d45d7ca99445e9265d31262db78af207f62">porting it to Android</a>, <a href="https://phabricator.kde.org/D29070">getting an (amazing!) icon</a> and getting a proper KDE repository for it. With some more polish, it will be ready for a first release soon.</p> <p>Dimitris has put a lot of work into calindori. <a href="https://invent.kde.org/kde/calindori/-/commit/e30697f51ef701f476740ba071e3d46eff93cb59">A day view has been created</a>, offering the users the opportunity to review the incidences (events or tasks) of each day. In specific, the incidences are presented in an hour list, according to their start and in case of events end time. The users may navigate between the days as well as return to the current day, using the action toolbar buttons. <img src="//www.plasma-mobile.org/img/calindori_dayview.png" alt="Day View" class="blog-post-image-small"></p> <p><a href="https://invent.kde.org/kde/calindori/-/commit/c1627a69b073c4804a7042ee554005e2f17b6b8f">A Week view is now available</a>; users can manage tasks and events via a per-week dashboard. On that dashboard, a list view displays the days of each week. The tasks and events of each day can be seen. Upon clicking to a task/event, a new page is opened. On that page, the task/event can be edited or deleted. Users can navigate between weeks using the action toolbar icons. <img src="//www.plasma-mobile.org/img/calindori_weekview.png" alt="Week View" class="blog-post-image-small"></p> <p>Bart has made the <a href="https://invent.kde.org/kde/plasma-phone-components/-/merge_requests/57">wifi</a> and <a href="https://invent.kde.org/kde/plasma-phone-components/-/merge_requests/60">wwan</a> buttons in the top drawer toggles instead of opening the settings pages.</p> <p>Marco <a href="https://invent.kde.org/kde/plasma-angelfish/-/commit/6092d8839b83b33434bb49a9f74ab59ff43e61b0">implemented a webapp-container in Angelfish</a>, which can be used to ship websites as webapps in Plasma Mobile images.</p> <p>Jonah later <a href="https://invent.kde.org/kde/plasma-angelfish/-/commit/ebacbd7b20bc8884756422bb4ef5ff8f7ba2e5cb">added functionality to Angelfish to allow adding webapps to the homescreen</a>. As webapps don’t have any browser user interface apart from the html content, he added <a href="https://invent.kde.org/kde/plasma-angelfish/-/commit/787c22894ea8a6d4d15ee67051bc1779b577dc41">a retry button </a> to the error handler, to allow reloading in case of errors. Jonah also adapted Angelfish’s use of overlay sheets to the new design from Kirigami. The same was done with the time settings module of the settings app.</p> <p>Recently he managed to <a href="https://invent.kde.org/plasma-mobile/plasma-phone-settings/-/commit/897f36d56b531ead0c7039e14e4e03e5717934f6">workaround a bug</a> causing scrolling in all apps using QtWebEngine, notably Angelfish, to jump around. This was caused by frames being shown in the wrong order. Fixing this was only possible thanks to the debugging of this issue Rinigus Saar did for SailfishOS. Over the last month, he started to rewrite the SMS app SpaceBar, because it became very hard to debug, and the KDE Telepathy API it was using wasn’t well suited for SMS. The new app is directly based on TelepathyQt, just like the dialer. New features include mapping of contacts to phone numbers of incoming conversations, starting chats without having to add a contact for the number, visual and functional improvements. Anthony Fieroni <a href="https://invent.kde.org/jbbgameich/spacebear/-/commit/6446a7e72182a61521a6a699ac05a9e562daba18">fixed incoming conversations</a> in the new app.</p> <p>While the app is already working better than SpaceBar, we are still working on fixing the last bugs and integrating it with the dialer internally. Jonah also <a href="https://invent.kde.org/frameworks/plasma-framework/-/merge_requests/1">updated the design of the application headers</a>, which are used across all Kirigami apps according to the suggestions of the KDE Visual Design Group.</p> <p>Rinigus <a href="https://invent.kde.org/kde/plasma-angelfish/-/commit/314a3fa0b609acdfac9bb80bb17fa7aed73c358f">redesigned the highlight of the current tab</a> in Angelfish, and implemented an <a href="https://invent.kde.org/kde/plasma-angelfish/-/commit/6b78bb4f4514fa4d7717b94e1846968a8b7c3e8c">overlay which shows the history of the current tab</a>.</p> <p>Nico worked on improving the dialer UI, which now makes use of the new SwipeNavigator component from Kirigami. <img src="//www.plasma-mobile.org/img/dialer-swipenavigator.png" alt="Redesigned dialer" class="blog-post-image-small"></p> <h3 id="want-to-help">Want to help?</h3> <p>This post shows what a difference new contributors can make. Do you want to be part of our team as well? Just in case we prepared <a href="https://invent.kde.org/dashboard/issues/?scope=all&amp;utf8=%E2%9C%93&amp;state=opened&amp;label_name%5B%5D=Mobile&amp;label_name%5B%5D=Junior%20Job">a few ideas for tasks new contributors</a> can work on. Most coding tasks require some QML knowledge. <a href="https://www.kdab.com/">KDAB’s</a> <a href="https://youtu.be/JxyTkXLbcV4">QML introduction video series</a> is a great resource for that!</p> Plasma Mobile blog http://blog.broulik.de/?p=802 Sunsetting XRandR Brightness Mon, 25 May 2020 18:30:00 +0000 https://blog.broulik.de/2020/05/sunsetting-xrandr-brightness/ <p>For a change, let’s talk about a topic other than notifications. More than five years ago (can’t believe how time has passed) I <a href="https://blog.broulik.de/2015/02/power-management-in-5-3/">took over maintainership of PowerDevil</a>, Plasma’s power management service. While I did a lot of cleanup and feature work in the beginning, there haven’t been many major changes for some time. </p> <figure class="wp-block-image size-large"><img src="//blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_201500.png" alt="Bar-like popup informing of a screen brightness change" class="wp-image-814" srcset="https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_201500.png 694w, https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_201500-300x81.png 300w" sizes="(max-width: 694px) 100vw, 694px"><figcaption>“Blast from the Past” – just casually sneaking in the more compact volume/brightness popup we’ll have in Plasma 5.20 to get your attention</figcaption></figure> <p>One of the first features I added back then was smooth brightness changes. PowerDevil supports three ways of changing screen brightness: through XRandR configuration, through DDC (display data channel, for desktop monitors, experimental and not built by default), and by writing to sysfs (<em>/sys/class/backlight</em> or <em>/sys/class/leds</em>). Since the latter requires privileges and uses a helper binary through KDE’s <a href="https://api.kde.org/frameworks/kauth/html/index.html">KAuth</a> framework, I only implemented the animation for the XRandR code path, which was executed in the same process.</p> <span id="more-802"></span> <p>Obviously, XRandR doesn’t work on Wayland, and it seems that modern graphics drivers don’t support changing brightness through it anymore either. I recently sat down and <a href="https://invent.kde.org/plasma/powerdevil/-/merge_requests/2">wrote a patch</a> to have the helper binary execute a similar animation. KAuth works quite magically by exposing methods defined in an <em>.actions</em> file through DBus and then calling them as <em>slots</em> through Qt’s meta object. Unfortunately, the way it is designed doesn’t allow for <a href="https://doc.qt.io/qt-5/qdbuscontext.html#setDelayedReply">delayed replies</a>, which I wanted to use so the job only finished once the animation was completed in order to keep PowerDevil’s state consistent. I then found that KAuth randomly keeps its helper running for 10 seconds, more than enough for a 250ms animation.</p> <p>I’m not too happy with the implementation and the brightness handling class itself has turned into quite a mess over the years, and having three (four, if you count keyboard brightness) completely separate brightness controls entangled within doesn’t help. To clean it up I want to get rid of XRandR brightness support. Since I don’t know if that’s actually still being used – I surely haven’t used it ever since I ditched the Intel driver – please do me a favor and check what brightness control your machine uses by running PowerDevil from command line (make sure to quit the running process first, and executable location will vary depending on your distribution):</p> <pre class="wp-block-preformatted">QT_LOGGING_RULES='powerdevil=true' /usr/lib/x86_64-linux-gnu/libexec/org_kde_powerdevil</pre> <p>When using XRandR it will say “powerdevil: Using XRandR”, otherwise it’ll be “Xrandr not supported, trying ddc, helper”. (It’ll always say it tries the DDC helper even when it isn’t built with that.) If it actually uses XRandR please tell me and what GPU and driver you are using. That would help a lot in judging the impact of removing this! If it is indeed using XRandR, please see if you can still manually write into <em>/sys/class/backlight/[whatever devices there may be]/brightness</em> to alter screen brightness. It prefers XRandR but that doesn’t mean that sysfs couldn’t be working, too. Please also tell me the value of <em>max_brightness</em> in there. Feel free to chime in on the <em>plasma-devel</em> <a href="https://mail.kde.org/pipermail/plasma-devel/2020-May/117379.html">mailing list thread</a> I started on the subject to share your thoughts. Now you can see why having some telemetry via <a href="https://api.kde.org/frameworks/kuserfeedback/html/index.html">KUserFeedback</a> would be tremendously useful for improving code quality and, er, “user experience”.</p> <figure class="wp-block-image size-large"><img src="//blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_200928-1024x576.png" alt="Fullscreen video player of a KDE Akademy 2019 talk “Taking KDE to the Skies: Making the Drone Ground Control Kirogi” with a “Battery running low” notification in the top right" class="wp-image-811" srcset="https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_200928-1024x576.png 1024w, https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_200928-300x169.png 300w, https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_200928-768x432.png 768w, https://blog.broulik.de/wp-content/uploads/2020/05/Screenshot_20200525_200928.png 1280w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Casually watching one of my favorite <a href="https://www.youtube.com/watch?v=Nxem6yTRC4M">Akademy 2019 talks</a> when my battery ran out</figcaption></figure> <p>Lastly, of course there can’t be a post on this blog without mentioning notifications: in the <a href="https://kde.org/announcements/plasma-5.18.90">upcoming Plasma 5.19</a> the “low battery” notification is marked as critical which will make it show on top of full screen windows. Previously, while watching a video, playing a game, or giving a presentation, you likely didn’t see an advance warning. Only once battery reached critical levels would you get told to pick up a charger, running, tumbling down some stairs, frantically searching for it, before the 60 second timeout for sleep or standby expired. (Seriously, the reason why throughout the years I prolonged the timeout from the original 30 seconds and eventually added a “cancel” button was to stop fellow Plasma hackers injure themselves on sprints when running to their bags to fetch a charger.)</p> Kai Uwe Broulik https://www.kdab.com/?p=24101 Using Modern CMake with Qt Mon, 25 May 2020 15:52:03 +0000 https://www.kdab.com/using-modern-cmake-with-qt/ <p>KDAB’s Kevin Funk presented <strong>Using Modern CMake with Qt</strong> at <a href="https://www.qt.io/qtvirtualtechcon2020">Qt Virtual Tech</a> Con last month.</p> <p>He reported that the Qt Company did a great job moderating the sessions at this event, and there was a lively Q&amp;A at the end – Kevin had to pick from about 60 questions, so this is a hot topic.</p> <p>Now the event is over you can access Kevin’s talk here, including the answers he had time for, and also his slides, below the abstract.</p> <p><iframe class="youtube-player" width="640" height="360" src="//www.youtube.com/embed/MJ4DunSrMFw?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" allowfullscreen="true" style="border:0;"></iframe></p> <h2>Using Modern CMake with Qt <span style="font-size: smaller;">with Kevin Funk</span> </h2> <p><strong>Prerequisite:</strong> No prior CMake experience required</p> <p><img class="alignnone wp-image-21071 size-full" style="margin: 20px 15px 20px 20px,;" src="//www.kdab.com/wp-content/uploads/stories/Kevin.Funk_-1.jpg" alt="" width="135" height="200" align="right" srcset="https://www.kdab.com/wp-content/uploads/stories/Kevin.Funk_-1.jpg 135w, https://www.kdab.com/wp-content/uploads/stories/Kevin.Funk_-1-68x100.jpg 68w, https://www.kdab.com/wp-content/uploads/stories/Kevin.Funk_-1-114x169.jpg 114w, https://www.kdab.com/wp-content/uploads/stories/Kevin.Funk_-1-68x100@2x.jpg 136w" sizes="(max-width: 135px) 100vw, 135px">CMake is a cross-platform build system, with powerful APIs for finding dependencies of various or specific versions, and with many abstractions for platforms, compilers, other build systems, and dependencies.</p> <p>The next major Qt version, Qt6, will be using CMake internally as its build system, so the CMake integration with Qt will likely get tighter and more versatile in the long-term.</p> <p>In this talk, we’ll be introducing Qt specific CMake functionalities, in order to find and use Qt5 inside your personal CMake-based project, using modern CMake capabilities. We are going to discuss how to find Qt installs using CMake’s find_package function and how to find specific Qt versions when multiple versions are installed.</p> <p>Further than that, useful CMake variables such as CMAKE_INCLUDE_CURRENT_DIR, CMAKE_AUTOMOC, CMAKE_AUTORCC, and CMAKE_AUTOUIC will be explained in detail and how the use of the CMake integrations can speed up the build drastically.</p> <p>Last but not least some of the additional supplied Qt related CMake functions, such as for big resources or translation support will be discussed.</p> <p><strong>Target audience: </strong>Build Engineers or Software Engineers who would like to know more about using Qt under CMake.</p> <p><strong>Download Kevin’s slides:</strong> <a href="https://www.kdab.com/wp-content/uploads/stories/QTVTC20-Using-Modern-CMake-Kevin-Funk.pdf">QTVTC20 – Using Modern CMake – Kevin Funk</a></p> <h4>About Kevin Funk</h4> <p>Kevin has actively developed with Qt/C++ since 2006 and has a special interest in tooling and profiling. He’s an active contributor to KDAB’s GammaRay analyzer (a high-level Qt application debugger) and has a strong emphasis on state machine tooling. He is a co-maintainer of the KDevelop IDE, a powerful C/C++ development environment backed by Clang, and is pushing for cross-platform success inside KDE. Kevin holds a Masters Degree in Computer Science.</p> <p>Download Kevin’s whitepaper on <a href="https://www.kdab.com/qt-and-cmake/">CMake and Qt…</a></p> <p>The post <a rel="nofollow" href="https://www.kdab.com/using-modern-cmake-with-qt/">Using Modern CMake with Qt</a> appeared first on <a rel="nofollow" href="https://www.kdab.com">KDAB</a>.</p> KDAB on Qt http://confifu.wordpress.com/?p=129 Week -1 : GSoC Project Report Mon, 25 May 2020 11:30:20 +0000 https://confifu.wordpress.com/2020/05/25/week-1-gsoc-project-report/ <p>I have started working on my project earlier due to the uncertain times that we find ourselves in. Hence this is Week -1 report, a week earlier than the official start of coding period. This week corresponds to Week 1 of the planned timeline.</p> <div class="wp-block-image"><figure class="alignright size-large is-resized"><img data-attachment-id="133" data-permalink="https://confifu.wordpress.com/screenshot-from-2020-05-25-16-14-44-1/" data-orig-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png" data-orig-size="881,941" data-comments-opened="1" data-image-meta='&#123;"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot-from-2020-05-25-16-14-44-1" data-image-description="" data-medium-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=281" data-large-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=750" src="//confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=881" alt="" class="wp-image-133" width="281" height="300" srcset="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=281 281w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=562 562w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-44-1.png?w=140 140w" sizes="(max-width: 281px) 100vw, 281px"><figcaption>Present state.</figcaption></figure></div> <p>This week was easier than expected. Adding the storyboard docker to Krita’s plugin system was very easy, thanks to the numerous dockers already implemented. Implementing outer GUI was tougher than that, but it was easy on absolute terms. The GUI consists of four QToolButtons namely Export, Comment, Lock(Icon), Arrange(Icon) and a QTableView(which will be promoted to a custom view). Three of these buttons Export, Comment and Arrange have a menu associated with them. Lock is a toggle button.</p> <div class="wp-block-image"><figure class="alignright size-large is-resized"><img data-attachment-id="134" data-permalink="https://confifu.wordpress.com/screenshot-from-2020-05-25-16-14-51/" data-orig-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png" data-orig-size="371,277" data-comments-opened="1" data-image-meta='&#123;"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot-from-2020-05-25-16-14-51" data-image-description="" data-medium-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=300" data-large-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=371" src="//confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=371" alt="" class="wp-image-134" width="106" height="79" srcset="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=106 106w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=212 212w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-14-51.png?w=150 150w" sizes="(max-width: 106px) 100vw, 106px"></figure></div> <p>Export Button’s menu is simple and consists of QActions corresponding to pdf and svg export formats. These buttons would open a Dialog. The dialog is not yet implemented.</p> <div class="wp-block-image"><figure class="alignright size-large is-resized"><img data-attachment-id="135" data-permalink="https://confifu.wordpress.com/screenshot-from-2020-05-25-16-15-00/" data-orig-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png" data-orig-size="344,379" data-comments-opened="1" data-image-meta='&#123;"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot-from-2020-05-25-16-15-00" data-image-description="" data-medium-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=272" data-large-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=344" src="//confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=344" alt="" class="wp-image-135" width="95" height="105" srcset="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=95 95w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=190 190w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-15-00.png?w=136 136w" sizes="(max-width: 95px) 100vw, 95px"></figure></div> <p>Comment button’s menu consists of a QListView and two QToolButtons. The QListView will be drawn based on the comments in main model’s data. This menu is not fully implemented yet. The (…) button is delete button.</p> <p></p> <div class="wp-block-image"><figure class="alignright size-large is-resized"><img data-attachment-id="136" data-permalink="https://confifu.wordpress.com/screenshot-from-2020-05-25-16-16-16/" data-orig-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png" data-orig-size="372,623" data-comments-opened="1" data-image-meta='&#123;"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot-from-2020-05-25-16-16-16" data-image-description="" data-medium-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=179" data-large-file="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=372" src="//confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=372" alt="" class="wp-image-136" width="111" height="186" srcset="https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=111 111w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=222 222w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=90 90w, https://confifu.files.wordpress.com/2020/05/screenshot-from-2020-05-25-16-16-16.png?w=179 179w" sizes="(max-width: 111px) 100vw, 111px"></figure></div> <p>Arrange button’s menu consists of 2 button groups Mode and View. The button groups consist of QRadioButtons corresponding to the values offered in Mode and View. This menu is setup so that it stays open after choosing an option, as the user might want to change more than one option. e.g. they might want to change view to column and mode to thumbnail at the same time.</p> <p>Next week I would try to write unit tests for delegate class, add details to documentation, implement the Storyboard Item class and start implementing the MVC classes.</p> Saurabh Kumar https://subdiff.org/blog/2020/wrapland-redone Wrapland redone Mon, 25 May 2020 10:00:00 +0000 https://subdiff.org/blog/2020/wrapland-redone <p>The KWinFT project with its two major open source offerings KWinFT and Wrapland was <a href="https://subdiff.org/blog/2020/the-k-win-ft-project">announced</a> one month ago. This made quite <a href="https://www.gamingonlinux.com/articles/kdes-window-manager-kwin-gets-forked-with-kwinft-to-accelerate-the-development-and-better-wayland.16446">some</a> <a href="https://www.phoronix.com/scan.php?page=news_item&amp;px=KWinFT-KDE-KWin-Forked">headlines</a> back then but I decided to keep it down afterwards and push the project silently forward on a technical side.</p> <p>Now I am pleased to announce the release of a beta version for the next <em>stable release 5.19</em> in two weeks. The highlights of this release are a complete redesign of Wrapland's server library and two more projects joining KWinFT.</p> <h2 id="wrapland-server-library-redesign">Wrapland Server library redesign</h2> <p>One of the goals of KWinFT is to facilitate large upsetting changes to the internal structure and technological base of its open source offerings. As mentioned one month ago in the project announcement these changes include pushing back the usage of Qt in lower-level libraries and instead making use of modern C++ to its full potential.</p> <p>We achieved the first milestone on this route in an impressively short timeframe: the redesign of Wrapland's server library for improved encapsulation of external libwayland types and providing template-enhanced meta-classes for easy extension with new functionality in the future.</p> <p>This redesign work was organized on a separate branch and <a href="https://gitlab.com/kwinft/wrapland/-/merge_requests/59">merged this weekend</a> into master. In the end that included over 200 commits and 40'000 changed lines. Here I have to thank in particular Adrien Faveraux who joined KWinFT shortly after its announcement and contributed several class refactors. Our combined work enabled us to deliver this major redesign already now with the upcoming release.</p> <p>Aside from the redesign I used this opportunity to add clang-based tools for static code analysis: <a href="https://clang.llvm.org/docs/ClangFormat.html">clang-format</a> and <a href="https://clang.llvm.org/extra/clang-tidy/">clang-tidy</a>. Adding to our autotests that run with and without sanitizers Wrapland's CI pipelines now provide efficient means for handling contributions by GitLab merge requests and checking back on the result after merge. You can see a full pipeline with linters, static code analysis, project build and autotests passing in the article picture above or check it out <a href="https://gitlab.com/kwinft/wrapland/pipelines/149043262">here</a> directly in the project.</p> <h2 id="new-in-kwinft-disman-and-kdisplay">New in KWinFT: Disman and KDisplay</h2> <p>With this release <a href="https://gitlab.com/kwinft/disman">Disman</a> and <a href="https://gitlab.com/kwinft/kdisplay">KDisplay</a> join the KWinFT project. Disman is a fork of libkscreen and KDisplay one of KScreen. KScreen is the main UI in a KDE Plasma workspace for display configuration and I was its main contributor and maintainer in the last years.</p> <p>Disman can be installed in parallel with libkscreen. For KDisplay on the other side it is recommended to remove KScreen when KDisplay is installed. This way not both daemons try to meddle with the display configuration at the same time. KDisplay can make use of plugins for KWinFT, KWin and wlroots so you could also use KDisplay as a general replacement.</p> <p>Forking libkscreen and KScreen to Disman and KDisplay was an unwanted move from my side because I would have liked to keep maintaining them inside KDE. But my efforts to integrate KWinFT with them were not welcomed by some members of the Plasma team. Form your own opinion by reading the discussion in the <a href="https://phabricator.kde.org/D29024">patch review</a>.</p> <p>I am not happy about this development but I decided to make the best out of a bad situation and after forking and rebranding directly created CI pipelines for both projects which now also run linters, project builds and autotests on all merge requests and branch pushes. And I defined some more <a href="https://gitlab.com/kwinft/disman/-/issues/6">courageous goals</a> for the two projects now that I have more control.</p> <p>One would think after years of being the only person putting real work into KScreen I would have had this kind of freedom also inside KDE but that is not how KDE operates.</p> <p>Does it need to be this way? What are arguments for and against it? That is a discussion for another article in the future.</p> <h2 id="very-next-steps">Very next steps</h2> <p>There is an overall technical vision I am following with KWinFT: building a modern C++ framework for Wayland compositor creation. A framework that is built up from independent yet well interacting small libraries.</p> <p>Take a look at <a href="https://gitlab.com/kwinft/kwinft/-/issues/21">this task</a> for an overview. The first one of these libraries that we have now put work in was Wrapland. I plan for the directly next one to be the backend library that provides interfacing capabilities with the kernel or a host window system the compositor runs on, what in most cases means talking to the <a href="https://en.wikipedia.org/wiki/Direct_Rendering_Manager">Direct Rendering Manager</a>.</p> <p>The work in Wrapland is not finished though. After the basic representation of Wayland objects has been improved we can push further by layering the server library like <a href="https://gitlab.com/kwinft/wrapland/-/issues/65">this task</a> describes. The end goal here is to get rid of the Qt dependency and make it an optional facade only.</p> <h2 id="how-to-try-out-or-contribute-to-kwinft">How to try out or contribute to KWinFT</h2> <p>You can try out KWinFT on <a href="https://manjaro.org">Manjaro</a>. At the moment you can install KWinFT and its dependencies on Manjaro's unstable images but it is planned to make this possible also in the stable images with the upcoming 5.19 stable release.</p> <p>I explicitly recommend the Manjaro distribution nowadays to any user from being new to Linux to experts. I have Manjaro running on several devices and I am very pleased with Manjaro's technology, its development pace and its community.</p> <p>If you are an advanced user you can also use Arch Linux directly and install a <a href="https://aur.archlinux.org/packages/kwinft-git/">KWinFT AUR package</a> that builds KWinFT and its dependencies directly from Git. I hope a package of KWinFT's stable release will also be soon available from Arch' official repositories.</p> <p>If you want to contribute to one of the KWinFT projects take a look at the <a href="https://gitlab.com/groups/kwinft/-/issues">open tasks</a> and come join us in our <a href="https://gitter.im/kwinft/community">Gitter channel</a>. I am very happy that already several people joined the project who provide QA feedback and patches. There are also opportunities to work on DevOps, documentation and translations.</p> <p>I am hoping KWinFT will be a welcoming place for everyone interested in high-quality open source graphics technology. A place with low entry barriers and many opportunities to learn and grow as an engineer.</p> Roman Gilg