volume
August 30, 2017, 12:19am
1
Hi
Fuse version
I have an image added from camera roll which is not displayed. it is due to not part of the bundle?
<Image Width="100%" Height="100%" Margin="1" Background="#353942" StretchMode="Fill" File="{overlay}">
</Image>
Here is more info how file added
CameraRoll.getImage().then(
function(image)
{
overlay.value = imagePath + image.name;
imagename = image.name;
FileSystem.move(image.path,overlay.value);
console.log("received image: "+overlay+", "+image.width+"/"+image.height);
}
).catch(
function(reason){
console.log("Couldn't get image: "+reason);
});
Uldis
August 30, 2017, 8:39am
2
Could you please provide a complete, ready-to-run example? There’s not much we can do without seeing what imagePath is, and there might be other problems with the code that you’re simply not showing in the snippet above.
Another thing you might try is setting overlay.value after you’ve moved the file. I believe your UX tries to show the image before it’s there (because your code hasn’t yet moved it), and fails.
volume
August 31, 2017, 2:42am
3
Hi
Thanks for replay.
here is full page code.
<test.Page ux:Class="addBannerPage">
<Router ux:Dependency="router" />
<JavaScript>
var Camera = require("FuseJS/Camera");
var CameraRoll = require("FuseJS/CameraRoll");
var Observable = require("FuseJS/Observable");
var ImageTools = require("FuseJS/ImageTools");
var FileSystem = require("FuseJS/FileSystem");
var Storage = require("FuseJS/Storage");
var Context = require("Modules/Context");
var imagename = Observable();
var banner = Observable({name: "", overlay: "Assets/test-test-img-01.jpg", background: [{ photo:"Assets/test-test-img-01.jpg"}], lastphoto: "", location: "", comments: ""});
var Path = FileSystem.dataDirectory + "/Assets/";
var name = banner.map(function(x) { return x.name; });
var overlay = banner.map(function(x) { return x.overlay; });
function cancel() {
router.goto("home");
}
function save() {
Context.addBanner(name.value, '', overlay.value,'', '');
router.goto("home");
}
function goToaddBanner(){
router.goto("addBanner");
}
function selectImage()
{
CameraRoll.getImage()
.then(function(image)
{
imagename.value = image.name;
FileSystem.moveSync(image.path,Path + image.name.toLowerCase());
overlay.value = Path + image.name.toLowerCase();
console.log("received image: "+overlay.value+", "+image.width+"/"+image.height);
})
.catch(function(reason){
console.log("Couldn't get image: "+reason);
});
};
module.exports = {
name: name,
overlay: overlay,
imagename: imagename,
selectImage: selectImage,
goToaddBanner: goToaddBanner,
cancel: cancel,
save: save
};
</JavaScript>
<DockPanel>
<StackPanel ItemSpacing="0" Padding="10">
<test.Header Text="ADD NEW OVERLAY (PNG)" ShowAddButton="Hidden" ShowBackButton="Visible" Margin="0, 0, 0, 30" />
<Rectangle ux:Class="FormSeparator" Height="1" Fill="#fff4" Width="100%" Margin="10, 0, 40, 0" Alignment="CenterLeft" />
<test.TextBox ux:Name="name" PlaceholderText="NAME" Value="{name}" />
<!-- <FormSeparator />
<test.TextBox ux:Name="location" PlaceholderText="LOCATION" Value="{location}" /> -->
<FormSeparator />
<Grid Columns="4*,2*" Margin="0, 0, 40, 0">
<test.TextBox ux:Name="overlay" PlaceholderText="IMAGE" Value="{imagename}" />
<test.Button Text="ADD IMAGE" Clicked="{selectImage}" Width="120" />
</Grid>
<FormSeparator />
<Panel Width="80%" Height="100%" Background="#FFFFFF" Alignment="HorizontalCenter" Margin="0, 0, 0, 0" Padding="0, 0, 0, 0">
<Image Width="100%" Height="100%" Margin="1" Background="#353942" StretchMode="Fill" File="{overlay}">
</Image>
</Panel>
<FormSeparator />
</StackPanel>
<Grid ColumnCount="1" Alignment="Bottom" Margin="0, 0, 5, 0">
<!-- <test.Button2 Text="CANCEL" Clicked="{cancel}" FontSize="12" /> -->
<test.Button Text="SAVE" Clicked="{save}" FontSize="12" Alignment="BottomRight" Width="120" />
</Grid>
</DockPanel>
</test.Page>
Uldis
August 31, 2017, 10:24am
4
Alright, so looking at the code it seems you have a confusion about where files live.
When we’re referring to images in UX markup, that physically exist in your project folder tree, those images are added to the app bundle. Same applies when you explicitly bundle some images in your .unoproj, under "Includes", like so: "Assets/*.png:Bundle". Resources from the bundle can be read using FuseJS/Bundle .
Images in CameraRoll live inside the phones’ camera roll. No surprises there, you need to use FuseJS/CameraRoll to read those.
And finally, if you want to operate with random images or other types of files during app run-time, theres FuseJS/FileSystem which works within the FileSystem.dataDirectory path on the target platform.
Needless to say, those 3 paths are completely different, and you should not mix them up. Another point to keep in mind: I don’t think you can move a file from CameraRoll to FileSystem (even if you can, you definitely should not); copy things instead.
Now, with the above in mind, I created this complete, minimal repro that works:
<App>
<JavaScript>
var CameraRoll = require("FuseJS/CameraRoll");
var Observable = require("FuseJS/Observable");
var FileSystem = require("FuseJS/FileSystem");
var overlay = Observable("");
var path = FileSystem.dataDirectory;
function selectImage() {
CameraRoll.getImage()
.then(function(image) {
var dest = path + "/" + image.name.toLowerCase();
console.log("image.path: " + image.path);
console.log("destination: " + dest);
FileSystem.copy(image.path, dest).then(function() {
overlay.value = dest;
console.log("received image: "+overlay.value+", "+image.width+"/"+image.height);
});
}).catch(function(reason){
console.log("Couldn't get image: "+reason);
});
};
module.exports = {
overlay: overlay,
selectImage: selectImage
};
</JavaScript>
<DockPanel>
<StatusBarBackground Dock="Top" />
<BottomBarBackground Dock="Bottom" />
<Panel Dock="Top" Height="56" Background="#18f" Clicked="{selectImage}">
<Text Value="Select Image" Alignment="Center" TextColor="#fff" />
</Panel>
<Panel>
<WhileString Value="{overlay}" Equals="" Invert="true">
<Image File="{overlay}" StretchMode="UniformToFill" />
</WhileString>
</Panel>
</DockPanel>
</App>
volume
September 1, 2017, 3:51am
5
Hi, thanks for the very good explanation. really appreciate
just want to add one thing filesystem not have function call copy.
https://www.fusetools.com/docs/fuse/filesystem/filesystemmodule
Uldis
September 1, 2017, 8:38am
6
Oh, but it does !
There’s a mistake in the docs, and I’ll raise a ticket to fix that.