← Back to team overview

ubuntu-touch-coreapps team mailing list archive

Re: [Ubuntu-phone] [Core-Apps] Solution for offline image using pure qml

 

I agree with Joey - this functionality should be implemented by Canonical,
because not only RSS Reader team need it.


2013/3/28 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
>>>
>>>
>>
>

Follow ups

References