Gist ffc41d0e0de68f09f053d577f0e3e76a

100%

Gist ffc41d0e0de68f09f053d577f0e3e76a

✓ Published0🌍 Public

Last edited Oct 6, 2019

Created on Oct 5, 2019

A floating HUD panel displays a minimap of the current document's artboards, implemented with QuartzCore's layering and NSPanel APIs. The code constructs a scaled map from `CAShapeLayer` objects for each artboard and a semi-transparent viewport rectangle representing the visible canvas area. The map's position and scaling are computed from the document's scroll origin and zoom value, then fitted to the panel using `CATransform3DMakeScale` and custom frame-calculation functions.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

64% match

Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

KKevinGutowski

59% match

Loading thumbnail…

Add padding to artboard (WIP)

This plugin demonstrates how to adjust an artboard's dimensions and reposition its contents with a user-defined padding value. It uses the Sketch JavaScript API, including `doc.selectedLayers`, `Rectangle`, and `UI.getInputFromUser`, to prompt for input and modify layer frames. The script shifts the artboard’s frame outward by the padding amount while moving all nested layers inward by the same value, preserving their relative positions. It relies on `selection.frame` and `layer.frame` properties to apply geometric transformations.

KKevinGutowski

58% match

Loading thumbnail…

Basic Window Loading a URL

This example demonstrates a Sketch plugin that opens a floating panel and loads a remote SVG image from the Sketch website into a web view. The plugin uses AppKit’s `NSPanel` to create a borderless, floating window with hidden minimize and zoom buttons. It initializes a `WKWebView` from the WebKit framework, configures it with developer extras enabled, and loads the specified URL via `NSURLRequest`. The panel is centered and kept on top using `NSFloatingWindowLevel`.

KKevinGutowski

57% match

Loading thumbnail…

Trying to get NSPanel to expand downward.

A JavaScript sketch demonstrates an attempt to animate an NSPanel downward using the Sketch plugin API. The code creates a floating panel with a title bar and close button, initially sized at 312 by 210 pixels. After displaying the panel, it calls `setFrame_display_animate` to enlarge its height by 50 pixels. However, because the panel's origin remains unchanged, the animation expands the panel upward instead of downward. The commented-out alternative adjusts the y-origin by negative 50 pixels, which would shift the panel up to achieve the desired downward expansion. The sketch relies on `NSThread.mainThread().threadDictionary` for panel management and `NSMakeRect` for frame geometry.

KKevinGutowski

56% match

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji

56% match

Loading thumbnail…

Untitled

This visualization presents a multi-panel interface for exploring geospatial and mapping data. A sidebar on the left lists map layers, while the central viewport is divided into sections for a large map display, a grid of detail panels, and a document viewer with form and template areas. The right sidebar shows variable controls. The layout is constructed entirely with HTML and CSS absolute positioning, using styled divs with color-coded backgrounds to structure the interface, but no interactive data is rendered.

LLCherryholmes

56% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

55% match