ubuntu-touch-coreapps team mailing list archive
-
ubuntu-touch-coreapps team
-
Mailing list archive
-
Message #00242
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