├── .gitignore ├── README.md ├── animation-explorer ├── Assets │ └── FontAwesome.otf ├── BoxPage.js ├── BoxPage.ux ├── HomePanel.ux ├── ListPage.js ├── ListPage.ux ├── MainView.ux ├── Resources.ux ├── SelectPage.ux └── animation-explorer.unoproj ├── bar-chart-basic ├── MainView.ux ├── State.js ├── State.ts ├── bar-char-basic.unoproj └── tsconfig.json ├── bezier-split ├── Assets │ ├── arrow.png │ ├── cart.png │ ├── drawing.svg │ ├── pencil.png │ └── plot_arrow.png ├── Bezier │ ├── Growth.ux │ ├── Loading.ux │ ├── Name.ux │ └── Plot.ux ├── MainView.ux ├── README.md ├── TestPage.ux └── bezier-split.unoproj ├── card-manager ├── CardPage.ux ├── CardView.ux ├── MainView.ux ├── README.md ├── SampleAnim.ux ├── State.js └── card-manager.unoproj ├── christmas-tree ├── Assets │ ├── background.png │ ├── bulb_1.png │ ├── bulb_10.png │ ├── bulb_11.png │ ├── bulb_12.png │ ├── bulb_13.png │ ├── bulb_14.png │ ├── bulb_15.png │ ├── bulb_16.png │ ├── bulb_2.png │ ├── bulb_3.png │ ├── bulb_4.png │ ├── bulb_5.png │ ├── bulb_6.png │ ├── bulb_7.png │ ├── bulb_8.png │ ├── bulb_9.png │ ├── candle_1.png │ ├── candle_2.png │ ├── gift_1.png │ ├── gift_2.png │ ├── gift_3.png │ ├── gift_4.png │ ├── lights.png │ ├── lights.xcf │ ├── lights_1.png │ ├── lights_2.png │ ├── lights_3.png │ ├── lights_4.png │ ├── santa.png │ ├── snowflake_0.png │ ├── snowflake_1.png │ ├── snowflake_2.png │ ├── snowflake_3.png │ ├── snowflake_4.png │ ├── snowflake_5.png │ ├── snowflake_6.png │ ├── snowman1.png │ └── tree.png ├── BulbPalette.ux ├── FallingSnow.ux ├── GiftPalette.ux ├── MainView.ux ├── OrnamentPanel.ux ├── README.md ├── SantaPanel.ux ├── StarPalette.ux ├── StarPaths.ux ├── State.js ├── TreePanel.ux └── christmas-tree.unoproj ├── de-casteljau ├── DeCasteljau.unoproj ├── MainView.ux ├── README.md └── main.js ├── dupesy-christmas ├── .gitignore ├── Assets │ ├── arrow_down.png │ ├── arrow_left.png │ ├── arrow_right.png │ ├── arrow_up.png │ ├── icon_128.png │ ├── icon_check.png │ ├── icon_cross.png │ ├── icon_heart.png │ ├── load_icon.png │ ├── tile_00.png │ ├── tile_01.png │ ├── tile_02.png │ ├── tile_03.png │ ├── tile_04.png │ ├── tile_05.png │ ├── tile_06.png │ ├── tile_07.png │ ├── tile_08.png │ ├── tile_09.png │ ├── tile_10.png │ ├── tile_11.png │ ├── tile_12.png │ ├── tile_13.png │ ├── tile_14.png │ ├── tile_15.png │ ├── tile_16.png │ ├── tile_17.png │ ├── tile_18.png │ ├── tile_19.png │ ├── tile_20.png │ ├── tile_21.png │ ├── tile_22.png │ ├── tile_23.png │ ├── tile_24.png │ ├── tile_25.png │ ├── tile_26.png │ ├── tile_27.png │ ├── tile_28.png │ ├── tile_29.png │ ├── tile_30.png │ ├── tile_31.png │ ├── title.png │ ├── title_back.png │ └── title_background.jpg ├── Controls │ ├── Button.ux │ ├── FullPanel.ux │ ├── Menu.ux │ ├── Page.ux │ ├── Panel.ux │ ├── SimpleSelect.ux │ └── TextBits.ux ├── Design │ ├── icon.xcf │ └── santa-31319.png ├── DupesyChristmas.unoproj ├── Game.PageGame.ux ├── Game.PageGameOver.ux ├── Game.PageHelp.ux ├── Game.PageStart.ux ├── GameConfig.js ├── GameRouting.js ├── GameState.js ├── GameStats.js ├── GameTiles.js ├── MainView.ux ├── MyApp.ux ├── PreloadPanel.ux ├── README.txt ├── main.js ├── makefile └── release.keystore ├── misc ├── StepSlider │ ├── MainView.ux │ ├── MySlider.ux │ ├── MyVSlider.ux │ └── StepSlider.unoproj ├── attract │ ├── MainView.ux │ ├── MainView.ux.old │ └── attract.unoproj └── layout │ ├── MainView.ux │ └── layout.unoproj ├── page-product-paralax ├── Assets │ ├── FontAwesome.otf │ ├── background.jpg │ ├── logo-1.png │ ├── logo-2.png │ ├── product-backpack.png │ ├── product-boots.png │ ├── product-hat.png │ ├── product-shirt.png │ ├── product-shoe.png │ └── product-teddy.png ├── MainState.js ├── MainView.ux ├── README.md └── page-product-paralax.unoproj ├── permission-popup ├── Assets │ ├── airplane.png │ ├── bell.png │ ├── marker.png │ ├── pattern.png │ └── star.png ├── MainView.ux ├── README.md └── permission-popup.unoproj ├── pixabay ├── Assets │ ├── icon_cancel.png │ ├── icon_config.png │ ├── icon_info.png │ ├── icon_search.png │ ├── icon_star.png │ ├── icon_thumbsup.png │ ├── icon_user.png │ └── pixabay_logo.png ├── MainView.ux ├── Modules │ ├── .Searching.js.kate-swp │ └── Searching.js ├── PageImageInfo.js ├── PageImageInfo.ux ├── PageSearch.js ├── PageSearch.ux ├── pixabay.js └── pixabay.unoproj ├── signup-transition ├── Assets │ └── background.png ├── MainState.js ├── MainView.ux ├── PageHome.ux ├── PageLoading.ux ├── PageLogout.ux ├── README.md └── signup-transition.unoproj ├── smart-home-app ├── ItemPage.ux ├── ItemSelector.ux ├── MainState.js ├── MainView.ux ├── RoomsSelector.ux └── smart-home-app.unoproj ├── stream ├── let-expression │ ├── AppState.js │ ├── MainView.ux │ └── let-expression.unoproj ├── line-anim │ ├── MainView.ux │ └── line-anim.unoproj ├── material-design-input │ ├── MainView.ux │ └── material-design-input.unoproj ├── patch-line │ ├── MainState.js │ ├── MainView.ux │ └── patch-line.unoproj ├── typescript-1 │ ├── Assets │ │ ├── bowling.png │ │ ├── clock.png │ │ ├── mountain.png │ │ └── rocket.png │ ├── Currency.js │ ├── Currency.ts │ ├── MainView.ux │ ├── State.js │ ├── State.ts │ ├── tsconfig.json │ └── typescript-1.unoproj └── ux-rest │ ├── MainView.ux │ └── ux-rest.unoproj └── time-tracker ├── Assets ├── arrow_left.png └── header.png ├── Includes └── ItemGradient.xml ├── MainState.js ├── MainState.ux ├── PageDetails.ux ├── PageOverview.ux ├── README.md ├── lib └── moment.js └── time-tracker.unoproj /.gitignore: -------------------------------------------------------------------------------- 1 | .uno 2 | build 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fuse-Demos 2 | 3 | This is a collection of demo apps done on my [Fuse Twitch stream](https://www.twitch.tv/mortoray). 4 | 5 | - View my [Fuse demos stream](https://www.twitch.tv/mortoray). 6 | - Follow me on [Twitter](https://twitter.com/edaqa) 7 | - View [previous episodes](https://www.youtube.com/channel/UCOkkR7mihbnNnPD8yxhW56Q/featured) 8 | - Checkout [Fuse](https://fusetools.com/) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /animation-explorer/Assets/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mortoray/fuse-demos/1f91a62d81dac692e7e22b21aac9e4f48b71d975/animation-explorer/Assets/FontAwesome.otf -------------------------------------------------------------------------------- /animation-explorer/BoxPage.js: -------------------------------------------------------------------------------- 1 | class Timelines { 2 | constructor() { 3 | this.triggers = {} 4 | } 5 | 6 | add( name, timeline ) { 7 | this.triggers[name] = timeline 8 | } 9 | } 10 | 11 | export default class BoxPage { 12 | constructor() { 13 | this.emailCount = 0 14 | this.alert = undefined 15 | this.important = false; 16 | this.timelines = new Timelines() 17 | } 18 | 19 | addEmail() { 20 | this.emailCount += 1 21 | } 22 | clearEmail() { 23 | this.emailCount = 0 24 | } 25 | 26 | setAlert() { 27 | this.alert = "Alert" 28 | } 29 | clearAlert() { 30 | this.alert = "" 31 | } 32 | 33 | setImportant() { 34 | this.important = true 35 | } 36 | clearImportant() { 37 | this.important = false 38 | } 39 | 40 | testTimeline() { 41 | this.timelines.triggers.pulseRed.pulseForward() 42 | } 43 | } -------------------------------------------------------------------------------- /animation-explorer/HomePanel.ux: -------------------------------------------------------------------------------- 1 | 2 | 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 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /animation-explorer/ListPage.js: -------------------------------------------------------------------------------- 1 | var itemId = 0 2 | class Item { 3 | constructor() { 4 | this.id = itemId++ 5 | } 6 | } 7 | 8 | class ChatItem extends Item { 9 | constructor() { 10 | super() 11 | this.type ="chat" 12 | this.loading = true 13 | setTimeout( () => { 14 | this.clearLoad() 15 | }, Math.random() * 2000 + 1000) 16 | } 17 | 18 | clearLoad() { 19 | this.loading = false 20 | } 21 | } 22 | 23 | class AdItem extends Item { 24 | constructor() { 25 | super() 26 | this.type = "ad" 27 | } 28 | } 29 | 30 | export default class ListPage { 31 | constructor() { 32 | this.items = [ new ChatItem(), new ChatItem(), new ChatItem() ] 33 | this.adLoc = 0 34 | this.isLoading = false 35 | } 36 | 37 | remove( args ) { 38 | let ndx = this.items.indexOf( args.data ) 39 | this.items.splice( ndx, 1 ) 40 | } 41 | 42 | add() { 43 | this.items.push( new ChatItem() ) 44 | } 45 | 46 | insert() { 47 | this.items.splice( 1, 0, new ChatItem() ) 48 | } 49 | 50 | insertAd() { 51 | this.items.splice( this.adLoc, 0, new AdItem() ) 52 | this.adLoc += 2 53 | } 54 | 55 | clear() { 56 | this.items = [] 57 | this.adLoc = 0 58 | } 59 | 60 | reload() { 61 | this.isLoading = true 62 | setTimeout( () => { 63 | this.isLoading = false 64 | this.items = [ new ChatItem(), new ChatItem(), new ChatItem() ] 65 | }, 5000) 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /animation-explorer/ListPage.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 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 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 103 | 104 | 105 | 106 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /animation-explorer/MainView.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /animation-explorer/Resources.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /animation-explorer/SelectPage.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /animation-explorer/animation-explorer.unoproj: -------------------------------------------------------------------------------- 1 | { 2 | "Packages": [ 3 | "Fuse", 4 | "FuseJS" 5 | ], 6 | "Includes": [ 7 | "*", 8 | "*.js:FuseJS", 9 | ] 10 | } -------------------------------------------------------------------------------- /bar-chart-basic/MainView.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /bar-chart-basic/State.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var State = /** @class */ (function () { 4 | function State() { 5 | this.data = []; 6 | this.title = "Hello There"; 7 | for (var i = 0; i < 10; i += 1) { 8 | this.data.push(i); 9 | } 10 | } 11 | State.prototype.randomize = function () { 12 | this.data = []; 13 | for (var i = 0; i < 10; i += 1) { 14 | this.data.push(Math.random() * 100); 15 | } 16 | }; 17 | return State; 18 | }()); 19 | exports.default = State; 20 | -------------------------------------------------------------------------------- /bar-chart-basic/State.ts: -------------------------------------------------------------------------------- 1 | export default class State { 2 | title : string 3 | data : number[] = [] 4 | 5 | constructor() { 6 | this.title = "Hello There" 7 | 8 | for (var i=0; i < 10; i += 1) { 9 | this.data.push(i) 10 | } 11 | } 12 | 13 | randomize() { 14 | this.data = [] 15 | for (var i=0; i < 10; i += 1) { 16 | this.data.push( Math.random() * 100 ) 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /bar-chart-basic/bar-char-basic.unoproj: -------------------------------------------------------------------------------- 1 | { 2 | "Packages": [ 3 | "Fuse", 4 | "Fuse.Charting", 5 | "FuseJS" 6 | ], 7 | "Includes": [ 8 | "*", 9 | "**.js:FuseJS", 10 | ] 11 | } -------------------------------------------------------------------------------- /bar-chart-basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 12 | // "outFile": "./", /* Concatenate and emit output to single file. */ 13 | // "outDir": "./", /* Redirect output structure to the directory. */ 14 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 15 | // "removeComments": true, /* Do not emit comments to output. */ 16 | // "noEmit": true, /* Do not emit outputs. */ 17 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 18 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 19 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 20 | 21 | /* Strict Type-Checking Options */ 22 | "strict": true, /* Enable all strict type-checking options. */ 23 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 24 | // "strictNullChecks": true, /* Enable strict null checks. */ 25 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 26 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 27 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 28 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 29 | 30 | /* Additional Checks */ 31 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 32 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 33 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 34 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 35 | 36 | /* Module Resolution Options */ 37 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 38 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 39 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 40 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 41 | // "typeRoots": [], /* List of folders to include type definitions from. */ 42 | // "types": [], /* Type declaration files to be included in compilation. */ 43 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 44 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 45 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 46 | 47 | /* Source Map Options */ 48 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 49 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 50 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 51 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 52 | 53 | /* Experimental Options */ 54 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 55 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 56 | } 57 | } -------------------------------------------------------------------------------- /bezier-split/Assets/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mortoray/fuse-demos/1f91a62d81dac692e7e22b21aac9e4f48b71d975/bezier-split/Assets/arrow.png -------------------------------------------------------------------------------- /bezier-split/Assets/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mortoray/fuse-demos/1f91a62d81dac692e7e22b21aac9e4f48b71d975/bezier-split/Assets/cart.png -------------------------------------------------------------------------------- /bezier-split/Assets/pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mortoray/fuse-demos/1f91a62d81dac692e7e22b21aac9e4f48b71d975/bezier-split/Assets/pencil.png -------------------------------------------------------------------------------- /bezier-split/Assets/plot_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mortoray/fuse-demos/1f91a62d81dac692e7e22b21aac9e4f48b71d975/bezier-split/Assets/plot_arrow.png -------------------------------------------------------------------------------- /bezier-split/Bezier/Growth.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /bezier-split/Bezier/Loading.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 11 | 13 | 14 | 16 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /bezier-split/Bezier/Plot.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | var Observable = require("FuseJS/Observable") 6 | 7 | exports.data = Observable( 8 | [0.0, 0.7], 9 | [0.2, 0.9], 10 | [0.4, 0.3], 11 | [0.6, 0.5], 12 | [0.8, 0.7], 13 | [1.0, 0.6]) 14 | 15 | exports.markers = Observable({ 16 | when: 0.3, 17 | text: "Big Things Happened", 18 | },{ 19 | when: 0.75, 20 | text: "Kitten Effects", 21 | }) 22 | 23 | exports.backStart = Observable(0.1) 24 | exports.backEnd = Observable(0.25) 25 | 26 | function back( start, end ) { 27 | return function() { 28 | exports.backStart.value = start 29 | exports.backEnd.value = end 30 | } 31 | } 32 | exports.back1 = back(0.1,0.25) 33 | exports.back2 = back(0.35,0.6) 34 | exports.back3 = back(0.81,0.95) 35 | 36 | 37 |