Hey all,
Today I saw a forum post asking about notifications and the poster asked if there was anyway to create a toast type notification. So I went ahead and created a simple Toasts code for that very purpose. As of now its simply takes its values from the two text fields and uses them as the title and body text. But thats just for example purposes, you can change it however you wish. The toast is made so it can be displayed with any text for the body and title, and it is shown with a simple block, so it can be displayed in basically any way with any code you may have. Clicking the toast itself will toggle it, so once its shown you may click/tap it and it will go back. If this idea is liked, I may try to update it to have more options like sound playing (if thats possible with Fuse), color coding (to show of the toast is for an error, notification, warning, etc.) and option image support, among other things. A video showing the Toasts off can be found here (sorry about the background music. I forgot that my screen recorder records the sound from YouTube). EDIT: I have updated the code to support images and toast-typing! A new video can be found here! The code for the FIRST example is here:
<App Theme="Basic" Background="#363F45">
<JavaScript>
var titleOb = require("FuseJS/Observable");
var bodyOb = require("FuseJS/Observable");
var title = titleOb("");
var body = bodyOb("");
var toastTitle = title.map(function (title) {
if (title == "") {
return "Title Default";
} else {
return title;
}
});
var toastText = body.map(function (body) {
if (body == "") {
return "Body Default";
} else {
return body;
}
});
module.exports = {
title: title,
body: body,
toastTitle: toastTitle,
toastText: toastText
};
</JavaScript>
<Panel>
<Button ux:Name="button" Text="Show Toast" Height="45" Margin="20,80">
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
</Button>
<Rectangle ux:Name="Toast" Fill="#fff" Width="250" Height="75" CornerRadius="5" Alignment="TopRight" Margin="-250,10">
<StackPanel Alignment="Center">
<Image Alignment="Left"></Image>
<Text FontSize="20" Value="{toastTitle}"/>
<Text Value="{toastText}"/>
</StackPanel>
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
<DropShadow Angle="135" Distance="10" Size="1" Spread=".5"/>
</Rectangle>
<WhileTrue ux:Name="showToast">
<Change Toast.Margin="-5,10" Duration=".2" DurationBack=".2"/>
</WhileTrue>
<StackPanel Alignment="Bottom">
<TextInput Value="{title}" PlaceholderText="Toast Title Text"/>
<TextInput Value="{body}" PlaceholderText="Toast Body Text"/>
</StackPanel>
</Panel>
</App>
The code for Version 2 is here:
<App Theme="Basic" Background="#363F45">
<JavaScript>
var titleOb = require("FuseJS/Observable");
var bodyOb = require("FuseJS/Observable");
var typeOb = require("FuseJS/Observable");
var title = titleOb("");
var body = bodyOb("");
var toastType = typeOb("");
toastType.value = "#3366FF";
var toastTitle = title.map(function (title) {
if (title == "") {
return "Title Default";
} else {
return title;
}
});
var toastText = body.map(function (body) {
if (body == "") {
return "Body Default";
} else {
return body;
}
});
function typeChange(args) {
var prog = args.value;
toastType.value = "#3366FF";
if (prog < 25) {
toastType.value = "#3366FF";
} else if (prog < 50) {
toastType.value = "#00FF22";
} else if (prog < 75) {
toastType.value = "#FCCE4E";
} else {
toastType.value = "#BA0000";
}
};
module.exports = {
title: title,
body: body,
toastTitle: toastTitle,
toastText: toastText,
toastType: toastType,
typeChange: typeChange
///////////////////////////////////////
//Some good colors and their uses: //
//toastType: "#3366FF" <--default //
//toastType: "#00FF22" <--message //
//toastType: "#BA0000" <--error //
//toastType: "#FCCE4E" <--warning1 //
//toastType: "#F5B52C" <--warning2 //
//toastType: "#F6FF00" <--achievement//
///////////////////////////////////////
};
</JavaScript>
<Panel>
<Button ux:Name="button" Text="Show Toast" Height="45" Margin="20,80">
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
</Button>
<Rectangle ux:Name="Toast" Fill="{toastType}" Width="250" Height="75" CornerRadius="5" Alignment="TopRight" Margin="-250,10">
<Image Alignment="Left" File="Assets/toastIcons/open_smile.png" Margin="-5,0"/>
<StackPanel Margin="5,0" Alignment="Center">
<Text FontSize="20" Value="{toastTitle}"/>
<Text Value="{toastText}"/>
</StackPanel>
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
<Rectangle ux:Name="Toast" Fill="#fff" Width="250" Height="70" CornerRadius="5" Alignment="Top"/>
<DropShadow Angle="135" Distance="10" Size="1" Spread=".5"/>
</Rectangle>
<WhileTrue ux:Name="showToast">
<Change Toast.Margin="-5,10" Duration=".2" DurationBack=".2" Easing="CircularInOut"/>
</WhileTrue>
<StackPanel Alignment="Bottom">
<Text Value="Slide to change Toast Type">
<Slider ValueChanged="{typeChange}" />
</Text>
<TextInput Value="{title}" PlaceholderText="Toast Title Text"/>
<TextInput Value="{body}" PlaceholderText="Toast Body Text"/>
</StackPanel>
</Panel>
</App>
I was originally going to create a new UI element and call it “Toast” but it seemed pointless after a few minutes of coding. As of this version of Fuse, you cannot create UI elements using JavaScript/once the app is loaded. This is why it’s a single toast which is being edited and not a new one being created. If they add this ability in a future update I shall rework the code to make things a bit better. I tried making each part of the toast as easy to edit as possible, so basically any part can be changed/called on during any event handler you have in your app. I did forget to make the icon be dynamic though, but if assume you can do that yourself if need be. It would be done similarly to how I have the colors done. I hope you find this useful for future apps, as I know im using this on 2 upcoming games I have in the works!