Snippets for Icons

Snippets for Icons
​
The Loupedeck CT and Loupedeck Live Preferences panels now have the ability to use Lua Snippets to programatically generate icons for the Loupedeck CT and Loupedeck Live panels.
This gives you incredible freedom, to programatically make the icons appear however you want.
CommandPost is also compatible with Hammerspoon, so you can also use helpful extensions such as hs.canvas.
Both the CommandPost API and Hammerspoon API are insanely powerful and flexible, so you can basically do anything and everything.
Essentially all you need to do in your Snippet is return a hs.image object.
Some useful functions to generate a hs.image include:
​hs.image.iconForFile()​
​hs.image.iconForFileType()​
​hs.image.imageFromAppBundle()​
​hs.image.imageFromASCII()​
​hs.image.imageFromMediaFile()​
​hs.image.imageFromName()​
​hs.image.imageFromPath()​
​hs.image.imageFromURL()​
You can also use hs.canvas to programatically draw things.
There's some more complex hs.canvas examples here.
You can learn more about Lua on the CommandPost Developers site.
​
Examples:
Display a built-in system icon
1
return hs.image.imageFromName("NSAdvanced")
Copied!
​
Display the first Final Cut Pro Keyword Shortcut Value
1
-- Create a new Canvas:
2
local v = hs.canvas.new{x = 0, y = 0, w = 90, h = 90 }
3
​
4
-- Add a black background:
5
v[1] = {
6
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
7
    fillColor = { alpha = 1, red = 0, green = 0, blue = 0 },
8
    type = "rectangle",
9
}
10
​
11
-- Write the first Keyword from the FCPX Preferences file:
12
local keywords = cp.apple.finalcutpro.preferences.FFKeywordGroups
13
local keywordOne = keywords and keywords[1] and keywords[1][1] or ""
14
v[2] = {
15
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
16
    text = "\n\n" .. keywordOne,
17
    textAlignment = "center",
18
    textColor = { white = 1.0 },
19
    textSize = 15,
20
    type = "text",
21
}
22
​
23
-- Convert the Canvas into an icon:
24
local icon = v:imageFromCanvas()
25
​
26
-- Delete the Canvas:
27
v:delete()
28
​
29
-- Return the icon:
30
return icon
Copied!
​
Display the current Spotify Track
1
-- Create a new Canvas:
2
local v = hs.canvas.new{x = 0, y = 0, w = 90, h = 90 }
3
​
4
-- Add a black background:
5
v[1] = {
6
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
7
    fillColor = { alpha = 1, red = 0, green = 0, blue = 0 },
8
    type = "rectangle",
9
}
10
​
11
-- Write the current Spotify Track as text:
12
v[2] = {
13
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
14
    text = "\n\n" .. hs.spotify.getCurrentTrack(),
15
    textAlignment = "center",
16
    textColor = { white = 1.0 },
17
    textSize = 15,
18
    type = "text",
19
}
20
​
21
-- Convert the Canvas into an icon:
22
local icon = v:imageFromCanvas()
23
​
24
-- Delete the Canvas:
25
v:delete()
26
​
27
-- Return the icon:
28
return icon
Copied!
​
Display the current System Volume
1
-- Create a new Canvas:
2
local v = hs.canvas.new{x = 0, y = 0, w = 90, h = 90 }
3
​
4
-- Add a black background:
5
v[1] = {
6
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
7
    fillColor = { alpha = 1, red = 0, green = 0, blue = 0 },
8
    type = "rectangle",
9
}
10
​
11
-- Write the System Volume as text:
12
v[2] = {
13
    frame = { h = "100%", w = "100%", x = 0, y = 0 },
14
    text = "\n\n" .. hs.audiodevice.defaultOutputDevice():outputVolume(),
15
    textAlignment = "center",
16
    textColor = { white = 1.0 },
17
    textSize = 15,
18
    type = "text",
19
}
20
​
21
-- Convert the Canvas into an icon:
22
local icon = v:imageFromCanvas()
23
​
24
-- Delete the Canvas:
25
v:delete()
26
​
27
-- Return the icon:
28
return icon
Copied!

Advanced - Previous

Snippets

Next - Advanced

Snippets for LED Colors

Last modified 3mo ago

Export as PDF

Copy link

Contents

Snippets for Icons

Examples:

Display a built-in system icon

Display the first Final Cut Pro Keyword Shortcut Value

Display the current Spotify Track

Display the current System Volume