SVG Text Icons as Tags, an Insertion Script, and a scripting beginner stumbles through

[JJSlote]

Greetings - I’ve known that SVG is a graphics format specified in XML, but I always figured it required specialized editing software or graphic or geometry chops. But it occurred to me the other day that SVG might have a means of displaying text entries. And indeed it does. Here’s an SVG icon about as basic as it gets:

<svg height="40" width="180">
<rect width="300" height="300" fill="#00ffff"  /> 
<text x="10" y="30" fill="navy" font-size="30">Bookmark</text>
</svg>

The simplicity of this spec means that attractive, informative SVG icons can be created spontaneously through string scripting and batch processes. A text-based icon works more like a tag, visibly showcasing some commonality among nodes that may be at a distance from one another, making them easy to sort and filter. At times only text will do for recognition. If we want to visibly identify some nodes as relating to “IA Conf 2019” for example, we need a bespoke icon, not a generic jackrabbit or bullfrog or standard symbol.

Some of that spontaneity will be lost when deploying these icons in Freeplane however, because Freeplane requires a restart before new icons in {userdir}/icons are recognized. So I wanted to create a script that would work around this restriction.

I have experience scripting in AutoHotkey and coding in some legacy languages, but am still a tyro in Groovy and Java. I had to wrestle with almost every line along the way. With thanks to the many folks who helped others with their coding, leaving me a discovery trail, I’m posting the script with a listing of my beginners’ errors and their resolution, to maybe give the next Freeplane scripter a foot forward.

The objective of the script is to enable the user to select the desired icon from the /icons folder, rather than from the table or hierarchy in the UI. It’s based on the “Add Custom Checkbox" script in the User Guide’s Scripting Samples:

Icons - Freeplane Documentation

Here are the beginner’s bumps I encountered in converting this script to one where the icon is selected from a folder:

• I had no difficulty finding and deploying the JFileChooser library. But though the script only reads folder information, it will throw an error unless we grant all the read/write/network/execute/trust checkbox permissions under Preferences/Plugins/Scripting.
• I’d hardcoded the folder from which JFileChooser presents the icons for selection. That would not be clean enough to share. The user folder on c.userDirectory worked ok, except I’d had to navigate to the /Icons subfolder. Concatenation proved unsuccessful. To make it work required:
• Using toString() to copy c.userDirectory to a string field
• Since c.userDirectory is a Windows-formatted path with backslashes, I tried to append \icons to my path string. That didn’t work, but /icons did, and the resulting path, with mixed slashes, was actually accepted as a parm by JFileChooser. But I have my pride and won't live with an improper parm, so:
• I tried to use replace() to convert the backslashes to forward. That didn’t work either at first.
• All praise to someone on Reddit who advised another scripter they needed to escape the backslash!! Almost certainly why my concat didn't work in the first place.
• Used getName() to strip the path from the selected filename.
• Used lastIndexOf('.') to strip the extension, as Freeplane identifies the icon without it.

The script then worked as expected. Here it is:

// @ExecutionModes({ON_SELECTED_NODE})
import javax.swing.JFileChooser
selectfolder = toString(c.userDirectory) 
selectfolder = selectfolder.replace('\\','/')
selectfolder += "/icons"
JFileChooser chooser = new JFileChooser(selectfolder)
chooser.showOpenDialog()
File file = chooser.getSelectedFile()
if ( ! file)
	return
filen = file.getName()
filen = filen.substring(0, filen.lastIndexOf('.'))
c.statusInfo = filen
if (node.icons.icons.contains(filen)) {
    node.icons.remove(filen)
} else {
    node.icons.add(filen)
}

To help construct and verify the icons, I found Smart SVG Viewer version 0.5.0 alpha on github. That worked well, but icons that looked right in the Viewer were out of proportion in Freeplane, and displayed transparently, with no background color. Both these issues had the same root cause. The SVG text spec I’d cribbed from had a font-size denominated in “em”. The background rectangle had width and height at “100%”. Freeplane didn’t recognize these units, possibly because I used no SVG preamble in my simple-as-possible spec. So for a reliable match I elected to:

• Strip units of measure from my SVG. For a background rectangle filling 100% of the icon space, I just used sizes in default units, but larger than the ones in the SVG header.

Now as it turns out, Freeplane will insert a new icon selected through this script. But until we restart Freeplane, with that icon already in the folder, Freeplane won’t display it. It’ll use a placeholder icon instead.

So I wonder whether it might be within a scripter’s capabilities to update Freeplane’s icon table with a newly-created SVG, to spare the restart. (Freeplane recognizes and displays the same new SVG when it’s inserted as an image rather than as an icon.)

Now to actually generate a new SVG icon based on some user text and maybe automate the color selection? I’ll be doing that in AutoHotkey to start, but there’s probably a way to do it in Groovy as well, to streamline the tagging process further.

