From a68a871e790656d340e6cbed25ef400e77b7080e Mon Sep 17 00:00:00 2001 From: eble_lars Date: Fri, 9 Jul 2021 15:37:03 +0200 Subject: [PATCH] Add configurable google font loading FIx WPF binding issues --- .../Common/Controllers/ConfigController.cs | 21 +++++++++++ .../Ingame/Data/Config/IngameConfig.cs | 30 +++------------- .../Ingame/Data/Frontend/LocalFont.cs | 12 +++++++ .../MVVM/View/IngameTeamsView.xaml | 4 +-- LeagueBroadcast/MVVM/View/PickBanView.xaml | 1 - .../MVVM/ViewModel/IngameViewModel.cs | 2 +- .../ingame/src/data/config/overlayConfig.ts | 17 +++++---- Overlays/ingame/src/scenes/IngameScene.ts | 36 ++++++++++++++++--- 8 files changed, 81 insertions(+), 42 deletions(-) create mode 100644 LeagueBroadcast/Ingame/Data/Frontend/LocalFont.cs diff --git a/LeagueBroadcast/Common/Controllers/ConfigController.cs b/LeagueBroadcast/Common/Controllers/ConfigController.cs index 8c135fe..0e515d6 100644 --- a/LeagueBroadcast/Common/Controllers/ConfigController.cs +++ b/LeagueBroadcast/Common/Controllers/ConfigController.cs @@ -1,7 +1,10 @@ using LeagueBroadcast.Common.Data.Config; using LeagueBroadcast.Ingame.Data.Config; +using LeagueBroadcast.Ingame.Data.Frontend; using System; +using System.Collections.ObjectModel; using System.IO; +using System.Linq; using System.Threading.Tasks; using System.Windows; @@ -25,6 +28,10 @@ class ConfigController public static ConfigWatcher IngameWatcher; public static string ConfigLocation = Path.Combine(Directory.GetCurrentDirectory(), "Config"); + public static string FontLocation = Path.Combine(Directory.GetCurrentDirectory(), "Cache", "Fonts"); + + public ObservableCollection LocalFonts; + public ConfigController() { Log.Info("Starting Config Controller"); @@ -49,6 +56,20 @@ public ConfigController() ComponentWatcher = new("Component.json", Component); IngameWatcher = new("Ingame.json", Ingame); + //TODO Somehow loading these fonts into a stylesheet + /* + Log.Info("Loading local fonts"); + Directory.CreateDirectory(FontLocation); + + new ObservableCollection(Directory + .EnumerateFiles(FontLocation, "*", SearchOption.AllDirectories) + .Select(f => { + var fontLocation = $"/cache/Fonts/{Path.GetFileName(f)}"; + var fontName = Path.GetFileNameWithoutExtension(f); + return new LocalFont(); + })); + */ + App.Instance.Exit += OnClose; } diff --git a/LeagueBroadcast/Ingame/Data/Config/IngameConfig.cs b/LeagueBroadcast/Ingame/Data/Config/IngameConfig.cs index 5aa01ec..0d911f0 100644 --- a/LeagueBroadcast/Ingame/Data/Config/IngameConfig.cs +++ b/LeagueBroadcast/Ingame/Data/Config/IngameConfig.cs @@ -27,6 +27,7 @@ public class IngameConfig : JSONConfig public GoldGraphDisplayConfig GoldGraph; public ObjectiveTimerDisplayConfig BaronTimer; public ObjectiveTimerDisplayConfig ElderTimer; + public List GoogleFonts; public override string GETCurrentVersion() { @@ -50,6 +51,7 @@ public override void UpdateValues(string readValues) BaronTimer = Cfg.BaronTimer; ElderTimer = Cfg.ElderTimer; GoldGraph = Cfg.GoldGraph; + GoogleFonts = Cfg.GoogleFonts; FileVersion = Cfg.FileVersion; } @@ -70,6 +72,7 @@ public override void RevertToDefault() this.BaronTimer = def.BaronTimer; this.ElderTimer = def.ElderTimer; this.GoldGraph = def.GoldGraph; + this.GoogleFonts = def.GoogleFonts; this.FileVersion = CurrentVersion; } @@ -79,6 +82,7 @@ private IngameConfig CreateDefault() return new IngameConfig() { FileVersion = CurrentVersion, + GoogleFonts = new List() { "News Cycle", "News Cycle:bold", "Droid Sans" }, Inhib = new InhibitorDisplayConfig() { Position = new Vector2(0, 845), Size = new Vector2(306, 118), @@ -86,7 +90,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -121,7 +124,6 @@ private IngameConfig CreateDefault() TimeFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Normal", Color = "rgb(255,255,255)", @@ -137,7 +139,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -160,7 +161,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "26px", Style = "Normal" @@ -186,7 +186,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "50px", Style = "Normal" @@ -205,7 +204,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "40px", Style = "Normal" @@ -221,7 +219,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "26px", Style = "Normal" @@ -244,7 +241,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -267,7 +263,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "26px", Style = "Normal" @@ -293,7 +288,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "50px", Style = "Normal" @@ -312,7 +306,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "40px", Style = "Normal" @@ -328,7 +321,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "26px", Style = "Normal" @@ -378,7 +370,6 @@ private IngameConfig CreateDefault() { Align = "center", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "26px", Style = "Normal" @@ -420,7 +411,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -439,7 +429,6 @@ private IngameConfig CreateDefault() { Align = "left", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -458,7 +447,6 @@ private IngameConfig CreateDefault() { Align = "center", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "25px", Style = "Normal" @@ -477,7 +465,6 @@ private IngameConfig CreateDefault() { Align = "right", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "15px", Style = "Normal" @@ -564,7 +551,6 @@ private IngameConfig CreateDefault() { Align = "center", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "20px", Style = "Normal" @@ -641,7 +627,6 @@ private IngameConfig CreateDefault() { Align = "center", Color = "rgb(255,255,255)", - IsGoogleFont = true, Name = "News Cycle", Size = "60px", Style = "Normal" @@ -747,7 +732,6 @@ private IngameConfig CreateDefault() GoldFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Bold", Color = "rgb(230,190,138)", @@ -758,7 +742,6 @@ private IngameConfig CreateDefault() TimeFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Bold", Color = "rgb(230,190,138)", @@ -782,7 +765,6 @@ private IngameConfig CreateDefault() GoldFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Bold", Color = "rgb(230,190,138)", @@ -793,7 +775,6 @@ private IngameConfig CreateDefault() TimeFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Bold", Color = "rgb(230,190,138)", @@ -821,7 +802,6 @@ private IngameConfig CreateDefault() Font = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "22px", Style = "Bold", Color = "rgb(230,190,138)", @@ -836,7 +816,6 @@ private IngameConfig CreateDefault() InfoFont = new FontConfig() { Name = "News Cycle", - IsGoogleFont = true, Size = "UNUSED", Style = "UNUSED", Color = "rgb(230,190,138)", @@ -1071,7 +1050,6 @@ public class FontConfig { public string Style; public string Name; - public bool IsGoogleFont; public string Size; public string Align; public string Color; diff --git a/LeagueBroadcast/Ingame/Data/Frontend/LocalFont.cs b/LeagueBroadcast/Ingame/Data/Frontend/LocalFont.cs new file mode 100644 index 0000000..5c42a9c --- /dev/null +++ b/LeagueBroadcast/Ingame/Data/Frontend/LocalFont.cs @@ -0,0 +1,12 @@ +using System; +using System.Collections.Generic; +using System.Text; + +namespace LeagueBroadcast.Ingame.Data.Frontend +{ + public class LocalFont + { + public string Name; + public string Location; + } +} diff --git a/LeagueBroadcast/MVVM/View/IngameTeamsView.xaml b/LeagueBroadcast/MVVM/View/IngameTeamsView.xaml index 89ab0e8..36056b6 100644 --- a/LeagueBroadcast/MVVM/View/IngameTeamsView.xaml +++ b/LeagueBroadcast/MVVM/View/IngameTeamsView.xaml @@ -69,7 +69,7 @@ - + - + - diff --git a/LeagueBroadcast/MVVM/ViewModel/IngameViewModel.cs b/LeagueBroadcast/MVVM/ViewModel/IngameViewModel.cs index bd9289e..1e95bb2 100644 --- a/LeagueBroadcast/MVVM/ViewModel/IngameViewModel.cs +++ b/LeagueBroadcast/MVVM/ViewModel/IngameViewModel.cs @@ -73,7 +73,7 @@ public IngameViewModel() _closeCommand = new(o => { IsOpen = false; }); _closeCommand.GestureKey = Key.Escape; - _teamsButtonCommand = new(o => { TeamsIsOpen ^= true; Log.Info("Switch Team View visibility"); }); + _teamsButtonCommand = new(o => { TeamsIsOpen ^= true; Log.Verbose("Switch Team View visibility"); }); _teamsButtonCommand.MouseGesture = MouseAction.LeftClick; IngameTeamsVM = new(); diff --git a/Overlays/ingame/src/data/config/overlayConfig.ts b/Overlays/ingame/src/data/config/overlayConfig.ts index 212ba85..eff5e69 100644 --- a/Overlays/ingame/src/data/config/overlayConfig.ts +++ b/Overlays/ingame/src/data/config/overlayConfig.ts @@ -23,6 +23,7 @@ export interface OverlayConfig { BaronTimer: ObjectiveTimerDisplayConfig; ElderTimer: ObjectiveTimerDisplayConfig; GoldGraph: GoldGraphDisplayConfig; + GoogleFonts: string[]; } export interface ObjectiveTimerDisplayConfig { @@ -71,17 +72,19 @@ export interface InhibTeamConfig { } export interface ObjectiveKillConfig { - DrakeScoreboardPopUp: ScoreboardPopUpConfig; SoulPointScoreboardPopUp: ScoreboardPopUpConfig; - ElderScoreboardPopUp: ScoreboardPopUpConfig; - HeraldScoreboardPopUp: ScoreboardPopUpConfig; - BaronScoreboardPopUp: ScoreboardPopUpConfig; + ElderKillScoreboardPopUp: ScoreboardPopUpConfig; + BaronKillScoreboardPopUp: ScoreboardPopUpConfig; } export interface ScoreboardPopUpConfig { Enabled: boolean; - ShowTeam: boolean; - ShowSpawn: boolean; + UseImage: boolean; + UseVideo: boolean; + UseAlpha: boolean; + ForceDisplayDurationForVideo: boolean; + DisplayDuration: number; + AnimationDuration: number; } export interface ItemCompletedDisplayConfig { @@ -193,7 +196,6 @@ export interface ExtraConfigs { export interface FontConfig { Style: string; Name: string; - IsGoogleFont: boolean; Size: string; Align: string; Color: string; @@ -289,6 +291,7 @@ export interface GraphDisplayConfig { ShowVerticalGrid: boolean; LineTension: number; TimeStepSize: number; + ShowTimeStepIndicators: boolean; } export interface GoldGraphTitleConfig { diff --git a/Overlays/ingame/src/scenes/IngameScene.ts b/Overlays/ingame/src/scenes/IngameScene.ts index 25f5d4e..db49044 100644 --- a/Overlays/ingame/src/scenes/IngameScene.ts +++ b/Overlays/ingame/src/scenes/IngameScene.ts @@ -21,6 +21,7 @@ export default class IngameScene extends Phaser.Scene { [x: string]: any; ws!: WebSocket; displayRegions: RegionMask[]; + loadedFonts: string[]; baronTimer!: ObjectiveTimerVisual; elderTimer!: ObjectiveTimerVisual; @@ -43,20 +44,23 @@ export default class IngameScene extends Phaser.Scene { super('ingameOverlay'); IngameScene.Instance = this; this.displayRegions = []; + this.loadedFonts = []; } preload() { + /* var config = { google: { families: ['Droid Sans', 'News Cycle', 'News Cycle:bold'] } }; - + this.load.rexWebFont(config); + */ variables.backendUrl = WindowUtils.GetQueryVariable('backend'); this.graphics = this.add.graphics(); - this.load.rexWebFont(config); + this.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js'); //Masks @@ -193,7 +197,7 @@ export default class IngameScene extends Phaser.Scene { case 'OverlayConfig': if (data.type !== 1) break; - this.UpdateConfig(data); + this.UpdateConfigWhenReady(data); break; case 'PlayerLevelUp': if (this.info.isActive && data.playerId < 5) @@ -292,8 +296,7 @@ export default class IngameScene extends Phaser.Scene { } UpdateConfig = (message: OverlayConfigEvent): void => { - console.log('Configuring Visual Elements'); - + console.log('[LB] Configuring Visual Elements'); if (this.overlayCfg === null) { //Init Message, create Visual Elements this.overlayCfg = message.config; @@ -318,6 +321,29 @@ export default class IngameScene extends Phaser.Scene { } + UpdateConfigWhenReady(message: OverlayConfigEvent): void { + //Load new fonts + let newFonts = message.config.GoogleFonts.filter(f => !this.loadedFonts.includes(f)); + if (newFonts.length > 0) { + this.load.rexWebFont({ + google: { + families: newFonts + } + }); + + console.log(`[LB] Loading ${newFonts.length} new fonts`); + this.load.start(); + + //Wait for loader to finish loading fonts + this.load.once('complete', () => { + console.log('[LB] Fonts loaded'); + this.UpdateConfig(message); + }); + return; + } + this.UpdateConfig(message); + } + CheckSoulPoint(state: StateData): void { if (!this.overlayCfg?.ObjectiveKill.SoulPointScoreboardPopUp.Enabled)