diff --git a/HIG/source/qml/components/actionbutton/Actionbutton3.qml b/HIG/source/qml/components/actionbutton/Actionbutton3.qml index 8e09528..8dfe14d 100644 --- a/HIG/source/qml/components/actionbutton/Actionbutton3.qml +++ b/HIG/source/qml/components/actionbutton/Actionbutton3.qml @@ -1,41 +1,40 @@ /* * Copyright 2018 Fabian Riethmayer * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.6 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.5 as Kirigami import "../../models/" as Models import "../../addr/" as Addr import "../../lib/annotate.js" as A Rectangle { width: 800 height: 600 id: root Addr.Addressbook { id: addrbook index: 3 Component.onCompleted: { - addrbook.pageStack.push(addrbook.detailPage) qmlControler.start(); } } } diff --git a/HIG/source/resources/contribute.rst b/HIG/source/resources/contribute.rst index ab1aef6..eac0015 100644 --- a/HIG/source/resources/contribute.rst +++ b/HIG/source/resources/contribute.rst @@ -1,218 +1,223 @@ Contribute ========== The HIG is written in `reStructuredText `_, a lightweight markup language. For example the chapter heading together with the first paragraph looks like this in reStructuredText .. code-block:: rst Contribute ========== The HIG is written in `reStructuredText `_, a light weight markup language. For example the chapter heading together with the first paragraph looks like this in reStructuredText The restructuredText of the full HIG is organized into several source files. You can view and modify these source files with any text editor. The source files are hosted in a `Git repo `_. `Sphinx `_ is used to generate HTML pages from these source files. Tasks and changes are organized via `https://invent.kde.org `_. .. note:: On every page of the HIG, there is a *View page source* link in the top right corner. For more information and help you can find us on `Matrix `_, `IRC `_ or `Telegram `_ . If you are new to KDE devlopment, make sure to read `how to become a kde developer `_ first. Getting Started --------------- #. Install some tools with your distro's package manager: ================================== ================================ Distribution Command ================================== ================================ Arch, Manjaro ``sudo pacman -S git make`` Debian, Ubuntu, KDE Neon ``sudo apt install git make`` openSUSE ``sudo zypper install git make`` Fedora ``sudo dnf install git make`` CentOS/RHEL ``sudo yum install git make`` ================================== ================================ #. Clone the HIG source code repository into an empty folder: .. code-block:: sh git clone https://invent.kde.org/websites/hig-kde-org.git cd hig-kde-org #. Install some tools with Python's package manager, Pip. Pip should already be Installed, but if for some reason it is not, here are instructions for getting it: https://pip.pypa.io/en/stable/installing/ You can use Pip to install the required python modules either globally: .. code-block:: sh sudo pip install -r HIG/requirements.txt ...or in your home directory: .. code-block:: sh pip install -r HIG/requirements.txt --user If you install it in you home directory, make sure you have the installed packages in your path by adding it to your .profile: .. code-block:: sh echo "PATH=~/.local/lib:\$PATH" >> ~/.profile source ~/.profile Now you are ready to contribute to the HIG! To preview changes on your local machine, do the following: #. Enter the HIG directory with ``cd HIG`` #. Run ``make html`` to create the HTML pages #. Open ``build/html/index.html`` in your browser (e.g. run ``firefox build/html/index.html``) Page Structure -------------- This defines the structure that should be used for writing pattern and component pages for the HIG. Pattern ^^^^^^^ :: Pattern name ============== Give a short into into the pattern. Examples -------- Showcase the pattern with videos or images. When to use ----------- Describe when to use this pattern and when not to use it. How to use ---------- Describe how to use this pattern. Pages about patterns should not include any details on implementation, about behavior or appearance, but rather link to the corresponding components needed to implement a pattern. Optional: you can add subsections for desktop and mobile. :: When to use ----------- Desktop ^^^^^^^ Mobile ^^^^^^ Component ^^^^^^^^^ :: Component name ============== Purpose ------- A very short description on why and how to use the component. This should primarily link to the corresponding pattern pages. Example ------- Showcase the component with a video or image. Guidelines ---------- Is this the right control ~~~~~~~~~~~~~~~~~~~~~~~~~ Describe when to use a component and when not. Behavior ~~~~~~~~ Describe the behavior of the component. Appearance ~~~~~~~~~~ Describe the appearance of the component. Code ---- Kirigami ~~~~~~~~ Link to the API and example code how to use the component with QML and Kirigami. Qt Widgets ~~~~~~~~~~ Link to the API and example code how to use the component with Qt Widgets. Optional: you can add subsections for desktop and mobile. :: Behavior ~~~~~~~~ Desktop """"""" Mobile """""" Code Examples ------------- Adding examples to the HIG is very easy. #. Add a file with source code in the ``./examples/`` folder. #. Add the following markup at the point you want to insert the example: .. code-block:: rst .. literalinclude:: /../../examples/kirigami/InlineMessage.qml :language: qml + +Creating media +------------- + +See :doc:`media` on how to create media files for the HIG. diff --git a/HIG/source/resources/media.rst b/HIG/source/resources/media.rst new file mode 100644 index 0000000..d3c72e2 --- /dev/null +++ b/HIG/source/resources/media.rst @@ -0,0 +1,60 @@ +Generate media +============== + +Most media files used in the HIG are generated from QML files. + + +The command line tool +`qmlgrabber `_ +is used to create media from the source files. + +Source files are located in ``HIG/source/qml``. + + +If you are new to KDE devlopment, make sure to read +`how to become a kde developer +`_ first. + +Getting Started +--------------- + +#. Install some tools with your distro's package manager: + +================================== ================================ +Distribution Command +================================== ================================ +Arch, Manjaro ``sudo pacman -S ffmpeg`` +Debian, Ubuntu, KDE Neon ``sudo apt install ffmpeg`` +openSUSE ``sudo zypper install ffmpeg-4`` +Fedora ``sudo dnf install ffmpeg`` +CentOS/RHEL ``sudo yum install ffmpeg`` +================================== ================================ + +#. Clone qmlgrabber source code repository into an empty folder: + + .. code-block:: sh + + git clone https://anongit.kde.org/scratch/mart/qmlgrabber.git + cd qmlgrabber + qmake PREFIX=~/.local/bin + make + make install + + If you install it in you home directory, make sure you have the + installed packages in your path by adding it to your .profile: + + .. code-block:: sh + + echo "PATH=~/.local/bin:\$PATH" >> ~/.profile + source ~/.profile + + +Now you are ready to create media files for the the HIG! + + +#. Change to a directory containing qml source files. E.g. + ``cd HIG/source/qml/components/actionbutton`` +#. Run ``makemedia.php Actionbutton1.qml`` or + ``makemedia.php . `` to create media files. + + diff --git a/makemedia.php b/makemedia.php new file mode 100755 index 0000000..1b240bd --- /dev/null +++ b/makemedia.php @@ -0,0 +1,207 @@ +#!/usr/bin/php -q + 1) { + // very basic cmd line option parsing + $options = (getopt("d", [], $n)); + $entry = $argv[$n]; + + global $debug; + $debug = array_key_exists("d", $options); + + if (is_dir($entry)) { + // Create media files for a directory, including subdirectories + $imagedir = findRootDir($entry) . "/source/img/"; + parseDir(dir(realpath(__DIR__ . "/" . $entry))); + exit(0); + } + if (is_file($entry)) { + // Create media for a single file + $dir = dirname($entry); + $imagedir = findRootDir($dir) . "/source/img/"; + $config = getConfig(dir($dir)); + $filename = basename($entry); + if (key_exists($filename, $config)) { + createMedia(dirname($entry), $filename, $config[$filename]); + exit(0); + } + else { + el("No config entry for " . $entry); + exit(1); + } + } +} else { + // Create all media files + chdir(findRootDir(realpath("."))); + $dir = dir("./source/qml"); + $imagedir = realpath("./source/img/"); + parseDir($dir); + exit(0); +} + +/** + * Find the root directory of the checked out HIG project + */ +function findRootDir($dir) { + global $imagepath; + + while (is_dir($dir)) { + if (is_dir($dir . "/source")) { + return realpath($dir); + } + $dir .= "/.."; + } + echo "Could not find HIG root directory."; + exit(1); +} + +/** + * Parse a direcotry and its subdirectory + */ +function parseDir(\Directory $dir) { + $config = getConfig($dir); + el("Parsing " . $dir->path); + + while (false !== ($entry = $dir->read())) { + if (is_dir($dir->path . "/" . $entry)) { + if ($entry[0] != ".") { + parseDir(dir($dir->path . "/" . $entry)); + } + } + + if (key_exists($entry, $config)) { + createMedia($dir->path, $entry, $config[$entry]); + } + } + $dir->close(); +} + +/** + * Read the json config file or return an empty config + */ +function getConfig(\Directory $dir) { + if (is_file($dir->path . "/config.json")) { + return json_decode(file_get_contents($dir->path . "/config.json"), true); + } + return []; +} + +/** + * Create a media file according to the config + */ +function createMedia($path, $filename, $config) { + global $imagedir; + $pathinfo = pathinfo($path. "/" . $filename); + + el("Changing to " . $path . "\n"); + if (chdir($path)) { + echo "Created media for " . $filename . " ... "; + + // Setting env variables + $options = ""; + + if (isset($config["controls"]) && $config["controls"] == "mobile") { + putenv("QT_QUICK_CONTROLS_MOBILE=1"); + putenv("QT_QUICK_CONTROLS_STYLE=Plasma"); + } + else { + putenv("QT_QUICK_CONTROLS_MOBILE=0"); + putenv("QT_QUICK_CONTROLS_STYLE=org.kde.desktop"); + } + + if (isset($config["autostart"])) { + $options .= " -a " . $config["autostart"]; + } + + if (isset($config["scale"]) && is_numeric($config["scale"])) { + putenv("QT_SCALE_FACTOR=" . $config["scale"]); + } + else { + putenv("QT_SCALE_FACTOR=1"); + } + + if (isset($config["fps"])) { + $options .= " -f " . $config["fps"]; + } + + if (isset($config["duration"])) { + $options .= " -s " . $config["duration"]; + } + + + switch ($config["type"]) { + case "png": + el("qmlgrabber " . $filename . $options ); + cmdExec("qmlgrabber " . $filename . $options ); + $output = $imagedir . $pathinfo["filename"] . ".png"; + el("moving file to " . $output); + if (is_file($output)) { + unlink($output); + } + rename($path . "/Screenshot.png", $output); + break; + case "webm": + el("qmlgrabber " . $options . " " . $filename); + cmdExec("qmlgrabber " . $options . " " . $filename); + cmdExec("ffmpeg -r 60 -f image2 -i Frames/Frame-%d.png -vcodec libvpx -b:v 1M video.webm"); + $output = $imagedir . $pathinfo["filename"] . ".webm"; + el("moving file to " . $output); + if (is_file($output)) { + unlink($output); + } + rename($path . "/video.webm", $output); + cmdExec("rm -r Frames"); + break; + case "gif": + cmdExec("qmlgrabber " . $filename . $options); + cmdExec("ffmpeg -f image2 -i Frames/Frame-%d.png -vf fps=10,scale=240:-1:flags=lanczos,palettegen palette.png"); + cmdExec('ffmpeg -f image2 -i Frames/Frame-%d.png -i palette.png -filter_complex "fps=20,scale=240:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif'); + $output = $imagedir . $pathinfo["filename"] . ".gif"; + el("moving file to " . $output); + if (is_file($output)) { + unlink($output); + } + rename($path. "/output.gif", $output); + cmdExec("rm -r Frames"); + cmdExec("rm palette.png"); + break; + } + // Reset env variables back to default + putenv("QT_QUICK_CONTROLS_MOBILE=0"); + putenv("QT_QUICK_CONTROLS_STYLE=org.kde.desktop"); + putenv("QT_SCALE_FACTOR=1"); + echo " done \n"; + } + else { + echo "Could not change to $path \n"; + exit(1); + } +} + +/** + * Executing a bash cmd + * printing out the result, if an error occured + * exit(1) on error + */ +function cmdExec($cmd) { + global $debug; + + exec($cmd . " 2>&1", $result, $return); + if ($debug || $return !== 0) { + print_r($result); + } + + if ($return !== 0) { + exit(1); + } +} + +/** + * Output if -d is set + */ +function el($str) { + global $debug; + if ($debug) { + echo $str . "\n"; + } +}