That's enough for today. Thanks for any thoughts, cautions or enhancements!

Rgds - Jerome

[euu2021]

So, the result that you are trying to achieve is having tags like in Mindmanager? For example:

It sounds interesting.

[JJSlote]

Yep, icons as tags. They're a built-in attribute, and they stack, so they're not mutually exclusive as attribute entries are. And they show up as sortable in the Search and Replace list viewer.

I use Freeplane as an associative database more than as a mindmap. More than 11,000 nodes with links to local files, or tech notes, etc. It's a great engine for meta-data on the PC files I work with most. Since nodes related to one another are often not on the same branch, a tagging system is an alternate means of associating them, and a sortable list is vital. Icons as tags will work splendidly, as long as it's immediately clear what each icon represents, hence text-based SVGs.

[EdoFro]

• Using toString() to copy c.userDirectory to a string field

I think this is not the way you should try to solve this.

you can see that c.userDirectory is a "File" object:

and it has plenty of groovy properties to get the desired path string:

You can use "File.Separator" to match the path separator you need (this shows a different string if in windows, mac or linux, so your script works in any OS)

[EdoFro]

So you can get the icons directory this way:

which is also a File object:

so the first part of your script can be replaced by:

// @ExecutionModes({ON_SELECTED_NODE})
import javax.swing.JFileChooser

def selectfolder = new File(c.userDirectory, 'icons')
JFileChooser chooser = new JFileChooser(selectfolder)
chooser.showOpenDialog()

[EdoFro]

Now as it turns out, Freeplane will insert a new icon selected through this script. But until we restart Freeplane, with that icon already in the folder, Freeplane won’t display it. It’ll use a placeholder icon instead.

So I wonder whether it might be within a scripter’s capabilities to update Freeplane’s icon table with a newly-created SVG, to spare the restart. (Freeplane recognizes and displays the same new SVG when it’s inserted as an image rather than as an icon.)

I tried to make something to solve this but I couldn't.

I tried to get the icons throug the config methods (getIcon() , getIconRessource() and getImageIcon()) to see where the icons are internally stored.

I got to the "svgUniverse" where you can load the new one, but I couldn't get further.

I'm interested in this topic too. I want to know how to load temporary svg data into Freeplane to show it as icon or as attached image to the node. This way you can add diagrams an other dinamic info to a node.

BR

edo

[EdoFro]

I think the difference was the change from:

// @ExecutionModes({ON_SELECTED_NODE})
to
// @ExecutionModes({ON_SINGLE_NODE})

[JJSlote]

I don´t think this is doing much. As far as I know, node and c.selected are always the same.

Pretty sure that's not right. I read in documentation somewhere that c.selected refers to a random single node among those selected, regardless of the iteration that yields node. Can't find the doc segment, but will demonstrate via a test script.

First, though, the mystery of why I needed the c.selected.nodeID comparison is solved. Per the scripting documentation:

Additionally, while changes to script's code are picked up immediately, Freeplane needs to be restarted for @ExecutionModes changes to take effect.

I missed that in testing last evening, so when I switched ExecutionMode to {ON_SINGLE_NODE} the script continued iterating through selected nodes, and it was c.selected.nodeID comparison that prevented repeat execution. This is a beginner's error important and obscure enough to put in a bullet point for the next scripter.

• Must restart Freeplane for a change of @ExecutionModes within a script to be recognized!

Here's a test script to demonstrate that c.selected remains fixed while node iterates through the loop.

// @ExecutionModes({ON_SELECTED_NODE})
import org.freeplane.core.ui.components.UITools
ThisDialogTitle = "c.selected.nodeID: " + c.selected.nodeID + "\n"
ThisDialogTitle += "node.nodeID: " + node.nodeID
ui.informationMessage(ThisDialogTitle)

On my test, the first displayed pair of IDs match; subsequent ones differ.

Rgds - Jerome

[dpolivaev]

I think that dynamic loading of icons by Freeplane requires too many changes because Freeplane creates actions, menu items and toolbar buttons for icons on start and does not expect them to change later.

[JJSlote]

Hi Dimitry - Indeed, I can imagine all the dependencies that have been established mid-run. Preference changes also typically require a quit and restart to take effect. Could a menu command that leaves Freeplane loaded, but that clears and re-initializes its tables as a restart would, be a feasible alternative?

Rgds - Jerome

[dpolivaev]

Everything is possible but some things are harder than others

[euu2021]

If possible, please publish your Autohotkey scripts that are useful to be used with Freeplane. It may be helpful for the people.

[JJSlote]

If possible, please publish your Autohotkey scripts that are useful to be used with Freeplane. It may be helpful for the people.

Thanks, euu, but this script is definitely not ready yet. Its logic is flawed. The user probably doesn't want to toggle the icon in selected nodes. They more likely want to insert or remove the icon in all of them alike. Repairing right now.

