Misc tweaks/updates to cimbar.js encoder UI #97
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It'll be backspace on keyboard, and on touch event (i.e. only while pressed) on touch devices. Pausing temporarily helps autofocus find the image.
+ add auto-realignment logic for the full-canvas "button"?
We'll then have a short pause during menu toggles (and ontouch on mobile), which should unobtrusively(?) help autofocus
Better? Perhaps. Simpler css, more white (brightness) overall. Grid is rotated 45 degrees since I think it looks better that way.
This lets the blurNav() method fire more consistently, which is what we now want (since we're temporarily pausing animation now)
+ make manual backspace pause additive, so if you want to mash the button and stay paused indefinitely you can
… size The padding is overdue -- it *can* work without the padding, but it really helps to have some quiet (black) padding around all 4 edges of the image. Expanding the canvas to fill the window (rather than capping it to its max size) helps on higher resolution (e.g. 4k) displays.
sz3
commented
Jun 29, 2024
| }, | ||
|
|
||
| resize : function() | ||
| { | ||
| // reset zoom | ||
| var canvas = document.getElementById('canvas'); | ||
| var width = window.innerWidth; | ||
| var height = window.outerHeight; | ||
| var width = window.innerWidth - 12; |
There was a problem hiding this comment.
Magic hardcoded value that (roughly) matches the css border.
sz3
commented
Jun 29, 2024
| if (pause === undefined) { | ||
| pause = !Main.isPaused(); | ||
| } | ||
| _pause = pause? 15 : 0; |
There was a problem hiding this comment.
The 15 is our cooldown frames.
sz3
commented
Jun 29, 2024
| @@ -144,6 +177,9 @@ return { | |||
| _renderTime += elapsed; | |||
| Main.setHTML( "status", elapsed + " : " + frameCount + " : " + Math.ceil(_renderTime/frameCount)); | |||
| } | |||
| if ( !(_counter & 31) ) { | |||
There was a problem hiding this comment.
A bit of a hack -- since we're doing some trickery to make the canvas seem clickable, we need to manually reposition the (absolute positioned) click element if something changes. So we have to check it on an interval.
sz3
commented
Jun 29, 2024
| @@ -194,6 +230,10 @@ window.addEventListener('keydown', function(e) { | |||
| Main.clickNav(); | |||
| e.preventDefault(); | |||
| } | |||
| else if (e.key == 'Backspace' || e.keyCode == 8) { | |||
There was a problem hiding this comment.
You can also pause the animation with backspace if you have a keyboard available (i.e. on desktop).
|
Added 75d6cfb directly to master to fix up the padding (to -10 from -12) and use innerHeight. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A bunch of small stuff: