membrane

https://github.com/phronmophobic/membrane
genekim 2020-08-29T00:01:34.135900Z

wild. (believe it or not, that’s not a word I use a lot… finding myself saying that a LOT in our interactions. hahahaha)

phronmophobic 2020-08-29T00:01:48.136100Z

let me know if you experience any performance issues

phronmophobic 2020-08-29T00:02:43.137300Z

one of the cool things about clojurizing a design is that, in my experience, using pure functions and values gives you design flexibility

genekim 2020-08-29T00:03:04.138100Z

roger that! oh, one last question… what is best way to get the dimensions of the window, to best calculate the sizes of left/right, height/width of the panes?

phronmophobic 2020-08-29T00:04:20.139100Z

here's an example with 1000's of hoverable items. it uses an RTree rather than the default mouse-move handler, https://blog.phronemophobic.com/treemap/images/hover-keypath-shrunk.gif

phronmophobic 2020-08-29T00:05:58.140200Z

someone else was requesting getting the window dimensions, https://github.com/phronmophobic/membrane/issues/2

(def window-size (atom [400 400]))
(defn -reshape [window window-handle width height]
  (try
    (let [[xscale yscale :as content-scale] (skia/get-window-content-scale-size window-handle)
          width (/ width xscale)
          height (/ height yscale)]
      (reset! window-size [width height]))
    (catch Exception e
      (println e))
    (finally
      (skia/-reshape window window-handle width height))))

;; need to provide a `reshape` handler
(comment
  ;; run use the following
  (let [[window-width window-height] @window-size]
    (skia/run #(counter @window-size @counter-state)
      {:handlers {:reshape -reshape}
       :window-start-width window-width
       :window-start-height window-height})))

genekim 2020-08-29T00:06:12.140800Z

HEY! I read that blog article in my RSS reader! I loved it! I had no idea you wrote it! So cool!!!

😁 1
phronmophobic 2020-08-29T00:06:37.141100Z

I think the above snippet is the relevant bit

phronmophobic 2020-08-29T00:08:44.142500Z

the only part that would be different for you is instead of #(counter @window-size @counter-state), you would have something like #(memframe/re-frame-app (todo-app))

genekim 2020-08-29T00:10:17.144200Z

Hahaha. I remember reading that article, marveling at the UI, wondering how the author built it. And I was just about to ask you, as you talk about your design goals, I’d love to understand what in the world you’re writing that would cause you to rewrite your own UI framework, almost from scratch. So hilarious that both questions are now somewhat answered. Cool, I’ll give that a shot…. Maybe tonight. Gotta go feed kids. Thanks for all the hand holding. I’ll write an experience report, as well, to put in an issue and sample program.

phronmophobic 2020-08-29T00:11:14.144700Z

thanks so much for plowing through all the rough edges!

phronmophobic 2020-08-29T00:14:00.146400Z

the goal is to build something like http://worrydream.com/DrawingDynamicVisualizationsTalkAddendum/ , except instead of dynamic drawings, building actual dynamic user interfaces. Bret Victor doesn't talk about how to do event handling, so that's an area I've been working on.

genekim 2020-08-29T03:50:09.148300Z

Bret Victor! Amazing! I love that lecture he did in Portland five years ago — https://www.youtube.com/watch?v=agOdP2Bmieg. I haven’t watched that video in years, but I remember being blown away when I first watched it. I’lll watch in again tonight. After I get search and selection working in app. 🙂

genekim 2020-08-29T05:19:16.149Z

@smith.adriane First time I’ve made an animated GIF — shows clicking to select, as well as using j/k to select. Next up: search! 🙂

🦜 1
genekim 2020-08-29T05:20:18.149300Z

genekim 2020-08-29T05:22:41.149900Z

(Just realized I cut the portion with the scrolling — I’ll post another one when I get search working. 🙂

phronmophobic 2020-08-29T05:58:40.150300Z

very cool!

phronmophobic 2020-08-29T06:00:14.150400Z

it's been a while since I've watched his series of talks. I'll have to go through them again

phronmophobic 2020-08-29T06:01:48.151200Z

fyi, this is the script I've been using for making gifs from mov files:

f="demo1.mov"
ffmpeg -i "$f" -filter_complex "setpts=0.25*PTS,split=[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" `basename "$f" .mov`".gif"
the 0.25 in the script speeds up the video by 4x

🎉 1
genekim 2020-08-29T06:15:58.151900Z

Awesome!

genekim 2020-08-29T06:16:26.152600Z

And I just got search/filtering working! I’ll post movie in just a second! Thanks for your help!

🎉 1
genekim 2020-08-29T06:27:24.155100Z

Holy cow, this is great! You can see the scrolling strangeness 15s in… filtering at 30s. So fun.. and just in case you can’t tell, I’m super happy that I could build something with utility! (link to 80MB movie in dropbox.). Thanks for all your great work and your help! https://www.dropbox.com/s/dz832r85jxtd90u/demo2.mov?dl=0

genekim 2020-08-29T06:28:28.156Z

Have great night!

phronmophobic 2020-08-29T06:29:08.156500Z

checking it out! have a great night!

genekim 2020-08-29T06:44:16.157800Z

Oh, another potentially far out request: Is it possible to copy/paste text from a scrollview?

phronmophobic 2020-08-29T06:45:07.158100Z

like with text selection or just generally?

genekim 2020-08-29T06:46:16.159200Z

Umm, don’t know? Any way to select text, and then copy to clipboard would be great. (I now recall that I saw copy to clipboard as an event, but no way. to click/drag/select text.)

phronmophobic 2020-08-29T06:48:50.160Z

I haven't built a way to generically select text from labels

genekim 2020-08-29T06:49:42.161100Z

Roger that! (makes one not take all these native UI widgets for granted!!! 😂. Okay, catch you likely over the weekend. Much fun planned!!! 🙂

genekim 2020-08-29T06:49:48.161300Z

Have a great Friday night!

phronmophobic 2020-08-29T06:50:36.162200Z

text selection and copy and paste work in text areas, but not in labels. if you're copying full snippets (like the titles), I've added little copy buttons that just paste to clipboard:

(defn copy-to-clipboard! [s]
  (let [selection (StringSelection. s)
        clipboard (.getSystemClipboard (Toolkit/getDefaultToolkit))]
    (.setContents clipboard selection selection)))

phronmophobic 2020-08-29T06:50:53.162500Z

(:import
   java.awt.Toolkit
   java.awt.datatransfer.StringSelection
   java.awt.datatransfer.Clipboard)

genekim 2020-08-29T06:53:10.164Z

Oh wait. What are the other ways to render text besides ui/label? I might be using the wrong UI widget. (Umm, what is the right term for scrollarea, button, label?)

phronmophobic 2020-08-29T06:54:15.164300Z

all the text rendering uses ui/label

phronmophobic 2020-08-29T06:54:42.164900Z

but there are other views that render text (they use ui/label under the hood) like buttons

genekim 2020-08-29T06:55:35.165400Z

Thx! Roger that. Okay, have a great night! 🎉

phronmophobic 2020-08-29T06:55:45.165600Z

have great night!