GraFx/Genie (#217)

docs/GraFx-Fonts/index.md

@@ -23,4 +23,4 @@ erDiagram
   GraFx-Publisher-Fonts {
   	has fonts
   }  
-```
+```

docs/GraFx-Studio/concepts/actions/index.md

@@ -48,6 +48,6 @@ The second tab in the Trigger popup screen shows the Action editor.
 
 Enter your JavaScript code that should be executed.
 
-![screenshot](actioncode.png)
+![image](actioncode.png)
 
 See further [How to create an action](/GraFx-Studio/guides/actions/create/) and [Intro to writing JavaScript](/GraFx-Studio/guides/actions/javascript/)

docs/GraFx-Studio/concepts/grafx-genie/index.md

@@ -0,0 +1,57 @@
+# GraFx Genie for Actions (experimental)
+
+!!! example "Experimental"
+	To give you early access to the latest and greatest, we will release some features as "**Experimental**". This means you can use them, but the final implementation might change. So don't use this in production.
+
+## Introduction
+
+You need to write an Action, to make your template into a Smart Template.
+
+Challenge: You don't know how to write JavaScript code, to make this happen.
+
+GraFx Genie is your go-to smart assistant for crafting [actions](/GraFx-Studio/guides/actions/create/) to support your templates. 
+
+It's designed to assist you in creating actions, which play a vital role within triggers. See also: [Introduction to Actions](/GraFx-Studio/concepts/actions/)
+
+## Example
+
+You have a retail template. A variable field allows the users of the template to enter a discount percentage.
+When the discount drops below — let's say — 30%, you (as a template designer) want to show an extra asset, to hi-light the steep discount.
+
+![image](template.png)
+
+A variable makes sure a user can change the discount.
+
+![image](variable.png)
+
+Now, let's make an action, that will be triggerd with a variable value changes.
+
+![image](trigger.png)
+
+To create the action, click on the Action tab.
+
+![image](action.png)
+
+You can now ask Genie to write the script for you.
+
+Click on the GraFx Genie icon.
+
+![image](genie-icon.png)
+
+![image](genie1.png)
+
+And ask Genie what functionality you need in your Smart Template
+
+![image](genie2.png)
+
+Genie will now suggest a JavaScript you can use to perform the functionality.
+
+![image](action2.png)
+
+As you see, Genie knows about the context. Without specifiing that discount is a variable name, it will understand and use this information to write the script.
+
+If you're not 100% convinced, you can still tweak the script, or ask a Developer colleague to take a look for the final touches.
+
+The result:
+
+![image](genie-in-action.gif)

mkdocs.yml

@@ -185,6 +185,7 @@ nav:
             - 'Snapping':                       'GraFx-Studio/concepts/snapping/index.md'
             - 'Shapes':                         'GraFx-Studio/concepts/shapes/index.md'
             - 'Actions':                        'GraFx-Studio/concepts/actions/index.md'
+            - 'GraFx Genie':                    'GraFx-Studio/concepts/grafx-genie/index.md'
             - 'Action Helper Functions':        'GraFx-Studio/concepts/helper-functions/index.md'
             - 'Variables':                      'GraFx-Studio/concepts/variables/index.md'
             - 'Crop':                           'GraFx-Studio/concepts/crop/index.md'