Load non bundled image

How-to Discussions
1

Is is possible to load an image that is not bundled in UX? I’m trying take a picture with the camera, but so far I haven’t been able to actually display this image afterwards. I naively tried something like this, but it’s obviously not the right way, as I get marshalling errors on the filename.

(sorry for code as image, I’m not sure how to format code here) file

2

Sorry for not being able to give you an answer, I would just like to point out that to enter code; skip a line, then tab the entire code secion in: Enter
Enter
Tab code here
Tab more code here
Tab ect.

Example:

code here
more code here
ect.

And for rounding off a line you can use < br>

3

Ah, thanks! Nice to know.

4

Morten Andersson: Support for displaying files from the camera directly is coming in the next release (any time now).

You basically just databind File on the image to the file passed to the promise of takePicture:

Camera.takePicture(...).then(function(file) {
module.exports.imageFile.value = file;

});

In UX:

<Image File="{imageFile}" />

Note: the API for Camera will change slightly in the next release(s). Keep an eye on the docs

5

Im trying to take a picture and display this image… I have this code but my app in Android crashes when I click in the Panel and call the Function “MyFuction”:

<App Theme="Basic" ClearColor="#eeeeeeff">
    <DockPanel>
        <StatusBarBackground DockPanel.Dock="Top" />

              <JavaScript>

                var Observable = require('FuseJS/Observable');
                var Camera = require('FuseJS/Camera');
                var imageFile = Observable();

                function MyFuction(args) {
                    Camera.takePicture(640, 360).then(function(file) {
                      module.exports.imageFile.value = file;
                    });
                  }

                module.exports = {
                  MyFuction: MyFuction,
                  imageFile: Observable(null)
                };

              </JavaScript>

                  <Panel Background="Red" Width="100%" Height="80." >
                      <Clicked Handler="{MyFuction}" />                  </Panel>

            <Image File="{imageFile}" Width="100%" Height="100%" StretchMode="UniformToFill" />

    </DockPanel>
</App>

How can I fix it?

Thanks!

6

The parameters have changed a bit. TakePicture takes an object instead now: Camera.takePicture({ targetWith:640, targetHeight:360, correctOrientation:true })

But it shouldn’t crash that hard, will get someone to look at that.

7

Thanks! With this code work perfect! :slight_smile: