[Interest] How to render small Images decently on non retina displays with QtQuick?

[Nuno Santos]

Does anyone knows which modules we need to have compiled in order to make svg support work?

I depend on a static build of Qt and while I was able to use SVG with the prebuilt Qt, I couldn’t make use of it using my static build.

I realised I was missing qtsvg module but even after including it in the build it still says "unsupported graphic format”

Any ideas?

Thx!

Regards,

Nuno

> On 6 Mar 2018, at 16:55, Nuno Santos <nunosantos at imaginando.pt> wrote:
> 
> Xavier,
> 
> SVG did the trick!!!! 
> 
> I just had to add it to resources and pass it to the image element. 
> 
> Looking great now!! :)
> 
> Thank you all for your help!!!!
> 
> Best,
> 
> Nuno
> 
> <Screen Shot 2018-03-06 at 16.54.50.png>
> 
>> On 6 Mar 2018, at 16:50, Xavier Bigand <flamaros.xavier at gmail.com <mailto:flamaros.xavier at gmail.com>> wrote:
>> 
>> I think that you just have to link the svg module, if I remember correctly, then in QML just use it as source of an Image item.
>> The only think is that you have to fix the size of the item as the sourceSize have no sense here.
>> 
>> 2018-03-06 17:47 GMT+01:00 Nuno Santos <nunosantos at imaginando.pt <mailto:nunosantos at imaginando.pt>>:
>> I have never used SVG in QtQuick. 
>> 
>> What can be used to render SVG’s in QtQuick?
>> 
>>> On 6 Mar 2018, at 16:45, Xavier Bigand <flamaros.xavier at gmail.com <mailto:flamaros.xavier at gmail.com>> wrote:
>>> 
>>> Hi,
>>> 
>>> If your sample picture is relevant I can suggest you to convert it as SVG (vectoring it) or using distance field technique.
>>> 
>>> 2018-03-06 17:06 GMT+01:00 Jason H <jhihn at gmx.com <mailto:jhihn at gmx.com>>:
>>> Maybe this has something to do with with mipMapping/smooth? It looks like it's not anti-aliasing?
>>>  
>>> Sent: Tuesday, March 06, 2018 at 10:50 AM
>>> From: "Nuno Santos" <nunosantos at imaginando.pt <mailto:nunosantos at imaginando.pt>>
>>> To: "Mitch Curtis" <mitch.curtis at qt.io <mailto:mitch.curtis at qt.io>>
>>> Cc: "Qt Project MailingList" <interest at qt-project.org <mailto:interest at qt-project.org>>
>>> Subject: Re: [Interest] How to render small Images decently on non retina displays with QtQuick?
>>> Mitch,
>>>  
>>> Thanks for your reply. 
>>>  
>>> You are right. I’m not playing all the cards…
>>>  
>>> Original image attached (it is white over transparent so you will not see it in the email body. The file is called isotope.png) 
>>>  
>>> The item who renders this is the following:
>>>  
>>> import QtQuick 2.4
>>>  
>>> Item {
>>>     id: root
>>>     implicitWidth: 100
>>>     implicitHeight: 100
>>>  
>>>     property real padding: 0
>>>     property alias imageSource: icon.source
>>>     property color imageColor: controller.settings.foregroundColor
>>>  
>>>     Image {
>>>         id: icon
>>>         anchors.fill: parent
>>>         anchors.margins: root.padding
>>>         fillMode: Image.PreserveAspectFit
>>>     }
>>>  
>>>     ColorOverlay {
>>>         id: overlay
>>>         source: icon
>>>         anchors.fill: icon
>>>         color: root.imageColor
>>>     }
>>> }
>>>  
>>>  
>>> <Mail Attachment.png><Mail Attachment.png>
>>>  
>>> <Mail Attachment.png>
>>>  
>>> On 6 Mar 2018, at 15:41, Mitch Curtis <mitch.curtis at qt.io <mailto:mitch.curtis at qt.io>> wrote:
>>>  
>>> Can you elaborate on “really bad”, and also share a screenshot?
>>>  
>>> From: Interest [mailto:interest-bounces+mitch.curtis=qt.io at qt-project.org <mailto:interest-bounces+mitch.curtis=qt.io at qt-project.org>] On Behalf Of Nuno Santos
>>> Sent: Tuesday, 6 March 2018 4:27 PM
>>> To: Qt Project MailingList <interest at qt-project.org <mailto:interest at qt-project.org>>
>>> Subject: [Interest] How to render small Images decently on non retina displays with QtQuick?
>>>  
>>> Hi,
>>>  
>>> I have a simple question. 
>>>  
>>> How to render small Images decently on non retina displays with QtQuick?
>>>  
>>> In my apps, I use images for icons and logos. They are all big enough to be displayed correctly. 
>>>  
>>> However, on non Retina displays they get really bad! And on retine display they appear perfectly. 
>>>  
>>> What is the rule of thumb to use QtQuick Image element on on retina displays?
>>>  
>>> Thx!
>>>  
>>> Regards,
>>>  
>>> Nuno
>>> _______________________________________________ Interest mailing list Interest at qt-project.org <mailto:Interest at qt-project.org> http://lists.qt-project.org/mailman/listinfo/interest <http://lists.qt-project.org/mailman/listinfo/interest>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org <mailto:Interest at qt-project.org>
>>> http://lists.qt-project.org/mailman/listinfo/interest <http://lists.qt-project.org/mailman/listinfo/interest>
>>> 
>>> 
>>> 
>>> 
>>> -- 
>>> Xavier
>> 
>> 
>> 
>> 
>> -- 
>> Xavier
> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180306/5c4d35c5/attachment.html>