[EdoFro]

Thanks for the streamlining hint with the native method for the class FILE, and for pointing us to the add-on you’ve created to track a script's classes, variables and properties. Just discovering its capabilities; clear it’ll be a supremely useful scripting tool.

Yes, it's a great tool.
You can also use it, when using other IDEs like Intellij Idea, to easily test the scripts in Freeplane.
I like to store my scripts in the mindmaps and not as files. It's easier for me to find and organize them.

I didn't create it, it's a standard tool in Groovy, that I adapted to work with the new versions of Freeplane and added a few new features.

[JJSlote]

I think the difference was the change from:
// @ExecutionModes({ON_SELECTED_NODE}) to // @ExecutionModes({ON_SINGLE_NODE})

Thanks, Edo, looks like you're absolutely right. That seemed the most intuitive approach when I was testing, but for whatever reason I couldn't get the script not to iterate until the c.selected test. Fixed, and I'm also now working off a copied snapshot of the selected list as you suggested.

• Comparing node.nodeID with c.selected.nodeID superfluous with @ExecutionModes({ON_SINGLE_NODE}) removed h/t Edo
• Defined a static list selected from potentially dynamic list c.selecteds h/t Edo
• Modified logic to remove the icon only if all selected nodes contain it. Otherwise add it where absent. Preliminary each loop to establish counter NodesContainingIcon.
• Added confirmation dialog (based on Simple Yes/No Question script sample )

Presenting Version 3:

// @ExecutionModes({ON_SINGLE_NODE})
import javax.swing.JFileChooser
import org.freeplane.core.ui.components.UITools
def selected = [] + c.selecteds
def selectfolder = new File(c.userDirectory, 'icons')
JFileChooser chooser = new JFileChooser(selectfolder)
ThisDialogTitle = selected.size() + " node(s) selected. Choose icon:" 
chooser.setDialogTitle(ThisDialogTitle)
chooser.showOpenDialog()
File file = chooser.getSelectedFile()
if ( ! file)
	return
filen = file.getName()
filen = filen.substring(0, filen.lastIndexOf('.'))

NodesContainingIcon = 0
selected.each {
if (it.icons.icons.contains(filen)) {
NodesContainingIcon ++ 
}
}

// Make dialog
ThisDialogTitle = NodesContainingIcon + " nodes contain icon " + filen + " of " + selected.size() + " node(s) selected. \n" 

if (!NodesContainingIcon) {
ThisDialogTitle += "Adding to All Selected Nodes."
}
else 
if ((NodesContainingIcon) != (selected.size())) {
ThisDialogTitle += "Adding to Remaining Selected Nodes."
}
else {
ThisDialogTitle += "Removing from All Selected Nodes."
}

def result = UITools.showConfirmDialog(node.delegate, ThisDialogTitle, "Confirm icon update",0)
if (result)
 return

selected.each {
if ((NodesContainingIcon) == (selected.size())) {
    it.icons.remove(filen)
}
else if (!it.icons.icons.contains(filen)) {
    it.icons.add(filen)
}
}

Rgds - Jerome

[euu2021]

I'm imagining a tag system.

How it looks like:

• user wants to add the tag "melon" to a node
• user activates the script
• a textbox GUI shows up
• user starts typing "me", and all the currently existing tags with "me" are suggested
• The tag "melon" still doesn't exist, so the user types "melon" and press enter. An icon with the text melon is added to the node.

How it works:

• the PC has a folder called "mytags", with an svg file for each tag. There is also a template svg.
• when the user activates the script, it goes though all the svgs collecting the text of each one into a list
• this list is used to populate the text box GUI
• if the user creates a new tag (like the "melon" example above), the script creates a new svg by copying the svg template, changes the text to "melon", changes background, and adds to the node

This script, for example, changes the text of the svg from "aaa" to "bbb":

import java.nio.file.Files
import java.nio.file.Paths
import java.nio.file.StandardOpenOption

def path = "C:/myfolder/mysvg.svg"

try {
    // Read the content of the file
    String content = new String(Files.readAllBytes(Paths.get(path)))

    // Replace all occurrences of 'aaa' with 'bbb'
    content = content.replaceAll("aaa", "bbb")

    // Write the updated content back to the file
    Files.write(Paths.get(path), content.getBytes(), StandardOpenOption.WRITE)
    println "File updated successfully"
} catch (Exception e) {
    println "An error occurred: ${e.message}"
}

[euu2021]

Going one step ahead:

With this script, the user can type the name of the tag and the svg is created from the template, and added as icon:

import javax.swing.JOptionPane
import java.nio.file.Files
import java.nio.file.Paths

// Define the directory and template file
def folderPath = "C:/myfolder"
def templateFile = "templateSVG.svg"
def templateFilePath = Paths.get(folderPath, templateFile)

// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    new File(filePath).write(fileContent)
}

// Show input dialog to get the tag from the user
def tag = JOptionPane.showInputDialog(null, "Enter the tag name")

if (tag) {
    // Create the new file name and path
    def newFileName = tag + ".svg"
    def newFilePath = Paths.get(folderPath, newFileName)

    // Copy the template file to the new file
    Files.copy(templateFilePath, newFilePath)

    // Replace the placeholder text with the tag
    replaceTextInFile(newFilePath.toString(), "templateText", tag)

    def newFile = new File(newFilePath.toString())
    filen = newFile.getName()
    filen = filen.substring(0, filen.lastIndexOf('.'))
    c.statusInfo = filen
    if (node.icons.icons.contains(filen)) {
        node.icons.remove(filen)
    } else {
        node.icons.add(filen)
    }

}

I used the first, more simple version of your script, just to make a simple example. The improved version would work better.

[JJSlote]

Hi euu, this is going to be awesome. Will reemerge when I can, probably after the weekend. My ambitions for the SVGs, at least when I get to 'em in AHK, are:

• Random hex for the background color
• Contrasting monochrome hex color for the text
• Trim the icon length to the length of the tag word
• Reduce text size or wrap for a verbose tag

Thanks all for your collective expertise!!
Rgds - Jerome

[Illegit]

Hi All I tried the last script by euu2021, but it created the icons but FP 1.11.9 13 doesn't read those icons, instead, I load the icons in a normal FP way so they are visible: each to be visible requires the restart of FP after its creation...

1. how do see the icons without loading them manually?
2. how to avoid restarting FP?

[Illegit]

and 3) how to write inside the icon? In my case, the script just copies the template icon (I used 2 different templates ) But it doesn't write the name of the tag inside the icon, just keeps the original writing.
Thanks

[euu2021]

Answering this question and also the one above:

Sorry, I did not explain how to use the script, because it's was just a proof of concept. Use it like this:

• create a template svg file, named, "templateSVG.svg" that has, as text, this: templateText
  I used a file with this content:

<svg height="30" width="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="30" style="fill:rgb(176,224,230);stroke-width:3;stroke:rgb(0,0,0)" />
  <text x="0" y="15">templateText</text>
</svg>

• put this template at the root of the icon folder, inside the user folder. In my case, it is this folder:
  C:\Users\kauen\AppData\Roaming\Freeplane\1.11.x\icons

• Put this same folder path at the script, line 6. So it gets like this:

import javax.swing.JOptionPane
import java.nio.file.Files
import java.nio.file.Paths

// Define the directory and template file
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"
def templateFile = "templateSVG.svg"
def templateFilePath = Paths.get(folderPath, templateFile)

// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    new File(filePath).write(fileContent)
}

// Show input dialog to get the tag from the user
def tag = JOptionPane.showInputDialog(null, "Enter the tag name")

if (tag) {
    // Create the new file name and path
    def newFileName = tag + ".svg"
    def newFilePath = Paths.get(folderPath, newFileName)

    // Copy the template file to the new file
    Files.copy(templateFilePath, newFilePath)

    // Replace the placeholder text with the tag
    replaceTextInFile(newFilePath.toString(), "templateText", tag)

    def newFile = new File(newFilePath.toString())
    filen = newFile.getName()
    filen = filen.substring(0, filen.lastIndexOf('.'))
    c.statusInfo = filen
    if (node.icons.icons.contains(filen)) {
        node.icons.remove(filen)
    } else {
        node.icons.add(filen)
    }

}

Now, you can use the script. But, notice that you need to restart Freeplane, in order to make the icons show.

[euu2021]

I got the autocomplete working. In this example, I already had the tags "ba" and "ca", and then added the new tag "da":

This is the script:

import javax.swing.*
import java.nio.file.Files
import java.nio.file.Paths
import java.io.File
import groovy.swing.SwingBuilder
import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator

// Define the directory
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"
def templateFilePath = Paths.get(folderPath, "templateSVG.svg")

// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    new File(filePath).write(fileContent)
}

// Function to collect existing tags
def collectExistingTags(folderPath) {
    def tags = []
    new File(folderPath).eachFile { file ->
        if (file.name.endsWith('.svg')) {
            tags.add(file.name[0..-5]) // Remove the '.svg' extension
        }
    }
    tags -= "templateSVG"
    return tags
}

// Collect existing tags
def existingTags = collectExistingTags(folderPath)

// Create the GUI with autocomplete
def swingBuilder = new SwingBuilder()
swingBuilder.edt {
    frame(title: 'Enter Tag', defaultCloseOperation: JFrame.DISPOSE_ON_CLOSE, size: [300, 100], show: true) {
        vbox {
            label(text: "Tag:")
            def comboBox = comboBox(items: existingTags, editable: true)
            AutoCompleteDecorator.decorate(comboBox)
            button(text: 'OK', actionPerformed: {
                def tag = comboBox.editor.item // Get the item from the editor component
                def newFileName = tag + ".svg"
                def newFilePath = Paths.get(folderPath, newFileName)

                if (!existingTags.contains(tag)) {
                    // If it's a new tag, copy and modify the template file
                    Files.copy(templateFilePath, newFilePath)
                    replaceTextInFile(newFilePath.toString(), "templateText", tag)
                }

                // Create a File object for the selected or new file
                def selectedFile = new File(newFilePath.toString())

                // Additional operations with selectedFile can be added here
                def newFile = new File(selectedFile.toString())
                filen = newFile.getName()
                filen = filen.substring(0, filen.lastIndexOf('.'))
                c.statusInfo = filen
                if (node.icons.icons.contains(filen)) {
                    node.icons.remove(filen)
                } else {
                    node.icons.add(filen)
                }

                // Close the frame
                dispose()
            })
        }
    }
}

Notice that it's necessary to download the Jars for those two imports:

import groovy.swing.SwingBuilder
import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator

Again, this still uses only the simplified version of JJSlote script.

[euu2021]

I improved the aesthetics of the svg tags and created a contrasting color generator for the text and background of the tag:

The script and the svg:

import javax.swing.*
import java.nio.file.Files
import java.nio.file.Paths
import java.io.File
import groovy.swing.SwingBuilder
import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator
import java.awt.Color
import java.util.Random

// Define the directory
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"
def templateFilePath = Paths.get(folderPath, "templateSVG.svg")

// Function to generate a random color code
def generateRandomColorCode() {
    Random random = new Random()
    Color color = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256))
    return String.format("#%02x%02x%02x", color.red, color.green, color.blue)
}

// Function to determine if a color is light or dark
def isLightColor(Color color) {
    // Calculate the luminance of the color
    double luminance = 0.299 * color.red + 0.587 * color.green + 0.114 * color.blue
    return luminance > 160 // Threshold can be adjusted
}

// Function to get a contrasting text color (black or white)
def getContrastingTextColor(Color backgroundColor) {
    return isLightColor(backgroundColor) ? '#000000' : '#FFFFFF' // Black or white
}

// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText, colorText, textColor) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    fileContent = fileContent.replaceAll("templateColor", colorText)
    fileContent = fileContent.replaceAll("textColorTemplate", textColor)
    new File(filePath).write(fileContent)
}

// Function to collect existing tags
def collectExistingTags(folderPath) {
    def tags = []
    new File(folderPath).eachFile { file ->
        if (file.name.endsWith('.svg')) {
            tags.add(file.name[0..-5]) // Remove the '.svg' extension
        }
    }
    tags -= "templateSVG"
    return tags
}

// Collect existing tags
def existingTags = collectExistingTags(folderPath)

// Create the GUI with autocomplete
def swingBuilder = new SwingBuilder()
swingBuilder.edt {
    frame(title: 'Enter Tag', defaultCloseOperation: JFrame.DISPOSE_ON_CLOSE, size: [300, 100], show: true) {
        vbox {
            label(text: "Tag:")
            def comboBox = comboBox(items: existingTags, editable: true)
            AutoCompleteDecorator.decorate(comboBox)
            button(text: 'OK', actionPerformed: {
                def tag = comboBox.editor.item // Get the item from the editor component
                def newFileName = tag + ".svg"
                def newFilePath = Paths.get(folderPath, newFileName)
                def randomColorCode = generateRandomColorCode()
                def backgroundColor = Color.decode(randomColorCode)
                def textColor = getContrastingTextColor(backgroundColor)

                if (!existingTags.contains(tag)) {
                    // If it's a new tag, copy and modify the template file
                    Files.copy(templateFilePath, newFilePath)
                    replaceTextInFile(newFilePath.toString(), "templateText", tag, randomColorCode, textColor)
                }

                // Create a File object for the selected or new file
                def selectedFile = new File(newFilePath.toString())

                // Additional operations with selectedFile can be added here
                def newFile = new File(selectedFile.toString())
                filen = newFile.getName()
                filen = filen.substring(0, filen.lastIndexOf('.'))
                c.statusInfo = filen
                if (node.icons.icons.contains(filen)) {
                    node.icons.remove(filen)
                } else {
                    node.icons.add(filen)
                }

                // Close the frame
                dispose()
            })
        }
    }
}

The svg:

<svg width="102" height="24" 
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
  <rect dominant-baseline="middle" x="0.75" y="0.5" rx="10" ry="10" width="100" height="23" style="fill:templateColor;stroke:black;stroke-width:1" />
  <text  
  x="8" y="16" font-size="16" fill="textColorTemplate">templateText</text>
</svg>

[i-plasm]

Very nice!!

[Illegit]

Hi, I'm not a programmer but interested in trying this solution: it creates the icons but I have to import them manually each time in the normal FP-way; maybe is this behaviour due to the absence of those 2 jars? If so where to find those jar files? And to be sure they are safe?

[Illegit]

these are the icons

and this the node with it (when it is not new):

-->it must be the icon newTag and not the missing icon error

[euu2021]

Are you placing the icons in the root of the "icons" folder, or did you create another folder inside the "icons" folder? Notice that I use the root of the icon folder as the path:
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"

For now, the script doesn't work if you use another folder.

maybe is this behaviour due to the absence of those 2 jars?

Are you using the script version that has autocomplete? If yes, and you managed to create a tag using the text box with, then I think you don't need to download the jars.

If so where to find those jar files? And to be sure they are safe?

You can get it in the official maven repository:

[Illegit]

Thank you now it is working without loading new jars.

[euu2021]

Two new improvements:

• Dynamically choosing the size of the text label
  I think that forcing all the tags to be the same size is good, because it will be easier to quickly recognize tags in an eye scan. So, I choose to change the size of the text, instead of the size of the tag.
  After the boundaries of the tag is reached, the text is cut. Lowering the min font size in the script may be useful to fit even more text.
  The calculations are based on the Arial Narrow font. To use a different font, change the max and min font sizes in the script.
  

• Now, there is warning if the user tries to use special character in the tag name. The name of the tag is used to name the svg file, so special character are not allowed. I may change the naming system, in order to allow special characters, but it may bring disadvantages.

The script and the svg:

import javax.swing.*
import java.nio.file.Files
import java.nio.file.Paths
import java.io.File
import groovy.swing.SwingBuilder
import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator
import java.awt.Color
import java.util.Random
import org.freeplane.core.ui.components.UITools


// Define the directory
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"
def templateFilePath = Paths.get(folderPath, "templateSVG.svg")

// Function to generate a random color code
def generateRandomColorCode() {
    Random random = new Random()
    Color color = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256))
    return String.format("#%02x%02x%02x", color.red, color.green, color.blue)
}

// Function to determine if a color is light or dark
def isLightColor(Color color) {
    // Calculate the luminance of the color
    double luminance = 0.299 * color.red + 0.587 * color.green + 0.114 * color.blue
    return luminance > 160 // Threshold can be adjusted
}

// Function to get a contrasting text color (black or white)
def getContrastingTextColor(Color backgroundColor) {
    return isLightColor(backgroundColor) ? '#000000' : '#FFFFFF' // Black or white
}

// Function to calculate font size based on tag length
def calculateFontSize(String tag) {
    int maxFontSize = 21
    int minFontSize = 10
    int maxCharacters = 21

    int tagLength = tag.length()
    tagLength = Math.min(tagLength, maxCharacters) // Ensure tagLength doesn't exceed maxCharacters

    // Linear interpolation to calculate font size
    int fontSize = maxFontSize - ((maxFontSize - minFontSize) * (tagLength - 1) / (maxCharacters - 1))
    return fontSize.toString()
}

// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText, colorText, textColor, textSize) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    fileContent = fileContent.replaceAll("templateColor", colorText)
    fileContent = fileContent.replaceAll("textColorTemplate", textColor)
    fileContent = fileContent.replaceAll("textSizeTemplate", textSize)
    new File(filePath).write(fileContent)
}

// Function to check for invalid characters in file name
def isValidFileName(String name) {
    String invalidChars = "<>:\"/\\|?*"
    for (char c : invalidChars.toCharArray()) {
        if (name.contains(c.toString())) {
            return false
        }
    }
    return true
}

// Function to collect existing tags
def collectExistingTags(folderPath) {
    def tags = []
    new File(folderPath).eachFile { file ->
        if (file.name.endsWith('.svg')) {
            tags.add(file.name[0..-5]) // Remove the '.svg' extension
        }
    }
    tags -= "templateSVG"
    return tags
}

// Collect existing tags
def existingTags = collectExistingTags(folderPath)

// Create the GUI with autocomplete
def swingBuilder = new SwingBuilder()
swingBuilder.edt {
    frame(title: 'Enter Tag', defaultCloseOperation: JFrame.DISPOSE_ON_CLOSE, size: [300, 100], show: true) {
        vbox {
            label(text: "Tag:")
            def comboBox = comboBox(items: existingTags, editable: true)
            AutoCompleteDecorator.decorate(comboBox)
            button(text: 'OK', actionPerformed: {
                def tag = comboBox.editor.item

                // Check if the tag name is valid
                if (!isValidFileName(tag)) {
                    UITools.informationMessage('"The tag name contains invalid characters. Please avoid using < > : \\" / \\\\ | ? * in the tag name."')
                    return // Stop further execution if the name is invalid
                }
                def newFileName = tag + ".svg"
                def newFilePath = Paths.get(folderPath, newFileName)
                def randomColorCode = generateRandomColorCode()
                def backgroundColor = Color.decode(randomColorCode)
                def textColor = getContrastingTextColor(backgroundColor)
                def textSize = calculateFontSize(tag)

                if (!existingTags.contains(tag)) {
                    // If it's a new tag, copy and modify the template file
                    Files.copy(templateFilePath, newFilePath)
                    replaceTextInFile(newFilePath.toString(), "templateText", tag, randomColorCode, textColor, textSize)
                }

                // Create a File object for the selected or new file
                def selectedFile = new File(newFilePath.toString())

                // Additional operations with selectedFile can be added here
                def newFile = new File(selectedFile.toString())
                filen = newFile.getName()
                filen = filen.substring(0, filen.lastIndexOf('.'))
                c.statusInfo = filen
                if (node.icons.icons.contains(filen)) {
                    node.icons.remove(filen)
                } else {
                    node.icons.add(filen)
                }

                // Close the frame
                dispose()
            })
        }
    }
}

Svg:

<svg width="102" height="24" 
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
  <rect dominant-baseline="middle" x="0.75" y="0.5" rx="10" ry="10" width="100" height="23" style="fill:templateColor;stroke:black;stroke-width:0.75" />
  <text  
  x="8" y="16" font-size="textSizeTemplate" dominant-baseline="middle" fill="textColorTemplate" font-family="Arial Narrow, Arial, Helvetica, sans-serif">templateText</text>
</svg> 

[Illegit]

Hi euu2021, with FP 1.11.11_03 your script (in my version here in the attachment) seems not working any longer may check; I do not understand which is the problem, it gives me a null error, but with 1.11.11_01 it was working...Thanks
svgTagCreateIcon2.zip

[euu2021]

I got it working on FP 1.11.11_03.
A hypothesis is that you are missing this library: swingx-1.6.1.jar
You can get it in the official Maven repo: https://mvnrepository.com/artifact/org.swinglabs/swingx/1.6.1

I suggest that you use Edo's groovy console to diagnose problems in script execution. You paste the script, execute from there, and it gives you a detailed log. For example, if I try to use the script without the mentioned library, I get this:

By the way, I included some improvements in the script:

• the GUI is created at the center of the screen
• the GUI is a bit wider and longer
• I corrected the logic of auto sizing the tags

The latest version:

import javax.swing.*
import java.nio.file.Files
import java.nio.file.Paths
import java.io.File
import groovy.swing.SwingBuilder
import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator
import java.awt.Color
import java.util.Random
import org.freeplane.core.ui.components.UITools
// Define the directory
def folderPath = "C:\\Users\\kauen\\AppData\\Roaming\\Freeplane\\1.11.x\\icons"
def templateFilePath = Paths.get(folderPath, "templateSVG.svg")
// Function to generate a random color code
def generateRandomColorCode() {
    Random random = new Random()
    Color color = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256))
    return String.format("#%02x%02x%02x", color.red, color.green, color.blue)
}
// Function to determine if a color is light or dark
def isLightColor(Color color) {
    // Calculate the luminance of the color
    double luminance = 0.299 * color.red + 0.587 * color.green + 0.114 * color.blue
    return luminance > 160 // Threshold can be adjusted
}
// Function to get a contrasting text color (black or white)
def getContrastingTextColor(Color backgroundColor) {
    return isLightColor(backgroundColor) ? '#000000' : '#FFFFFF' // Black or white
}
// Function to calculate font size based on tag length
def calculateFontSize(String tag) {
    int maxFontSize = 21
    int minFontSize = 10
    int maxCharacters = 21
    int maxCharMaxSize = 10 //Maximum number of character to be used with the maximum font size.
    int tagLength = tag.length()
    if (tagLength <= maxCharMaxSize) {
        return maxFontSize.toString()
    }
    else {
        tagLength = Math.min(tagLength, maxCharacters) // Ensure tagLength doesn't exceed maxCharacters
        // Linear interpolation to calculate font size
        int fontSize = maxFontSize - ((maxFontSize - minFontSize) * (tagLength - 1) / (maxCharacters - 1))
        return fontSize.toString()
    }
}
// Function to replace text in the SVG file
def replaceTextInFile(filePath, oldText, newText, colorText, textColor, textSize) {
    def fileContent = new File(filePath).text
    fileContent = fileContent.replaceAll(oldText, newText)
    fileContent = fileContent.replaceAll("templateColor", colorText)
    fileContent = fileContent.replaceAll("textColorTemplate", textColor)
    fileContent = fileContent.replaceAll("textSizeTemplate", textSize)
    new File(filePath).write(fileContent)
}
// Function to check for invalid characters in file name
def isValidFileName(String name) {
    String invalidChars = "<>:\"/\\|?*"
    for (char c : invalidChars.toCharArray()) {
        if (name.contains(c.toString())) {
            return false
        }
    }
    return true
}
// Function to collect existing tags
def collectExistingTags(folderPath) {
    def tags = []
    new File(folderPath).eachFile { file ->
        if (file.name.endsWith('.svg')) {
            tags.add(file.name[0..-5]) // Remove the '.svg' extension
        }
    }
    tags -= "templateSVG"
    return tags
}
// Collect existing tags
def existingTags = collectExistingTags(folderPath)
// Create the GUI with autocomplete
def swingBuilder = new SwingBuilder()
swingBuilder.edt {
    frame(title: 'Enter Tag', id:'myDialog', locationRelativeTo:ui.currentFrame, defaultCloseOperation: JFrame.DISPOSE_ON_CLOSE, size: [500, 100], show: true) {
        vbox {
            label(text: "Tag:")
            def comboBox = comboBox(items: existingTags, editable: true)
            comboBox.setMaximumRowCount(40) //Decrease this number if you need a smaller combobox list
            AutoCompleteDecorator.decorate(comboBox)
            button(text: 'OK', defaultButton: true, actionPerformed: {
                def tag = comboBox.editor.item
                // Check if the tag name is valid
                if (!isValidFileName(tag)) {
                    UITools.informationMessage('"The tag name contains invalid characters. Please avoid using < > : \\" / \\\\ | ? * in the tag name."')
                    return // Stop further execution if the name is invalid
                }
                def newFileName = tag + ".svg"
                def newFilePath = Paths.get(folderPath, newFileName)
                def randomColorCode = generateRandomColorCode()
                def backgroundColor = Color.decode(randomColorCode)
                def textColor = getContrastingTextColor(backgroundColor)
                def textSize = calculateFontSize(tag)
                if (!existingTags.contains(tag)) {
                    // If it's a new tag, copy and modify the template file
                    Files.copy(templateFilePath, newFilePath)
                    replaceTextInFile(newFilePath.toString(), "templateText", tag, randomColorCode, textColor, textSize)
                }
                // Create a File object for the selected or new file
                def selectedFile = new File(newFilePath.toString())
                // Additional operations with selectedFile can be added here
                def newFile = new File(selectedFile.toString())
                filen = newFile.getName()
                filen = filen.substring(0, filen.lastIndexOf('.'))
                c.statusInfo = filen
                if (node.icons.icons.contains(filen)) {
                    node.icons.remove(filen)
                } else {
                    node.icons.add(filen)
                }
                // Close the frame
                dispose()
            })
        }
    }
}

