Knowledge on Janik von Rotz

Convert Obsidian canvas to SVG

Wed, 07 Jun 2023 09:47:45 +0200

I am using Obsidian for note taking and writing documentation. With Canvas-Feature you can create simple visualizations and link notes from the vault. Here is an example:

As simple as it seems, there was not builtin-way to export the visualization and f.g. publish it on a website. Luckily, the canvas file is a simple JSON document and therefore can be processed pretty easy. I build a render Method in JavaScript that takes the canvas content and returns it as a SVG image.

Here is what it a canvas file looks like:

Obsidian.canvas

{
	"nodes":[
		{"id":"c2b83b58ff104957","x":-150,"y":-200,"width":250,"height":60,"color":"1","type":"text","text":"Create canvas in Obsidian"},
		{"id":"28b7d169be420aea","x":-200,"y":-80,"width":350,"height":240,"color":"#803dd1","type":"file","file":"Obsidian.md"},
		{"type":"text","text":"Export as SVG","id":"3bbb4a8b9a8a726b","x":240,"y":10,"width":250,"height":60,"color":"5"}
	],
	"edges":[
		{"id":"9a41a93da6186142","fromNode":"c2b83b58ff104957","fromSide":"bottom","toNode":"28b7d169be420aea","toSide":"top"},
		{"id":"14fcc8b5466e0f72","fromNode":"28b7d169be420aea","fromSide":"right","toNode":"3bbb4a8b9a8a726b","toSide":"left"}
	]
}

Nodes are the rectangles in the canvas editor and edges are the arrows connecting them.

With the help of JavaScript I was able to generate this SVG:

Obsidian.svg

The script has several methods:

mapColor: Maps the Obsidian color id to the actual hex color
renderNode: Given a canvas node it renders a SVG rectangle and either show a text, link markdown file or embeding an image
renderGroup: Renders a SVG rectrange from a canvas group
renderEdge: Given a canvas edge it renders a SVG line with a marker
convertCanvasToSVG: This is the main function that process the nodes and edges and calculates the position for the elements

The main challenge was to calculate the actual positions of the arrows. As you can see in the canvas document the edges do not have a fixed position.

function mapColor(color) {
    colors = {
        0: '#7e7e7e',
        1: '#aa363d',
        2: '#a56c3a',
        3: '#aba960',
        4: '#199e5c',
        5: '#249391',
        6: '#795fac'
    }
    let appliedColor = colors[0]
    
    if (color && (0 < color.length < 2)) {
        appliedColor = colors[color]
    }
    if (color && (1 < color.length)) {
        appliedColor = color
    }
    return appliedColor
}

function renderNode(node) {
    const strockWidth = 4
    const fontWeight = 'bold'
    const fontFamily = 'Roboto, Oxygen, Ubuntu, Cantarell, sans-serif'

    let textOffsetX = 15
    let textOffsetY = 0
    let fontColor = '#2c2d2c'
    let fontSize = 15
    let content = ''

    // Render default text

    if (node['text']) {
        content = `
        <style>
            p {
                font-family: ${fontFamily};
                font-size: ${fontSize}px;
                color: ${fontColor};
            }
        </style>
        <foreignObject x="${node['x'] + textOffsetX}" y="${node['y'] + textOffsetY}" width="${node['width'] - textOffsetX*2}" height="${node['height'] - textOffsetY*2}">
        <p xmlns="http://www.w3.org/1999/xhtml" class="${node['id']}">${node['text']}</p>
        </foreignObject>
        `
    }

    // Render multiline text

    if (node['text'] && node['text'].split('\n').length > 1) {
        let spans = ''
        for (const line of node['text'].split('\n')) {
            spans += `<tspan x="${node['x'] + textOffsetX}" dy="${fontSize + 3}">${line}</tspan>`
        }
        textOffsetY = 10
        content = `<text x="${node['x'] + textOffsetX}" y="${node['y'] + textOffsetY}" font-family="${fontFamily}" fill="${fontColor}">${spans}</text>`
    }

    // Render linked markdown file

    if (node['file'] && node['file'].endsWith('.md')) {
        title = node['file'].replace('.md', '')
        text = `<a href="/${title.toLowerCase()}.html">${title}</a>`
        fontColor = '#9a7fee'
        fontSize = 28
        textOffsetX = 30
        textOffsetY = 45
        content = `<text x="${node['x'] + textOffsetX}" y="${node['y'] + textOffsetY}" font-family="${fontFamily}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fontColor}">${text}</text>`
    }
    
    // Render image

    if (node['file'] && !node['file'].endsWith('.md')) {
        filePath = node['file']

        const base64_content = fs.readFileSync(filePath, "base64")
        extension = path.extname(filePath).replace('.', '')

        content = `<image href="${`data:image/{extension};base64,${base64_content}`}" x="${node['x']}" y="${node['y']}" width="${node['width']}" height="${node['height']}" clip-path="inset(0% round 15px)" />`
        fontColor = '#9a7fee'
    }

    return `
    <rect x="${node['x']}" y="${node['y']}" width="${node['width']}" height="${node['height']}" rx="15" stroke="${mapColor(node['color'])}" stroke-width="${strockWidth}" fill="none"/>
    ${content}
    `
}

