search

Loading Local Resources

hashtag
User Assets

It is possible to load local assets from the file system using the file:// URL scheme. This makes it possible to display images in a user's directory or visualize other assets that are don't lend themselves well to the terminal's text based formatting.

The following example displays all .png files in on our Desktop.

<html>
    <script>
        fig.init = (input) => {
          preview()
        }
        
    let preview = () => {
      fig.execute('ls -1', (out) => {
            let files = out.split('\n')
            let pngs = files.filter(p => p.endsWith(".png"))
            console.log(pngs)
            let thumbnails = pngs.map(p => { return `<img draggable = "true" src = "file://${fig.env.HOME}/Desktop/${p}"></img>`}).join("")
            console.log(thumbnails)
​
            document.getElementById("view").innerHTML = thumbnails
            console.log(document.body.innerHTML)
      })
    }
    </script>
    <style>
        img {
            height: 50px;
            width: 50px;
            object-fit: cover;
        }
​
    </style>
    <body>
        <div id = "view">
        </div>
    </body>
</html>
​

Using the fig:// URL scheme, you can load native assets for file icons and processes. There are a few different types of assets that can accessed this way.

hashtag
Icons from File Path

Prefixing a file path with fig:// creates a reference to the native icon for that file, just like what would be displayed in Finder.

<img src = "fig:///Users/user/folder/file.ext">

hashtag
Icons by Type

You might also want to get an icon for a file type, rather than by path. This is often used when displaying icons for files on a remote machine.

fig://icon?type=png

hashtag
Icons for PID

To display icons for running processes, use the icon path with the pid as a query parameter.

fig://icon?pid=2834

hashtag
Sizing Assets

For any fig:// URL, you can specify the size of the asset using query parameters. (The default size is 32px by 32px.)

fig://path/to/file?w=64&h=64

PreviousAccessing Files & Saving DataNextWindow Managment

Last updated