Database Query based Catalog like application

amrith · June 20, 2020, 12:26pm

Hi,
I am new to Flipbit and have some questions.
what I am trying to do:
I am trying to create a app in which the user click/taps on an image and a new page is loaded which has an image and text info .
The image and info is loaded from excel /database.
There will be multiple images in the first screen that has to a row id or "unique name " column field.Based on the index or column name and value the content should be displayed in the second screen.

can anyone point me in the right direction?
Thanks in advance!

amrith · June 21, 2020, 8:13pm

Can anyone please answer this. We are planning to buy flipabit premium before that i would like to confirm if its possible. I have done similar application in Intuiface.
Basically its a map ( not real map but just icons on a simple non scalable map)
Each icon is a place and on click icon i need to lookup the database/ Excel sheet to find the information. There will be images, text and videos linking the particular location.

Also is there a 3d carousel in flipabit?.

Michael · June 22, 2020, 9:24am

These tasks are different. If you describe your task in more detail, I will be able to find an appropriate example. Maybe you have video or pictures of how it should work?

amrith · June 22, 2020, 10:14am

Thanks Michael for the Reply
yes I have made a video.
gif file

explanation. click on a icon> goto page 2 > load info from database based on an ID.

Michael · June 22, 2020, 1:56pm

How to create catalog-like app with filtering by keywords:

amrith · June 22, 2020, 12:06pm

Thanks that was wonderful.
I have some doubts.

Can the same be done without using table as a source in action editor.(without using table but only importing a database. (I dont want to show table at all ) )
Logic is like
Click on image button> add filter to database > goto page (having the template)
can the image be a path in the database (xl sheet or json)?

Thanks alot.

Michael · June 22, 2020, 12:22pm

It’s not clear to me:

without using table but only importing a database

In the Flipabit you can import and load table based data in various formats. It can be local or remote.

can the image be a path in the database

Did you mean image name as the link to another table? Or image url on the server?

amrith · June 22, 2020, 12:55pm

Thanks the video was really helpful. I think i found the answer . Thanks a lot.

Michael · June 22, 2020, 1:56pm

Another video how to have multiple images per item and how to add carousel:

amrith · June 28, 2020, 7:04am

Hi ,
1.how to change the horizontal alignment of text from left to right?
I tried setting the property of text->horizontal->“Right” but it doesn’t work.
2. How to make the font size adapt the field in case the text overflows?
3. If a qml code has to be added , is it possible to apply it to a specific item already present, If so how to obtain the ID of the item.

Thanks !
ps. we have bought Flipabit already info@pearlquest.ae account. Should use that account instead?
You should add the tutorial you gave us in youtube (you can change the images and content since it was from a client), The tutorial was very informative and its a very common usage example

Michael · June 28, 2020, 8:52am

1a. Change alignment using Inspector

1b. Change alignment using Actions

For 2 and 3 see the example autofit_text.pma (8.3 KB)

For auto width set NoWrap in Font Inspector.
For auto height set Word wrap or Wrap anywhere.

pearlquest · July 6, 2020, 4:51am

HI @Michael,
I have small issue with scroll can you take a look.
I have attached the issue i face in the video.
description:
When you scroll content (clickable) there is overlap with the content that is not visible and some button in the scene.
google drive link
Thanks in advance!

pearlquest · July 8, 2020, 6:26am

hi @Michael any update on this. thanks!
Also one more question will the custom fonts have to be installed on the target platform?
what about android , ios applications?

Michael · July 8, 2020, 1:12pm

Custom font will work on any os. However, it may depend on a certain font. The earlier you test, the earlier you find faults.

pearlquest · July 27, 2020, 2:25pm

Hi @Michael,

How to make Scrollbar always visible in the Table (List layout vertical )?
How to get the current image in the image carousel to be shown in the popup?
image carousel video

Michael · July 28, 2020, 10:00am

Here is the sample with scrollbar and popup custom_scrollbar.pma (244.1 KB)

Paste this code into table widget:

import QtQuick 2.5

Item {
    id: scrollbar

    property int thickness: 10
    property color color: "lightgreen"
    property real opac: 0.9
    property int orientation: Qt.Vertical
    
    property Flickable flickableItem: contentUi.children[1].children[0].children[0]
    property bool moving: flickableItem.moving    
    property alias currentY: scrollBar.y

    width: thickness
    height: thickness
    clip: true
    smooth: true
    visible: orientation === Qt.Vertical ? flickableItem.contentHeight > flickableItem.height
                                         : flickableItem.contentWidth > flickableItem.width

    anchors {
        top: scrollbar.orientation === Qt.Vertical ? parent.top : undefined
        bottom: parent.bottom
        left:scrollbar.orientation === Qt.Horizontal ? parent.left : undefined
        right: parent.right
        rightMargin: scrollbar.orientation === Qt.Vertical ? -(contentUi.width - thickness) : 0
        margins: 2
    }

    onOrientationChanged: {
        if (orientation == Qt.Vertical) {
            width = thickness
        } else {
            height = thickness
        }
    }

    Rectangle {
        id: scrollBar
        property int length: scrollbar.orientation == Qt.Vertical ? scrollbar.height
                                                        : scrollbar.width;
        property int targetLength: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.height
                                                              : scrollbar.flickableItem.width;
        property int contentStart: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.contentY
                                                              : scrollbar.flickableItem.contentX;
        property int contentLength: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.contentHeight
                                                               : scrollbar.flickableItem.contentWidth;
        property int start: Math.max(0, length * contentStart/contentLength);
        property int end: Math.min(length,
                                   length * (contentStart + targetLength)/contentLength)

        color: scrollbar.color
        opacity: scrollbar.opac
        radius: scrollbar.thickness/2
        width: Math.max(scrollbar.orientation == Qt.Horizontal ? end - start : 0, scrollbar.thickness)
        height: Math.max(scrollbar.orientation == Qt.Vertical ? end - start : 0, scrollbar.thickness)
        x: scrollbar.orientation == Qt.Horizontal ? start : 0
        y: scrollbar.orientation == Qt.Vertical ? start : 0
    }
}