function renderGroup(group) {
    const strockWidth = 4
    const fontWeight = 'bold'
    const fontFamily = 'Roboto, Oxygen, Ubuntu, Cantarell, sans-serif'

    let textOffsetX = 15
    let textOffsetY = -15
    let fontColor = '#2c2d2c'
    let fillColor = '#fbfbfb'
    let text = group['label']
    let fontSize = 24

    return `
    <rect x="${group['x']}" y="${group['y']}" width="${group['width']}" height="${group['height']}" rx="30" stroke="${mapColor(group['color'])}" stroke-width="${strockWidth}" fill="${fillColor}"/>
    <text x="${group['x'] + textOffsetX}" y="${group['y'] + textOffsetY}" font-family="${fontFamily}" font-size="${fontSize}" font-weight="${fontWeight}" fill="${fontColor}">${text}</text>
    `
}

function renderEdge(edge) {
    const id = edge['id']
    const strockWidth = 5
    const color = mapColor(edge['color'])
    const fromSide = edge['fromSide']
    const toSide = edge['toSide']
    const fontFamily = 'Roboto, Oxygen, Ubuntu, Cantarell, sans-serif'
    const fontColor = '#2c2d2c'

    let marker = `marker-end="url(#arrow-end-${id})"`
    let fromOffset = 1
    let toOffset = 11
    let fromX = edge['fromX'] 
    let fromY = edge['fromY']
    let toX = edge['toX']
    let toY = edge['toY']
    let label = ''

    // Set arrow marker

    if(edge['fromEnd'] === 'arrow') {
        marker = `marker-end="url(#arrow-end-${id})" marker-start="url(#arrow-start-${id})"`
        fromOffset = 11
    }
    if(edge['toEnd'] === 'none') {
        marker = ''
        toOffset = 1
    }

    // Calculate position with offset

    if (fromSide === 'right') {
        fromX += fromOffset
    }
    if (fromSide === 'bottom') {
        fromY += fromOffset
    }
    if (fromSide === 'left') {
        fromX -= fromOffset
    }
    if (fromSide === 'top') {
        fromY -= fromOffset
    }
    if (toSide === 'right') {
        toX += toOffset
    }
    if (toSide === 'bottom') {
        toY += toOffset
    }
    if (toSide === 'left') {
        toX -= toOffset
    }
    if (toSide === 'top') {
        toY -= toOffset
    }

    // Add label if is set

    if(edge['label']) {
        
        // Calculate position with offset
        let labelLength = edge['label'].length*4
        let labelX = fromX - labelLength
        let labelY = fromY

        if (toX > fromX) {
            labelX += Math.abs((fromX-toX)/2)
        }
        if (toY > fromY) {
            labelY += Math.abs((fromY-toY)/2)
        }
        if (toX < fromX) {
            labelX -= Math.abs((toX-fromY)/2)
        }
        if (toY < fromY) {
            labelY -= Math.abs((toY-fromY)/2)
        }

        label = content = `<text x="${labelX}" y="${labelY}" font-family="${fontFamily}" fill="${fontColor}">${edge['label']}</text>`
    }

    return `
    <marker xmlns="http://www.w3.org/2000/svg" id="arrow-end-${id}" viewBox="0 0 10 10" refX="1" refY="5" fill="${color}" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" orient="auto">
        <path d="M 0 0 L 7 5 L 0 10 z"/>
    </marker>
    <marker xmlns="http://www.w3.org/2000/svg" id="arrow-start-${id}" viewBox="-10 -10 10 10" refX="-1" refY="-5" fill="${color}" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" orient="auto">
        <path d="M 0 0 L -7 -5 L -0 -10 z"/>
    </marker>
    <line x1="${fromX}" y1="${fromY}" x2="${toX}" y2="${toY}" stroke="${color}" stroke-width="${strockWidth}" ${marker} />
    ${label}
    `
}