And the SVG:

<svg width="102" height="24.5" 
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
  <rect dominant-baseline="middle" x="0.75" y="0.75" rx="10" ry="10" width="100" height="23" style="fill:templateColor;stroke:black;stroke-width:1" />
  <text  
  x="6" y="17.25" font-size="textSizeTemplate" dominant-baseline="middle" fill="textColorTemplate" font-family="Arial Narrow, Arial, Helvetica, sans-serif">templateText</text>
</svg> 

[Illegit]

Hi euu2021: Done, Working. Now hope for the new tag management. Thanks

[dpolivaev]

I'm imagining a tag system.
How it looks like:
user wants to add the tag "melon" to a node
user activates the script
a textbox GUI shows up
user starts typing "me", and all the currently existing tags with "me" are suggested
The tag "melon" still doesn't exist, so the user types "melon" and press enter. An icon with the text melon is added to the node.

Let us not talk about the icons any longer. Instead, let us talk about how to add tags to Freeplane. But not as icons.
But they would be tags and not icons. It would be much easier to implement.

• No external SVG files would be needed.
• They would not be added to icon related menus or the icon toolbar.
• They could have their own UI instead.
• It would also make possible to have filters
• And they could visually be added to the icons and even use SVG for rendering.

[dpolivaev]

@JJSlote @euu2021
If you could create mockups of UI (menu items, toolbar buttons, dialogs, input fields, and SVG examples like above), I could do the rest and implement it.

[euu2021]

Nice! A tag system will be awesome!
I created a dedicated thread for discussion and I will write some ideas: #1652

[dpolivaev]

Preview 1.12.1 alpha 01

• Edit->Node properties->Edit tags (alt+F8)
• The font is configured in the Tags style node
• The colors are calculated automatically and depend on the content
• Tags-related filters
• Tags-related API

[JJSlote]

Tried it this morning on Preview 2. Absolutely beautiful. Thanks so much Dimitry for bringing this to life!!

(As I use Freeplane primarily as a database, the Tag capabilities will be most useful to me on the Listview, aka Search and Replace, hopefully a bit further down the road. Just a way to click on a Tag and see all the nodes that share it in a scrollable list.)

Sorry to have been scarce in the discussions these weeks. Look forward to reengaging when I can. Thanks again Dimitry and all who've contributed their thoughts and energies to the launch of Tags in Freeplane. They'll make for an extremely useful enhancement.

Cheers...Jerome