Announcement

Collapse
No announcement yet.

Quick KDE plasma qml widgets

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [PLASMA 5] Quick KDE plasma qml widgets

    (plasma eats qml and shows pretty pics - with the Kubuntu 15.04 beta; plasma 5.2)


    Few KDE blogs

    Plasmoid Tutorial 1: http://blog.davidedmundson.co.uk/node/89
    Plasmoid Tutorial 2 - Getting Data: http://blog.davidedmundson.co.uk/node/92
    Plasmoid Tutorial 3 - Blending In: http://blog.davidedmundson.co.uk/node/91

    “Killing the Cashew” done right: http://vizzzion.org/blog/2015/02/kil...ew-done-right/

    Writing QML based apps, the KDE way: http://notmart.org/blog/2015/03/writ...s-the-kde-way/


    Few QML Documents
    ( http://doc.qt.io/qt-5/ )


    Image: http://doc.qt.io/qt-5/qml-qtquick-image.html#details

    Animated Image: http://doc.qt.io/qt-5/qml-qtquick-an...e.html#details

    Multimedia: http://doc.qt.io/qt-5/qml-qtmultimedia-mediaplayer.html

    Qml Book: http://qmlbook.github.io/index.html


    online, pdf, ePub,...


    Testing Tool

    Code:
    :~$ qmlscene --help
    Usage: qmlscene [options] <filename>
     
     Options:
      --maximized ............................... Run maximized
      --fullscreen .............................. Run fullscreen
      --transparent ............................. Make the window transparent
      --multisample ............................. Enable multisampling (OpenGL anti-aliasing)
      --no-version-detection .................... Do not try to detect the version of the .qml file
      --slow-animations ......................... Run all animations in slow motion
      --resize-to-root .......................... Resize the window to the size of the root item
      --quit .................................... Quit immediately after starting
      --disable-context-sharing ................. Disable the use of a shared GL context for QtQuick Windows
      -I <path> ................................. Add <path> to the list of import paths
      -B <name> <file> .......................... Add a named bundle
      -translation <translationfile> ............ Set the language to run in




    Earlier in the Kubuntu Forums

    Hide plasma toolbox [cashew]: https://www.kubuntuforums.net/showth...toolbox-cashew

    Plasma wideo wallpaper: https://www.kubuntuforums.net/showth...ideo-wallpaper



    Plasma clocks: https://www.kubuntuforums.net/showth...p?61798-Clocks



    Plasma background images: https://www.kubuntuforums.net/showth...kground-images

    Last edited by OneLine; Apr 11, 2015, 10:53 AM.
    Have you tried ?

    - How to Ask a Question on the Internet and Get It Answered
    - How To Ask Questions The Smart Way

    #2
    Copy &amp; paste - Plasma Pin Ups

    To show pictures at plasma desktop the metadata file is needed - an example:

    ~/plasmawidget/mypictureplasmoid/metadata.desktop
    Code:
    [Desktop Entry]
    Name=My Picture
    Comment=My Comment
    Encoding=UTF-8
    Icon=face-confused
    ServiceTypes=Plasma/Applet
    Type=Service
    X-KDE-PluginInfo-Name=mypictureplasmoid
    X-Plasma-API=declarativeappletscript
    X-Plasma-MainScript=ui/main.qml
    and a short qml script - http://doc.qt.io/qt-5/qml-qtquick-image.html#details

    ~/plasmawidget/mypictureplasmoid/contents/ui/main.qml
    Code:
    import QtQuick 2.0
    
    Image {
        source: "/path/to/my/picture.jpg"
    }



    Exacuting the plasmapkg2:

    Code:
    :~$ plasmapkg2 --help
    Usage: plasmapkg2 [options]
    Plasma Package Manager
    
    Options:
      -v, --version             Displays version information.
      -h, --help                Displays this help.
      --hash <path>             Generate a SHA1 hash for the package at <path>
      -g, --global              For install or remove, operates on packages
                                installed for all users.
      -t, --type <type>         The type of package, e.g. theme, wallpaper,
                                plasmoid, dataengine, runner, layout-template, etc.
      -i, --install <path>      Install the package at <path>
      -s, --show <name>         Show information of package <name>
      -u, --upgrade <path>      Upgrade the package at <path>
      -l, --list                List installed packages
      --list-types              List all known package types that can be installed
      -r, --remove <name>       Remove the package named <name>
      -p, --packageroot <path>  Absolute path to the package root. If not supplied,
                                then the standard data directories for this KDE
                                session will be searched instead.
    at the top level directory:

    Code:
    plasmapkg2 --install mypictureplasmoid
    After this the plasmoid is available from the plasmoid browser.





    This procedure can be easily made as a KDE service menu: https://www.kubuntuforums.net/showth...l=1#post369255

    Last edited by OneLine; Mar 25, 2015, 10:06 AM.
    Have you tried ?

    - How to Ask a Question on the Internet and Get It Answered
    - How To Ask Questions The Smart Way

    Comment


      #3
      Copy &amp; paste - Plasma animated pictures

      Making metadata.desktop:

      ~/plasmawidget/animatedplasmoid/metadata.desktop

      Code:
      [Desktop Entry]
      Name=Picture Plasmoid
      Comment=Happy Birthday
      Encoding=UTF-8
      Icon=animation
      ServiceTypes=Plasma/Applet
      Type=Service
      X-KDE-PluginInfo-Name=org.kde.animatedplasmoid
      X-Plasma-API=declarativeappletscript
      X-Plasma-MainScript=ui/main.qml
      and the qml script - http://doc.qt.io/qt-5/qml-qtquick-an...e.html#details :

      ~/plasmawidget/animatedplasmoid/contents/ui/main.qml

      Code:
      import QtQuick 2.0
      
      Rectangle {
          width: animation.width +26; height: animation.height +26
      
          AnimatedImage { id: animation; source: "/home/oneline/Pictures/gif/hedgehog.gif" }

      Installing:
      Code:
      plasmapkg2 --install animatedplasmoid
      Adding to the desktop

      Last edited by OneLine; Mar 25, 2015, 01:02 PM.
      Have you tried ?

      - How to Ask a Question on the Internet and Get It Answered
      - How To Ask Questions The Smart Way

      Comment


        #4
        Copy &amp; paste - Plasma Pet of the Day

        (fetching images from an RSS flow)

        The qml code example can be found: Qml Book Chapter 6 (code from assets - Chapter 17) http://qmlbook.github.io/ch06/index.html

        The QmlBook example is getting the pictures from the National Geographic Photo of the Day. The same code can be used to get the pictures from the other sources.


        An example code to get the images from the Nasa Image of the Day:

        ~/dailies/nasadailyplasmoid/contents/ui/main.qml:
        Code:
        /*
         * Copyright (c) 2013, Juergen Bocklage-Ryannel, Johan Thelin
         * All rights reserved.
         *
         * Redistribution and use in source and binary forms, with or without
         * modification, are permitted provided that the following conditions are met:
         *     * Redistributions of source code must retain the above copyright
         *       notice, this list of conditions and the following disclaimer.
         *     * Redistributions in binary form must reproduce the above copyright
         *       notice, this list of conditions and the following disclaimer in the
         *       documentation and/or other materials provided with the distribution.
         *     * Neither the name of the editors nor the
         *       names of its contributors may be used to endorse or promote products
         *       derived from this software without specific prior written permission.
         *
         * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
         * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
         * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
         * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
         * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
         * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
         * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
         * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
         * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
         * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
         */
        
        // M1>>
        import QtQuick 2.0
        import QtQuick.XmlListModel 2.0
        import "./common"
        import org.kde.plasma.plasmoid 2.0
        
        Background {
            //width: 300
            //height: 480
            Plasmoid.backgroundHints: "NoBackground"
        
            Component {
                id: imageDelegate
        
                Box {
                    width: listView.width
                    height: 220
                    color: '#333'
        
                    Column {
                        Text {
                            text: title
                            color: '#e0e0e0'
                        }
                        Image {
                            width: listView.width
                            height: 200
                            fillMode: Image.PreserveAspectCrop
                            source: imageSource
                        }
                    }
                }
            }
        
            XmlListModel {
                id: imageModel
        
                source: "http://www.nasa.gov/rss/dyn/image_of_the_day.rss"
                query: "/rss/channel/item"
        
                XmlRole { name: "title"; query: "title/string()" }
                XmlRole { name: "imageSource"; query: "enclosure/@url/string()" }
            }
        
            ListView {
                id: listView
                anchors.fill: parent
                model: imageModel
                delegate: imageDelegate
            }
        }
        // <<M1
        Other qml snippets:

        ~/dailies/nasadailyplasmoid/contents/ui/common/Background.qml
        ~/dailies/nasadailyplasmoid/contents/ui/common/Box.qml

        are same as in the QmlBook example.

        The metadata.desktop:

        ~/dailies/nasadailyplasmoid/metadata.desktop
        Code:
        [Desktop Entry]
        Name=Picture Plasmoid
        Comment=Nasa Picture of the Day
        Encoding=UTF-8
        Icon=/home/oneline/.local/share/icons/local/NASA_logo.svg
        ServiceTypes=Plasma/Applet
        Type=Service
        X-KDE-PluginInfo-Name=org.kde.nasadailyplasmoid
        X-Plasma-API=declarativeappletscript
        X-Plasma-MainScript=ui/main.qml

        The daily plasmoids on the desktop.




        The plasmoids are browseable - grab the plasmoid and push/pull the image to view the older images.

        Have you tried ?

        - How to Ask a Question on the Internet and Get It Answered
        - How To Ask Questions The Smart Way

        Comment


          #5
          Good collection of material

          ... I need to try my hand at QML!
          I'd rather be locked out than locked in.

          Comment


            #6
            Originally posted by SecretCode View Post
            Good collection of material

            ... I need to try my hand at QML!
            check this one to ,,,,,good stuff.

            https://www.kubuntuforums.net/showth...ideo+wallpaper

            VINNY
            i7 4core HT 8MB L3 2.9GHz
            16GB RAM
            Nvidia GTX 860M 4GB RAM 1152 cuda cores

            Comment

            Working...
            X