|
| 1 | +/** |
| 2 | + * A simple extension that downloads an image and then converts it to grey scale using `sharp` node.js lib via |
| 3 | + * Phoenix Code node.js Extension. Extension can be activated using menu: `file->Download Image & Greyscale`. |
| 4 | + * */ |
| 5 | + |
| 6 | +/*global define, brackets, $ */ |
| 7 | + |
| 8 | +// See detailed docs in https://docs.phcode.dev/api/creating-extensions |
| 9 | +// A good place to look for code examples for extensions: https://github.com/phcode-dev/phoenix/tree/main/src/extensions/default |
| 10 | + |
| 11 | + |
| 12 | +define(function (require, exports, module) { |
| 13 | + "use strict"; |
| 14 | + |
| 15 | + // Brackets modules |
| 16 | + const AppInit = brackets.getModule("utils/AppInit"), |
| 17 | + DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"), |
| 18 | + Dialogs = brackets.getModule("widgets/Dialogs"), |
| 19 | + CommandManager = brackets.getModule("command/CommandManager"), |
| 20 | + Menus = brackets.getModule("command/Menus"), |
| 21 | + NodeConnector = brackets.getModule("NodeConnector"); |
| 22 | + |
| 23 | + let nodeConnector; |
| 24 | + |
| 25 | + async function fetchImage() { |
| 26 | + const imageUrl = "https://picsum.photos/536/354"; |
| 27 | + const response = await fetch(imageUrl); |
| 28 | + |
| 29 | + if (!response.ok) { |
| 30 | + throw new Error( |
| 31 | + `Failed to fetch image (status ${response.status})` |
| 32 | + ); |
| 33 | + } |
| 34 | + |
| 35 | + return response.arrayBuffer(); |
| 36 | + } |
| 37 | + |
| 38 | + // Function to run when the menu item is clicked |
| 39 | + async function handleHelloWorld() { |
| 40 | + if (!Phoenix.isNativeApp) { |
| 41 | + alert("Node Features only works in desktop apps."); |
| 42 | + return; |
| 43 | + } |
| 44 | + let html = "<b>Image conversion failed</b>"; |
| 45 | + try { |
| 46 | + alert("downloading image..."); |
| 47 | + // Fetch the image and get its array buffer |
| 48 | + const imageArrayBuffer = await fetchImage(); |
| 49 | + |
| 50 | + // Call the nodeConnector to convert the image to grayscale |
| 51 | + const { buffer, success } = await nodeConnector.execPeer( |
| 52 | + "convertToGreyScale", |
| 53 | + { imageName: "imageName" }, |
| 54 | + imageArrayBuffer |
| 55 | + ); |
| 56 | + |
| 57 | + if (!success) { |
| 58 | + alert("Image conversion failed in Node."); |
| 59 | + return; |
| 60 | + } |
| 61 | + |
| 62 | + // Construct HTML with the grayscale image array buffer |
| 63 | + // For example, you can use the buffer as a base64 data URL |
| 64 | + html = `<img src="data:image/jpeg;base64,${Buffer.from(buffer).toString("base64")}">`; |
| 65 | + } catch (error) { |
| 66 | + console.error("Error:", error); |
| 67 | + } |
| 68 | + Dialogs.showModalDialog(DefaultDialogs.DIALOG_ID_INFO, "Image to greyscale with node.js", html); |
| 69 | + } |
| 70 | + |
| 71 | + // First, register a command - a UI-less object associating an id to a handler |
| 72 | + var MY_COMMAND_ID = "helloworld.imageConvert"; // package-style naming to avoid collisions |
| 73 | + CommandManager.register("Download Image & Greyscale", MY_COMMAND_ID, handleHelloWorld); |
| 74 | + |
| 75 | + // Then create a menu item bound to the command |
| 76 | + // The label of the menu item is the name we gave the command (see above) |
| 77 | + var menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU); |
| 78 | + menu.addMenuItem(MY_COMMAND_ID); |
| 79 | + |
| 80 | + // We could also add a key binding at the same time: |
| 81 | + //menu.addMenuItem(MY_COMMAND_ID, "Ctrl-Alt-W"); |
| 82 | + // (Note: "Ctrl" is automatically mapped to "Cmd" on Mac) |
| 83 | + |
| 84 | + // Initialize extension once shell is finished initializing. |
| 85 | + AppInit.appReady(function () { |
| 86 | + // nb: Please enable `Debug menu> Phoenix code diagnostic tools> enable detailed logs` to view all console logs.` |
| 87 | + console.log("hello world"); |
| 88 | + |
| 89 | + if (Phoenix.isNativeApp) { |
| 90 | + nodeConnector = NodeConnector.createNodeConnector( |
| 91 | + "your-extension-id-1", |
| 92 | + exports |
| 93 | + ); |
| 94 | + // you can also execute nodejs code in dekstop builds |
| 95 | + // below code will execute the function `echoTest` defined in `node/index.js` |
| 96 | + nodeConnector.execPeer("echoTest", "yo!").then(console.log); |
| 97 | + } |
| 98 | + }); |
| 99 | +}); |
0 commit comments