Hi! I’m trying to make a video as a background layer in my login screen as seen on Youtube by Fuse’s Channel. But, what happened was the simulator shows an error which is “Oops! Something went wrong here. Only a single subscriber is supported for Layout. Please see the Fuse Monitor for details.”. I opened up the Monitor and the Log kept on displaying: “Draw called on a non-rooted node…”. The source code for my app is as follows:
–MainView.ux–
<DockPanel>
<Style>
<Text TextColor="#ffffff" />
<TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
</Style>
<!-- Button colors -->
<float4 ux:Key="C600" ux:Value="#8869e5" />
<float4 ux:Key="C700" ux:Value="#6447b3" />
<float4 ux:Key="CFillFore" ux:Value="#644793" />
<StatusBarBackground Dock="Top" />
<BottomBarBackground Dock="Bottom" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var username = Observable("");
var password = Observable("");
var areCredentialIsValid = Observable(function() {
return username.value != "" && password.value != "";
});
module.exports = {
username: username,
password: password,
areCredentialIsValid: areCredentialIsValid
};
</JavaScript>
<Video File="assets/concertlightsbackground.mp4" />
<Grid Rows="1, 1">
<StackPanel Alignment="VerticalCenter">
<Text Alignment="HorizontalCenter" FontSize="50">thrytbox</Text>
<Text Alignment="HorizontalCenter" Opacity=".5">connect with your friends and families</Text>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
<TextInput PlaceholderText="username/e-mail" Value="{username}" />
<TextInput PlaceholderText="password" Value="{password}" />
<Button Text="Log In" IsEnabled="{areCredentialIsValid}" />
</StackPanel>
</Grid>
</DockPanel>
–thrytbox-loginScreen.unoproj-- { “RootNamespace”: “”, “Packages”: [ “Fuse.Animations”, “Fuse.BasicTheme”, “Fuse.Themes”, “Fuse.Controls”, “Fuse.Designer”, “Fuse.Drawing”, “Fuse.Drawing.Primitives”, “Fuse.Effects”, “Fuse.Elements”, “Fuse.Entities”, “Fuse.Gestures”, “Fuse.Navigation”, “Fuse.Shapes”, “Fuse.Triggers”, “Fuse.Reactive”, “Fuse.Android”, “Fuse.Desktop”, “Fuse.iOS”, “FuseCore”, “Uno.Collections”, “Uno.Geometry” ], “Includes”: [ “*” ] } --devices.json-- [ { “Name” : “iPhone 6”, “Width” : 750, “Height” : 1334, “PixelsPerPoint”: 2, “PhysicalPixelsPerInch” : 326, “IsDefault” : true }, { “Name” : “iPhone 6 Plus”, “Width” : 1080, “Height” : 1920, “PixelsPerPoint” : 3, “PhysicalPixelsPerInch” : 401, “PhysicalPixelsPerPixel” : 0.8695652173913 }, { “Name” : “iPhone 2G, 3G, 3GS”, “Width” : 320, “Height” : 480, “PixelsPerPoint”: 1, “PhysicalPixelsPerInch”: 163 }, { “Name” : “iPhone 4, 4s”, “Width” : 640, “Height” : 960, “PixelsPerPoint” : 2, “PhysicalPixelsPerInch”: 326
}, { “Name” : “iPhone 5, 5s”, “Width” : 640, “Height” : 1136, “PixelsPerPoint” : 2, “PhysicalPixelsPerInch” : 326 }, { “Name” : “Nexus 10”, “Width” : 1600, “Height” : 2560, “PixelsPerPoint”: 2, “PhysicalPixelsPerInch”: 300 }, { “Name” : “Low PPI 1920 x 1080”, “Width” : 1920, “Height” : 1080, “PixelsPerPoint”: 1, “PhysicalPixelsPerPixel”: 1, “PhysicalPixelsPerInch”: 72, “DefaultOrientation” : “Landscape” }, { “Name” : “Low PPI 1440 x 900”, “Width” : 1440, “Height” : 900, “PixelsPerPoint”: 1, “PhysicalPixelsPerPixel”: 1, “PhysicalPixelsPerInch”: 72, “DefaultOrientation” : “Landscape” }, { “Name” : “Low PPI 1280 x 720”, “Width” : 1280, “Height” : 720, “PixelsPerPoint”: 1, “PhysicalPixelsPerPixel”: 1, “PhysicalPixelsPerInch”: 72, “DefaultOrientation”: “Landscape” }
]