Show HN: Drovp – Convenient UI for any drag and drop operations | Hacker News Reader

Show HN: Drovp – Convenient UI for any drag and drop operations

drovp.app

105 pointstomasklaen26 comments

Reminds me a lot of Automator on macOS which I’ve always loved. I’m not on the current OS versions so I haven’t tried shortcuts on mac (I use it on my iPhone sometimes, not as useful though). It’s great seeing more cross platform tools like this!

Congrats on the release!

P.s. obligatory ‘no more electrons in my App folder thanks’ :(

Additionally to Shortcuts, Automator is still present in current macOS. I wish there was way to access Services through the Spotlight (but that would probably made apps like Alfred obsolete).

interesting! I am probably not a precise target audience for this app. My modest batch processing needs are satisfied by Alfred and built in MacOS abilities (including brew CLI).

It might also be a matter of taste but I could not justify another 200Mb Electron app for such low-level tasks. I guess I will stick with "Open terminal here" command for a while!

This is such a visually attractive application.

Sorry if off-topic, but is it possible to create native cross-platform apps that look like this without using electron & co?

I've played around with Qt, and the applications just don't look that good to me. And flutter for Desktop, while promising, just looks like mobile apps on desktop.

Yes you can. I could create something like this with both, most clean interfaces boil down to having a nice font, margins, padding and removing/overriding default os crap (focus outlines, hover effects, ugly borders etc).

Vanilla Qt (no QML) supports a decent subset of CSS(QSS) that can target widgets and objects etc. It's quite a bit of work if you're just getting started but it just comes down to knowing what to override, disable and what can be styled etc. In extreme cases where the native widgets are limiting you can just draw your own. I believe you could recreate about any interface with just Qt.

Three random apps of mine that use Qt and all look different but if you grok the src you can get an idea of what I mean.

1. https://github.com/iKlsR/Markr (https://github.com/iKlsR/Markr/blob/main/src/res/style.qss)

2. https://github.com/iKlsR/Playground

3. https://github.com/iKlsR/SDFSandbox (This one uses custom drawing for the node widgets)

Modern GTK (3 & 4) can be (almost) fully styled with CSS. Whether you could get sufficiently close to the look of Drovp is hard to say. I don't think there are any toolkits you can use that will span desktop and mobile platforms efficiently or effectively, so pick one :)

> just looks like mobile apps on desktop.

It's probably Material Design "looks like mobile apps" on desktop, not Flutter itself.

Flutter gives you all the tools and flexibility to style and design your app as you wish. I'm developing Desktop apps in Flutter for 2 years now and I think it's the best thing that happened to desktop UI development since Qt in early 2000.

Couple of links to check https://github.com/GroovinChip/macos_ui https://github.com/leanflutter/awesome-flutter-desktop

Delphi (expensive) or Lazarus (open source, true native and powerful for Windows, MacOS, Linux and so on)

Cool app. I like the idea of generalizing around a common interface.

It won't open on mac:-|

“Drovp” cannot be opened because the developer cannot be verified. macOS cannot verify that this app is free from malware.

Love this idea and execution, thanks for sharing

Anyone know a good drag and drop solution for JS/HTML? I've been having a hell of a time building a magic the gathering sandbox. I've got a ton of experience building UIs but this turned out to be more complicated than anticipated.

I've got it working smoothly but I am in no way proud of my code. Super brittle. Basically resorted to a pub-sub system that works like so:

1.) mouseDown on a draggable component causes a global onMouseMove handler to be turned on, so that moving your mouse moves the component.

2.) mouseUp fires a drop event through the pubsub system with the data of which card was being dragged.

3.) Various instances of a dropzone component are subscribed to that event, and they compare the coordinates of the event with their own to see if they are where the card was dropped.

4.) If the coordinates match, a call to the server is made adding the card to that location and removing it from its original location.

That's the basic flow. A ton of complexity has arisen around it. I just couldn't find a better way.

Are you not able to use the Drag & Drop API?

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...

No, it's extremely limited. It doesn't really let you properly drag things like you would in a card game - just ghosts of them.

Also note that the default drag and drop API doesn't support touch enabled devices.

I used Dragula[^1] for a form builder in the past and had quit a pleasent experience. Though I don't know how it would hold with a drag centric (card game) UI

[1]: https://bevacqua.github.io/dragula/

I’m a big fan of Uppy @ https://uppy.io. I’m not sure if you’ve given that a spin yet?

It sounds like they're looking for some generic/general drag-drop API; not specifically file uploading.

As far as I've seen, that's really the only way. Maybe with a slight throttle for the onMouseMove handler if the performance isn't great.

I wonder if a different UX would help? Like clicking on a card and clicking on the drop target instead of dragging it? It would be less tactile but also a lot nicer on a trackpad.

In a previous project I needed to customize the look of the "drag ghost", so I set up a global state for <thing being dragged>, and used requestAnimationFrame to move the ghost around with the cursor. Drop-enabled elements would then listen for mouseup and check to see if something was being dragged. Lots of weird edge cases (what if the user moves the cursor off-screen?), so now I recommend using a library like React DnD or Dragula.

I ran into these same issue trying to roll my own solution. The native drag and drop "works", but doesn't let me customize the drag ghost. I ended up using React DnD https://github.com/react-dnd/react-dnd/

https://shopify.github.io/draggable/

Trying to be helpful here: I couldn't understand what the product was from the header and after about 10 seconds of skimming around. I assumed it was a JavaScript library at first.

Maybe try a different heading and add a short paragraph under it to explain more? Text along the lines of "desktop app that automates tasks like X, Y and Z and lets you quickly create your own custom automation flows" would have helped me.

Even after reading the comments here and browsing the site for a few minutes I still had no idea what the fuck this is. I think I have a rough idea now.

I feel like this is a common thread these days: to double-down on the idea that nothing else exists except for $THING_I_CARE_ABOUT.

Be it hackernews and the USA, JavaScript developers and... well, everything.

This almost takes the cake. I've written GUI apps with MFC, Qt, tcltk, Python, GTK, KDE, immediate mode GL and DirectX UI libraries...

I don't write JavaScript, don't use NPM, don't build electron apps, and all this webpage tells me, without even using the words, is to go fuck myself.

edit: I still don't understand what this is.

Reply on news.ycombinator.com