", //Replace with info from Azure Portal
7 |
8 | Scope: "offline_access",
9 |
10 | SignUpPolicy: "B2C_1_Signup", //Replace with your Extensible policy for signup label
11 | SignInPolicy: "B2C_1_SignIn", //Replace with your Extensible policy for signin label
12 | EditProfilePolicy: "B2C_1_EditProfile", //Replace with your Extensible policy for editing label
13 |
14 | OAuthResponseType: "code",
15 | OAuthResponseMode: "query",
16 |
17 | RedirectUri: "urn:ietf:wg:oauth:2.0:oob" // Oauth 2.0 Default URI
18 | };
19 |
--------------------------------------------------------------------------------
/Samples/AzureADB2COAuth/AzureADB2COAuth.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Mobile": {
3 | "UriScheme": "urn"
4 | },
5 | "RootNamespace": "",
6 | "Packages": [
7 | "Fuse",
8 | "FuseJS",
9 | "Fuse.Launcher"
10 | ],
11 | "Includes": [
12 | "*",
13 | "Auth.js:Bundle",
14 | "Azure-AD-B2C-OAuth.js:Bundle"
15 | ]
16 | }
--------------------------------------------------------------------------------
/Samples/AzureADB2COAuth/README.md:
--------------------------------------------------------------------------------
1 | # Important info
2 |
3 | This app do not work in preview on desktop since it require FuseJS/InterApp to launch a webbrowser.
4 |
5 | # Azure Active Directory B2C OAuth login
6 |
7 | This sample show how you can use the FuseJS/InterApp package to log in with Azure AD B2C Account.
8 |
9 | For more information about Azure AD B2C check out this link:
10 |
11 | https://docs.microsoft.com/en-us/azure/active-directory-b2c/
12 |
13 | ## Setup
14 |
15 | To run the sample, you first need to create an Azure Active Directory B2C tentant in the azure.com portal. Then copy required information to their spots in Auth.js.
16 |
17 | The redirect_url used in this sample is the default OAuth 2.0 uri: 'urn:ietf:wg:oauth:2.0:oob'. Since the UriScheme is not unique this can lead to conflicts with other applications. You can change this to a unique uri by allowing this in the Azure portal and updating the redirect_url in Auth.js
18 |
19 | ## Azure Active Directory B2C: Extensible policy framework
20 |
21 | Azure extend the OAuth flow with Extensible policies. For more information check out this link:
22 |
23 | https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-policies
24 |
25 | ## Azure Active Directory B2C: Customize the Azure AD B2C user interface (UI)
26 |
27 | If you want to customize the login experience check out this link:
28 |
29 | https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization
30 |
31 | ## Running the app
32 |
33 | When the app starts, click the "Sign Up" / "Sign In" button. It will open a web browser prompting you to register/login to your Azure AD B2C account. After successfully registering/logging in to your Azure AD B2C account, the web browser will redirect back to the app with the OAuth JWT Payload. Clicking the "OAuthInfo" button will dump the current JWT payload to the debug console as JSON.
34 |
35 | * Note: In this example the client secret is in the Auth.js file. This might not be a good idea for a production app, but is done here for simplicity.
36 |
--------------------------------------------------------------------------------
/Samples/BarChart/BarChart.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.Charting"
7 | ],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/BarChart/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var Observable = require("FuseJS/Observable");
5 | function Item(label, value) {
6 | this.label = label;
7 | this.value = value;
8 | }
9 |
10 | module.exports.data = Observable(new Item("Hats", 100), new Item("Without hats", 30));
11 |
12 |
13 |
14 | Safety
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Samples/BarChart/README.md:
--------------------------------------------------------------------------------
1 | # Bar chart
2 |
3 | This example shows how we can create bar charts using the premium Fuse.Charting API.
4 |
5 | ## Preparation
6 |
7 | In order to use the library, you have to include `Fuse.Charting` package in your unoproj file:
8 |
9 | ```
10 | "Packages": [
11 | "Fuse.Charting"
12 | ],
13 | ```
14 |
15 | ## The bars
16 |
17 | Bars are rendered using Rectangles, like so:
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | The `Panel` is there for layout-reasons, to make sure the rectangles are in the correct grid, as the `Plot` uses a `GridLayout`. Also worth noting is `PlotArea`, which is used to configure certain aspects of the `PlotData` behavior. In this example, `PlotArea` is used to define the maximum number of steps on the y-axis, which is 20 in this case.
31 |
32 | ## Various cosmetics
33 |
34 | Since this is a bar chart, labels on the x-axis describing the bars is normally expected. This is done using `PlotAxis`:
35 |
36 | c:PlotAxis Row="1" Column="1" Axis="X" >
37 |
38 |
39 |
40 | Additionally, y-axis labels are used to make the chart more readable:
41 |
42 |
43 |
45 |
46 |
47 | Last, horizontal lines are drawn like this:
48 |
49 |
50 |
51 |
52 | 
--------------------------------------------------------------------------------
/Samples/BarChart/description.yaml:
--------------------------------------------------------------------------------
1 | name: Bar chart
2 | desc: Demonstrates how bar charts can be built using the premium library Fuse.Charting
3 | api:
4 | -
5 | class: Fuse.Charting.Chart
6 | desc: Base element for the premium charting API
7 | -
8 | class: Fuse.Charting.PlotData
9 | desc: Plots the data series
10 | -
11 | class: Fuse.Charting.DataSeries
12 | desc: Provides data to plot
--------------------------------------------------------------------------------
/Samples/BarChart/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/BarChart/preview.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Auto_white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Auto_white.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Auto_white@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Auto_white@2x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Auto_white@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Auto_white@3x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Off_white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Off_white.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Off_white@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Off_white@2x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_Off_white@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_Off_white@3x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_On_white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_On_white.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_On_white@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_On_white@2x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/Flash_On_white@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/Flash_On_white@3x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/rotate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/rotate.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/rotate@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/rotate@2x.png
--------------------------------------------------------------------------------
/Samples/Camera/Assets/rotate@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Camera/Assets/rotate@3x.png
--------------------------------------------------------------------------------
/Samples/Camera/CameraViewExample.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS",
5 | "Fuse.Controls.CameraView",
6 | "Fuse.ImageTools",
7 | ],
8 | "Includes": [
9 | "*"
10 | ],
11 | "Mobile": {
12 | "Orientations": "Portrait"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/Samples/Camera/CaptureMode.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/Samples/Camera/CapturePhotoButton.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Samples/Camera/CaptureVideoButton.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Samples/Camera/FlashMode.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Samples/Camera/README.md:
--------------------------------------------------------------------------------
1 | # Camera
2 |
3 | This example uses the Fuse.Controls.Camera premium package
4 |
5 | Basic Camera use is simple:
6 | ```xml
7 |
8 |
9 | var Camera = _camera;
10 | Camera.capturePhoto()
11 | .then(function(photo) {
12 | photo.save()
13 | .then(function(filePath) {
14 | console.log("Photo saved to: " + filePath);
15 | photo.release();
16 | })
17 | .catch(function(error) {
18 | console.log("Failed to save photo: " + error);
19 | photo.release();
20 | });
21 | })
22 | .catch(function(error) {
23 | console.log("Failed to capture photo: " + error);
24 | });
25 |
26 | ```
27 | `capturePhoto` returns a `Promise` that will resolve to an object representing the captured photo.
28 | We can then save the photo to a file on disk. `save()` will return a `Promise` that resolves to a filepath.
29 |
30 | #### Camera features implemented in this example
31 | - Photo capture
32 | - Capture preview with the special ImageSource provided by in the Camera API
33 | - Video recording and preview.
34 | - Changing capture mode
35 | - Changing flash mode
36 | - Dealing with Android specific photo settings
37 |
38 | Please have a look at the official docs for complete API reference [here](https://www.fusetools.com/docs/fuse/controls/cameraviewbase).
39 |
--------------------------------------------------------------------------------
/Samples/Controls/ButtonWithImage/ButtonWithImage.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/Controls/ButtonWithImage/README.md:
--------------------------------------------------------------------------------
1 | # Creating a custom button with an image
2 |
3 | This example shows two different ways to create a custom button that has an image and text as properties. Which approach you use depends on what is most convenient in your application.
4 |
5 | ## Using a File property
6 |
7 | `MyButtonFile` shows how to expose a `FileImage` property. This works just like the `Image.File` property and a filename is provided directly.
8 |
9 |
10 |
11 | This approach is perhaps the easier to understand, but is less versatile.
12 |
13 | ## Using a ImageSource property
14 |
15 | The `MyButtonSource` shows how to expose a `Image` property. This works just like the `Image.Source` property, thus supporting a variety of use-cases.
16 |
17 | You can create free `ImageSource` objects and use them:
18 |
19 |
20 |
21 |
22 | You can use the resource system:
23 |
24 |
25 |
26 |
27 | The resource system is also useful if you want to specify the button in JavaScript:
28 |
29 |
30 |
31 | var Observable = require("FuseJS/Observable");
32 | var useIcon = Observable("IconCancel");
33 | var useText = "Cancel";
34 |
35 | module.exports = {
36 | useIcon: useIcon,
37 | useText: useText
38 | };
39 |
40 |
41 |
42 | You can also use global's if you want:
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Samples/Controls/ButtonWithImage/cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/ButtonWithImage/cancel.png
--------------------------------------------------------------------------------
/Samples/Controls/ButtonWithImage/description.yaml:
--------------------------------------------------------------------------------
1 | name: Creating a custom button with an image
2 | desc: This example shows two different ways to create a custom button that has an image and text as properties. Which approach you use depends on what is most convenient in your application.
3 | api:
4 | -
5 | class: Fuse.Resources.FileImageSource
6 | desc: Supplies an Image as a resource to a custom button class.
7 | -
8 | class: Fuse.Resources.ImageSource
9 | desc: Declares a ux:Property for a custom button that accepts an image source.
10 | -
11 | class: Uno.UX.FileSource
12 | desc: Declares a ux:property for a custom button that accepts an image file path.
13 |
--------------------------------------------------------------------------------
/Samples/Controls/Circular/Circular.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/Samples/Controls/Circular/README.md:
--------------------------------------------------------------------------------
1 | # Circular layout and range controls
2 |
3 | This example creates a time picker using the `CircleLayout` and `RangeControl2d`. It includes an `Attractor` and an interaction transition to show how to combine these elements together.
4 |
5 | Click on a hour/minute to select, or click and drag. Once you select an hour it will transition to the minutes screen. Click on the hour in the top display to go back to the hour selection.
6 |
7 | The control `RangeControl2D` is a pure semantic control, and does nothing on its own. The standard `CircularRangeBehavior` maps a section of circle onto the two values of that control. For normal `RangeControl` it maps only one value. For the hour hands note the use of `UserStep="1,1"` to quantize the selection on both axis.
8 |
9 | On `CircleLayout` even though we have a full 360° we're using `StartAngleDegrees` and `EndAngleDegrees`. This allows us to specify the children in normal clock order, and gives an example of those properties.
--------------------------------------------------------------------------------
/Samples/Controls/Circular/description.yaml:
--------------------------------------------------------------------------------
1 | name: Circular layout and range control
2 | desc: This example creates a time picker for hours and minutes with a circular layout.
3 | api:
4 | -
5 | class: Fuse.Layouts.CircleLayout
6 | desc: Arranges hour and minute values around a clock face.
7 | -
8 | class: Fuse.Controls.RangeControl2d
9 | desc: Creates a two-ring selection for hour selection on a clock face.
10 | -
11 | class: Fuse.Gestures.CircularRangeBehavior
12 | desc: Creates a selection for hours and minutes on a clock face.
13 | -
14 | class: Fuse.Triggers.InteractionCompleted
15 | desc: Progresses to minute selection after the user has selected an hour.
16 | -
17 | class: Fuse.Triggers.RangeAnimation
18 | desc: Animates the change between selecting from two levels in a two-ring hour selection.
19 |
--------------------------------------------------------------------------------
/Samples/Controls/ScrollViewSwipe/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/Samples/Controls/ScrollViewSwipe/README.md:
--------------------------------------------------------------------------------
1 | # Scroll swipe to reveal header
2 |
3 | Creates a swipe-to-reveal header in a ScrollView. The header is visible both when the user scrolls down and when the ScrollView is scrolled to the top.
4 |
5 |
6 | ## Combining gestures
7 |
8 | A `SwipeGesture` is added directly in a `ScrollView` to provide an active drawer for the header. This works because the implicit gesture controlling the scrolling and the `SwipeGesture` are both on the same node and are allowed to share input.
9 |
10 | A `SwipingAnimation`, named `swipeAnim`, is added to monitor the gesture. This is normally where the reveal part oft he gesture would be done, but it won't be enough, so we leave it as an empty gesture. We want the header to be visible also if the user scrolls to the top without invoking the gesture, such as by pressing the scroll to top button.
11 |
12 | We add a `ScrollingAnimation`, named `scrollAnim`, that covers the region occupied by the header view. It again is left empty. Ttriggers have progress even if they don't contain any animators or actions.
13 |
14 | The `headerPanel` has a `Translation` controlling whether it is revealed or hidden. We want this to be revealed when the users swipes down or when the `ScrollView` is at the top. We use a `max` expression that takes the higher progress of `swipeAnim` and `scrollAnim`.
15 |
16 |
17 | ## Header spacing
18 |
19 | At the top of the `StackPanel` we have a `Panel` reserving height for the `headerPanel`. It uses an expression to assign itself height, leaving a bit of space for the divider.
20 |
21 | By reserving the space we simplify the task of hiding/revealing the header. It allows the small `headerPanel` to be an overlay on the `ScrollView` at any scroll position, but also to appear above the scroll contents when scrolled to the top.
22 |
--------------------------------------------------------------------------------
/Samples/Controls/ScrollViewSwipe/ScrollViewSwipe.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS"
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
--------------------------------------------------------------------------------
/Samples/Controls/ScrollViewSwipe/description.yaml:
--------------------------------------------------------------------------------
1 | name: Scroll swipe to reveal header
2 | desc: Creates a swipe-to-reveal header in a ScrollView.
3 | api:
4 | -
5 | class: Fuse.Gestures.SwipeGesture
6 | desc: Reveals a header when the user swipes down in a ScrollView.
7 | -
8 | class: Fuse.Gestures.SwipingAnimation
9 | desc: Reveals a header when the user swipes down in a ScrollView.
10 | -
11 | class: Fuse.Triggers.ScrollingAnimation
12 | desc: Reveals a header at the top the ScrollView, or when swiping down.
13 | -
14 | class: Fuse.Translation
15 | desc: Combines a `ScrollingAnimation` and `SwipingAnimation` to reveal a top header.
16 | -
17 | expression: max
18 | desc: Combines a `ScrollingAnimation` and `SwipingAnimation` to reveal a top header.
19 | -
20 | expression: height
21 | desc: Reserves space in a `ScrollView` for a header panel.
22 |
--------------------------------------------------------------------------------
/Samples/Controls/Scrollbar/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var Observable = require("FuseJS/Observable");
5 |
6 | var items = Observable();
7 |
8 | for (var i = 0; i < 50; ++i) {
9 | items.add({
10 | index: i,
11 | color: [ 0.9 + Math.random() * 0.1,
12 | 0.9 + Math.random() * 0.1,
13 | 0.9 + Math.random() * 0.1,
14 | 1],
15 | });
16 | };
17 |
18 | module.exports = {
19 | items: items
20 | };
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/Samples/Controls/Scrollbar/README.md:
--------------------------------------------------------------------------------
1 | # A scroll bar while scrolling
2 |
3 | This example shows how to create a scrolling indicator for a `ScrollView` that is only visible while the user is actively scrolling. It uses `ScrollingAnimation` and `WhileInteracting`.
4 |
--------------------------------------------------------------------------------
/Samples/Controls/Scrollbar/Scrollbar.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/Controls/Scrollbar/description.yaml:
--------------------------------------------------------------------------------
1 | name: Scrollbar
2 | desc: Shows a scrolling indicator for a `ScrollView` that is only visible while the user is actively scrolling.
3 | api:
4 | -
5 | class: Fuse.Triggers.ScrollingAnimation
6 | desc: Moves a thumb indicator relative to the scroll position.
7 | -
8 | class: Fuse.Triggers.WhileInteracting
9 | desc: Displays a scroll bar only while the user is scrolling.
10 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/arrowright.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/arrowright.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/basil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/basil.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/black_olives.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/black_olives.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/checkmark.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/green_olives.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/green_olives.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/green_pepper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/green_pepper.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/ham.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/ham.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/mushrooms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/mushrooms.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/onions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/onions.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/pineapple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/pineapple.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/pizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/pizza.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/red_pepper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/red_pepper.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/salami.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/salami.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Assets/tomato.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/Assets/tomato.png
--------------------------------------------------------------------------------
/Samples/Controls/Selection/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/PaymentPage.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable")
2 |
3 | var paymentOpts = {
4 | cash: { label: "Cash", desc: "Have cash ready at the door." },
5 | credit: { label: "Credit Card", desc: "Pay now with a credit card." },
6 | paypal: { label: "PayPal", desc: "Pay in advance with PayPal." },
7 | coupon: { label: "Coupon", desc: "Have your coupon ready at the door." },
8 | };
9 |
10 | var deliveryOpts = {
11 | normal: { label: "Normal (<1hr)", cost: 0 },
12 | express: { label: "Express (<30min)", cost: 5 },
13 | drone: { label: "Drone (<15min)", cost: 10 },
14 | };
15 |
16 | var payment = Observable("cash");
17 | var delivery = Observable("express");
18 | var notice = Observable("");
19 |
20 | payment.onValueChanged(module, update);
21 | delivery.onValueChanged(module, update);
22 |
23 | function update() {
24 | var payOpt = paymentOpts[payment.value];
25 | var delOpt = deliveryOpts[delivery.value];
26 |
27 | //safety check (a binding may reset the value to null during rooting/unrooting)
28 | if (!payOpt || !delOpt) {
29 | return;
30 | }
31 |
32 | var q = payOpt.desc;
33 | var cost = delOpt.cost;
34 | if (cost > 0) {
35 | q += " An extra delivery fee of $" + cost + " applies.";
36 | }
37 |
38 | notice.value = q;
39 | };
40 |
41 | // converts our own options object into an array of options for an `Each`
42 | function mapOptions(opts) {
43 | return Object.keys(opts).map(function(key) {
44 | return { value: key, label: opts[key].label };
45 | });
46 | };
47 |
48 | update();
49 |
50 | module.exports = {
51 | payment: payment,
52 | delivery: delivery,
53 | paymentOpts: mapOptions(paymentOpts),
54 | deliveryOpts: mapOptions(deliveryOpts),
55 | notice: notice
56 | };
57 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/Selection.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/TitlePage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/description.yaml:
--------------------------------------------------------------------------------
1 | name: Pizza Selection
2 | desc: This example demonstrates the various aspects of the selection API by means of a pseudo-pizza delivery app.
3 | api:
4 | -
5 | class: Fuse.Selection.Selection
6 | desc: Creates a multiple select, radio buttons, and a drop-down.
7 | -
8 | class: Fuse.Selection.Selectable
9 | desc: Used UX and JavaScript specified options for selections.
10 | -
11 | class: Fuse.Selection.Selected
12 | desc: Animates an option when it is selected.
13 | -
14 | class: Fuse.Selection.Deselected
15 | desc: Animates an option when it is deselected.
16 | -
17 | class: Fuse.Selection.ToggleSelection
18 | desc: Modifies the selection of an item when the user taps it.
19 | -
20 | class: Fuse.Selection.WhileSelected
21 | desc: Changes the appearance of an item while it is selected.
22 | -
23 | class: Fuse.Layouts.ColumnLayout
24 | desc: Adapts the layout of selection options based on screen size.
25 |
--------------------------------------------------------------------------------
/Samples/Controls/Selection/gifs/dropdown.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/gifs/dropdown.gif
--------------------------------------------------------------------------------
/Samples/Controls/Selection/gifs/multiple.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/gifs/multiple.gif
--------------------------------------------------------------------------------
/Samples/Controls/Selection/gifs/radio-buttons.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Controls/Selection/gifs/radio-buttons.gif
--------------------------------------------------------------------------------
/Samples/DropdownMenu/DropdownMenu.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/DropdownMenu/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var Observable = require('FuseJS/Observable');
5 | var items = Observable({name: "Autos"}, {name: "Juniors"});
6 | var itemsTwo = Observable({name: "Small Wheels"}, {name: "Big Wheels"});
7 |
8 | module.exports = {
9 | items: items,
10 | itemsTwo: itemsTwo
11 | };
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Samples/DropdownMenu/README.md:
--------------------------------------------------------------------------------
1 | # fuse-dropdown
2 | A little dropdown ui component for fuse.
3 |
4 | How To Use:
5 | Download the DropdownMenu.ux file and place it into your project. Then reference the class in your app by doing this:
6 | ```
7 |
8 | ```
9 | That's the bare minimum.
10 | To customize it you have currently 4 options:
11 | - Background color of the panels: BackgroundColor="#FBFBFB"
12 | - Border color of the panels: BorderColor="#000000"
13 | - Color of the text: TextColor="#00F"
14 | - Size of the text: FontSize="14"
15 |
16 | Hope you enjoy using this and please leave feedback, requests and anything else you might want to say. Thanks :)
17 |
--------------------------------------------------------------------------------
/Samples/DropdownMenu/description.yaml:
--------------------------------------------------------------------------------
1 | name: A custom dropdown menu
2 | desc: This example creates custom dropdown menu.
3 | api:
4 | -
5 | class: Fuse.Triggers.WhileTrue
6 | desc: Is used to toggle the expanded state of the dropdown menu.
7 | -
8 | class: Fuse.Triggers.Actions.Toggle
9 | desc: Is used to toggle the WhileTrue trigger containing the expanded state of the dropdown menu.
10 | -
11 | class: Fuse.Reactive.DataBinding
12 | desc: Used to create an explicit data-binding from the Selected state of the dropdown menu.
13 |
--------------------------------------------------------------------------------
/Samples/EdgeNavigator/EdgeNavigator.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "MyApp.ux:UXFile"
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/EdgeNavigator/MyApp.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | This is an example of EdgeNavigator!
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Samples/EdgeNavigator/description.yaml:
--------------------------------------------------------------------------------
1 | name: EdgeNavigator example
2 | desc: A minimal example showing off the EdgeNavigator control.
3 | api:
4 | -
5 | class: Fuse.Controls.EdgeNavigator
6 | desc: Displays an edge menu when swiping from the left edge.
7 |
--------------------------------------------------------------------------------
/Samples/FacebookLogin/Auth.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | client_id : "put your client id here"
3 | };
4 |
--------------------------------------------------------------------------------
/Samples/FacebookLogin/FB-f-Logo__white_512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/FB-f-Logo__white_512.png
--------------------------------------------------------------------------------
/Samples/FacebookLogin/FacebookLogin.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*",
9 | "Auth.js:Bundle"
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/FacebookLogin/README.md:
--------------------------------------------------------------------------------
1 | # Facebook login
2 |
3 | This sample shows how one can login to Facebook using JavaScript and a `WebView`.
4 |
5 | ## Setup app
6 |
7 | Before this sample will work, you need to setup an app in the Facebook Developer Portal. You can follow these instructions.
8 |
9 | 1. Go to [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) and click the "Create a New App" button.
10 |
11 | 
12 |
13 | 2. Choose a display name and click "Create App ID"
14 |
15 | 
16 |
17 | 3. Copy the App ID to the Auth.js file
18 |
19 | 
20 |
21 | 4. Go to the "Add Product" screen. You should automatically be there if you just created your app. If not, you can find it in the left sidebar. From here, click the "Set up" button for the Facebook Login product.
22 |
23 | 
24 |
25 | 5. Instead of following through the quickstart, go to settings from the side menu, and make sure "Client OAuth Login" and "Embedded Browser OAuth Login" is enabled.
26 |
27 | 
28 |
--------------------------------------------------------------------------------
/Samples/FacebookLogin/facebookapp1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/facebookapp1.png
--------------------------------------------------------------------------------
/Samples/FacebookLogin/facebookapp2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/facebookapp2.png
--------------------------------------------------------------------------------
/Samples/FacebookLogin/facebookapp3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/facebookapp3.png
--------------------------------------------------------------------------------
/Samples/FacebookLogin/facebookapp4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/facebookapp4.png
--------------------------------------------------------------------------------
/Samples/FacebookLogin/facebookapp5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/FacebookLogin/facebookapp5.png
--------------------------------------------------------------------------------
/Samples/FileBrowser/Directory.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Samples/FileBrowser/FileBrowser.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/FileBrowser/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | router.goto("directory", "/");
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Samples/FileBrowser/description.yaml:
--------------------------------------------------------------------------------
1 | name: A file browser
2 | desc: This example uses the FileSystem JavaScript API to browser the local file system using the Router and Navigator.
3 | api:
4 | -
5 | class: Fuse.FileSystem.FileSystemModule
6 | desc: Is used to query the file system for information.
7 | -
8 | class: Fuse.Controls.Navigator
9 | desc: Is used to navigate between the various folders of the file system.
10 | -
11 | class: Fuse.Navigation.Router
12 | desc: Is used to manage the navigation history through the file system.
13 | -
14 | class: Fuse.Navigation.EnteringAnimation
15 | desc: Animates the opacity of the directory page background as it enters.
16 | -
17 | class: Fuse.Navigation.ExitingAnimation
18 | desc: Animates the opacity of the directory page background as it exits.
19 |
--------------------------------------------------------------------------------
/Samples/FilterOnObservableCondition/FilterOnObservableCondition.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
--------------------------------------------------------------------------------
/Samples/FilterOnObservableCondition/MainView.js:
--------------------------------------------------------------------------------
1 | var Observable = require('FuseJS/Observable');
2 |
3 | function Color(color, name, category){
4 | this.color = color;
5 | this.name = name;
6 | this.category = category;
7 | }
8 |
9 | var COLOR_TYPES = {
10 | REDS: 'reds',
11 | GREENS: 'greens',
12 | OTHER: 'other',
13 | ALL: 'all'
14 | };
15 |
16 | var currentCategory = Observable(COLOR_TYPES.REDS);
17 |
18 | var items = Observable(
19 | new Color('#D32F2F', 'Red 1', COLOR_TYPES.REDS),
20 | new Color('#E91E63', 'Red 2', COLOR_TYPES.REDS),
21 | new Color('#E57373', 'Red 3', COLOR_TYPES.REDS),
22 | new Color('#E91E63', 'Red 4', COLOR_TYPES.REDS),
23 | new Color('#D50000', 'Red 5', COLOR_TYPES.REDS),
24 |
25 | new Color('#26A69A', 'Green 1', COLOR_TYPES.GREENS),
26 | new Color('#00ACC1', 'Green 2', COLOR_TYPES.GREENS),
27 | new Color('#26A69A', 'Green 3', COLOR_TYPES.GREENS),
28 | new Color('#004D40', 'Green 4', COLOR_TYPES.GREENS),
29 | new Color('#1DE9B6', 'Green 5', COLOR_TYPES.GREENS),
30 |
31 | new Color('#FFC107', 'Other 1', COLOR_TYPES.OTHER),
32 | new Color('#FBC02D', 'Other 2', COLOR_TYPES.OTHER),
33 | new Color('#039BE5', 'Other 3', COLOR_TYPES.OTHER),
34 | new Color('#90A4AE', 'Other 4', COLOR_TYPES.OTHER),
35 | new Color('#FFFF00', 'Other 5', COLOR_TYPES.OTHER)
36 | );
37 |
38 | var filteredItems = currentCategory.flatMap(function(category){
39 | return items.where(function(item){
40 | return item.category === category || category === COLOR_TYPES.ALL;
41 | });
42 | });
43 |
44 | function gotoReds(){ currentCategory.value = COLOR_TYPES.REDS; }
45 | function gotoGreens(){ currentCategory.value = COLOR_TYPES.GREENS; }
46 | function gotoOther(){ currentCategory.value = COLOR_TYPES.OTHER; }
47 | function gotoAll() { currentCategory.value = COLOR_TYPES.ALL; }
48 |
49 | module.exports = {
50 | filteredItems: filteredItems,
51 | gotoReds: gotoReds,
52 | gotoGreens: gotoGreens,
53 | gotoOther: gotoOther,
54 | gotoAll: gotoAll
55 |
56 | };
57 |
--------------------------------------------------------------------------------
/Samples/FilterOnObservableCondition/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/Samples/FilterOnObservableCondition/README.md:
--------------------------------------------------------------------------------
1 | # Filter on an Observable Condition
2 |
3 | This example shows how one can filter a list based on a condition which itself is an Observable event.
4 |
--------------------------------------------------------------------------------
/Samples/FilterOnObservableCondition/description.yaml:
--------------------------------------------------------------------------------
1 | name: Filter on Observable condition
2 | desc: This example shows how one can filter a list based on a condition which itself is an Observable event.
3 | api:
4 | -
5 | class: Fuse.Triggers.AddingAnimation
6 | desc: Animated a list item as it is added to the list.
7 | -
8 | class: Fuse.Triggers.RemovingAnimation
9 | desc: Animated a list item as it is removed from the list.
10 | -
11 | class: Fuse.Triggers.LayoutAnimation
12 | desc: Animates the remaining part of the list when an item is removed.
13 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/AccelerometerExampleMovement.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.Collections;
3 | using Uno.UX;
4 | using Fuse;
5 | using Fuse.Elements;
6 | using ForeignAccelerometer;
7 |
8 | public partial class AccelerometerExampleMovement : Behavior
9 | {
10 | public InteractiveTransform Target { get; private set; }
11 |
12 | void AccUpdated(object sender, AccelerometerUpdatedArgs args)
13 | {
14 | float3 acceleration = args.Value;
15 |
16 | Target.Translation = acceleration.XY * 10;
17 | Target.ZoomFactor = acceleration.Z * 0.2f + 0.2f;
18 | }
19 |
20 | Accelerometer _accelerometer;
21 |
22 | [UXConstructor]
23 | public AccelerometerExampleMovement([UXParameter("Target")] InteractiveTransform target)
24 | {
25 | Target = target;
26 | _accelerometer = new Accelerometer();
27 | }
28 |
29 | protected override void OnRooted()
30 | {
31 | base.OnRooted();
32 | _accelerometer.Updated += AccUpdated;
33 | _accelerometer.Start();
34 | }
35 |
36 | protected override void OnUnrooted()
37 | {
38 | _accelerometer.Stop();
39 | _accelerometer.Updated -= AccUpdated;
40 | base.OnUnrooted();
41 | }
42 | }
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Mobile": {
8 | "Orientations": "Portrait"
9 | },
10 | "Includes": [
11 | "AccelerometerExampleMovement.uno",
12 | "MainView.ux",
13 |
14 | "ForeignAccelerometer/AccelerometerModule.uno",
15 | "ForeignAccelerometer/Accelerometer_Android.uno",
16 | "ForeignAccelerometer/Accelerometer_iOS.uno",
17 | "ForeignAccelerometer/Accelerometer.uno",
18 | "ForeignAccelerometer/AccelerometerImpl.java:Java:Android",
19 | "ForeignAccelerometer/AccelerometerImpl.hh:CHeader:iOS",
20 | "ForeignAccelerometer/AccelerometerImpl.mm:CSource:iOS"
21 | ]
22 | }
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/Accelerometer.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.Compiler.ExportTargetInterop;
3 |
4 | namespace ForeignAccelerometer
5 | {
6 | public class AccelerometerUpdatedArgs : EventArgs
7 | {
8 | public float3 Value { get; private set; }
9 |
10 | public AccelerometerUpdatedArgs(float3 value)
11 | {
12 | Value = value;
13 | }
14 | }
15 |
16 | public delegate void AccelerometerUpdated(object sender, AccelerometerUpdatedArgs args);
17 |
18 | public delegate void AccelerometerUpdatedInternal(float x, float y, float z);
19 |
20 | public class Accelerometer
21 | {
22 | public event AccelerometerUpdated Updated;
23 |
24 | extern(Android) Accelerometer_Android _androidImpl;
25 | extern(iOS) Accelerometer_iOS _iosImpl;
26 |
27 | public Accelerometer()
28 | {
29 | if defined(Android)
30 | {
31 | _androidImpl = new Accelerometer_Android(OnUpdate);
32 | }
33 | else if defined(iOS)
34 | {
35 | _iosImpl = new Accelerometer_iOS(OnUpdate);
36 | }
37 | }
38 |
39 | void OnUpdate(float x, float y, float z)
40 | {
41 | if(Updated != null)
42 | {
43 | var args = new AccelerometerUpdatedArgs(float3(x, y, z));
44 | Updated(this, args);
45 | }
46 | }
47 |
48 | extern(Android)
49 | public void Start() { _androidImpl.Start(); }
50 | extern(Android)
51 | public void Stop() { _androidImpl.Stop(); }
52 |
53 | extern(iOS)
54 | public void Start() { _iosImpl.Start(); }
55 | extern(iOS)
56 | public void Stop() { _iosImpl.Stop(); }
57 |
58 | extern(!MOBILE)
59 | public void Start() {}
60 | extern(!MOBILE)
61 | public void Stop() {}
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/AccelerometerImpl.hh:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | typedef void (^AccelerometerCallback)(float, float, float);
5 |
6 | @interface AccelerometerImpl : NSObject
7 |
8 | -(id) initWithCallback: (AccelerometerCallback) callback;
9 | -(void) start;
10 | -(void) stop;
11 |
12 | @property (nonatomic, copy) AccelerometerCallback callback;
13 | @property (strong) NSOperationQueue *operationQueue;
14 | @property (strong) CMMotionManager *motionManager;
15 |
16 | @end
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/AccelerometerImpl.java:
--------------------------------------------------------------------------------
1 | package com.samples;
2 |
3 | import android.hardware.*;
4 | import android.content.Context;
5 | import com.foreign.ForeignAccelerometer.AccelerometerUpdatedInternal_float_float_float;
6 | import com.fuse.Activity;
7 |
8 | public class AccelerometerImpl
9 | {
10 | SensorEventListener _listener;
11 | SensorManager _manager;
12 | Sensor _sensor;
13 |
14 | public AccelerometerImpl(final AccelerometerUpdatedInternal_float_float_float handler)
15 | {
16 | _listener = new SensorEventListener() {
17 | @Override
18 | public void onSensorChanged(SensorEvent event) {
19 | float[] values = event.values;
20 | long msec = System.currentTimeMillis();
21 | handler.run(values[0], values[1], values[2]);
22 | }
23 |
24 | @Override
25 | public void onAccuracyChanged(android.hardware.Sensor s, int a) {}
26 | };
27 |
28 | Context context = (Context)Activity.getRootActivity();
29 | _manager = (SensorManager) context.getSystemService(Context.SENSOR_SERVICE);
30 | _sensor = _manager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
31 | }
32 |
33 | public void start() {
34 | _manager.registerListener(_listener, _sensor, SensorManager.SENSOR_DELAY_GAME);
35 | }
36 |
37 | public void stop() {
38 | _manager.unregisterListener(_listener);
39 | }
40 | }
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/AccelerometerImpl.mm:
--------------------------------------------------------------------------------
1 | #import "AccelerometerImpl.hh"
2 | #import
3 |
4 | @implementation AccelerometerImpl
5 |
6 | -(id) initWithCallback: (AccelerometerCallback) callback
7 | {
8 | self = [super init];
9 |
10 | if(self != nil)
11 | {
12 | self.callback = callback;
13 | self.operationQueue = [[NSOperationQueue alloc] init];
14 | self.motionManager = [[CMMotionManager alloc] init];
15 | }
16 |
17 | return self;
18 | }
19 |
20 | -(void) start
21 | {
22 | [self.motionManager startAccelerometerUpdatesToQueue: self.operationQueue
23 | withHandler: ^void (CMAccelerometerData *data, NSError *error) {
24 | uAutoReleasePool pool;
25 |
26 | if(error != nil) {
27 | return;
28 | }
29 |
30 | CMAcceleration accel = [data acceleration];
31 |
32 | self.callback((float)accel.x, (float)accel.y, (float)accel.z);
33 | }];
34 | }
35 |
36 | -(void) stop
37 | {
38 | [self.motionManager stopAccelerometerUpdates];
39 | }
40 |
41 | @end
42 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/AccelerometerModule.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.UX;
3 | using Fuse.Scripting;
4 |
5 | namespace ForeignAccelerometer
6 | {
7 | [UXGlobalModule]
8 | public class AccelerometerModule : NativeEventEmitterModule
9 | {
10 | static readonly AccelerometerModule _instance;
11 |
12 | readonly Accelerometer _accelerometer;
13 |
14 | public AccelerometerModule() : base(false, "update")
15 | {
16 | if(_instance != null) return;
17 | Resource.SetGlobalKey(_instance = this, "Accelerometer");
18 | _accelerometer = new Accelerometer();
19 |
20 | AddMember(new NativeFunction("start", (NativeCallback)_start));
21 | AddMember(new NativeFunction("stop", (NativeCallback)_stop));
22 | }
23 |
24 | void OnUpdated(object sender, AccelerometerUpdatedArgs args)
25 | {
26 | var v = args.Value;
27 | Emit("update", v.X, v.Y, v.Z);
28 | }
29 |
30 | object _start(Context c, object[] args)
31 | {
32 | _accelerometer.Updated += OnUpdated;
33 | _accelerometer.Start();
34 | return null;
35 | }
36 |
37 | object _stop(Context c, object[] args)
38 | {
39 | _accelerometer.Stop();
40 | _accelerometer.Updated -= OnUpdated;
41 | return null;
42 | }
43 | }
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/Accelerometer_Android.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.Collections;
3 | using Uno.Compiler.ExportTargetInterop;
4 |
5 |
6 | namespace ForeignAccelerometer
7 | {
8 | extern(Android)
9 | internal class Accelerometer_Android
10 | {
11 | extern(Android) Java.Object _impl;
12 |
13 | public Accelerometer_Android(AccelerometerUpdatedInternal updateDelegate)
14 | {
15 | Init(updateDelegate);
16 | }
17 |
18 | [Foreign(Language.Java)]
19 | protected extern(Android) void Init(AccelerometerUpdatedInternal updateDelegate)
20 | @{
21 | com.samples.AccelerometerImpl impl = new com.samples.AccelerometerImpl(updateDelegate);
22 | @{Accelerometer_Android:Of(_this)._impl:Set(impl)};
23 | @}
24 |
25 | [Foreign(Language.Java)]
26 | public extern(Android) void Start()
27 | @{
28 | com.samples.AccelerometerImpl impl = (com.samples.AccelerometerImpl) @{Accelerometer_Android:Of(_this)._impl:Get()};
29 | impl.start();
30 | @}
31 |
32 | [Foreign(Language.Java)]
33 | public extern(Android) void Stop()
34 | @{
35 | com.samples.AccelerometerImpl impl = (com.samples.AccelerometerImpl) @{Accelerometer_Android:Of(_this)._impl:Get()};
36 | impl.stop();
37 | @}
38 | }
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/ForeignAccelerometer/Accelerometer_iOS.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.Collections;
3 | using Uno.Compiler.ExportTargetInterop;
4 |
5 | namespace ForeignAccelerometer
6 | {
7 | [Require("Source.Include", "AccelerometerImpl.hh")]
8 | extern(iOS)
9 | internal class Accelerometer_iOS
10 | {
11 |
12 | extern(iOS) ObjC.Object _impl;
13 |
14 | public Accelerometer_iOS(AccelerometerUpdatedInternal updateDelegate)
15 | {
16 | Init(updateDelegate);
17 | }
18 |
19 | [Foreign(Language.ObjC)]
20 | protected extern(iOS) void Init(AccelerometerUpdatedInternal updateDelegate)
21 | @{
22 | AccelerometerImpl *impl = [[AccelerometerImpl alloc] initWithCallback: ^(float x, float y, float z) {
23 | // Normalize acceleration
24 | x *= -9.81f;
25 | y *= -9.81f;
26 | z *= -9.81f;
27 |
28 | updateDelegate(x, y, z);
29 | }];
30 | @{Accelerometer_iOS:Of(_this)._impl:Set(impl)};
31 | @}
32 |
33 | [Foreign(Language.ObjC)]
34 | public extern(iOS) void Start()
35 | @{
36 | AccelerometerImpl *impl = (AccelerometerImpl *) @{Accelerometer_iOS:Of(_this)._impl:Get()};
37 | [impl start];
38 | @}
39 |
40 | [Foreign(Language.ObjC)]
41 | public extern(iOS) void Stop()
42 | @{
43 | AccelerometerImpl *impl = (AccelerometerImpl *) @{Accelerometer_iOS:Of(_this)._impl:Get()};
44 | [impl stop];
45 | @}
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | var accelerometer = require("Accelerometer");
4 |
5 | accelerometer.on("update", function(x, y, z) {
6 | console.log([x,y,z].join(", "));
7 | });
8 |
9 | accelerometer.start();
10 |
11 | setTimeout(function() {
12 | accelerometer.stop();
13 | }, 5000);
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Samples/ForeignAccelerometer/README.md:
--------------------------------------------------------------------------------
1 | # ForeignAccelerometer
2 |
3 | This example illustrates how you can wrap a piece of native OS functionality for multiple platforms using Fuse's [foreign code](https://www.fusetools.com/docs/native-interop/foreign-code) feature.
4 |
5 | The actual accelerometer implementation resides in the [`ForeignAccelerometer/`](https://github.com/fusetools/fuse-samples/tree/master/Samples/ForeignAccelerometer/ForeignAccelerometer) subdirectory.
--------------------------------------------------------------------------------
/Samples/GameOfLife/GameOfLife.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/GameOfLife/GameOfLife.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
19 |
20 |
21 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Samples/GameOfLife/README.md:
--------------------------------------------------------------------------------
1 | # Conway's Game of Life
2 |
3 | This project uses an array of JavaScript Observables to produce a grid in the interface. It's a simulation of the classic game of life.
4 |
5 | The UI interacts with the JavaScript in several different ways. The grid is a two-way interface: it is updated by the JavaScript, and cells can be toggled on/off by a user click. The speed slider controls the stepping time used by `setInterval`. The `Switch` allows turning on/off the auto-stepping, with a button for manual stepping.
6 |
--------------------------------------------------------------------------------
/Samples/GameOfLife/description.yaml:
--------------------------------------------------------------------------------
1 | name: Conway's Game of Life
2 | desc: This project uses an array of JavaScript Observables to produce a grid in the interface.
3 | api:
4 | -
5 | class: Fuse.Controls.Grid
6 | desc: A grid bound to a JavaScript data set.
7 |
--------------------------------------------------------------------------------
/Samples/GeoLocation/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | var Observable = require("FuseJS/Observable");
8 | var GeoLocation = require("FuseJS/GeoLocation");
9 |
10 | // Immediate
11 | var immediateLocation = JSON.stringify(GeoLocation.location);
12 |
13 | // Timeout
14 | var timeoutLocation = Observable("");
15 | var timeoutMs = 5000;
16 | GeoLocation.getLocation(timeoutMs).then(function(location) {
17 | timeoutLocation.value = JSON.stringify(location);
18 | });
19 |
20 | // Continuous
21 | var continuousLocation = Observable("");
22 | GeoLocation.onChanged = function(location) {
23 | continuousLocation.value = JSON.stringify(location);
24 | };
25 |
26 | function startContinuousListener() {
27 | var intervalMs = 1000;
28 | var desiredAccuracyInMeters = 10;
29 | GeoLocation.startListening(intervalMs, desiredAccuracyInMeters);
30 | }
31 |
32 | function stopContinuousListener() {
33 | GeoLocation.stopListening();
34 | }
35 |
36 | module.exports = {
37 | immediateLocation: immediateLocation,
38 | timeoutLocation: timeoutLocation,
39 | continuousLocation: continuousLocation,
40 |
41 | startContinuousListener: startContinuousListener,
42 | stopContinuousListener: stopContinuousListener
43 | };
44 |
45 |
46 |
47 | Immediate:
48 |
49 |
50 | Timeout:
51 |
52 |
53 | Continuous:
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/Samples/GeoLocation/README.md:
--------------------------------------------------------------------------------
1 | # GPS Basics Fuse Example
2 |
3 | Example project to accompany the "[GPS Basics](https://youtu.be/OapOMsUk3rE)" Fuse tutorial video. This is a really basic app showing 3 different ways to use FuseJS' GeoLocation API to get the location of our device. All relevant code is in the `MainView.ux`file.
4 |
--------------------------------------------------------------------------------
/Samples/GeoLocation/description.yaml:
--------------------------------------------------------------------------------
1 | name: GPS Basics Fuse Example
2 | desc: This is a really basic app showing 3 different ways to use FuseJS GeoLocation API to get the location of our device.
3 | api:
4 | -
5 | class: Fuse.GeoLocation.GeoLocation
6 | desc: Used to get the users current position.
7 |
--------------------------------------------------------------------------------
/Samples/GeoLocation/geolocation.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.GeoLocation"
7 | ],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/README.md:
--------------------------------------------------------------------------------
1 | # Swipe Gesture
2 |
3 | This demo uses the `SwipeGesture` to produce actions typical of an item list on mobile. Swipe left and right to reveal actions.
4 |
5 | On a left swipe the delete action is exposed. Note the use of `WhileSwipeActive` to display the dynamite icon when the right action panel is open. We also use `Swiped` with `How="ToInactive"` to modify the background color of the item when this panel is closed.
6 |
7 | On a right swipe a "Mystery" icon is revealed. In this demo this icon performs no action, but should pulse and change color when revealed: that is done by the `Swiped` trigger.
8 |
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/Swipe.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/bird0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Gestures/Swipe/bird0.jpg
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/bird1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Gestures/Swipe/bird1.jpg
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Gestures/Swipe/cancel.png
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/description.yaml:
--------------------------------------------------------------------------------
1 | name: List items with swipe gestures
2 | desc: This example displays a list of items that each lets the user swipe left or right to reveal actions that can be performed on the item.
3 | api:
4 | -
5 | class: Fuse.Gestures.SwipeGesture
6 | desc: Lets the user swipe in a direction to reveal hidden buttons.
7 | -
8 | class: Fuse.Gestures.WhileSwipeActive
9 | desc: Shows an image overlay while the state of the SwipeGesture is set to active.
10 | -
11 | class: Fuse.Gestures.SwipingAnimation
12 | desc: Moves the list item while swiping so that the hidden buttons are revealed.
13 | -
14 | class: Fuse.Gestures.Swiped
15 | desc: Changes the fill color when the swipe gesture has been activated.
16 | -
17 | class: Fuse.Gestures.ToggleSwipeActive
18 | desc: Toggles the active state of the swipe back to false when a button is clicked.
19 |
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/dynamite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Gestures/Swipe/dynamite.png
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/main.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable")
2 |
3 | var first = [ "Northern", "Red", "Eastern", "Mountain", "Desert", "Nocturnal", "Southern",
4 | "Western", "Lowland", "Highland", "Snowy" ]
5 | var last = [ "Finch", "Swallow", "Crow", "Owl", "Robin", "Pelican", "Stork", "Pidgeon", "Sparrow",
6 | "Crane", "Hawk", "Condor", "Ewe" ]
7 |
8 | function Item() {
9 | this.height = 80 + Math.floor(Math.random() * 100)
10 | this.name = first[Math.floor(Math.random() * first.length)] + " " +
11 | last[Math.floor(Math.random() * last.length)]
12 | this.image = "bird" + (i%2)
13 | this.tintColor = [Math.random()*0.5 + 0.5, Math.random()*0.5 + 0.5, Math.random()*0.5 + 0.5, 1]
14 | }
15 |
16 | var loading = Observable(false)
17 | var items = Observable()
18 | var loadNew = function() {
19 | for (i=0; i < 40; i++) {
20 | items.add( new Item() )
21 | }
22 | loading.value = false
23 | }
24 |
25 | loadNew()
26 |
27 | var deleteItem = function(arg) {
28 | items.tryRemove(arg.data)
29 | }
30 |
31 | var clear = function() {
32 | while (items.length > 0)
33 | items.removeAt(0)
34 | }
35 |
36 | var startLoading = function(a,b) {
37 | loading.value = true
38 |
39 | setTimeout( clear, 700 )
40 | setTimeout( loadNew, 1000 )
41 | }
42 |
43 | module.exports = {
44 | items: items,
45 | deleteItem: deleteItem,
46 | startLoading: startLoading,
47 | loading: loading,
48 | }
49 |
--------------------------------------------------------------------------------
/Samples/Gestures/Swipe/unknown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Gestures/Swipe/unknown.png
--------------------------------------------------------------------------------
/Samples/GithubOAuth/Auth.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | clientID: "your client id",
3 | clientSecret: "your client secret"
4 | };
5 |
--------------------------------------------------------------------------------
/Samples/GithubOAuth/GithubOAuth.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Mobile": {
3 | "UriScheme": "fusegithub"
4 | },
5 | "RootNamespace": "",
6 | "Packages": [
7 | "Fuse",
8 | "FuseJS",
9 | "Fuse.Launcher.InterApp"
10 | ],
11 | "Includes": [
12 | "*",
13 | "Auth.js:Bundle"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/Samples/GithubOAuth/README.md:
--------------------------------------------------------------------------------
1 | # GitHub login
2 |
3 | This sample shows how you can use the FuseJS/InterApp package to log in with GitHub. Make sure you follow the setup step described below.
4 |
5 | ## Setup
6 |
7 | To run the sample, you first need to create an application at github.com/settings/applications. Then copy your Client ID and Client Secret to their spots in Auth.js.
8 |
9 | ## Running the app
10 |
11 | When the app starts, click the login button. It will open a web browser prompting you to authorize your GitHub account. After successfully logging into GitHub, the web browser will redirect back to the app with the access token. Press the "Get repos" button to load your repositories.
12 |
13 | * Note: In this example we actually embed the client secret in the Auth.js file. This might not be a good idea for a production app, but is done here for simplicity.
14 |
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/cancel.png
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image0.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image1.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image2.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image3.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image4.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image5.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image6.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image7.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/Assets/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/ImageViewer/Assets/image8.jpg
--------------------------------------------------------------------------------
/Samples/ImageViewer/ImageViewer.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.Physics"
7 | ],
8 | "Projects": [],
9 | "Includes": [
10 | "*",
11 | "Assets/*.jpg:Bundle"
12 | ]
13 | }
--------------------------------------------------------------------------------
/Samples/ImageViewer/README.md:
--------------------------------------------------------------------------------
1 | # Pan, Zoom, and Rotate gestures
2 |
3 | This demo creates a simple image viewer that uses `ZoomGesture`, `RotateGesture` and `PanGesture`. It shows how to combine these with an `InteractiveTransform`.
4 |
5 | The central type to these gestures is the `InteractiveTransform`. This contains the values that the gestures will actually be modifying. It also works as an actual transform on the element. The properties of `InteractiveTransform` are two-way bindable and thus can be used in multiple locations and read/written from JavaScript as well (not done in this demo).
6 |
7 | Beside each gesture we also use an `Attractor`. This allows a fluid animation on the image when it needs to reset it's viewing size. This is used in two places: in the `DoubleTapped` trigger which resets the transform properties; and in the `WhileTrue ux:Name="viewerVisible`, which resets when leaving the full-screen view.
8 |
9 | `WhileFloat` is used to implement a shrink-to-dismiss mechanism. Note the use of `CancelInteractions` here. This is a special action with limited purpose. Here it is used because we know the user will be in the middle of a zooming operation when this trigger applies, thus we need to cancel the active gestures.
10 |
11 | A gallery to full-screen animation effect is achieved with the `Timeline` trigger and `PulseBackward` action. Notice the two `Set` actions just prior to the `PulseBackward` which configure the transition.
12 |
13 | The `WhileWindowPortrait` adjusts the layout based on the device's orientation. Note the sizing of the images in this demo are targetted towards a phone device -- the layout may appear crowded with a large display area.
14 |
--------------------------------------------------------------------------------
/Samples/ImageViewer/description.yaml:
--------------------------------------------------------------------------------
1 | name: Pan, Zoom, and Rotate gestures
2 | desc: This demo creates a simple image viewer that uses `ZoomGesture`, `RotateGesture` and `PanGesture`.
3 | last-reviewed: 2017-02-20
4 | api:
5 | -
6 | class: Fuse.Elements.InteractiveTransform
7 | desc: Coordinates the transform values for several gestures on an image viewer.
8 | -
9 | class: Fuse.Animations.Attractor
10 | desc: Provides smooth animation as the user manipulates the image.
11 | -
12 | class: Fuse.Triggers.Actions.CancelInteractions
13 | desc: Dismisses user gestures when the image view is closed.
14 | -
15 | class: Fuse.Triggers.Timeline
16 | desc: Used to create a gallery to full-screen animation of an image.
17 | -
18 | class: Fuse.Triggers.Actions.PulseBackward
19 | desc: Used to transition between a dynamic source and fixed target state.
20 | -
21 | class: Fuse.Triggers.WhileWindowPortrait
22 | desc: Adjusts the gallery layout based on device orientation.
23 | -
24 | class: Fuse.Gestures.ZoomGesture
25 | desc: Zooms an image in an image viewer. Provides a shrink to dismiss feature.
26 | -
27 | class: Fuse.Gestures.PanGesture
28 | desc: Pans an image, constrained to it's visual extents, in an image viewer.
29 | -
30 | class: Fuse.Gestures.RotateGesture
31 | desc: Rotates an image, in fixed increments, in an image viewer.
32 |
--------------------------------------------------------------------------------
/Samples/Lifecycle/LifecycleExample.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
--------------------------------------------------------------------------------
/Samples/Lifecycle/MainView.js:
--------------------------------------------------------------------------------
1 | var Observable = require('FuseJS/Observable');
2 | var Lifecycle = require('FuseJS/Lifecycle');
3 |
4 | var focused = Observable(true);
5 |
6 | Lifecycle.on("enteringInteractive", function() {
7 | focused.value = true;
8 | });
9 |
10 | Lifecycle.on("exitedInteractive", function() {
11 | focused.value = false;
12 | });
13 |
14 | Lifecycle.on("enteringForeground", function() {
15 | console.log("Hello!");
16 | });
17 |
18 | Lifecycle.on("enteringBackground", function() {
19 | console.log("See you later!");
20 | });
21 |
22 | module.exports = {
23 | focused: focused
24 | };
25 |
--------------------------------------------------------------------------------
/Samples/Lifecycle/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/Samples/Lifecycle/UnoApplicationLifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Lifecycle/UnoApplicationLifecycle.png
--------------------------------------------------------------------------------
/Samples/Lifecycle/description.yaml:
--------------------------------------------------------------------------------
1 | name: Lifecycle
2 | desc: This example uses the lifecycle API to change the background color when the app exits the interactive state.
3 | api:
4 | -
5 | class: FuseJS.Lifecycle
6 | desc: Uses the lifecycle API to change the apps background color.
7 |
--------------------------------------------------------------------------------
/Samples/LineGraph/LineGraph.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.Charting"
7 | ],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/LineGraph/description.yaml:
--------------------------------------------------------------------------------
1 | name: Line graph
2 | desc: Demonstrates how the premium Fuse.Charting API can be used to draw a nice-looking
3 | api:
4 | -
5 | class: Fuse.Charting.Chart
6 | desc: Base element for the premium charting API
7 | -
8 | class: Fuse.Controls.Curve
9 | desc: Used to render the line graph
10 | -
11 | class: Fuse.Charting.PlotData
12 | desc: Plots the data series
13 | -
14 | class: Fuse.Charting.DataSeries
15 | desc: Provides data to plot
--------------------------------------------------------------------------------
/Samples/LineGraph/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/LineGraph/preview.png
--------------------------------------------------------------------------------
/Samples/Localization/Locales.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/Samples/Localization/Localization.uno:
--------------------------------------------------------------------------------
1 | using Uno;
2 | using Uno.Collections;
3 | using Fuse;
4 | using Fuse.Scripting;
5 |
6 | using Uno.Compiler.ExportTargetInterop;
7 |
8 | public class Localization : NativeModule
9 | {
10 | public Localization()
11 | {
12 | AddMember( new NativeFunction("getCurrentLocale", (NativeCallback)GetCurrentLocale) );
13 | }
14 |
15 | object GetCurrentLocale(Context c, object[] args)
16 | {
17 | // GetCurrentLocale will return:
18 | // from iOS: [language designator]-[script designator]-[region designator] (e.g. zh-Hans-US, en-US, etc.)
19 | // from Android: [two-leter lowercase language code (ISO 639-1)]_[two-letter uppercase country codes (ISO 3166-1)] (e.g. zh_CN, en_US, etc.)
20 | return GetCurrentLocale();
21 | }
22 |
23 | [Foreign(Language.Java)]
24 | static extern(Android) string GetCurrentLocale()
25 | @{
26 | // http://developer.android.com/reference/java/util/Locale.html
27 | // The language codes are two-letter lowercase ISO language codes (such as "en") as defined by ISO 639-1.
28 | // The country codes are two-letter uppercase ISO country codes (such as "US") as defined by ISO 3166-1.
29 | // The variant codes are unspecified.
30 | // Something like "de_US" for "German as spoken in the US" is possible
31 | return java.util.Locale.getDefault().toString();
32 | @}
33 |
34 | [Foreign(Language.ObjC)]
35 | static extern(iOS) string GetCurrentLocale()
36 | @{
37 | // This can return [language designator]-[script designator]-[region designator] (e.g. zh-Hans-US, en-US, etc.)
38 | // https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html
39 | // iOS9+ now supports smarter language fallbacks
40 | // https://developer.apple.com/library/ios/technotes/tn2418/_index.html
41 | return [[NSLocale preferredLanguages] objectAtIndex:0];
42 | @}
43 |
44 | static extern(!(iOS||Android)) string GetCurrentLocale()
45 | {
46 | // return the preferred language for unimplemented platforms
47 | return "Default";
48 | }
49 | }
--------------------------------------------------------------------------------
/Samples/Localization/Localization.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/Localization/MainView.js:
--------------------------------------------------------------------------------
1 | var Localization = require("Localization");
2 |
3 | // *******************************************
4 | // Localization.getCurrentLocale() will return:
5 | // from iOS: [language designator]-[script designator]-[region designator] (e.g. zh-Hans-US, en-US, etc.)
6 | // from Android: [two-leter lowercase language code (ISO 639-1)]_[two-letter uppercase country codes (ISO 3166-1)] (e.g. zh_CN, en_US, etc.)
7 | // *******************************************
8 | var deviceLocale = Localization.getCurrentLocale().split('-');
9 | // Turns "zh-Hans-US" into "zh-Hans" or "en-GB" into "en", this might not a practical solution for your own app's requirements
10 | deviceLocale = deviceLocale.slice( 0, deviceLocale.length === 3 ? 2 : 1 ).join('-');
11 |
12 | var defaultLocale = { language: "en", code: "en_US" };
13 | var supportedLocales = [
14 | { language: "zh", code: "zh_CN" },
15 | { language: "zh_CN", code: "zh_CN" },
16 | { language: "zh-Hans", code: "zh_CN" },
17 | { language: "zh_TW", code: "zh_TW" },
18 | { language: "zh-Hant", code: "zh_TW" },
19 | { language: "ko", code: "ko_KR" },
20 | { language: "ko_KR", code: "ko_KR" }
21 | ];
22 |
23 | function findLanguage(obj) {
24 | return obj.language.toLowerCase() === deviceLocale.toLowerCase();
25 | }
26 |
27 | var locale = supportedLocales.find(findLanguage) || defaultLocale;
28 |
29 | module.exports = {
30 | locale: locale.code,
31 | deviceLocale: deviceLocale
32 | };
--------------------------------------------------------------------------------
/Samples/Localization/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Samples/Localization/locales/en_US.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Samples/Localization/locales/ko_KR.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Samples/Localization/locales/zh_CN.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Samples/Localization/locales/zh_TW.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Samples/Localization/screenshots/en_us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Localization/screenshots/en_us.png
--------------------------------------------------------------------------------
/Samples/Localization/screenshots/zh_cn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Localization/screenshots/zh_cn.png
--------------------------------------------------------------------------------
/Samples/NativeDialogs/ExampleProject/DialogExample.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS",
5 | ],
6 | "Projects": [
7 | "../Fuse.Dialogs/Fuse.Dialogs.unoproj",
8 | ],
9 | "Includes": [
10 | "*"
11 | ]
12 | }
--------------------------------------------------------------------------------
/Samples/NativeDialogs/ExampleProject/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | var Dialog = require("DialogModule");
9 |
10 | function show_dialog(argument) {
11 | Dialog.show({
12 | title: "Hello, World!",
13 | message: "Dialog created in JavaScript",
14 | positiveButton: {
15 | text: "OK",
16 | callback: function () { console.log("OK clicked!"); }
17 | },
18 | negativeButton: {
19 | text: "CANCEL",
20 | callback: function () { console.log("CANCEL clicked!"); }
21 | },
22 | });
23 | }
24 |
25 | module.exports = {
26 | show_dialog: show_dialog
27 | };
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/Samples/NativeDialogs/Fuse.Dialogs/Fuse.Dialogs.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Copyright": "Copyright (c) Fusetools AS 2014",
3 | "Description": "Fuse.Dialogs",
4 | "Publisher": "Fusetools AS",
5 | "Version": "0.19.3",
6 | "Packages": [
7 | "Uno.Collections",
8 | "Fuse.Scripting",
9 | "Uno.Threading",
10 | "Fuse.Designer",
11 | "Fuse",
12 | ],
13 | "Includes": [
14 | "*",
15 | ]
16 | }
--------------------------------------------------------------------------------
/Samples/NativeDialogs/README.md:
--------------------------------------------------------------------------------
1 | # Native dialogs
2 |
3 | Sample code for an implementation of native dialogs with JS API. Only Android implemented, but stub class for iOS is provided.
4 |
5 | Check the `MainView.ux` in the ExampleProject to see how to use it.
--------------------------------------------------------------------------------
/Samples/OSUI/OS_UI/no_response.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/OSUI/OS_UI/no_response.png
--------------------------------------------------------------------------------
/Samples/OSUI/OS_UI/respond.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/OSUI/OS_UI/respond.png
--------------------------------------------------------------------------------
/Samples/OSUI/OS_UI/response_with_keyboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/OSUI/OS_UI/response_with_keyboard.png
--------------------------------------------------------------------------------
/Samples/OSUI/osui.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/PieChart/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | var Observable = require("FuseJS/Observable");
9 | var counter = 0;
10 | function Item(value, size) {
11 | this.id = counter++;
12 | this.value = value;
13 | this.size = size;
14 | this.sizePercent = size+"%";
15 | }
16 | var data = Observable(new Item(2, 100), new Item(3, 80), new Item(5, 40), new Item(3, 100),new Item(2, 70));
17 |
18 | module.exports = {
19 | data: data
20 | }
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Samples/PieChart/PieChart.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.Charting"
7 | ],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/PieChart/README.md:
--------------------------------------------------------------------------------
1 | # Pie Chart
2 |
3 | This example shows how you can create simple, but good looking graphs using the premium Fuse.Charting library. In this example, we will create a nice pie-chart using the `PlotWedge` component of the `Fuse.Charting` library.
4 |
5 | ## Preparation
6 |
7 | In order to use the library, you have to include `Fuse.Charting` package in your unoproj file:
8 |
9 | ```
10 | "Packages": [
11 | "Fuse.Charting"
12 | ],
13 | ```
14 |
15 | ## Drawing the slices
16 |
17 | Slices are drawn using `PlotWedge`, like so:
18 |
19 |
20 |
21 |
22 |
23 | The size of the wedges are calculated in js and fed through to the `PlotWedge` as `sizePercent`. Additionally, the size is used in an UX expression to calculate the color of the wedge.
24 |
25 | 
--------------------------------------------------------------------------------
/Samples/PieChart/description.yaml:
--------------------------------------------------------------------------------
1 | name: Pie chart
2 | desc: Demonstrates the usage of the premium PlotWedge component from the Fuse.Charting API
3 | api:
4 | -
5 | class: Fuse.Charting.Chart
6 | desc: Base element for the premium charting API
7 | -
8 | class: Fuse.Charting.PlotData
9 | desc: Plots the data series
10 | -
11 | class: Fuse.Charting.PlotWedge
12 | desc: Draws plot wedges
13 | -
14 | class: Fuse.Charting.DataSeries
15 | desc: Provides data to plot
--------------------------------------------------------------------------------
/Samples/PieChart/pie-chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PieChart/pie-chart.png
--------------------------------------------------------------------------------
/Samples/PlaySound/PlaySound.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | "Fuse.Audio"
7 | ],
8 | "Includes": [
9 | "*",
10 | "Sounds/*.wav:Bundle"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/Samples/PlaySound/README.md:
--------------------------------------------------------------------------------
1 | The sounds used in this example are taken from [Analog Kit Lite by fugwhump](http://ccmixter.org/files/fugwhump/17527)
2 | and are licensed under [Creative Commons Attribution (3.0)](http://creativecommons.org/licenses/by/3.0/) license.
3 |
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Kick1.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Kick1.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Kick2.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Kick2.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Perc1.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Perc1.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Perc2.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Perc2.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Perc3.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Perc3.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Snare1.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Snare1.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Snare2.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Snare2.wav
--------------------------------------------------------------------------------
/Samples/PlaySound/Sounds/Snare3.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/PlaySound/Sounds/Snare3.wav
--------------------------------------------------------------------------------
/Samples/RatingComponents/Assets/star-empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/RatingComponents/Assets/star-empty.png
--------------------------------------------------------------------------------
/Samples/RatingComponents/Assets/star-full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/RatingComponents/Assets/star-full.png
--------------------------------------------------------------------------------
/Samples/RatingComponents/Assets/star-half.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/RatingComponents/Assets/star-half.png
--------------------------------------------------------------------------------
/Samples/RatingComponents/Assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/RatingComponents/Assets/star.png
--------------------------------------------------------------------------------
/Samples/RatingComponents/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var Observable = require("FuseJS/Observable");
5 | var staticRating = Observable(2);
6 | var slidingRating = Observable(3);
7 |
8 | staticRating.onValueChanged(module, function(x) {
9 | console.log("staticRating changed to: " + x);
10 | });
11 | slidingRating.onValueChanged(module, function(x) {
12 | console.log("slidingRating changed to: " + x);
13 | });
14 |
15 | module.exports = {
16 | staticRating: staticRating,
17 | slidingRating, slidingRating
18 | };
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Samples/RatingComponents/README.md:
--------------------------------------------------------------------------------
1 | # Using `mapTwoWay` to create reusable rating components
2 |
3 | This sample shows how to use `Observable.mapTwoWay()` to properly isolate reusable rating components.
4 | Two different components are implemented - one that records the rating value upon clicking a star, and the other with a `RangeControl` that allows for a swiping gesture to set the rating.
5 |
--------------------------------------------------------------------------------
/Samples/RatingComponents/RatingComponents.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*",
9 | "Assets/*.png:Bundle"
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/RatingComponents/StaticRatingComponent.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | var Observable = require("FuseJS/Observable");
7 |
8 | var total = this.Stars;
9 | var rating = this.Rating.mapTwoWay(function(v) {
10 | return v;
11 | }, function(v, sv) {
12 | return v;
13 | });
14 |
15 | var stars = [];
16 | for (var i = 0; i < total.value; i++) {
17 | stars.push(new Star(i));
18 | }
19 |
20 | function Star(id) {
21 | this.id = id;
22 | this.isActive = Observable(false);
23 | }
24 |
25 | function selectStar(args) {
26 | rating.value = args.data.id + 1;
27 | }
28 |
29 | rating.onValueChanged(module, function(x) {
30 | stars.forEach(function(s) {
31 | if (s.id < x) {
32 | s.isActive.value = true;
33 | } else {
34 | s.isActive.value = false;
35 | }
36 | });
37 | });
38 |
39 | module.exports = {
40 | stars: stars,
41 | selectStar: selectStar
42 | };
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/Samples/RelativeTo/README.md:
--------------------------------------------------------------------------------
1 | # Using the RelativeTo and RelativeNode properties
2 |
3 | This sample shows the use of the `RelativeTo` property using the following values:
4 |
5 | - Size: Moves the set amount times the size of the element. So Y="-1" moves the element by its entire height in the negative Y direction.
6 | - ParentSize: Same as Size but uses the elements parents size instead.
7 | - PositionChange: Used in response to a LayoutAnimation to move the element by the amount of change in position within it's parent.
8 | - Keyboard: Moves the element relative to the size of the eyboard.
9 |
10 | - Also the use of the `RelativeNode`
11 |
--------------------------------------------------------------------------------
/Samples/RelativeTo/RelativeTo.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
--------------------------------------------------------------------------------
/Samples/RelativeTo/description.yaml:
--------------------------------------------------------------------------------
1 | name: Using the RelativeTo and RelativeNode properties
2 | desc: This sample shows the use of the RelativeTo property for the Move animator.
3 | api:
4 | -
5 | class: Fuse.Animations.Move
6 | desc: Used in various places to illustrate the use of the RelativeTo property.
7 | -
8 | class: Fuse.Gestures.WhilePressed
9 | desc: Used to trigger a set of Move animators.
10 | -
11 | class: Fuse.Triggers.LayoutAnimation
12 | desc: Used to move a rectangle in response to it changing position.
13 | -
14 | class: Fuse.Triggers.WhileKeyboardVisible
15 | desc: Used to move the content upwards while the keyboard is visible on screen.
16 |
--------------------------------------------------------------------------------
/Samples/Storage/MainView.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 | var Storage = require("FuseJS/Storage");
3 |
4 | var SAVENAME = "localStorage.json";
5 |
6 | var welcomeText = Observable("Loading...");
7 | var message = Observable("");
8 | var hasStored = Observable(false);
9 | debug_log("Js initialized");
10 |
11 | Storage.read(SAVENAME).then(function(content) {
12 | var data = JSON.parse(content);
13 | welcomeText.value = "Stored data: " + data.message;
14 | }, function(error) {
15 | //For now, let's expect the error to be because of the file not being found.
16 | welcomeText.value = "There is currently no local data stored";
17 | });
18 |
19 | function saveMessage() {
20 | var storeObject = {message: message.value};
21 | Storage.write(SAVENAME, JSON.stringify(storeObject));
22 | hasStored.value = true;
23 | }
24 |
25 | module.exports = {
26 | welcomeText: welcomeText,
27 | message: message,
28 | saveMessage: saveMessage,
29 | hasStored: hasStored
30 | };
31 |
--------------------------------------------------------------------------------
/Samples/Storage/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Store a message?
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | The string has been saved
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Samples/Storage/StorageExample.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace": "",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/Assets/arrowleft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/CalendarNav/Assets/arrowleft.png
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/Assets/arrowright.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/CalendarNav/Assets/arrowright.png
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/Assets/cross.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/CalendarNav/Assets/cross.png
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/CalendarNav.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*",
10 | "Lib/*.js:Bundle",
11 | ]
12 | }
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/CalendarView/CalendarView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var d = new Date()
5 | router.gotoRelative( calNav, "month", { month: d.getMonth(), year: d.getFullYear() } )
6 |
7 |
8 |
10 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/CalendarView/DayView.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable")
2 | var DateTime = require("Lib/DateTime")
3 |
4 | var date = Observable(new Date())
5 |
6 | this.Parameter.onValueChanged(module, function(value) {
7 | date.value = new Date(value.year, value.month,value.day)
8 | })
9 |
10 | exports.label = date.map(function(day) {
11 | return "" + DateTime.dayLabels[day.getDay()] + " " + day.getDate() + " " +
12 | DateTime.monthLabels[day.getMonth()] + " " + day.getFullYear()
13 | })
14 |
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/CalendarView/DayView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/Lib/DateTime.js:
--------------------------------------------------------------------------------
1 | /* A simple DateTime library used by this example */
2 |
3 | exports.monthDays = function(date) {
4 | var d= new Date(date.getFullYear(), date.getMonth()+1, 0)
5 | return d.getDate()
6 | }
7 |
8 | exports.first = function(date) {
9 | var d = new Date(date.valueOf())
10 | d.setDate(1)
11 | return d
12 | }
13 |
14 | exports.nextDay = function(date) {
15 | var d = new Date(date.valueOf())
16 | d.setDate( d.getDate() + 1)
17 | return d
18 | }
19 |
20 | exports.dayOfWeek = function(date) {
21 | return (date.getDay() + 6) % 7 //shift to Mon-Sun
22 | }
23 |
24 | exports.monthLabels = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
25 |
26 | exports.dayLabels = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]
27 |
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/CalendarNav/Resources.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ContextMenu/ContextMenu.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | ],
6 | "Includes": [
7 | "MainView.ux:UXFile"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ContextMenu/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | App Title
5 |
6 |
7 |
8 | Status Bar
9 |
10 |
11 |
12 |
13 |
14 | Page One
15 | Swipe to navigate
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | Page Two
28 | Toggle status indicator
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ContextMenu/README.md:
--------------------------------------------------------------------------------
1 | # Context sensitive status indicators
2 |
3 | This examples shows how to add context-sensitive elements to a title bar and status bar. Each `Page` in the navigation uses `AlternateRoot` to add an item local to that page.
4 |
5 | The first page uses a `WhileActive` trigger to add a button to the title bar while that page is active. This could be used for a share menu, or other context sensitive activity.
6 |
7 | The second page adds an indicator to the status bar if the `Switch` is on. This persists outside of this page, remaining on the status bar so long as the switch remains on.
--------------------------------------------------------------------------------
/Samples/UIStructure/ContextMenu/description.yaml:
--------------------------------------------------------------------------------
1 | name: Context sensitive status indicators
2 | desc: This examples shows how to add context-sensitive elements to a title bar and status bar.
3 | api:
4 | -
5 | class: Fuse.AlternateRoot
6 | desc: Used to place page indicators in a global status bar.
7 | -
8 | class: Fuse.Navigation.WhileActive
9 | desc: Modifies the state of a status bar while a page is active.
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Modal/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Modal/Modal.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Modal/OtherPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Are you sure you want to delete it?
18 |
19 |
25 |
26 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Modal/README.md:
--------------------------------------------------------------------------------
1 | # A modal confirmation screen
2 |
3 | This example shows how to create a modal confirmation screen by using the `AlternateRoot` feature.
4 |
5 | The basic concept is to declare where you'd like to add a modal child. In this example we declare the `FullWindow` panel that occupies the full screen space of the app. Then we attach it to a resource named the same using `ResourceObject`.
6 |
7 | On the `OtherPage.ux` the `AlternateRoot` has a `ParentNode="{Resource FullWindow}"`. This says the child of this `AlternateRoot` will become children of the `FullWindow` panel. This allows us to keep our confirmation code local to where it's used, but place the actual UI elsewhere in the tree.
8 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Modal/description.yaml:
--------------------------------------------------------------------------------
1 | name: Modal confirmation screen
2 | desc: This example shows how to create a modal confirmation screen.
3 | api:
4 | -
5 | class: Fuse.AlternateRoot
6 | desc: Places a panel far up in the UI tree to make it the top-most one.
7 | -
8 | class: Fuse.Resources.ResourceObject
9 | desc: Assigns a node to a resource for use later in an `AlternateRoot`.
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/AppMenu.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | exports.gotoOne = function() {
6 | router.goto( "home", {}, "flights", {}, "arrivals" )
7 | }
8 | exports.gotoTwo = function() {
9 | router.goto( "home", {}, "flights", {}, "departures" )
10 | }
11 | exports.gotoThree = function() {
12 | router.goto( "home", {}, "bookings" )
13 | }
14 | exports.gotoAccount = function() {
15 | router.push( "account" )
16 | }
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Assets/MaterialIcons-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/Navigation/Assets/MaterialIcons-Regular.ttf
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Components/TitleAreaContent.ux:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | exports.dismissMenu = function() {
9 | edge.dismiss()
10 | }
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Navigation.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS"
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Pages/AccountPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | exports.userName = "Hannah"
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Pages/BookingPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | var Observable = require( "FuseJS/Observable" )
4 | exports.info = Observable()
5 |
6 | this.Parameter.onValueChanged( module, function(v) {
7 | //load the info from a module (with fetch)
8 | exports.info.value = {
9 | id: v.id,
10 | }
11 | })
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Pages/BookingsPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | var Observable = require( "FuseJS/Observable" )
6 | exports.order = function() {
7 | router.push( "createBooking" )
8 | }
9 |
10 | exports.bookings = Observable()
11 | for (var i=0; i < 10; ++i ) {
12 | exports.bookings.add( {
13 | id: Math.floor( Math.random() * 100000 ),
14 | title: "Booking @" + i,
15 | })
16 | }
17 |
18 | exports.view = function(args) {
19 | router.push( "booking", { id: args.data.id } )
20 | }
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Pages/CreateBookingPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/Pages/FlightsPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/README.md:
--------------------------------------------------------------------------------
1 | # Navigation
2 |
3 | Multi-level application navigation using an edge menu, a title area, an action bar.
4 |
5 |
6 | ## Structure
7 |
8 | The first navigation level is created by a `EdgeNavigator` in `MainView.ux` to control the side menu. This doesn't participate in the `Router` navigation but instead uses signals.
9 |
10 | `ApplicationTop.ux` creates the next levels of animation, it is the root level for the `Router`. All pages have a title bar; those in `home` have an additional action bar at the bottom.
11 |
12 | The application uses `goto` to get to any page within `home` and `push` to get to all others. This limits the overall application depth to avoid confusing the user.
13 |
14 |
15 | ## Flights Page sub-navigation
16 |
17 | The `FlightsPage.ux` has another level of navigation for "arrivals" and "departures". This is controlled via the router but exposed as more of a filter to the user at the top of the page. By making this proper router paths the side menu is able to navigate directly to either sub-page.
18 |
19 |
20 | ## Bookings sub-pages
21 |
22 | The `BookingsPage.ux` displays a list of bookings (in a real app you'd obviously want to load this list). A top-right corner icon uses the router to `push` the `createBooking` page. Clicking on individual items will `push` the `booking` page for that item.
23 |
24 | Note that only the `id` is passed to the `booking` page. That page is responsible for looking up information based on that id, usually via a common JavaScript module.
25 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Navigation/description.yaml:
--------------------------------------------------------------------------------
1 | name: Application navigation
2 | desc: Multi-level application navigation with
3 | api:
4 | -
5 | class: Fuse.AlternateRoot
6 | desc: Pages place content in a common title area
7 | -
8 | class: Fuse.Resources.ResourceObject
9 | desc: Assigns a node to a resource for use later in an `AlternateRoot`.
10 | -
11 | class: Fuse.Triggers.Actions.RaiseUserEvent
12 | desc: Coordinates display and dismissal of side menu
13 | -
14 | class: Fuse.Triggers.OnUserEvent
15 | desc: Coordinates display and dismissal of side menu
16 | -
17 | class: Fuse.UserEvent
18 | desc: Coordinates display and dismissal of side menu
19 | -
20 | class: Fuse.Navigation.Router
21 | desc: Navigation control for a multi-level application
22 | -
23 | class: Fuse.Controls.Navigator
24 | desc: Navigation between application pages
25 | -
26 | class: Fuse.Controls.PageControl
27 | desc: Navigation between application pages
28 | -
29 | class: Fuse.Controls.PageIndicator
30 | desc: Dynamic action bar for navigation in application
31 | -
32 | class: Fuse.Controls.Container
33 | desc: Combined with AlternateRoot to display page specific elements in the title bar
34 |
--------------------------------------------------------------------------------
/Samples/UIStructure/PageTabs/PageTabs.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/PageTabs/README.md:
--------------------------------------------------------------------------------
1 | ## A simple navigation tab bar using PageIndicator
2 |
3 | This example shows how to create a navigation tab bar using the `PageIndicator`. This control instantiates a template for each page in the navigation. The `{Page ...}` binding can be used to link to resources on the pages.
4 |
5 | This example uses the `ActivationAnimation` and `WhileActive` navigation triggers. All the standard triggers are available. The tabs behave essentially as though part of the page themselves.
6 |
--------------------------------------------------------------------------------
/Samples/UIStructure/PageTabs/description.yaml:
--------------------------------------------------------------------------------
1 | name: Simple navigation tab bar
2 | desc: This example shows how to create a navigation tab bar.
3 | api:
4 | -
5 | class: Fuse.Controls.PageIndicator
6 | desc: Creates a tab for each Page, with a page specific color, and allows navigation to it.
7 | -
8 | class: Fuse.Navigation.PageResourceBinding
9 | desc: Binds to page specific resources in the tab bar.
10 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ScrollViewPager/MainView.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable")
2 |
3 | //the list of items we are displaying in the ScrollView
4 | exports.items = Observable()
5 |
6 | //a flag indicating that data is currently being loaded (simulated with a timeout in this example)
7 | exports.isLoading = Observable(false)
8 |
9 | var count = 0
10 | function loadSome() {
11 | for (var i=0; i < 10; ++i ) {
12 | exports.items.add( {
13 | id: count,
14 | value: "#" + count,
15 | color: [ Math.random() * 0.3 + 0.7, Math.random() * 0.3 + 0.7, Math.random() * 0.3 + 0.7, 1 ],
16 | size: Math.random() * 100,
17 | })
18 | count++
19 | }
20 |
21 | exports.isLoading.value = false
22 |
23 | //ensure the ScrollViewPager knows to check it's state again
24 | svp.check()
25 | }
26 |
27 | //longer delays increases the likelihood the user will reach the end of the list and see the loading placeholder
28 | var maxSimulatedDelay = 1.5
29 | var minSimulatedDelay = 0.25
30 |
31 | exports.loadMore = function() {
32 | //it's possible this gets called again before the previous loading is complete
33 | if (exports.isLoading.value) {
34 | return
35 | }
36 | exports.isLoading.value = true
37 |
38 | //simulate a delay in loading data from a remote request
39 | var delay = Math.random() * (maxSimulatedDelay - minSimulatedDelay) + minSimulatedDelay
40 | setTimeout( loadSome, delay * 1000 )
41 | }
42 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ScrollViewPager/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Samples/UIStructure/ScrollViewPager/ScrollViewPager.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS"
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
--------------------------------------------------------------------------------
/Samples/UIStructure/ScrollViewPager/description.yaml:
--------------------------------------------------------------------------------
1 | name: Endless scrolling list
2 | desc: Creates an efficient scrolling list that loads data as required
3 | api:
4 | -
5 | class: Fuse.Controls.ScrollViewPager
6 | desc: Pages a list of data and loads new data on demand
7 | -
8 | class: Fuse.Controls.ScrollView
9 | desc: Presents an endless scrolling list of items
10 | -
11 | class: Fuse.Reactive.Each
12 | desc: Pages over a list of items to improve performance
13 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/App.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/Assets/arrowleft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/Transition/Assets/arrowleft.png
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/Assets/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/Transition/Assets/play.png
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/Assets/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/Transition/Assets/plus.png
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/Assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UIStructure/Transition/Assets/star.png
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/MainView.js:
--------------------------------------------------------------------------------
1 | exports.goBack = function() {
2 | router.goBack()
3 | }
4 |
5 | exports.goBottomRight = function() {
6 | router.push( "BottomRight" )
7 | }
8 | exports.goTopLeft = function() {
9 | router.push( "TopLeft" )
10 | }
11 |
12 | exports.goPopup = function() {
13 | router.push( "Popup" )
14 | }
15 | exports.goPopupBottom = function() {
16 | router.push( "PopupBottom" )
17 | }
18 |
19 | var count = 0
20 | /** Creates a unique Parameter for some pages */
21 | function createProp() {
22 | return {
23 | id: "#" + (++count)
24 | }
25 | }
26 | exports.goRight1 = function() {
27 | router.push( "Right1", createProp() )
28 | }
29 | exports.goRight2 = function() {
30 | router.push( "Right2", createProp() )
31 | }
32 | exports.goLeft = function() {
33 | router.push( "Left", createProp() )
34 | }
35 | exports.goTop = function() {
36 | router.push( "Top", createProp() )
37 | }
38 | exports.goBottom = function() {
39 | router.push( "Bottom", createProp() )
40 | }
41 |
42 | exports.goPopupTop = function() {
43 | router.push( "PopupTop", createProp() )
44 | }
45 | exports.goSlideTop = function() {
46 | router.push( "SlideTop", createProp() )
47 | }
48 |
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/Transition.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS",
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*",
10 | ]
11 | }
--------------------------------------------------------------------------------
/Samples/UIStructure/Transition/description.yaml:
--------------------------------------------------------------------------------
1 | name: Transition Example
2 | desc: This example shows a variety of page transitions during navigation.
3 | api:
4 | -
5 | class: Fuse.Triggers.Transition
6 | desc: Performs a variety of page-to-page transitions, varying the animation based on page name, state and transition type.
7 | -
8 | class: Fuse.Elements.Viewport
9 | desc: Uses a 3d rotation for a page transition effect.
10 | -
11 | class: Fuse.Controls.Navigator
12 | desc: Has several pages with varying animations during transition.
13 |
--------------------------------------------------------------------------------
/Samples/UserEvents/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | var Observable = require("FuseJS/Observable");
11 | var current = Observable(" ");
12 |
13 | function selected(args) {
14 | current.value = args.number;
15 | oneShot.pulseBackward();
16 | };
17 |
18 | module.exports = {
19 | current: current,
20 | selected: selected
21 | };
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/Samples/UserEvents/NumberEntry.js:
--------------------------------------------------------------------------------
1 | var Observable = require( "FuseJS/Observable");
2 | var pin = Observable("####");
3 | var init = false;
4 |
5 | function selected(args) {
6 | if (!init) {
7 | pin.value = "" + args.number;
8 | init = true;
9 | return;
10 | }
11 | if (pin.value.length >= 4) {
12 | return;
13 | }
14 | pin.value += "" + args.number;
15 | };
16 |
17 | function cleared(args) {
18 | init = false;
19 | pin.value = "####";
20 | };
21 |
22 | function back(args) {
23 | var len = pin.value.length;
24 | if (len < 2) {
25 | cleared();
26 | return;
27 | }
28 | pin.value = pin.value.substring(0,len-1);
29 | };
30 |
31 | module.exports = {
32 | pin: pin,
33 | selected: selected,
34 | cleared: cleared,
35 | back: back
36 | };
37 |
--------------------------------------------------------------------------------
/Samples/UserEvents/NumberEntry.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Samples/UserEvents/NumberPad.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 |
3 | var numbers = Observable();
4 | var items = [
5 | '1','2','3',
6 | '4','5','6',
7 | '7','8','9',
8 | '*','0','c'
9 | ];
10 | items.forEach(function(c) {
11 | numbers.add(c);
12 | });
13 |
14 | function select(args) {
15 | if (args.data == '*') {
16 | numberBack.raise();
17 | } else if (args.data == 'c') {
18 | numberCleared.raise();
19 | } else {
20 | numberSelected.raise({number: args.data});
21 | }
22 | };
23 |
24 | module.exports = {
25 | numbers: numbers,
26 | select: select
27 | };
28 |
--------------------------------------------------------------------------------
/Samples/UserEvents/NumberPad.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Samples/UserEvents/README.md:
--------------------------------------------------------------------------------
1 | # A component with custom events
2 |
3 | This example creates a number pad entry component showing how to define and raise user events. It builds a second higher level component showing how to structure components into usable high-level controls.
4 |
5 | ## NumberPad
6 |
7 | The core control is the `NumberPad` which defines a simple panel of 10 digits and two control actions. A user of this control will listen to the various events that it publishes. One such event is the `NumberSelected` event:
8 |
9 |
10 |
11 | When the user presses one of the numbers the JS code raises the event:
12 |
13 | numberSelected.raise({number: args.data});
14 |
15 | The `number` is provided as a named argument. A listener to the event gets this value as an argument. For example, in the `MainView.ux` use it sets a text value to the number and pulses it's display.
16 |
17 | function selected(args) {
18 | current.value = args.number;
19 | oneShot.pulseBackward();
20 | };
21 |
22 | ### Convenience Triggers
23 |
24 | For convenience the `NumberPad.ux` also defines a trigger for each of the events it raises. For example:
25 |
26 |
27 |
28 | This allows these events to be responded to in UX with a nice name instead of just having `OnUserEvent` everywhere. In `MainView.ux` the demo respnds to this event:
29 |
30 |
31 |
32 |
33 |
34 | There is no need to define these custom triggers. You can use `OnUserEvent` directly with the appropriate `EventName`. This may be more desirable if you have only one responder to a particular event.
35 |
36 | ## NumberEntry
37 |
38 | `NumberEntry` is a component that connects the `NumberPad` to a `Text` control. It demonstrates how to handle all the messages from the `NumberPad`.
39 |
--------------------------------------------------------------------------------
/Samples/UserEvents/UserEventDemo.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "InternalsVisibleTo": [],
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Projects": [],
8 | "Includes": [
9 | "*"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/Samples/UserEvents/arrowleft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UserEvents/arrowleft.png
--------------------------------------------------------------------------------
/Samples/UserEvents/cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/UserEvents/cancel.png
--------------------------------------------------------------------------------
/Samples/UserEvents/description.yaml:
--------------------------------------------------------------------------------
1 | name: A component with custom events
2 | desc: This example creates a number pad entry component showing how to define and raise user events.
3 | api:
4 | -
5 | class: Fuse.UserEvent
6 | desc: Creates custom events to for a reusable number pad component.
7 | -
8 | class: Fuse.Triggers.OnUserEvent
9 | desc: Responds to custom events from a reusable number pad component.
10 | -
11 | class: Fuse.Reactive.Match
12 | desc: Provides different visuals for an array of number page buttons.
13 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/Assets/elephant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Visualization/Charting/Assets/elephant.png
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/Assets/goat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Visualization/Charting/Assets/goat.png
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/Assets/pig.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/Visualization/Charting/Assets/pig.png
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/Charting.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS",
5 | "Fuse.Charting",
6 | ],
7 | "Includes": [
8 | "*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/MixHorzLine.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | var Observable = require("FuseJS/Observable")
4 | exports.points = Observable( -10, 50,-20, 30, -35 )
5 |
6 | exports.random = function() {
7 | var items = []
8 | for (var i =0; i < 5; ++i) {
9 | items.push( (Math.random() - 0.5) * 100 )
10 | }
11 | exports.points.replaceAll(items)
12 | }
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/SpiderChart.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | var data = [ {
6 | label: "Attention",
7 | value: 54,
8 | }, {
9 | label: "Care",
10 | value: 15,
11 | }, {
12 | label: "Fight",
13 | value: 68,
14 | }, {
15 | label: "Performance",
16 | value: 74,
17 | }, {
18 | label: "Avoid bad experiences",
19 | value: 51,
20 | }, {
21 | label: "Under- standing",
22 | value: 90,
23 | }, {
24 | label: "Approval",
25 | value: 58,
26 | }, {
27 | label: "Sense of Duty",
28 | value: 80,
29 | }, {
30 | label: "Dominance",
31 | value: 80,
32 | }, {
33 | label: "Autonomy",
34 | value: 51,
35 | } ]
36 |
37 | exports.data = Observable()
38 | exports.data.replaceAll( data )
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
57 |
58 |
59 |
60 |
61 |
62 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/VertLine.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 | var Observable = require("FuseJS/Observable")
4 | function Item( value, label ) {
5 | this.x = value
6 | this.label = label
7 | }
8 | exports.data = Observable(
9 | new Item(1, "2012"),
10 | new Item(5, "2013"),
11 | new Item(2, "2014"),
12 | new Item(3, "2015"),
13 | new Item(3.5, "2016")
14 | );
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/Samples/Visualization/Charting/description.yaml:
--------------------------------------------------------------------------------
1 | name: Charting examples
2 | desc: A variety of different chart types using the charting API.
3 | api:
4 | -
5 | class: Fuse.Charting.Plot
6 | desc: Used to create a plot.
7 | -
8 | class: Fuse.Charting.PlotWedge
9 | desc: Creates a segment of a pie chart
10 | -
11 | class: Fuse.Charting.PlotData
12 | desc: Enumerates plot data for drawing lines, bars, and decorations.
13 | -
14 | class: Fuse.Charting.PlotTicks
15 | desc: Draws X,Y tick lines, chart divisions, and pie chart dividers.
16 | -
17 | class: Fuse.Animations.AttractorConfig
18 | desc: Animates the change in values on a chart.
19 | -
20 | class: Fuse.Animations.Attract
21 | desc: Animates the change in values on a chart.
22 | -
23 | class: Fuse.Charting.DataSeries
24 | desc: Creates charts with 1, 2 or 3 data series.
25 | -
26 | class: Fuse.Charting.PlotArea
27 | desc: Adjusts the displayed chart data to the available size.
28 | -
29 | class: Fuse.Charting.PlotAxisData
30 | desc: Enumerates access data to produce alternate labels.
31 | -
32 | class: Fuse.Charting.PlotAxis
33 | desc: Labels the X/Y axes of chart.
34 | -
35 | class: Fuse.Charting.PlotBar
36 | desc: Creates bar charts, stacked bar charts, and range charts.
37 | -
38 | class: Fuse.Charting.PlotCurvePoint
39 | desc: Creates line and spider charts.
40 | -
41 | class: Fuse.Charting.PlotExpression
42 | desc: Extracts labels, position information, and other plot data for visualization.
43 | -
44 | class: Fuse.Charting.PlotPoint
45 | desc: Adds decorations to the plotted data.
46 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/ItemDecoratedCurve.ux:
--------------------------------------------------------------------------------
1 | -
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | function DataPoint( x, y, size ) {
6 | return {
7 | x: x,
8 | y: y,
9 | size: size,
10 | }
11 | }
12 |
13 | // using a small object for each point
14 | exports.locs = Observable(
15 | new DataPoint( 0, 0.4, 1 ),
16 | new DataPoint( 0.2, 0.8, 3 ),
17 | new DataPoint( 0.4, 0.1, 2 ),
18 | new DataPoint( 0.6, 0.9, 1 ),
19 | new DataPoint( 0.8, 0.5, 4 ),
20 | new DataPoint( 1, 0.4, 2 )
21 | )
22 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/ItemEllipticalProgress.ux:
--------------------------------------------------------------------------------
1 | -
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | exports.progress = Observable(0.5)
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/ItemJaggedLine.ux:
--------------------------------------------------------------------------------
1 | -
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | // use x,y arrays to bind directly to the `CurvePoint.At` `float2` property
6 | exports.locs = Observable(
7 | [0,1],
8 | [0.2,0],
9 | [0.4,1],
10 | [0.6,0],
11 | [0.8,1],
12 | [1,0]
13 | )
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/ItemPathJS.ux:
--------------------------------------------------------------------------------
1 | -
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | var rows = 4
6 | var cols = 20
7 |
8 | //draw a full rectangle
9 | var path = "M 0 0 h 100 v 100 h -100 v -100 z"
10 |
11 | var cellHeight = 100 / rows
12 | var cellWidth = 100 / cols
13 |
14 | //draw cells in opposite stroke direction to subtract them
15 | for (var x=0; x < cols; ++x) {
16 | for (var y =0; y < rows; ++y) {
17 | if ( (x%2) == (y%2) ) {
18 | continue
19 | }
20 | path += "M " + ((x/cols) * 100) + " " + ((y/rows) * 100)
21 | path += "v " + cellHeight + " h " + cellWidth + " v -" + cellHeight + " h -" + cellWidth + " z"
22 | }
23 | }
24 |
25 | exports.path = path
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/ItemTangentLine.ux:
--------------------------------------------------------------------------------
1 | -
2 |
3 | var Observable = require("FuseJS/Observable")
4 |
5 | exports.degrees = Observable(90)
6 | exports.strength = Observable(1.0)
7 |
8 | exports.tangent = Observable( function() {
9 | var angle = exports.degrees.value / 360 * Math.PI * 2
10 | var str = exports.strength.value
11 | return [ str * Math.cos(angle), str * Math.sin(angle) ]
12 | })
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/MainView.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/README.md:
--------------------------------------------------------------------------------
1 | # Vector Components
2 |
3 | An example of several ways to use the various vector components.
4 |
5 | ## Jagged Line
6 |
7 | A simple use a @Curve to draw straight line segments. The points are created in JavaScript as `x,y` pairs.
8 |
9 | ## Decorated Curve
10 |
11 | Creates a @Curve with several @Circle elements overlaid on top. The data points are represented by a small object in JavaScript added to an @Observable.
12 |
13 | ## Tangent Line
14 |
15 | Use the `CurvePoint.Tangent` property to adjust the shape a simple curve.
16 |
17 | The sliders control the direction of the tangent and its strength.
18 |
19 | ## Elliptical Progress
20 |
21 | Creates a speed gauge style progress control using @Arc and @Ellipse.
22 |
23 | The slider controls the progress.
24 |
25 | ## Path Logo
26 |
27 | Uses @Path to display the Fuse logo. The `Path.Data` for this was taken from an SVG file. This allows simple shapes to be drawn in a standard vector tool and then used in Fuse.
28 |
29 | `Path` has the same sizing options as `Image`. It can be stretched to fill, or retain aspect ratio, based on the natural size of the path data.
30 |
31 | ## JavaScript Path
32 |
33 | Assembles a `Path.Data` string in JavaScript, creating a checkerboard pattern. To display dynamic, or complex data, it may be desired to construct a path at runtime. We don't have an API abstraction for this quite yet, but that doesn't stop you from assembling the SVG data string for a @Path.
34 |
35 | This example takes advantage of the stroke winding: it draws the cells in opposite direction to have them removed from the rectangle.
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/Vectors.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "Packages": [
3 | "Fuse",
4 | "FuseJS"
5 | ],
6 | "Includes": [
7 | "*"
8 | ]
9 | }
--------------------------------------------------------------------------------
/Samples/Visualization/Vectors/description.yaml:
--------------------------------------------------------------------------------
1 | name: Vector Components
2 | desc: Several ways to use the various vector components.
3 | api:
4 | -
5 | class: Fuse.Controls.Curve
6 | desc: A straight line, curved line with decoration, and tangent to adjust shape.
7 | -
8 | class: Fuse.Controls.Arc
9 | desc: Draws a speed gauge style progress control.
10 | -
11 | class: Fuse.Controls.Ellipse
12 | desc: Part of a speed gauge style progress control.
13 | -
14 | class: Fuse.Controls.Path
15 | desc: A copied SVG path and a JavaScript generated checkboard shape.
16 | -
17 | class: Fuse.Controls.CurvePoint
18 | desc: Line points bound to JavaScript arrays and objects to form a line.
19 |
--------------------------------------------------------------------------------
/Samples/cattr/Cattr.unoproj:
--------------------------------------------------------------------------------
1 | {
2 | "RootNamespace":"",
3 | "Packages": [
4 | "Fuse",
5 | "FuseJS"
6 | ],
7 | "Includes": [
8 | "**.ux:UXFile",
9 | "*.js:Bundle",
10 | "assets/*:Bundle"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/Samples/cattr/Cattr.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Samples/cattr/Components/DefaultPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/Samples/cattr/Components/ImageRectangle.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Samples/cattr/Components/WhiteText.ux:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/Chat/ChatPage.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 |
3 | function Message(from, time, text, dock) {
4 | this.from = from;
5 | this.time = time;
6 | this.text = text;
7 | this.dock = dock;
8 | }
9 |
10 | var messages = Observable(
11 | new Message("Pet", "3:55pm", "Meow", "Right"),
12 | new Message("Pet", "3:55pm", "Meow", "Right"),
13 | new Message("You", "3:55pm", "Hi buddy! You're so cuuute :)", "Left"),
14 | new Message("Pet", "3:58pm", "*inquisitive head tilt*", "Right"));
15 |
16 | var message = Observable("");
17 |
18 | function sendMessage() {
19 | if (message.value !== "")
20 | {
21 | messages.add(new Message("You", "4:00pm", message.value, "Left"));
22 | message.value = "";
23 | }
24 | }
25 |
26 | module.exports = {
27 | messages: messages.map(function(message) {
28 | return {
29 | info: message.from + " at " + message.time,
30 | text: message.text,
31 | dock: message.dock
32 | };
33 | }),
34 |
35 | message: message,
36 | sendMessage: sendMessage,
37 | canSendMessage: message.map(function(value) {
38 | return value !== "";
39 | })
40 | };
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/Chat/ChatPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/Details/DetailsPage.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 | var Backend = require("Backend.js");
3 |
4 | var isDialogShowing = Observable(false);
5 |
6 | function bookDate() {
7 | isDialogShowing.value = true;
8 | }
9 |
10 | function closeDialog() {
11 | isDialogShowing.value = false;
12 | }
13 |
14 | module.exports = {
15 | pet: this.CurrentPet.map(function(name) {
16 | var pet = Backend.getPet(name);
17 | if (pet) {
18 | pet.mainPicture = pet.pictures[0];
19 | }
20 | return pet;
21 | }),
22 |
23 | isDialogShowing: isDialogShowing,
24 |
25 | bookDate: bookDate,
26 | closeDialog: closeDialog
27 | };
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/HomePage.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 |
3 | module.exports = {
4 | currentPet: this.Parameter.map(function(param) {
5 | return param.pet;
6 | }),
7 | goBack: function() {
8 | router.goBack();
9 | }
10 | };
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/HomePage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/HomePageTab.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/Pics/PicsPage.js:
--------------------------------------------------------------------------------
1 | var Observable = require("FuseJS/Observable");
2 | var Backend = require("Backend.js");
3 |
4 | module.exports = {
5 | pet: this.CurrentPet.map(function(name) {
6 | return Backend.getPet(name);
7 | })
8 | };
--------------------------------------------------------------------------------
/Samples/cattr/Pages/Home/Pics/PicsPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/Samples/cattr/Pages/PetSelection/PetSelectionPage.js:
--------------------------------------------------------------------------------
1 | var Backend = require("Backend.js");
2 |
3 | module.exports = {
4 | pets: Backend.getPets().map(function(pet) {
5 | pet.mainPicture = pet.pictures[0];
6 | pet.clicked = function() {
7 | router.push("home", { pet: pet.name }, "details");
8 | }
9 | return pet;
10 | }),
11 | };
--------------------------------------------------------------------------------
/Samples/cattr/Pages/PetSelection/PetSelectionPage.ux:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Pick your pet!
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/Samples/cattr/README.md:
--------------------------------------------------------------------------------
1 | # cattr
2 | A basic multi-view app example in Fuse.
3 |
4 | 
5 |
6 | ## Basic info
7 | This is a basic mock app created as an example showing how to use Fuse's Router/Navigator features, and one way you might structure an app as reusable components. It's not meant to be a perfect example case, nor is it meant to be a starting template to start building your own app; it should, however, be helpful as an example that shows how the pieces might fit together.
8 |
9 | ## Fuse version
10 | This example was produced with Fuse 0.20.3.
11 |
12 | ## Note
13 |
14 | The animal images (`assets/kitten.jpg` etc) are CC0 public domain (see https://creativecommons.org/about/cc0/).
15 |
--------------------------------------------------------------------------------
/Samples/cattr/assets/base.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/base.png
--------------------------------------------------------------------------------
/Samples/cattr/assets/kitten1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/kitten1.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/kitten2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/kitten2.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/kitten3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/kitten3.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/otter1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/otter1.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/otter2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/otter2.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/otter3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/otter3.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/puppy1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/puppy1.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/puppy2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/puppy2.jpg
--------------------------------------------------------------------------------
/Samples/cattr/assets/puppy3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/assets/puppy3.jpg
--------------------------------------------------------------------------------
/Samples/cattr/screencap.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/Samples/cattr/screencap.gif
--------------------------------------------------------------------------------
/tools/CI/build_examples.bat:
--------------------------------------------------------------------------------
1 | @echo off
2 | set PATH=C:\git\bin;C:\git\usr\bin;%PATH%
3 |
4 | bash %~dp0build_examples.sh %* || goto ERROR
5 | exit /b 0
6 |
7 | :ERROR
8 | echo Make sure you have bash in path to run this script!
9 | exit /b 1
10 |
--------------------------------------------------------------------------------
/tools/CI/get-fuse.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 |
4 | if [ $# -ne 3 ]; then
5 | echo $*
6 | echo "USAGE: $0 "
7 | exit 1
8 | fi
9 |
10 | BRANCH_URL=http://fusereleasebranch.azurewebsites.net/release
11 | BRANCH=$(curl $BRANCH_URL)
12 | FUSE_DIR=$1
13 | CI_SERVER_URL="$2"
14 | CI_SERVER_AUTH="Authorization: Basic $3"
15 | if [ "$OSTYPE" == "msys" ] ; then
16 | OS="Windows"
17 | else
18 | OS="OSX"
19 | fi
20 |
21 | if [ ${#FUSE_DIR} -lt 3 ]; then
22 | echo "Oooh, scary! FUSE_DIR is '$FUSE_DIR', that sounds like an error. I don't dare to delete that directory"
23 | exit 2
24 | fi
25 |
26 | BRANCH=$(echo $BRANCH | sed 's/\//%2F/')
27 | echo "Branch is $BRANCH"
28 | BUILD_ID_URL="$CI_SERVER_URL/builds?locator=project:Fuse,buildType:(id:Fuse_BuildFor$OS),branch:$BRANCH,count:1,status:SUCCESS"
29 |
30 | echo "Looking up build id at $BUILD_ID_URL"
31 | BUILD_ID=$(curl -s --header "$CI_SERVER_AUTH" $BUILD_ID_URL | sed 's/.*build id="\([0-9]*\)".*/\1/')
32 | echo "BUILD_ID is: '$BUILD_ID'"
33 |
34 | ARTIFACTS_URL="https://tc.outracks.com/httpAuth/app/rest/builds/$BUILD_ID/artifacts"
35 | echo "Looking up artifacts at $ARTIFACTS_URL"
36 | ARTIFACTS=$(curl -s --header "$CI_SERVER_AUTH" $ARTIFACTS_URL)
37 | echo "Artifacts are: '$ARTIFACTS'"
38 |
39 | ZIP=$CI_SERVER_URL"/"$(echo $ARTIFACTS | grep 'content/Fuse.*zip' | sed 's/.*\(builds.*zip\).*/\1/')
40 | echo "Downloading "$ZIP
41 |
42 | rm -rf $FUSE_DIR
43 | mkdir -p $FUSE_DIR
44 | cd $FUSE_DIR
45 | curl -s -O --header "$CI_SERVER_AUTH" $ZIP
46 | unzip -q *.zip
47 |
--------------------------------------------------------------------------------
/tools/Stuff/.gitignore:
--------------------------------------------------------------------------------
1 | Devtools
2 |
--------------------------------------------------------------------------------
/tools/Stuff/MultiProjBuilder.stuff:
--------------------------------------------------------------------------------
1 | /* 0.04MB */ MultiProjBuilder: "https://az664292.vo.msecnd.net/files/kKtGhwUEEPYN3SvQ-MultiProjBuilder-c9a3cdbb07e91c76c30643168288f7151f32a479.zip"
2 |
--------------------------------------------------------------------------------
/tools/Stuff/stuff.exe:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuse-open/fuse-samples/5d6202765513a53db27c33c29d4a18ff7b9fff46/tools/Stuff/stuff.exe
--------------------------------------------------------------------------------