Skip to content

Commit

Permalink
Added theming to WASM
Browse files Browse the repository at this point in the history
  • Loading branch information
Aragas committed Dec 15, 2024
1 parent d143a6b commit b172d3c
Show file tree
Hide file tree
Showing 9 changed files with 379 additions and 292 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ namespace BUTR.CrashReport.Renderer.ImGui.WASM;

internal sealed partial class CrashReportRendererUtilities : ICrashReportRendererUtilities
{
[JSImport("saveFile", "main.js")]
[JSImport("saveFile", "interop")]
private static partial void SaveFile(byte[] data, string fileName);

[JSImport("writeClipboard", "main.js")]
[JSImport("writeClipboard", "interop")]
private static partial void WriteClipboard(string data);

public bool IsDefaultDarkMode => true;
[JSImport("isDarkMode", "interop")]
private static partial bool IsDarkMode();

public bool IsDefaultDarkMode => IsDarkMode();

private readonly CrashReportRendererCapabilities _capabilities =
#if WINDOWS
Expand Down
14 changes: 12 additions & 2 deletions src/BUTR.CrashReport.Renderer.ImGui.WASM/Program.cs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

using OpenGLES3;

using System.Net.Http.Headers;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
using System.Runtime.InteropServices.JavaScript;
Expand All @@ -26,9 +27,15 @@ namespace BUTR.CrashReport.Renderer.ImGui.WASM;

public static partial class Program
{
[JSImport("finishedLoading", "main.js")]
[JSImport("finishedLoading", "interop")]
private static partial void FinishedLoading();

[JSExport]
private static void SetDarkMode(bool isDarkMode)
{
_renderer.SetDarkMode(isDarkMode);
}

// https://localhost:7211/?arg=http%3A%2F%2Flocalhost%3A65530%2Fcrashreport.json
internal static async Task Main(string[] args)
{
Expand All @@ -53,7 +60,9 @@ internal static async Task Main(string[] args)
private static async Task<CrashReportModel> FetchAsync(string url)
{
using var client = new HttpClient();

using var request = new HttpRequestMessage(HttpMethod.Get, url);
request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

/*
if (!request.Options.TryGetValue(FetchRequestOptionsKey, out var fetchOptions))
Expand Down Expand Up @@ -134,7 +143,8 @@ private static CmGui CreateCmGui()

private static ImGuiRenderer CreateImGuiRenderer(CrashReportModel cr, LogSourceModel[] logs, CmGui imgui)
{
return new ImGuiRenderer(imgui, imgui, imgui, imgui, imgui, imgui, cr, logs, new CrashReportRendererUtilities(cr, logs), () => { });
var renderer = new ImGuiRenderer(imgui, imgui, imgui, imgui, imgui, imgui, cr, logs, new CrashReportRendererUtilities(cr, logs), () => { });
return renderer;
}

private static IntPtr CreateWindow(ReadOnlySpan<byte> title, int width, int height)
Expand Down
104 changes: 104 additions & 0 deletions src/BUTR.CrashReport.Renderer.ImGui.WASM/wwwroot/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
:root {
--bg-color: #f5f5f5;
--text-color: #000;
--progress-bg: rgba(0, 0, 0, 0.1);
--progress-gradient: linear-gradient(to right, #007bff, #00d4ff);
--progress-text: #fff;
--file-name-color: #333;
--motivational-text: #555;
}

@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1e1e1e;
--text-color: #fff;
--progress-bg: rgba(255, 255, 255, 0.1);
--progress-gradient: linear-gradient(to right, #66b3ff, #33c1ff);
--progress-text: #000;
--file-name-color: #ccc;
--motivational-text: #aaa;
}
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
text-align: center;
}

.progress-bar-container {
position: relative;
width: 80%;
max-width: 400px;
height: 30px;
background-color: var(--progress-bg);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-top: 1rem;
display: block;
transition: opacity 0.5s ease;
}

.progress-bar {
height: 100%;
width: 0;
background: var(--progress-gradient);
transition: width 0.3s ease-in-out;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--progress-text);
font-weight: bold;
font-size: 0.9rem;
}

.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-color);
font-weight: bold;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}

.file-name {
font-size: 0.9rem;
font-family: monospace;
color: var(--file-name-color);
text-align: center;
margin-top: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.motivational-text {
font-size: 0.9rem;
font-style: italic;
color: var(--motivational-text);
text-align: center;
margin-top: 0.5rem;
}

html,
body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
overflow: hidden;
display: block;
}
130 changes: 9 additions & 121 deletions src/BUTR.CrashReport.Renderer.ImGui.WASM/wwwroot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,132 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTR Crash Report</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">

<style>
/* Flex container for centering */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: transparent; /* No background change */
color: #000; /* Default text color */
font-family: Arial, sans-serif;
text-align: center;
}

/* Spinner */
.spinner {
width: 3rem;
height: 3rem;
border: 0.4rem solid rgba(0, 0, 0, 0.1);
border-top: 0.4rem solid #007bff; /* Blue color for the spinner */
border-radius: 50%;
animation: spin 1s linear infinite;
display: none; /* Hidden initially */
margin-top: 1rem;
transition: opacity 0.5s ease; /* Smooth fade-in */
}

/* Progress bar container */
.progress-bar-container {
width: 80%;
max-width: 400px;
height: 30px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-top: 1rem;
display: block;
transition: opacity 0.5s ease; /* Smooth fade-out */
}

/* Progress bar */
.progress-bar {
height: 100%;
width: 0%; /* Starts at 0% */
background: linear-gradient(to right, #007bff, #00d4ff); /* Gradient for progress */
transition: width 0.3s ease-in-out; /* Smooth progress animation */
position: relative;
display: flex;
align-items: center; /* Center text vertically */
justify-content: center; /* Center text horizontally */
color: #fff;
font-weight: bold;
font-size: 0.9rem;
}

/* Progress label */
.progress-label {
position: absolute;
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* File name */
.file-name {
font-size: 0.9rem;
font-family: monospace;
color: #333;
text-align: center;
margin-top: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Motivational text */
.motivational-text {
font-size: 0.9rem;
font-style: italic;
color: #555;
text-align: center;
margin-top: 0.5rem;
}

/* Spinner rotation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* Accessibility focus outlines */
.progress-bar-container:focus {
outline: 2px solid #007bff; /* Focus outline for accessibility */
}

html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
/* Disable scrollbars */
display: block;
/* No floating content on sides */
}

</style>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app" >
<div id="input-container" class="container" style="display: none;">
<label for="url-input">Enter a Crash Report URL</label>
<input id="url-input" type="url" placeholder="Enter Crash Report URL here" required style="width: 80%; padding: 10px; margin: 10px;">
<button id="submit-button" style="padding: 10px 20px; font-size: 16px;">Submit</button>
</div>
<div id="loader" class="container">
<div id="spinner" class="spinner" role="status" aria-label="Loading, please wait"></div>
<div id="progress-bar-container" class="progress-bar-container" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Loading progress">
<div id="progress-bar" class="progress-bar">
<span id="progress-label" class="progress-label">Downloading 0/0</span>
</div>
<div id="progress-bar" class="progress-bar"></div>
<span id="progress-label" class="progress-label">Downloading 0/0</span>
</div>
<div id="file-name" class="file-name">File name will appear here...</div>
<div id="motivational-text" class="motivational-text">Hang tight, preparing magic...</div>
Expand All @@ -140,6 +28,6 @@
</canvas>
</div>

<script type='module' src="./main.js"></script>
<script type='module' src="./js/init.js"></script>
</body>
</html>
33 changes: 33 additions & 0 deletions src/BUTR.CrashReport.Renderer.ImGui.WASM/wwwroot/js/init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { initializeModule } from './main.js'

const onDOMContentLoaded = async () => {
const inputContainer = document.getElementById('input-container');
const loader = document.getElementById('loader');
const submitButton = document.getElementById('submit-button');
const urlInput = document.getElementById('url-input');

const urlParams = new URLSearchParams(window.location.search);
const arg = urlParams.get('arg');

if (arg) {
document.removeEventListener('DOMContentLoaded', onDOMContentLoaded, false);
await initializeModule(arg);
return;
}

inputContainer.style.display = 'flex';
loader.style.display = 'none';

const onClick = () => {
const userInput = urlInput.value.trim();
if (userInput) {
submitButton.removeEventListener('click', onClick);
window.location.search = `?arg=${encodeURIComponent(userInput)}`;
} else {
alert('Please enter a valid URL.');
}
}
submitButton.addEventListener('click', onClick);
};

document.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
Loading

0 comments on commit b172d3c

Please sign in to comment.