← Back to team overview

ubuntu-touch-coreapps team mailing list archive

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