Loading Local Resources

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.

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">

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

Icons for PID

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

fig://icon?pid=2834

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 Data NextWindow Managment

Last updated 4 years ago

<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>