Create Dynamic Elements.md

[7flash]

The script allows to create dynamic elements on the canvas by connecting them with macros functions defined on the same canvas. Here's how:

1. Defining Macros: Start by defining a macro. Connect an arrow from a text element to an output element. The arrow should be labeled with '#' followed by the macro name. The text element should contain your JavaScript function. This connection sets the macro and updates the output element with the current timestamp to indicate that the macro is updated.

2. Connecting Macros: After defining the macro, you can connect it with elements. Use an arrow labeled with '=' followed by the macro's name, and connect it from an input element (or a group of them inside a rectangle) to an output element.

3. Input Elements: Your input elements can be a text, image, or iframe. The script will fetch the corresponding 'text', 'fileId', or 'link' properties from these elements and use them as arguments in the macro function.

4. Executing Macros: Once you've connected all the elements you want to be processed by the macro, you can execute it. Select all the arrows you want to execute or simply select all the elements on the canvas and run the script. It will define and then execute all the macros to update the elements on the canvas.

5. Output Elements: The output of your macro function will reflect in the output elements. These elements can be either an image, text, or iframe. The macro's result gets assigned to these output elements accordingly.

[7flash]

Try out following example.

1. Create input argument as text element: London
2. Create output element placeholder for text: Overcast+16°C
3. Connect input argument to output placeholder with arrow labeled as macros name: =Weather
4. Add another text element: Oil
5. Combine the elements into a group with another script: Box Selected Elements
6. Create output element placeholder for image: any image with dimensions of your choice
7. Attach the group from step 5 to output element from step 6 with arrow labeled: =FindImage

8. Create a text element with function definition accepting location from element created at step 1 and returning result from weather api, attach to timestamp output with arrow labeled: #Weather

async function (location) {
   const weather = await fetch(`https://wttr.in/${location}?format=%C%t`)
       .then(it => it.text());
    return weather;
}

9. Similarly, define another macros: #FindImage

async function (...args) {
    const query = args.join(' ');
    return fetch(`https://api.unsplash.com/photos/random?query=${query}&client_id=VCybaOXtoEfRd2qKJjPgqdnSSaWPi7CR-BC_9H5ydkw`)
        .then(response => response.json())
        .then(data => {
            const url = data.urls.full;
            return url;
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

10. Select all elements on the canvas and click to run the script on pallette.

[7flash]

Attached example file from above:

Drawing 2023-07-29 17.13.49.excalidraw.md

[7flash]

excalidraw/excalidraw#5684

It's ready to review @zsviczian

[7flash]

Second usecase example: Spatial Coding IDE

1. setup helix with proxy server then define #Helix macros

helix-editor/helix#2177 (comment)

function(arg) {
    const prefix = '/home/sevenflash/Code';
    return fetch(`http://localhost:8000/?file=${prefix}/${arg}`).then(it => it.text());
}

2. setup proxy file server then define #Source macros

ztjhz/BetterChatGPT#371 (comment)

function(arg) {
    return fetch(`http://localhost:8080/${arg}`).then(it => it.text());
}

3. get openai key, setup backend server then define #ChatGPT macros

https://github.com/ChatGodSpace/GeneKeysApp/blob/master/src/pages/api/chat.ts

async function ChatGPT(message) {
  const response = await fetch('http://localhost:3000/api/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ message }),
  });

  if (!response.ok) {
    const errorDetails = await response.json();
    console.error('API request failed:', errorDetails);
    return;
  }

  const data = await response.json();
  console.log('Received response from API:', data);
  return data.content;
}

[zsviczian]

Wow! Congratulations! This is really stretching the boundaries of what is possible!
I really like the idea of dynamic elements, however, I wonder how we could do it in a less complicated way. I have to say, I had to read the instructions 3-4 times to be able to execute the steps correctly. BTW, very well done on writing the instructions!

We could store the code in a transparent text element with a specific ID, and build a modal like in

• https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Scribble%20Helper.md
  or in
• https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Select%20Similar%20Elements.md

[louis030195]

@hotkartoffel