Conversation
| <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> | ||
|
|
SeeSharp.Blazor/FlipViewer.razor
Outdated
| bool AltKey,//MOD *@ | ||
|
|
||
| string key, | ||
| bool isPressedDown, |
There was a problem hiding this comment.
| bool isPressedDown, | |
| bool isPressed, |
redundant
SeeSharp.Blazor/FlipViewer.razor
Outdated
| @* bool CtrlKey, | ||
| bool AltKey,//MOD *@ |
SeeSharp.Blazor/FlipViewer.razor
Outdated
| int mouseButtom, | ||
| bool isButtomDown, |
There was a problem hiding this comment.
| int mouseButtom, | |
| bool isButtomDown, | |
| int mouseButton, | |
| bool isButtonDown, |
SeeSharp.Blazor/FlipViewer.razor
Outdated
| int deltaY,//MOD | ||
| int selectedIndex,//MOD | ||
| string registryKey//MOD |
SeeSharp.Blazor/FlipViewer.razor
Outdated
| // 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) |
There was a problem hiding this comment.
Not sure if fwd-ing the wheel is a good idea from a usability perspective. What's the usage scenario?
SeeSharp.Blazor/Scripts.cs
Outdated
| // 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 }) | ||
| // } |
There was a problem hiding this comment.
| // 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
| } *@ | ||
| @* <button @onclick="OnDownloadClick">Download results</button> *@ | ||
| </div> | ||
| <h3>Compare Example (SVCM, VCM)</h3> |
| // 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; | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
| 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, | ||
| } |
There was a problem hiding this comment.
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
No description provided.