Tools VidGrid-HTML - Customizable video thumbnail grids in the browser

Well, 😌 I can't get it. I'm trying on desktop to do it, I can't unfortunately. Not a big deal ofc. I split the cells evenly, in two files, and they still output the same exact frames. I'm sorta giving up because I can't explain it well enough. Either way, ty much, I use the tool often nevertheless
 
RevvingUpkj Unless there's an issue with the video itself (it can be possible, some video format are not very well supported, especially in mobile browsers), I can't seem to reproduce your issue.
I've just tested it on Chrome mobile on Android:
1. Load a file
2. Load the same file again (so two are in the queue)
3. Edit the timestamps on the first file in queue, place all the timestamps in the first half of the video, save them
4. Edit the timestamps on the second file in the queue, place timestamps in the second half, save them
5. Start processing.
Gives me two different output:


I didn't do 48 cells, but I doubt it would be different. Note that you HAVE TO specify all the markers, if you only specify some of them, the missing one are auto-filled and are picked from the default ones starting at the beginning of the file, so maybe that was your problem? If you need only 24 cells in each file, make the grid 24 cells 😅 VidGrid does not support "incomplete" grids, it tells you about the "auto" markers if you save less than the number of expected markers, and the number of markers is in red in the timestamp editor (and the grid layout shows the missing cells):
 
Precisely! This was entirely it. I wasnt filling in the other markers. Therefore, it started at the beginning of the file, making the two outputs the same. Ty tons for this explanation. I know now how to make the two separate files with different markers; with the same amount of cells.
So! Ok! Would it be possible to automate any of this? Maybe, if possible, make the other cells, automate fill? So, if I have 12 cells, to have it automatically fill those up to the point of the final timestamp or final marker? This way, I can make another file with auto fill markers, with another part of the video? I think this would be a neat change!
Either way, ty for the explanation, I can now make separate files with separate markers. Ty again with explanations, and the tool.
 
RevvingUpkj Can you explain again why you can't do your 48 cells files all at once? I don't get what you mean by the thumbnails being "crunched up". Making two files, if the number of columns is the same doesn't change the size of the thumbnails, the "Output Width (px)" value is divided by the number of columns... so maybe do less columns and more rows? You'll get larger individual thumbnails.
I'm looking at your posts and frankly the thumbnails seem fairly normal and large enough (I see few 30-35 cells ones, if I open them at 100% zoom the quality is great). You've increased the output width to 3840px, but you can go higher if you want too, you just need to input the number in the text field... same for the number of columns/rows, the range/slider is only "soft limited" (for the most common values people use), you can input larger values.
Otherwise I'm not quite sure how I could automate what you want without disrupting the normal use cases (in 1 file), the timestamp editor interface is already very loaded, I don't want to add more buttons/make it more complicated, especially for mobile.
 
ah, im absolutely not explaining myself correctly. we're on totally different pages now. I apologize. i dont know how to explain it anymore. but its ok, ty a lot for trying.
 
I tried getting the point, i maybe wrong, but let me explain what i have understood.
You need to have 2 different sheets one for 1st half, other for 2nd half.
-
A better & easier solution could be, generating a single sheet with double the resolution & cut the pic into equal halves using any software which might be available in the internet i believe.
-
And, I have tried myself to do what you exactly wanted, & i could understand why its difficult,
We currently don't have an option for the engine to generate equally spaced timestamps for a segment of video. So its difficult to manually edit the timestamps to mark it at 24 different places.
And another problem i faced while doing so, is, when i accidentally long press a timestamp, it's gone.
I have come up with few solutions which might be helpful for users which could be put into advanced settings inside settings so that the simplicity of the tools remains.
-
1. Let the user choose the segment he wants to generate a sheet. (Like, let him choose the seconds-to-seconds. Like, its a 1200 seconds video, let him choose if he wants the automatic equally spaced timestamps to be generated only for the segment 600-900 seconds. So this gets sorted out easily).
2. The long press deleting the timestamp can be handled easily on desktop. But its difficult to handle in a mobile with crowded elements. So a toggle off button for this in advanced settings would be helpful. So, he can only delete a timestamp by touching "x" from the list.
3. Give a seek by x seconds forward/backward option. So that it will be easy for the users to find the best shot to grab.
Again, this makes the tools complex, so give them all under advanced settings, so that someone who wants it keeps it.
-
I just thought this could be an option to solve this. i have absolutely no idea how much time/efforts it takes to implement these.
I might have phrased the sentences bad, sorry if there is any, totally meant to help make the tool better, as you have been doing great help to this community.
 
