Template changes #27

OpaKnoppi · 2025-10-06T19:32:29Z

No description provided.

pgrit · 2025-10-22T08:56:19Z

SeeSharp.Templates/content/SeeSharp.Blazor.Template/Pages/Experiment.razor

+<style>
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 3.5rem;
+    top: 0.5rem;
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred."
+}
+
+html {
+    font-family: system-ui;
+}
+
+button {
+	background-color: #a4e1f2;
+	border-style: none;
+	/* border-width: 2px;
+	border-color: #245e6f; */
+    color: black;
+	font-size: medium;
+	padding-left: 8px;
+	padding-right: 8px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+}
+    button:hover {
+        background-color: #c9eff4;
+        cursor: pointer;
+    }
+    button:disabled {
+        background-color: #e5f1f5;
+        color: #96b4bd;
+        border-color: #96b4bd;
+    }
+
+.experiment-settings {
+    display: flex;
+    gap: 0.25em;
+    flex-direction: column;
+    float: left;
+    margin-right: 1em;
+    height: 10000px; /*MOD*/
+}
+
+
+.experiment-results {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.compare {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+table {
+    border-collapse: collapse;
+}
+td, th {
+    border: none;
+    padding: 4px;
+}
+tr:hover { background-color: #e7f2f1; }
+th {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    text-align: left;
+    background-color: #4a96af;
+    color: white;
+    font-size: smaller;
+}
+</style>
+


pgrit · 2025-10-22T08:57:28Z

SeeSharp.Blazor/FlipViewer.razor

+        bool AltKey,//MOD *@
+
+        string key,
+        bool isPressedDown,


Suggested change

bool isPressedDown,

bool isPressed,

redundant

pgrit · 2025-10-22T08:57:35Z

SeeSharp.Blazor/FlipViewer.razor

+        @* bool CtrlKey,
+        bool AltKey,//MOD *@


pgrit · 2025-10-22T08:58:04Z

SeeSharp.Blazor/FlipViewer.razor

+        int mouseButtom,
+        bool isButtomDown,


Suggested change

int mouseButtom,

bool isButtomDown,

int mouseButton,

bool isButtonDown,

pgrit · 2025-10-22T08:58:19Z

SeeSharp.Blazor/FlipViewer.razor

+        int deltaY,//MOD
+        int selectedIndex,//MOD
+        string registryKey//MOD


what does //MOD mean?

pgrit · 2025-10-22T08:59:26Z

SeeSharp.Blazor/FlipViewer.razor

+    // IMPORTANT: There is a bool for altKey, but on the React side a wheel event only is fired when alt is pressed, so altKey is more or less redundant
    [JSInvokable]
-    public void _OnFlipClick(int x, int y, _OnFlipClickArgs eventArgs)
+    public void _OnFlipWheel(int deltaY)


Not sure if fwd-ing the wheel is a good idea from a usability perspective. What's the usage scenario?

pgrit · 2025-10-22T09:01:30Z

SeeSharp.Blazor/Scripts.cs

+            // let onKeyUp = null
+            // if (onKeyUpObj && onKeyUpMethodName) {
+            //     onKeyUp = (evt, selectedIdx, keyStr) =>
+            //         onKeyUpObj.invokeMethodAsync(onKeyUpMethodName, { ctrlKey: evt.ctrlKey, altKey: evt.altKey, deltaY: evt.deltaY, selectedIndex: selectedIdx, registryKey: keyStr })
+            // }


Suggested change

// let onKeyUp = null

// if (onKeyUpObj && onKeyUpMethodName) {

// onKeyUp = (evt, selectedIdx, keyStr) =>

// onKeyUpObj.invokeMethodAsync(onKeyUpMethodName, { ctrlKey: evt.ctrlKey, altKey: evt.altKey, deltaY: evt.deltaY, selectedIndex: selectedIdx, registryKey: keyStr })

// }

Seems to me that the current logic to only fwd pressed keys once should suffice for most use cases. So you might want to remove these commented out leftovers everywhere

pgrit · 2025-10-22T09:02:44Z

SeeSharp.Templates/content/SeeSharp.Blazor.Template/Pages/Experiment.razor

+                } *@
+                @* <button @onclick="OnDownloadClick">Download results</button> *@
+            </div>
+            <h3>Compare Example (SVCM, VCM)</h3> 


SVCM might need replacing here?

pgrit · 2025-10-22T09:03:59Z

SeeSharp.Templates/content/SeeSharp.Blazor.Template/Pages/Experiment.razor.cs

+// Only here for the example to show some possibilities
+struct ExampleImageGenerator {
+    public Image rndImage(float strength, int width, int height, bool colored) {
+        Image image = new Image(width, height, 3);
+        RNG rng = new RNG();
+
+        for (int y = 0; y < height; y++) {
+            for (int x = 0; x < width; x++) {
+                if (colored) {
+                    image.SetPixelChannel(x, y, 0, rng.NextFloat(0.5f - strength, 0.5f + strength));
+                    image.SetPixelChannel(x, y, 1, rng.NextFloat(0.5f - strength, 0.5f + strength));
+                    image.SetPixelChannel(x, y, 2, rng.NextFloat(0.5f - strength, 0.5f + strength));
+                } else {
+                    float value = rng.NextFloat(0.5f - strength, 0.5f + strength);
+
+                    image.SetPixelChannel(x, y, 0, value);
+                    image.SetPixelChannel(x, y, 1, value);
+                    image.SetPixelChannel(x, y, 2, value);
+                }
+
+            }
+        }
+
+        return image;
+    }
+}


Not sure if we want this in the template if it has to be removed every time.
We could create a separate example project for this stuff, and trim the template back down to the essentials.

pgrit · 2025-10-22T09:04:48Z

SeeSharp.Templates/content/SeeSharp.Blazor.Template/Pages/Experiment.razor.cs

+struct ListenerState {
+    public ListenerState() { }
+
+    /// <summary>
+    /// The index of the selected image of the current selected flipbook (selected by clicking on it)
+    /// </summary>
+    public int selectedIndex = 0;
+
+    /// <summary>
+    /// Number between 0 and NumSamples. Can be used if data is stored from different iterations
+    /// </summary>
+    public int currIteration = 0;
+
+    public bool altKeyPressed = false;
+    public bool ctrlKeyPressed = false;
+    public int currX = 0;
+    public int currY = 0;
+
+    /// <summary>
+    /// The key of the current flipbook in string form and concatenated with ','
+    /// </summary>
+    public string currFlipKey = "";
+}
+
+/// <summary>
+/// Differences between event type so update methods for flipbooks can ignore events
+/// </summary>
+enum FiredType {
+    Click = 0,
+    Move = 1,
+    Wheel = 2,
+    KeyDown = 4,
+    KeyUp = 8,
+}


looks like this is generic enough to become part of the SeeSharp.Blazor lib rather than cluttering the experiment code

…iment where ListenerStates, Flipbook registry lie in -> Experiment now inherits from BaseExperiment

…nt them

template changes

fe90113

pgrit requested changes Oct 22, 2025

View reviewed changes

OpaKnoppi added 7 commits November 10, 2025 12:52

removed css style out of experiment file as it should be

4fb92d0

removed old comments, isPressedDown -> isPressed

32d06c2

removed old comments, isPressedDown -> isPressed

ccab86d

seperated example experiment and template experiment, added BaseExper…

e750214

…iment where ListenerStates, Flipbook registry lie in -> Experiment now inherits from BaseExperiment

Added example template to see all new features and how to use/impleme…

2a2a421

…nt them

clean up in templates

485227b

adapt template to changes in SSIO

a47a47d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Template changes #27

Template changes #27

Uh oh!

OpaKnoppi commented Oct 6, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

pgrit Oct 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Template changes #27

Are you sure you want to change the base?

Template changes #27

Uh oh!

Conversation

OpaKnoppi commented Oct 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants