Merge pull request #33 from MLH-Fellowship/desktop-helper-sample

Create Plugin/Desktop Helper Sample

Author: kerrishotts

desktop-helper-sample/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+build/

desktop-helper-sample/README.md

@@ -0,0 +1,87 @@
+# Desktop Helper Example
+
+This sample has two components, a UXP plugin and an Electron application built in React.
+
+For developers who have used `create-react-app` before, the folder structure and tools used in the Electron application will be familiar.
+
+Both components must be running for the example to work correctly.
+
+# Configuration
+
+The following steps will help you load the plugin into Photoshop and get the Electron app up and running.
+
+## UXP Plugin
+
+### 1. Install Node.js dependencies
+
+```
+$ cd uxp
+$ yarn install   # or npm install
+```
+
+### 2. Run plugin in watch or build mode
+
+```
+$ cd uxp
+$ yarn watch     # or npm run watch
+
+# OR
+
+$ yarn build     # or npm run build
+```
+
+- `yarn watch` or `npm run watch` will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in `uxp/dist`.
+- `yarn build` or `npm run build` will build a production version of the plugin and place it in `uxp/dist`. It will not update every time you make a change to the source files.
+
+> You **must** run either `watch` or `build` prior to trying to use within Photoshop!
+
+## Electron Helper
+
+### 1. Install Node.js dependencies
+
+```
+$ cd helper
+$ yarn install   # or npm install
+```
+
+### 2. Run helper app
+
+```
+$ cd helper
+$ yarn start
+```
+
+### 3. (Optional) Build the helper app
+
+```
+$ cd helper
+$ yarn build
+```
+
+**Warning:** This command will take quite some time to execute.
+
+In Electron, production builds compile JavaScript into a binary executable on the target platform for distribution or personal use. It is recommended that you build for production when you finish development.
+
+Once built, navigate to the `helper/dist` folder and double click the `UXP Helper App Setup 1.0.0` installer. Upon installation, the helper app can be run locally. Please note, the Electron project will have to be rebuilt and reinstalled for any future changes to take effect in production.
+
+# Load the Plugin
+
+You can use the UXP Developer Tools to load the plugin into Photoshop.
+
+If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin..." and selecting `uxp/dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `uxp/plugin` folder.
+
+Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the sample panel.
+
+# Using the Plugin
+
+This plugin uses an embedded websocket server to communicate between the Electron helper app and UXP.
+
+Files for the server and electron configuration are located in the `helper/public` folder and are served as entrypoints for Electron on build.
+
+Once both components are launched, you should be greeted with `'Connected'` status' on both components. If one component disconnects, the other will automatically recognize this disconnect as well, and the changes should be reflected with a `'Disconnected'` status.
+
+![Plugin Screenshot](./images/connection.png)
+
+Since it's an embedded server, its worth noting that this only runs on `localhost` and only administers communication between a single instance of the helper app and the UXP plugin. By default, the websocket server runs on port `4040` and the Electron helper app is served from port `3000`.
+
+Other than connecting with one another, the two components can also pass strings of text which get reflected in their `Received data from the helper` and `Received data from UXP` sections.

desktop-helper-sample/helper/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "com.adobe.example.desktop-helper-app",
+  "version": "1.0.0",
+  "license": "none",
+  "private": true,
+  "main": "public/electron.js",
+  "homepage": "./",
+  "scripts": {
+    "start": "concurrently -k \"npm:start:react\" \"npm:start:electron\"",
+    "start:react": "cross-env BROWSER=none react-scripts start",
+    "start:electron": "wait-on tcp:3000 && electron public/electron.js",
+    "build": "npm run build:react && npm run build:electron",
+    "build:react": "react-scripts build",
+    "build:electron": "electron-builder",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "@adobe/react-spectrum": "^3.11.2",
+    "concurrently": "^6.2.0",
+    "cross-env": "^7.0.3",
+    "electron": "^13.1.6",
+    "electron-builder": "^22.11.7",
+    "wait-on": "^6.0.0"
+  },
+  "dependencies": {
+    "electron-is-dev": "^2.0.0",
+    "express": "^4.17.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "socket.io": "^4.1.2",
+    "socket.io-client": "^4.1.3"
+  },
+  "build": {
+    "appId": "com.electron.adobe.example.desktop-helper-sample",
+    "productName": "UXP Helper App",
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg"
+      ]
+    },
+    "win": {
+      "asar": false,
+      "target": [
+        "nsis"
+      ]
+    },
+    "directories": {
+      "output": "dist"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

desktop-helper-sample/helper/public/electron.js

@@ -0,0 +1,42 @@
+const { app, BrowserWindow } = require('electron');
+const isDevelopment = require('electron-is-dev');
+const path = require('path');
+
+require('./server.js');
+
+const createWindow = () => {
+  const window = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  // Configure electron development environment
+  window.loadURL(
+    isDevelopment
+      ? 'http://localhost:3000'
+      : `file://${path.join(__dirname, '../build/index.html')}`
+  );
+
+  if (isDevelopment) {
+    window.webContents.openDevTools({
+      mode: 'detach',
+    });
+  }
+};
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});

desktop-helper-sample/helper/public/favicon.ico

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="UXP Helper App" />
+    <title>UXP Helper</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

desktop-helper-sample/helper/public/index.html

@@ -0,0 +1,57 @@
+const http = require('http');
+const express = require('express');
+const { Server } = require('socket.io');
+
+const startServer = async () => {
+  const port = 4040;
+
+  const app = express();
+
+  const server = http.createServer(app);
+
+  const io = new Server(server, {
+    cors: {
+      origin: '*',
+      methods: ['GET'],
+      transports: ['websocket'],
+    },
+  });
+
+  server.listen(port, () => {
+    console.log(`[server] Server listening on port ${port}`);
+  });
+
+  io.on('connection', (socket) => {
+    io.emit('server-connection', true);
+
+    socket.on('uxp-connected', () => {
+      io.emit('uxp-connected', true);
+    });
+
+    socket.on('message', (message) => {
+      io.emit('uxp-message', message);
+    });
+
+    socket.on('helper-message', (message) => {
+      io.emit('message', message);
+    });
+
+    socket.on('disconnect', () => {
+      io.emit('uxp-connected', false);
+    });
+  });
+
+  // Emit connect when uxp attempts to reconnect
+  io.on('reconnect', () => {
+    io.emit('server-connection', true);
+  });
+
+  // Emit disconnect when helper app closes
+  process.on('exit', () => {
+    io.emit('server-connection', false);
+  });
+};
+
+startServer().catch((err) => {
+  console.log(`[server] Error: ${err}`);
+});

desktop-helper-sample/helper/public/server.js

@@ -0,0 +1,25 @@
+import { Flex, Heading, Text } from '@adobe/react-spectrum';
+
+import OptionsMenu from './components/OptionsMenu';
+
+const App = () => {
+  return (
+    <Flex
+      direction="column"
+      gap="size-100"
+      alignItems="center"
+      justifyContent="center"
+      height="100vh"
+    >
+      <Heading level={2} marginBottom={-2}>
+        Welcome to the UXP Helper App
+      </Heading>
+      <Text marginBottom={8}>
+        <i>To start, load the UXP plugin into Photoshop and send a message</i>
+      </Text>
+      <OptionsMenu />
+    </Flex>
+  );
+};
+
+export default App;

desktop-helper-sample/helper/src/App.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {
+  Button,
+  Flex,
+  Item,
+  StatusLight,
+  Tabs,
+  TabList,
+  TabPanels,
+  Text,
+  TextField,
+} from '@adobe/react-spectrum';
+
+import TextContainer from './TextContainer';
+import { SocketContext } from './SocketContext';
+
+const OptionsMenu = () => {
+  const socket = useContext(SocketContext);
+
+  const [connectionStatus, setConnectionStatus] = useState(false);
+  const [helperData, setHelperData] = useState('');
+  const [uxpData, setUXPData] = useState('');
+
+  useEffect(() => {
+    socket.on('uxp-connected', (isUXPConnected) => {
+      setConnectionStatus(isUXPConnected);
+    });
+
+    socket.on('uxp-message', (receivedMessage) => {
+      setUXPData(receivedMessage);
+    });
+  }, []);
+
+  const sendHelperData = () => {
+    socket.emit('helper-message', helperData);
+  };
+
+  let connectionStatusLight = (
+    <StatusLight variant="negative">Disconnected</StatusLight>
+  );
+
+  if (connectionStatus) {
+    connectionStatusLight = (
+      <StatusLight variant="positive">Connected</StatusLight>
+    );
+  }
+
+  return (
+    <Flex width="size-6000" height="size-8000">
+      <Tabs aria-label="UXP Helper Options">
+        <TabList>
+          <Item key="status">UXP Status</Item>
+          <Item key="data">Send data to UXP</Item>
+          <Item key="log">Received data from UXP</Item>
+        </TabList>
+        <TabPanels marginX={4} marginY={16}>
+          <Item key="status">
+            <TextContainer>{connectionStatusLight}</TextContainer>
+          </Item>
+          <Item key="data">
+            <TextField
+              aria-label="Send data to UXP"
+              placeholder="Enter data to be sent"
+              onChange={(s) => setHelperData(s)}
+            ></TextField>
+            <Button variant="cta" marginX={16} onPress={() => sendHelperData()}>
+              Send
+            </Button>
+          </Item>
+          <Item key="log">
+            <TextContainer>
+              <Text>
+                {uxpData === ''
+                  ? 'Messages from UXP will appear here'
+                  : uxpData}
+              </Text>
+            </TextContainer>
+          </Item>
+        </TabPanels>
+      </Tabs>
+    </Flex>
+  );
+};
+
+export default OptionsMenu;

desktop-helper-sample/helper/src/components/OptionsMenu.jsx

@@ -0,0 +1,8 @@
+import React, { createContext } from 'react';
+import io from 'socket.io-client';
+
+export const socket = io('http://localhost:4040', {
+  transports: ['websocket'],
+});
+
+export const SocketContext = createContext();