├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── Samples ├── AmazonS3 │ ├── AWS.stuff │ ├── AmazonS3.cpp.uxl │ ├── AmazonS3.uno │ ├── AmazonS3.unoproj │ ├── MainView.ux │ ├── README.md │ └── S3ImageDownloader.uno ├── Animation │ ├── AttractorMotion │ │ ├── AttractorMotion.unoproj │ │ ├── Gridly.ux │ │ ├── MainView.ux │ │ ├── Pointly.ux │ │ ├── README.md │ │ └── Rotater.ux │ ├── CyclePhase │ │ ├── CyclePhase.unoproj │ │ ├── MainView.ux │ │ ├── README.md │ │ └── description.yaml │ ├── ExpandingToolbar │ │ ├── Assets │ │ │ ├── camera.png │ │ │ ├── cross.png │ │ │ ├── link.png │ │ │ ├── note.png │ │ │ └── photo.png │ │ ├── ExpandingToolbar.unoproj │ │ ├── MainView.ux │ │ └── readme.md │ ├── MixOp │ │ ├── Demo1.ux │ │ ├── Demo2.ux │ │ ├── MainView.ux │ │ ├── MixOp.unoproj │ │ └── README.md │ └── TimelineWrap │ │ ├── MainView.ux │ │ ├── README.md │ │ └── TimelineWrap.unoproj ├── AzureADB2COAuth │ ├── Auth.js │ ├── Azure-AD-B2C-OAuth.js │ ├── AzureADB2COAuth.unoproj │ ├── MainView.ux │ └── README.md ├── BarChart │ ├── BarChart.unoproj │ ├── MainView.ux │ ├── README.md │ ├── description.yaml │ └── preview.png ├── Camera │ ├── Assets.ux │ ├── Assets │ │ ├── Flash_Auto_white.png │ │ ├── Flash_Auto_white@2x.png │ │ ├── Flash_Auto_white@3x.png │ │ ├── Flash_Off_white.png │ │ ├── Flash_Off_white@2x.png │ │ ├── Flash_Off_white@3x.png │ │ ├── Flash_On_white.png │ │ ├── Flash_On_white@2x.png │ │ ├── Flash_On_white@3x.png │ │ ├── rotate.png │ │ ├── rotate@2x.png │ │ └── rotate@3x.png │ ├── CameraViewExample.unoproj │ ├── CaptureMode.ux │ ├── CapturePhotoButton.ux │ ├── CaptureVideoButton.ux │ ├── FlashMode.ux │ ├── MainView.ux │ └── README.md ├── Controls │ ├── ButtonWithImage │ │ ├── ButtonWithImage.unoproj │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── cancel.png │ │ └── description.yaml │ ├── Circular │ │ ├── Circular.unoproj │ │ ├── MainView.ux │ │ ├── README.md │ │ └── description.yaml │ ├── ScrollViewSwipe │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── ScrollViewSwipe.unoproj │ │ └── description.yaml │ ├── Scrollbar │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── Scrollbar.unoproj │ │ └── description.yaml │ └── Selection │ │ ├── Assets │ │ ├── arrowright.png │ │ ├── basil.png │ │ ├── black_olives.png │ │ ├── checkmark.png │ │ ├── green_olives.png │ │ ├── green_pepper.png │ │ ├── ham.png │ │ ├── mushrooms.png │ │ ├── onions.png │ │ ├── pineapple.png │ │ ├── pizza.png │ │ ├── red_pepper.png │ │ ├── salami.png │ │ └── tomato.png │ │ ├── MainView.ux │ │ ├── PaymentPage.js │ │ ├── PaymentPage.ux │ │ ├── PizzaPage.ux │ │ ├── README.md │ │ ├── Selection.unoproj │ │ ├── TitlePage.ux │ │ ├── ToppingsPage.ux │ │ ├── description.yaml │ │ └── gifs │ │ ├── dropdown.gif │ │ ├── multiple.gif │ │ └── radio-buttons.gif ├── DropdownMenu │ ├── DropdownMenu.unoproj │ ├── DropdownMenu.ux │ ├── MainView.ux │ ├── README.md │ └── description.yaml ├── EdgeNavigator │ ├── EdgeNavigator.unoproj │ ├── MyApp.ux │ └── description.yaml ├── FacebookLogin │ ├── Auth.js │ ├── FB-f-Logo__white_512.png │ ├── FacebookLogin.unoproj │ ├── MainView.js │ ├── MainView.ux │ ├── README.md │ ├── facebookapp1.png │ ├── facebookapp2.png │ ├── facebookapp3.png │ ├── facebookapp4.png │ └── facebookapp5.png ├── FileBrowser │ ├── Directory.js │ ├── Directory.ux │ ├── FileBrowser.unoproj │ ├── MainView.ux │ └── description.yaml ├── FilterOnObservableCondition │ ├── FilterOnObservableCondition.unoproj │ ├── MainView.js │ ├── MainView.ux │ ├── README.md │ └── description.yaml ├── ForeignAccelerometer │ ├── AccelerometerExampleMovement.uno │ ├── ForeignAccelerometer.unoproj │ ├── ForeignAccelerometer │ │ ├── Accelerometer.uno │ │ ├── AccelerometerImpl.hh │ │ ├── AccelerometerImpl.java │ │ ├── AccelerometerImpl.mm │ │ ├── AccelerometerModule.uno │ │ ├── Accelerometer_Android.uno │ │ └── Accelerometer_iOS.uno │ ├── MainView.ux │ └── README.md ├── GameOfLife │ ├── GameOfLife.unoproj │ ├── GameOfLife.ux │ ├── Life.js │ ├── README.md │ └── description.yaml ├── GeoLocation │ ├── MainView.ux │ ├── README.md │ ├── description.yaml │ └── geolocation.unoproj ├── Gestures │ └── Swipe │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── Swipe.unoproj │ │ ├── bird0.jpg │ │ ├── bird1.jpg │ │ ├── cancel.png │ │ ├── description.yaml │ │ ├── dynamite.png │ │ ├── main.js │ │ └── unknown.png ├── GithubOAuth │ ├── Auth.js │ ├── GithubOAuth.unoproj │ ├── MainView.js │ ├── MainView.ux │ └── README.md ├── ImageViewer │ ├── Assets │ │ ├── cancel.png │ │ ├── image0.jpg │ │ ├── image1.jpg │ │ ├── image2.jpg │ │ ├── image3.jpg │ │ ├── image4.jpg │ │ ├── image5.jpg │ │ ├── image6.jpg │ │ ├── image7.jpg │ │ └── image8.jpg │ ├── ImageViewer.unoproj │ ├── MainView.ux │ ├── README.md │ └── description.yaml ├── Lifecycle │ ├── LifecycleExample.unoproj │ ├── MainView.js │ ├── MainView.ux │ ├── README.md │ ├── UnoApplicationLifecycle.png │ └── description.yaml ├── LineGraph │ ├── LineGraph.unoproj │ ├── MainView.ux │ ├── README.md │ ├── description.yaml │ └── preview.png ├── Localization │ ├── Locales.ux │ ├── Localization.uno │ ├── Localization.unoproj │ ├── MainView.js │ ├── MainView.ux │ ├── README.md │ ├── locales │ │ ├── en_US.ux │ │ ├── ko_KR.ux │ │ ├── zh_CN.ux │ │ └── zh_TW.ux │ └── screenshots │ │ ├── en_us.png │ │ └── zh_cn.png ├── NativeDialogs │ ├── ExampleProject │ │ ├── DialogExample.unoproj │ │ └── MainView.ux │ ├── Fuse.Dialogs │ │ ├── Dialogs.uno │ │ ├── Fuse.Dialogs.unoproj │ │ └── Optional.uno │ └── README.md ├── OSUI │ ├── MainView.ux │ ├── OS_UI │ │ ├── no_response.png │ │ ├── respond.png │ │ └── response_with_keyboard.png │ ├── README.md │ └── osui.unoproj ├── PieChart │ ├── MainView.ux │ ├── PieChart.unoproj │ ├── README.md │ ├── description.yaml │ └── pie-chart.png ├── PlaySound │ ├── MainView.ux │ ├── PlaySound.unoproj │ ├── README.md │ └── Sounds │ │ ├── Kick1.wav │ │ ├── Kick2.wav │ │ ├── Perc1.wav │ │ ├── Perc2.wav │ │ ├── Perc3.wav │ │ ├── Snare1.wav │ │ ├── Snare2.wav │ │ └── Snare3.wav ├── RatingComponents │ ├── Assets │ │ ├── star-empty.png │ │ ├── star-full.png │ │ ├── star-half.png │ │ └── star.png │ ├── MainView.ux │ ├── README.md │ ├── RatingComponents.unoproj │ ├── SlidingRatingComponent.ux │ └── StaticRatingComponent.ux ├── RelativeTo │ ├── MainView.ux │ ├── README.md │ ├── RelativeTo.unoproj │ └── description.yaml ├── Storage │ ├── MainView.js │ ├── MainView.ux │ ├── README.md │ └── StorageExample.unoproj ├── UIStructure │ ├── CalendarNav │ │ ├── Assets │ │ │ ├── arrowleft.png │ │ │ ├── arrowright.png │ │ │ └── cross.png │ │ ├── CalendarNav.unoproj │ │ ├── CalendarView │ │ │ ├── CalendarView.ux │ │ │ ├── DayView.js │ │ │ ├── DayView.ux │ │ │ ├── MonthView.js │ │ │ └── MonthView.ux │ │ ├── Lib │ │ │ └── DateTime.js │ │ ├── MainView.ux │ │ ├── README.md │ │ └── Resources.ux │ ├── ContextMenu │ │ ├── ContextMenu.unoproj │ │ ├── MainView.ux │ │ ├── README.md │ │ └── description.yaml │ ├── Modal │ │ ├── MainView.ux │ │ ├── Modal.unoproj │ │ ├── OtherPage.ux │ │ ├── README.md │ │ └── description.yaml │ ├── Navigation │ │ ├── AppMenu.ux │ │ ├── ApplicationTop.ux │ │ ├── Assets │ │ │ └── MaterialIcons-Regular.ttf │ │ ├── Components │ │ │ └── TitleAreaContent.ux │ │ ├── MainView.ux │ │ ├── Navigation.unoproj │ │ ├── Pages │ │ │ ├── AccountPage.ux │ │ │ ├── BookingPage.ux │ │ │ ├── BookingsPage.ux │ │ │ ├── CreateBookingPage.ux │ │ │ └── FlightsPage.ux │ │ ├── README.md │ │ └── description.yaml │ ├── PageTabs │ │ ├── MainView.ux │ │ ├── PageTabs.unoproj │ │ ├── README.md │ │ └── description.yaml │ ├── ScrollViewPager │ │ ├── MainView.js │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── ScrollViewPager.unoproj │ │ └── description.yaml │ └── Transition │ │ ├── App.ux │ │ ├── Assets │ │ ├── arrowleft.png │ │ ├── play.png │ │ ├── plus.png │ │ └── star.png │ │ ├── MainView.js │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── Transition.unoproj │ │ └── description.yaml ├── UserEvents │ ├── MainView.ux │ ├── NumberEntry.js │ ├── NumberEntry.ux │ ├── NumberPad.js │ ├── NumberPad.ux │ ├── README.md │ ├── UserEventDemo.unoproj │ ├── arrowleft.png │ ├── cancel.png │ └── description.yaml ├── Visualization │ ├── Charting │ │ ├── Assets │ │ │ ├── elephant.png │ │ │ ├── goat.png │ │ │ └── pig.png │ │ ├── BarChart.ux │ │ ├── ChartPage.ux │ │ ├── Charting.unoproj │ │ ├── DoubleBarChart.ux │ │ ├── FullBarChart.ux │ │ ├── GroupLine.ux │ │ ├── HorzLine.ux │ │ ├── MainView.ux │ │ ├── MixHorzLine.ux │ │ ├── MixedBarChart.ux │ │ ├── NegHorzLine.ux │ │ ├── PieChart.ux │ │ ├── QuarterGroups.ux │ │ ├── README.md │ │ ├── ScatterPlot.ux │ │ ├── SpiderChart.ux │ │ ├── StackedBarChart.ux │ │ ├── VertLine.ux │ │ ├── VertRanges.ux │ │ └── description.yaml │ └── Vectors │ │ ├── ItemDecoratedCurve.ux │ │ ├── ItemEllipticalProgress.ux │ │ ├── ItemJaggedLine.ux │ │ ├── ItemPathJS.ux │ │ ├── ItemPathLogo.ux │ │ ├── ItemTangentLine.ux │ │ ├── MainView.ux │ │ ├── README.md │ │ ├── Vectors.unoproj │ │ └── description.yaml └── cattr │ ├── Backend.js │ ├── Cattr.unoproj │ ├── Cattr.ux │ ├── Components │ ├── DefaultPage.ux │ ├── ImageRectangle.ux │ └── WhiteText.ux │ ├── Pages │ ├── Home │ │ ├── Chat │ │ │ ├── ChatPage.js │ │ │ └── ChatPage.ux │ │ ├── Details │ │ │ ├── DetailsPage.js │ │ │ └── DetailsPage.ux │ │ ├── HomePage.js │ │ ├── HomePage.ux │ │ ├── HomePageTab.ux │ │ └── Pics │ │ │ ├── PicsPage.js │ │ │ └── PicsPage.ux │ └── PetSelection │ │ ├── PetSelectionPage.js │ │ └── PetSelectionPage.ux │ ├── README.md │ ├── assets │ ├── base.png │ ├── kitten1.jpg │ ├── kitten2.jpg │ ├── kitten3.jpg │ ├── otter1.jpg │ ├── otter2.jpg │ ├── otter3.jpg │ ├── puppy1.jpg │ ├── puppy2.jpg │ └── puppy3.jpg │ └── screencap.gif └── tools ├── CI ├── build_examples.bat ├── build_examples.sh └── get-fuse.sh └── Stuff ├── .gitignore ├── MultiProjBuilder.stuff └── stuff.exe /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | .uno/ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Fuse 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Samples/AmazonS3/AWS.stuff: -------------------------------------------------------------------------------- 1 | if ANDROID { 2 | aws-android-sdk-2.2.13: "http://sdk-for-android.amazonwebservices.com/aws-android-sdk-2.2.13.zip" 3 | } 4 | if iOS { 5 | aws-ios-sdk-2.3.5: "http://sdk-for-ios.amazonwebservices.com/aws-ios-sdk-2.3.5.zip" 6 | } 7 | 8 | -------------------------------------------------------------------------------- /Samples/AmazonS3/AmazonS3.cpp.uxl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 10 | ]]> 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Samples/AmazonS3/AmazonS3.unoproj: -------------------------------------------------------------------------------- 1 | { 2 | "RootNamespace": "", 3 | "Packages": [ 4 | "Fuse", 5 | "FuseJS", 6 | "Experimental.TextureLoader" 7 | ], 8 | "Includes": [ 9 | "*" 10 | ] 11 | } -------------------------------------------------------------------------------- /Samples/AmazonS3/MainView.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | var downloader = require("S3ImageDownloader"); 6 | module.exports.download = function(){ 7 | downloader.start(); 8 | }; 9 | 10 | 11 | 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 | ![pie-chart.png](pie-chart.png) -------------------------------------------------------------------------------- /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 | 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 |