← Back to team overview

ubuntu-touch-coreapps team mailing list archive

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

 

I guess we should fill a bug against ubuntu-sdk then?


2013/3/28 Roman Shchekin <mrqtros@xxxxxxxxx>

> 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 subclassingQQuickImageProvider, 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
>>>>
>>>>
>>>
>>
>
> --
> 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