UBports Robot Logo UBports Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

    File manager app guide for qml code

    Scheduled Pinned Locked Moved App Development
    25 Posts 3 Posters 3.7k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
      Reply
      • Reply as topic
      Log in to reply
      This topic has been deleted. Only users with topic management privileges can see it.
      • N Offline
        nibzy26
        last edited by

        Hi,
        I am onto File Manager app now changing its look (colors and fonts).
        First thing is to understand code in qml section and find out which functionality is implemented in which file .
        IS there any documentation for it , I man there are a lot of qml files so there should be something , some material or weblinks to understand the qml code to get me or anyone started

        Thanks

        lduboeufL 1 Reply Last reply Reply Quote 0
        • lduboeufL Offline
          lduboeuf @nibzy26
          last edited by

          @nibzy26 said in File manager app guide for qml code:

          Hi,
          I am onto File Manager app now changing its look (colors and fonts).
          First thing is to understand code in qml section and find out which functionality is implemented in which file .
          IS there any documentation for it , I man there are a lot of qml files so there should be something , some material or weblinks to understand the qml code to get me or anyone started

          Not that i am aware of. But if you know a bit QML, it shouldn't be too hard, QML file names are often self-explanatory. Just add some console.log('...') in some places or code navigate.

          One of things i do to reverse engineer is e.g, put UT on english native language, then spot the text you see in UI and search through code for them.

          N 1 Reply Last reply Reply Quote 0
          • CiberSheepC CiberSheep moved this topic from OS on
          • N Offline
            nibzy26 @lduboeuf
            last edited by

            @lduboeuf Thanks
            Okay my journey starts

            What are these po files in po folder ?

            arubislanderA 1 Reply Last reply Reply Quote 0
            • arubislanderA Offline
              arubislander @nibzy26
              last edited by

              @nibzy26 those are translation files for the strings in the source code.

              πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
              Happily running Ubuntu Touch
              Google Pixel 3a (20.04 DEV)
              JingPad (24.04 preview)
              Meizu Pro 5 (16.04 DEV)

              N 1 Reply Last reply Reply Quote 0
              • N Offline
                nibzy26 @arubislander
                last edited by

                @arubislander Thanks

                Although an example would clear it better as seeing the contents of a po file is not making sense to me

                Question#2: I have tried clickable desktop --qmllive option with filemanager app but it doesnt like the qmllive option and says

                --qmllive can only be used on apps that start via qmlscene (see your desktop file)

                this feature is quite helpful as i have used it with calculator app.
                The contents of lomiri-filemanager-app.desktop.in.in are
                [Desktop Entry]
                Version=1.0
                Type=Application
                Terminal=false
                Exec=@EXEC@
                Icon=@ICON@
                Name=File Manager
                Keywords=folder;manager;explore;disk;filesystem;
                X-Lomiri-Touch=true
                X-Lomiri-Default-Department-ID=accessories
                X-Lomiri-Splash-Show-Header=false
                X-Lomiri-Splash-Image=@SPLASH@
                X-Lomiri-Splash-Color=#494949
                X-Lomiri-Single-Instance=true

                arubislanderA 2 Replies Last reply Reply Quote 0
                • arubislanderA Offline
                  arubislander @nibzy26
                  last edited by arubislander

                  @nibzy26 said in File manager app guide for qml code:

                  --qmllive can only be used on apps that start via qmlscene (see your desktop file)

                  The error explains why the option does not work for this app. FileManager is not a pure QML app, it contains C++ and needs to be compiled before execution.
                  The --qmllive option only works on pure QML projects that can be started with qmlscene, as it says.

                  πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                  Happily running Ubuntu Touch
                  Google Pixel 3a (20.04 DEV)
                  JingPad (24.04 preview)
                  Meizu Pro 5 (16.04 DEV)

                  1 Reply Last reply Reply Quote 1
                  • arubislanderA Offline
                    arubislander @nibzy26
                    last edited by

                    @nibzy26 said in File manager app guide for qml code:

                    ... an example would clear it better as seeing the contents of a po file is not making sense to me

                    This setup is, as far as I understand, the standard way translations are handled in QML apps, and not specific to Ubuntu Touch. There's probably documentation and examples elsewhere on the web on sites featuring generic QML information.

                    The Ubuntu Touch documentation, as fragmented as it currently is, probably does best to initially focus on specifics to the project that cannot be found anywhere else.

                    πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                    Happily running Ubuntu Touch
                    Google Pixel 3a (20.04 DEV)
                    JingPad (24.04 preview)
                    Meizu Pro 5 (16.04 DEV)

                    N 1 Reply Last reply Reply Quote 1
                    • N Offline
                      nibzy26 @arubislander
                      last edited by

                      @arubislander Thanks

                      I guess I am learning some bits and pieces everyday
                      Quite often i see this line i18n.tr("some text here") :

                      what is i18n.tr means ?

                      arubislanderA 1 Reply Last reply Reply Quote 0
                      • arubislanderA Offline
                        arubislander @nibzy26
                        last edited by arubislander

                        @nibzy26 i18n stands for internationalization. There are 18 letters between the i and the n. Enclosing a string between i18n.tr() signals the compiler to generate .po files with the strings between the brackets. It also causes the runtime to use the content of those .po files as substitutes depending on the current locale.

                        πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                        Happily running Ubuntu Touch
                        Google Pixel 3a (20.04 DEV)
                        JingPad (24.04 preview)
                        Meizu Pro 5 (16.04 DEV)

                        N 1 Reply Last reply Reply Quote 1
                        • N Offline
                          nibzy26 @arubislander
                          last edited by

                          In fileManager app I am trying to replace those orange icons showing on the left(Documents,Downloads,Videos etc) with my own but cannot find their location .There are some png icons in /FileManager/src/plugin/test_folderlistmodel/simpleUI/resources
                          but these are not the right ones ?

                          Q2: In FolderListView.qml There is this piece of code

                              delegate: FolderListDelegate {
                                  id: delegate
                          
                                 iconName: model.iconName  // this is the line of interest
                                  showProgressionSlot: model.isBrowsable
                                  isSelected: model.isSelected
                                  path: model.filePath
                          

                          What is iconName and which png file its pointing to and how can i replace it with my own ??Screenshot from 2023-10-18 20-14-30.png

                          arubislanderA lduboeufL 2 Replies Last reply Reply Quote 0
                          • arubislanderA Offline
                            arubislander @nibzy26
                            last edited by

                            @nibzy26 Those icons are part of the Suru icon theme, which can be found at /usr/share/icons/suru on your device.

                            The cleanest way to change them would be to load / install / provide an alternative icon team and then somehow get the shell to look to those for its icons. The last part is something I do not know how to do, but a good place to start would probably be finding out how this can be done on regular desktop Ubuntu.

                            πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                            Happily running Ubuntu Touch
                            Google Pixel 3a (20.04 DEV)
                            JingPad (24.04 preview)
                            Meizu Pro 5 (16.04 DEV)

                            N 1 Reply Last reply Reply Quote 0
                            • lduboeufL Offline
                              lduboeuf @nibzy26
                              last edited by

                              @nibzy26 said in File manager app guide for qml code:

                              FolderListView.qml

                              You might search where does the "model" comes from, and maybe a search for "iconName" would give you results.

                              seems to be define here: https://gitlab.com/ubports/development/apps/lomiri-filemanager-app/-/blame/main/src/plugin/folderlistmodel/dirmodel.cpp?page=2#L1754

                              1 Reply Last reply Reply Quote 0
                              • N Offline
                                nibzy26 @arubislander
                                last edited by

                                @arubislander Thanks
                                how about use a image/icon file locally and give its path inside
                                Icon {
                                that should do it No ?

                                arubislanderA 1 Reply Last reply Reply Quote 0
                                • arubislanderA Offline
                                  arubislander @nibzy26
                                  last edited by

                                  @nibzy26 said in File manager app guide for qml code:

                                  that should do it No ?

                                  No idea, try it and find out. I have no experience with custom icons, I think.

                                  πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                                  Happily running Ubuntu Touch
                                  Google Pixel 3a (20.04 DEV)
                                  JingPad (24.04 preview)
                                  Meizu Pro 5 (16.04 DEV)

                                  N 1 Reply Last reply Reply Quote 0
                                  • N Offline
                                    nibzy26 @arubislander
                                    last edited by

                                    @arubislander Thanks

                                    okay another thing
                                    I have built Filemanager app with my changes in and it built the .click package version 1.0.3
                                    Then I uninstlled the default filemanager app on the phone which was version 1.0.2.
                                    I ran just the clickable cmd and wsa hoping that it would install it on the phone but it gave me this error

                                    install/lib/x86_64-linux-gnu/bin/lomiri-filemanager-app
                                    Successfully built package in './filemanager.ubports_1.0.3_amd64.click'.
                                    Running command "install"
                                    /home/nsyed/touch/fileman/FileManager/...hed. 8.9 MB/s (641162 bytes in 0.069s)
                                    Installing the app.
                                    Error: GDBus.Error:com.lomiri.click.OperationFailed: failed to install /home/phablet/filemanager.ubports_1.0.3_amd64.click
                                    Command ran on device via ADB failed. See output above.

                                    adb devices -l command does show my phone attached.

                                    What it cannot install the app on the phone?
                                    Alternately I can copy .click package to the phone via ssh but how do i install it manually ?

                                    N 1 Reply Last reply Reply Quote 0
                                    • N Offline
                                      nibzy26 @nibzy26
                                      last edited by

                                      Ok I think its because its building for amd64 architecture.
                                      I changes architecture in manifest.json.in from @CLICK_ARCH@ to "all" but then while building I got the error

                                      -- Installing: /home/nsyed/touch/fileman/FileManager/build/x86_64-linux-gnu/app/install/lib/x86_64-linux-gnu/bin/lomiri-filemanager-app
                                      Clickable is building for architecture "amd64", but "all" is specified in the manifest. You can set the architecture field to @CLICK_ARCH@ to let Clickable set the architecture field automatically.
                                      nsyed@nsyed-HP-Laptop-15-bs1xx:~/touch/fileman/FileManager$

                                      arubislanderA 1 Reply Last reply Reply Quote 0
                                      • arubislanderA Offline
                                        arubislander @nibzy26
                                        last edited by

                                        @nibzy26 Please change the architecture in the manifest file back to @CLICK_ARCH@. Then take a look at the clickable documentation here

                                        Consider that the FileManager is not a pure QML project, so cannot be build for "all" architectures, but must be built for each architecture you are interested in supporting. Not sure why your clickable is defaulting to amd64, maybe not the latest, maybe your device is not being detected correctly, but no matter. The solution is to provide to clickable the arch with the --arch (or -a) command line parameter.

                                        I would urge you to spend some more time reading the documentation of the different components you are using, so as to understand better what it is that you are doing.

                                        πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                                        Happily running Ubuntu Touch
                                        Google Pixel 3a (20.04 DEV)
                                        JingPad (24.04 preview)
                                        Meizu Pro 5 (16.04 DEV)

                                        N 1 Reply Last reply Reply Quote 1
                                        • N Offline
                                          nibzy26 @arubislander
                                          last edited by

                                          @arubislander Thanks
                                          sorry I forgot about --arch=arm64 option.

                                          Another general question: I have replaced icons in /usr/share/icons/suru/places/128/ for Documents.Videos,Pictures folders etc and I can see my icons when i run the app on the phone.
                                          Now I want to replace a music mp3 file icon with my own.At which location should i put my icon ? or whats the standard way to do it ?
                                          and same goes for a text file .How do i use my own icons for various file types ?
                                          any ideas

                                          Thanks

                                          arubislanderA 1 Reply Last reply Reply Quote 0
                                          • arubislanderA Offline
                                            arubislander @nibzy26
                                            last edited by

                                            @nibzy26 Sorry, this is not something that I have much knowledge about. I would suggest you look around in the other folders in /usr/share/icons/suru folder and see if you find the current ones.

                                            πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                                            Happily running Ubuntu Touch
                                            Google Pixel 3a (20.04 DEV)
                                            JingPad (24.04 preview)
                                            Meizu Pro 5 (16.04 DEV)

                                            N 1 Reply Last reply Reply Quote 0
                                            • N Offline
                                              nibzy26 @arubislander
                                              last edited by

                                              @arubislander Thanks

                                              By the way its not just on the phone itself but even when i run the filemanager app on my desktop PC with clickable desktop command and create a file with extension .mp3 it associates this mp3 icon with it .please see attached.
                                              The question is where is this mp3 icon in the file manager app src on my PC.mp3.png

                                              N 1 Reply Last reply Reply Quote 0
                                              • First post
                                                Last post