ubuntu-touch-coreapps team mailing list archive

[Joey Chan <qqworini@xxxxxxxxx>]

Hi Matthias,

Agree with your solution, and other solutions include "homepath" or
QnetworkManager are welcome. All these mean that we can't store any images
without C++, so I suggest developers from Canonical could create some qml
plugins for functions which can't be implemented with pure qml.

:)


2013/3/28 Matthias Gehre <mgehre@xxxxxxxxxxxxxxxxxx>

> I "solved" this problem in whosthere by subclassing QQuickImageProvider,
> but that needs some C++ code to be written.
> See https://github.com/mgehre/whosthere/blob/master imageprovider.h/cpp
>
>
> 2013/3/28 Joey Chan <qqworini@xxxxxxxxx>
>
>> yep, a common plugin is necessary
>>
>>
>> 2013/3/28 <mrqtros@xxxxxxxxx>
>>
>>  Other teams need this ability too, so it is must be included in sdk and
>>> used this way:
>>>
>>> // qml code
>>>
>>> Ubuntu.saveImageToLocalStorage(...)
>>>
>>> ...
>>>
>>> Ubuntu.loadImageFromLocalStorage(...)
>>>
>>>
>>> Or something like that =)))
>>>
>>> 27.03.13 13:39 Joey Chan написал(а):
>>> Hi Ladies and Gentlemen,
>>>
>>> I'm here to discuss about the "offline image using pure qml", which
>>> means, If images are from remote server, we developers need to download
>>> them to local file system so that apps can load images without Internet
>>> connections.
>>>
>>> solution 1       ( failed )
>>>
>>> this solution use xmlhttprequest to download the whole image data,
>>> convert it to base64 string then show it to "Image"
>>>
>>> source code:
>>> var xhr = new XMLHttpRequest();
>>> xhr.overrideMimeType('text/plain; charset=x-user-defined');   // doesn't
>>> work in qml but html
>>> xhr.open("GET", "http://www.xxx.com/xxx.png";);
>>> xhr.onreadystatechange = function() {
>>>     if (xhr.readyState === 4) {
>>>         var blob = xhr.responseText ;
>>>                     var blobarray = new Array ;
>>>                     for (var i = 0, len = blob.length; i < len; ++i) {
>>>                         blobarray.push(blob.charCodeAt(i) & 0xff );
>>>                     }
>>> // then use        Image.source = "data:image/png;base64," +
>>>  blobarray.join("")     to show the image
>>>
>>>     }
>>> };
>>> xhr.send();
>>>
>>> This snippet shows an old way to download binary data using
>>> xmlhttprequest level 1, but not work in qml ( overrideMimeType not
>>> supported ) .
>>> Also, xmlhttprequest level 2 (support binary data) not supported by qml
>>> 2.0
>>>
>>> Conclusion: it's better update the xmlhttprequest to level 2
>>>
>>>
>>> solution 2:  (success but not perfect)
>>>
>>> This solution use qml2 canvas to load a remote url then save it to local
>>> file system.
>>>
>>> source code:
>>> property string url: "http://www.xxx.com/xxx.png";
>>>     Canvas {
>>>         id: mycanvas
>>>         y: 350
>>>         width: 200
>>>         height: 200
>>>
>>>      Component.onCompleted:
>>>     {
>>>         mycanvas.loadImage(url);
>>>     }
>>>
>>>         onImageLoaded:
>>>         {
>>>             console.log("onImageLoaded");
>>>             requestPaint();
>>>         }
>>>
>>>         onPaint: {
>>>             var ctx = mycanvas.getContext("2d");
>>>
>>>
>>>             ctx.drawImage(url, 0, 0);
>>>             ctx.restore();
>>>
>>>
>>>         }
>>>     }
>>>
>>> MouseArea
>>>         {
>>>             anchors.fill: parent
>>>             onClicked: mycanvas.save("./aaa.png");
>>>         }
>>>
>>>
>>> This solution can download every image, but, the final function "save"
>>> can't support "homepath" and "temppath", which means, we don't know where
>>> we can put the downloaded images such as "home"/.cache/coreapp/images/
>>>
>>> Conclusion: homepath is needed
>>>
>>>
>>>
>>> Feel free to prove I am wrong  :P  because I am confusing about the
>>> offline mode of the RSS reader Core App
>>>
>>> Have a nice day :)
>>>
>>>
>>
>> --
>> Mailing list: https://launchpad.net/~ubuntu-touch-coreapps
>> Post to     : ubuntu-touch-coreapps@xxxxxxxxxxxxxxxxxxx
>> Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps
>> More help   : https://help.launchpad.net/ListHelp
>>
>>
>