Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.

Customize styles through UI API #133

Merged
merged 6 commits into from
Mar 2, 2023
Merged

Customize styles through UI API #133

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
859795a
support customizing styles through UI API
hmuurine Mar 1, 2023
b3c2411
do not apply styles automatically in constructor
hmuurine Mar 1, 2023
365c8ab
do not apply styles automatically in constructor for stresstest
hmuurine Mar 1, 2023
ebb445b
move light/dark mode palette change code to PixelStreamingApplication…
hmuurine Mar 1, 2023
5b2d6d5
Check if onUpdateColors callback defined
hmuurine Mar 1, 2023
5c98f21
updateColors / onUpdateColors -> setColorMode / onColorModeChanged
hmuurine Mar 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions Frontend/implementations/EpicGames/src/player.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
export const PixelStreamingApplicationStyles =
const PixelStreamingApplicationStyles =
new PixelStreamingApplicationStyle();

PixelStreamingApplicationStyles.applyStyleSheet();

document.body.onload = function() {
// Example of how to set the logger level
Expand All @@ -15,7 +15,10 @@ document.body.onload = function() {

// Create a Native DOM delegate instance that implements the Delegate interface class
const stream = new PixelStreaming(config);
const application = new Application({ stream });
const application = new Application({
stream,
onUpdateColors: (isLightMode) => PixelStreamingApplicationStyles.updateColors(isLightMode)
});
// document.getElementById("centrebox").appendChild(application.rootElement);
document.body.appendChild(application.rootElement);
}
8 changes: 6 additions & 2 deletions Frontend/implementations/EpicGames/src/stresstest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { Config, Flags, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
export const PixelStreamingApplicationStyles =
const PixelStreamingApplicationStyles =
new PixelStreamingApplicationStyle();
PixelStreamingApplicationStyles.applyStyleSheet();

// This is the entrypoint to the stress test, all setup happens here
export class StressTester {
Expand Down Expand Up @@ -146,7 +147,10 @@ export class StressTester {

// Create a Native DOM delegate instance that implements the Delegate interface class
const stream = new PixelStreaming(config);
const application = new Application({ stream });
const application = new Application({
stream,
onUpdateColors: (isLightMode) => PixelStreamingApplicationStyles.updateColors(isLightMode)
});
streamFrame.appendChild(application.rootElement);
return streamFrame;
}
Expand Down
25 changes: 6 additions & 19 deletions Frontend/ui-library/src/Application/Application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { ConfigUI, LightMode } from '../Config/ConfigUI';

export interface UIOptions {
stream: PixelStreaming;
onUpdateColors?: (isLightMode: boolean) => void;
hmuurine marked this conversation as resolved.
Show resolved Hide resolved
}

/**
Expand Down Expand Up @@ -55,11 +56,14 @@ export class Application {

configUI: ConfigUI;

onUpdateColors: UIOptions["onUpdateColors"];

/**
* @param options - Initialization options
*/
constructor(options: UIOptions) {
this.stream = options.stream;
this.onUpdateColors = options.onUpdateColors;
this.configUI = new ConfigUI(this.stream.config);

this.createOverlays();
Expand Down Expand Up @@ -593,25 +597,8 @@ export class Application {
* @param isLightMode - should we use a light or dark color scheme
*/
updateColors(isLightMode: boolean) {
const rootElement = document.querySelector(':root') as HTMLElement;
if (isLightMode) {
rootElement.style.setProperty('--color0', '#e2e0dd80');
rootElement.style.setProperty('--color1', '#FFFFFF');
rootElement.style.setProperty('--color2', '#000000');
rootElement.style.setProperty('--color3', '#0585fe');
rootElement.style.setProperty('--color4', '#35b350');
rootElement.style.setProperty('--color5', '#ffab00');
rootElement.style.setProperty('--color6', '#e1e2dd');
rootElement.style.setProperty('--color7', '#c3c4bf');
} else {
rootElement.style.setProperty('--color0', '#1D1F2280');
rootElement.style.setProperty('--color1', '#000000');
rootElement.style.setProperty('--color2', '#FFFFFF');
rootElement.style.setProperty('--color3', '#0585fe');
rootElement.style.setProperty('--color4', '#35b350');
rootElement.style.setProperty('--color5', '#ffab00');
rootElement.style.setProperty('--color6', '#1e1d22');
rootElement.style.setProperty('--color7', '#3c3b40');
if (this.onUpdateColors) {
this.onUpdateColors(isLightMode);
}
}
}
Loading