function convertCanvasToSVG(content) {

    nodes = content['nodes']
    edges = content['edges']

    let svg = ""
    svg += '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n'
    svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'    

    // Calculate view box position

    let minX = 0
    let minY = 0

    for (const node of nodes) {
        nodeX = node['x']
        nodeY = node['y']
        nodeWith = node['width']
        nodeHeight = node['height']

        if (nodeX < minX) {
            minX = nodeX
        }
        if (nodeY < minY) {
            minY = nodeY
        }
    }

    // Caclulate view box size

    let width = 0
    let height = 0

    for (const node of nodes) {
        nodeX = node['x']
        nodeY = node['y']
        nodeWith = node['width']
        nodeHeight = node['height']

        nodeMaxX = Math.abs(nodeX - minX) + nodeWith
        if (width < nodeMaxX) {
            width = nodeMaxX
        }
        nodeMaxY = Math.abs(nodeY - minY) + nodeHeight
        if (height < nodeMaxY) {
            height = nodeMaxY
        }
    }

    // Add view box

    const spacing = 50
    
    svg += `<svg viewBox="${minX-spacing} ${minY-spacing} ${width+spacing*2} ${height+spacing*2}" xmlns="http://www.w3.org/2000/svg">\n`

	// Render group as rect

    for (const group of nodes.filter(node => (node['type'] === 'group'))) {
        svg += renderGroup(group)
    }
    
    for (const edge of edges) {
        const fromSide = edge['fromSide']
        const toSide = edge['toSide']
        let fromX = 0
        let fromY = 0
        let toX = 0
        let toY = 0

        // Get start and target nodes

        fromNode = nodes.filter(node => (node['id'] === edge['fromNode']))[0]
        toNode = nodes.filter(node => (node['id'] === edge['toNode']))[0]

        // Calculate x and y position of arrow start

        if (fromSide === 'right') {
            fromX = fromNode['x'] + fromNode['width']
            fromY = fromNode['y'] + fromNode['height'] / 2
        }
        if (fromSide === 'bottom') {
            fromX = fromNode['x'] + fromNode['width'] / 2 
            fromY = fromNode['y'] + fromNode['height']
        }
        if (fromSide === 'left') {
            fromX = fromNode['x']
            fromY = fromNode['y'] + fromNode['height'] / 2
        }
        if (fromSide === 'top') {
            fromX = fromNode['x'] + fromNode['width'] / 2
            fromY = fromNode['y']
        }
        edge['fromX'] = fromX
        edge['fromY'] = fromY

        // Calculate x and y position of arrow target        

        if (toSide === 'right') {
            toX = toNode['x'] + toNode['width']
            toY = toNode['y'] + toNode['height'] / 2
        }
        if (toSide === 'bottom') {
            toX = toNode['x'] + toNode['width'] / 2 
            toY = toNode['y'] + toNode['height']
        }
        if (toSide === 'left') {
            toX = toNode['x']
            toY = toNode['y'] + toNode['height'] / 2
        }
        if (toSide === 'top') {
            toX = toNode['x'] + toNode['width'] / 2
            toY = toNode['y']
        }
        edge['toX'] = toX
        edge['toY'] = toY

        svg += renderEdge(edge)
    }

    // Render nodes as rect

    for (const node of nodes.filter(node => (['text', 'file'].includes(node['type'])))) {
        svg += renderNode(node)
    }

    svg += '</svg>'

    return svg
}

I am pretty sure the calculation can be done more efficiently. Nonetheless, it was a lot of fun to wrap my head around this problem.

Download podcast episodes from Stitcher for offline usage

Mon, 28 Mar 2022 13:58:54 +0200

I love the podcast Philosophize This!. It is freely available, but there is no meaningful way to download all episodes without using a third party app. As a data hoarder I want to have every episode on my hard disk. Therefore I created a simple script to download the episodes from Stitcher.

Here is the script:

