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

[Nuno Santos]

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



> On 6 Mar 2018, at 16:50, Xavier Bigand <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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180306/98a1873a/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2018-03-06 at 16.54.50.png
Type: image/png
Size: 2054 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180306/98a1873a/attachment.png>