Thanks for trying to clarify.
My point exactly. The only difference is you have to images, and tbh I would find it more confusing as someone downloading a video if you present me with two contact sheets for the same video, "is it part 1? where's part 2?". You can use any other tool to cut/copy part of the image and upload each part separately if you really want... even on mobile that's pretty easy, I'm not integrating image handling/editing features for now.

True, and its a relatively advanced/uncommon use case in my opinion... you want to generate a contact sheet for a video, it should showcase the content of that video, not a segment of it. I figure I could build a modal with few options to add a group of markers based on some parameters, with the ability to specify start/end times. I've actually also toyed with the concept of detecting scene changes in the past, but it takes both too much processing time and is relatively unreliable, but giving a range of evenly spaced markers would be easier.

I could add a setting... but it could also be fixed by forcing you to first select the marker on mobile before you can long press it, and maybe adding "Undo" toaster notification after deleting an individual marker. On Desktop the marker removal is done using the mouse right-click, so it's harder to do accidentally/imprecisely.
This feature already exists on Desktop using arrow keys (1 second), with Ctrl (frame by frame) and Shift (5 seconds) as modifiers. I can adds more controls next to the Play button.
Thanks for the feedback, both of you, I will work on the Timestamp editor UI a bit more for the next update.
 
Oh
Ohhh... The seek feature seems cool. Unfortunate that I'm not a desktop user.
Yeah, a undo indicator can do the job i guess, bcos the problem is, while I'm hovering over, if i touched the marker instead of an empty space, it gets deleted without me realising that its deleted. So an undo can do both jobs - giving notice as well as reversing it. Great thought as always
And thanks for always considering every user requests!
 
Minor Version Update, same URL: https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.5.3
Reworked Timestamp Editor UX on mobile and desktop:
  • Better handling of the sizing of the video, grid layout and markers list. On mobile they stack more consistently, scroll down to see them ;-)
  • Marker deletion on mobile requires to select the marker first when using long-press to delete markers.
  • Seeking a specific time by touch/dragging made easier, use the bottom part of the seekbar (the top/marker numbers is used to select markers)
  • New: Seek buttons (1 frame, 1 second, 5 seconds), previously only available with keyboard/mouse wheel.


  • New: When the markers list is empty "Quick Fill" buttons appear to help you add evenly spaced markers over the full duration, the first half or the last half of the video for all the cells.


  • New: Collapsible Grid Layour and Markers list.
This should solve your issues on mobile RevvingUpkj and Yuniqcorn
 
You did it!! Love these additions. The ability to easily add markers to the first and second half, is precisely what I wished for. The option to make two separate outputs with evenly spaced markers!
Thank you! Just to have it as an option is fantastic. To split longer videos, or any, like this, can easily show more of the video in a clean manner. It gives more previews without scrunching more markers into one file. Awesome additon
 
RevvingUpkj No problem, but just to be clear, if you do a 6x8 grid, or 2 times 6x4 (with each half), the thumbnails should be pretty much the same... that's why I didn't really get the difference you were looking for, but I'm glad it that new feature suits your needs. Any feedback is appreciated!
 
Minor Version Update, same URL: https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.6.1
A little bit more love in the Timestamp Editor for the people who love huge grids with many cells... and mobile.
  • New: Remove Marker ("-") button to allow removing the currently selected marker more easily, only enabled when a marker is selected.
  • New: Zoom In / Zoom Out buttons and Overview bar. This allows you to zoom the seekbar timeline from 100% (full view) up to 1000% for precise marker placement when markers are close together. The current zoom percentage is displayed between the buttons.

    timestamp-editor-zoom.mp4.webp

  • More consistent "selected" state colors for each themes.
 
Minor Version Update, same URL: https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.7.0
Goonbox has implemented a "pixel across all frames" and a "total frames" limits for animated images and to make it easier to generate outputs that will be under these (so the upload do not fail) I've added these two information as estimation (before generation) and effective check (after generation).
Note: The Goonbox API is not available yet so uploads still have to be done manually
  • New: Settings in tabs for easier access and addition of the "Animations" tab:






  • New: Animation Details including Total frames and Total pixels across frames, with indicators if these exceed the thresholds setup in the Settings.




 
first of all, great tool. second, has anyone figured out a nice, goonbox compatible animated grid template? i had to really sacrifice quality to make it upload, maybe there's a better way to cut corners?
 
You must log in or register to reply here.
Back
Top