# Get list of all episodes
curl 'https://api.prod.stitcher.com/show/philosophize-this/latestEpisodes?count=200' | jq '.' > podcast.json
# Process data and download episode if not downloaded yet
jq -c '.data.episodes[] | {title: .title, slug: .slug, url: .audio_url}' podcast.json | while read e; do 
    TITLE=$(echo "$e" | jq -r .title)
    SLUG=$(echo "$e" | jq -r .slug)
    URL=$(echo "$e" | jq -r .url)

    if [ -f "$SLUG.mp3" ]; then
        echo "File $SLUG.mp3 already exists."
    else
        echo "Download $TITLE ..."
        curl -L "$URL" -o "$SLUG.mp3" --progress-bar
    fi
done

And here it is in action:

janikvonrotz@pop-os:~/Downloads$ ./podcast.sh                               
File episode-163-the-creation-of-meaning-escape-from-evil-90885817.mp3 already exists.
File episode-162-the-creation-of-meaning-the-denial-of-death-89963729.mp3 already exists.
File episode-161-karl-popper-the-open-society-and-its-enemies-89711371.mp3 already exists.
File episode-160-the-creation-of-meaning-kierkegaard-silence-obedience-and-joy-89488860.mp3 already exists.
File episode-159-the-creation-of-meaning-nietzsche-amor-fati-88209087.mp3 already exists.
File episode-158-the-creation-of-meaning-nietzsche-the-ascetic-ideal-87305371.mp3 already exists.
Download Episode #157 ... The Creation of Meaning - Beauvoir ...
######################################################################## 100.0%
Download Episode #156 ... Emil Cioran part 2 - Failure and Suicide ...
######################################################################## 100.0%
Download Episode #155 ... Emil Cioran - Absurdity and Nothingness ...
######################################################################## 100.0%
Download Episode #154 ... Pragmatism and Truth ...
########################################

If the download fails at some point you can restart the script and it should pickup were it failed.

Obsidian and Vuepress: include markdown files

Fri, 29 Oct 2021 19:21:40 +0200

I am using Obisidan to manage markdown files and Vuepress to publish them. With the help of a script build.js the Obsidian vault is converted into a publishable format for Vuepress. Obsidian supports embeding markdown files using the ![](file.md) syntax. Here I’ll show you how this feature can be enabled for Vuepress.

First we need to support including markdown files for Vuepress. Install the markdown-it extension.

npm install --save markdown-it-include

And enable it (Vuepress v1).

.vuepress/config.js

module.exports = {
	// ...
    extendMarkdown: (md) => {
        md.use(require('markdown-it-include'))
    }
}

Before the Vuepress build is created the build.js file is executed.

// ...

function convert(content,file) {
    // ...
	
    // convert include markdown links
    // ![title](file.md) -> !!!include(file.md)!!!
    const mdInclude = /(!\[.*?\]\(.*?\.md\))/g
    matches = content.match(mdInclude) || []
    for (i = 0; i < matches.length; i++) {
        let match = matches[i]
        
        let include = match.match(/!\[.*\]\((.*\.md)\)/)[1]
        include = sanitizeName(include)
                
        content = content.replace(match, `!!!include(${include})!!!`)
    }
	
	//...
	
	return content
}

// ...

This is just an excerpt. The script does a lot more. It renames files, moves assets, builds indexes and overall tweaks the markdown files to work with Vuepress.

Have look here for a full example.

Sync Obsidian mobile app with Working Copy git repo

Tue, 31 Aug 2021 09:55:35 +0200

I’m using the Obsidian note taking app for almost anything. Having everything stored in plain text Markdown files makes it easy to sync the Obsidian vault with any file sync provider. However, getting the Obsidian vault on the mobile phone without their syncing service is not so easy. In this guide I will explain how you can sync the Obsidian vault to your phone using git and Working Copy.

This guide assumes that you have the following setup:

Obisidan vault commited with git
Remote repository on GitHub, GitLab or somewhere else
iPhone and Working Copy app with access to remote repository

Lets start

Open the Obsidian mobile app and create a new vault with the same name as your desktop vault

Go to settings, open the advanced options and set for Override config folder the value .obsidian-mobile

Open Working Copy on your phone, open the repo and click on the top right icon.

Select Setup Folder Sync and choose the Obsidian vault folder.

Now Working Copy will sync the repo with the Obsidian vault folder.

Reopen the Obsidian vault on your phone and check if the app indexes the new files.

Now you can update files with the Obsidian mobile app and commit the changes with Working Copy.

The Obsidian mobile and destkop app will store their config separately.