qdot / syncydink

A web based video player that supports multiple viewing modes, haptic formats, and output devices
http://buttplug.world/syncydink
BSD 3-Clause "New" or "Revised" License
21 stars 20 forks source link

Feature/haptics updates #83

Open greenyouse opened 3 years ago

greenyouse commented 3 years ago

Hi, this PR handles #64 , some of #51, and has a few smaller UI enhancements.

There are a couple screenshots for the HTML file warning showing what it looks like for mobile and desktop in #64. It could be extended to handle other file types too.

It was hard to understand what the haptics buttons were for so I added HTML title attributes to them. After hovering for a couple seconds the title message will be displayed to inform the user what the button does. Here's a screenshot of that in action with a new button.

New Buttons

I noticed that when the video was paused multiple haptic nodes could be added to the same X coordinate on the line graph display. Since only one value can actually be set for any point in time I changed this so it clears existing values at that point before setting a new one. The time was in milliseconds so I made the window for each point 999ms but that could be shrunk down to something smaller. I wasn't sure how fast devices could move so I just left it at that, it should be easy to bump the window size down to 100ms or 250ms though.

Deletion of haptic nodes was added through a hotkey. When the graph playhead is within 999ms of a haptics node, that node gets deleted from the graph. It uses the Mousetrap library since that was already being used.

The ticks on the x-axis label of the graph were a bit scrunched together which could make it hard to read. I dropped the number of ticks down from 50 to 25 to give the tick labels more space. Before: Before Haptics

After: After Haptics

A file export option was also added to save the current haptics commands to a Funscript file. There's a new export button for this on the haptics button area in the lower left. Clicking it will pop a modal with a download link to the file. To generate the file it basically does the opposite of what haptic-movie-file-reader does and saves that to an object. Then the object is put into a Blob and linked to from the download button in the modal. If no commands are loaded yet it will throw this error to make it obvious:

Export Error

Here's what the export modal looks like in action:

Export File