ubuntu-touch-coreapps team mailing list archive
-
ubuntu-touch-coreapps team
-
Mailing list archive
-
Message #00244
Re: [Ubuntu-phone] [Core-Apps] Solution for offline image using pure qml
This isn't a bug of SDK, but a necessary plugin for development. Some
functions should be implemented with C++, and these functions can be
included in "Ubuntu.Component 0.x",
for example:
import Ubuntu.Component.native 0.1 as UCore // all common functions
implemented in this plugin, should done by Canonical
function saveImage ()
{
UCore.saveImage(url) ;
}
function loadImage ()
{
return UCore.loadImage(url) ;
}
2013/3/28 Matthias Gehre <gehre.matthias@xxxxxxxxx>
> 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
>>
>>
>
> --
> 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