scittle

chromalchemy 2022-10-17T16:08:49.125909Z

Scittle is working in Photoshop!


<html>
<head>
  <script src="scittle.js"></script>    
</head>

<body>
  <sp-button id="mybtn">Launch Alert</sp-button>  

  <script type="application/x-scittle">
 
     (def ps (js/require "photoshop"))
    
     (def core (.-core ps))

     (let [el (js/document.getElementById "mybtn")]
       (.addEventListener el "click"
         (fn [e]
           (. core (showAlert "Hello Scittle CLJS!")))))
  
  </script>

</body>
</html>
This is run in the context of a UXP plugin, which is basically a mini web-page, which has access to Photoshop api via “Photoshop” require. Panel has a button, which pops alert. Im not sure if Scittle is usable in a standalone user script context. Haven’t tried Cherry yet, but it might be more suitable for that. Next steps: Try to get https://github.com/babashka/scittle/blob/main/doc/nrepl, and drive actions from my IDE repl. Photoshop says their Chromium runtime supports websockets.

💯 2
🤯 2
borkdude 2022-10-17T16:13:33.107629Z

Hell yeah :)

borkdude 2022-10-17T16:14:39.399469Z

How does this work, photoshop loads html pages?

borkdude 2022-10-17T16:17:53.762899Z

This is exciting :) Do you have a screenshot of photoshop itself?

chromalchemy 2022-10-17T16:21:21.086779Z

chromalchemy 2022-10-17T16:25:01.831489Z

Their newer “UXP” api allows • running standalone js files ◦ (nice fit for squint/cherry). • running a plugin ◦ which has several flavors, ▪︎ basic plugin • a html page context running in a modified Chromium V8. ◦ (nice fit for Scittle) ▪︎ node-style, react.js plugin • (not sure if this surfaces enough to run nbb) ◦ They say this can just run actions (headless, no UI), or use the HTML page context for UI and state management.

borkdude 2022-10-17T16:26:06.820719Z

What does it mean to have "standalone js files"?

borkdude 2022-10-17T16:27:54.894949Z

you can't use JS code in the script tag?

chromalchemy 2022-10-17T16:28:46.414399Z

If I save the Squint JS output from this as a .psjs file.

(ns test)

(def ps (require '"photoshop"))

(. js/ps.core (showAlert "Hello"))
I can just open the script file with Photoshop app (double click), and the action will run in Photoshop. No “plugin”, no “panel” in UI, no retained state, etc.

chromalchemy 2022-10-17T16:30:53.997239Z

JS code can be run in the script tag in the plugin/html context.

borkdude 2022-10-17T16:31:19.589609Z

Does the photoshop API give you access to the filesystem?

borkdude 2022-10-17T16:31:32.818239Z

We could make a SCI runtime that reads a .cljs file from a config directory or so

chromalchemy 2022-10-17T16:32:14.546979Z

> Does the photoshop API give you access to the filesystem? Yes, but I think it is an abstracted wrapper, for security and cross-platform reasons. https://developer.adobe.com/photoshop/uxp/guides/uxp_guide/uxp-misc/file-access/ https://developer.adobe.com/photoshop/uxp/uxp/reference-js/Modules/uxp/Persistent%20File%20Storage/

borkdude 2022-10-17T16:32:42.504069Z

Then the single file approach could also work with SCI

borkdude 2022-10-17T16:33:36.376159Z

similar to what we've done with #joyride which is a VSCode extension which loads .cljs files from user directories

chromalchemy 2022-10-17T16:38:25.321899Z

Cool. Joyride is definitely prior art. It might even be cool to put a code editor it a panel in the Photoshop app for a built-in repl. Regarding SCI, I think I was coming to that realization after contemplating if Scittle could be used for the standalone file script option. I would like to pursue the custom SCI runtime. Ultimately I think I would like to have a stateful user-space for driving the program, so the single-file thing might be more sideline? But single files would definitely be simple to share/distribute! I would think they should be able to call each other too..

chromalchemy 2022-10-17T16:42:46.504489Z

I believe there is another level of CLI based tooling that I need to explore. I will see if nbb will run directly, maybe with different plugin template? They say their stack can use NPM, file access, and such. So that’s beyond the regular browser context…

chromalchemy 2022-10-17T16:50:28.860369Z

Photoshop has a lot of powerful functionality, but a somewhat clunky and inconsistent UI. I am hoping this open-ended Clojure scripting option can make it more fun and productive to use. Forging tighter feedback loops between user intent and visual results on the canvas! Potentially break it out of it’s Adobe monolith mode, and better integrate it into external (mediated?) workflows. And maybe even bring in some of Clojure’s immutability and advanced state management in to Photoshop’s mostly mutable layer stack.

👍 1
chromalchemy 2022-10-17T17:48:45.519899Z

So ultimately I want to invoke cljs->ps/api code from within photoshop (like internal al’acarte scripts,plugin panel UI, and application context hotkeys).. ..and outside of it (external clojure/bb process that has wider scope and more powerful runtime)