17 KiB
JTCS Art Gallery
Table of Contents
- JTCS Art Gallery
- Display Methods
- Utilities, Settings and Customization
- Tips and Utilities
(Note: Some of the footage below is a teeny bit outdated, with small visual and functional bugs having being fixed since they were recorded; If your interface looks a little bit different than in the videos below, it is due to those updates; but all major functionality should be the same )
Display Methods
-
Hovering over an image on an actor, item, or journal entry sheet will display controls that represent different methods by which you can display that image.
-
these controls can be toggled on and off by type or on each individual sheet (see "Utilities, Settings and Customization" section for more information)
-
You can also click* on the image itself, which will send it to whichever tile is selected as "Default" in that scene (see "Default Art Tiles" section for more information)
Important Note about Clicking Foundry V10*
In FoundryVTT Version 10, left-clicking on an image in a Journal Sheet now has the core functionality of displaying an image in a window popout.
Instead of overriding this functionality, I instead allowed it to be possible to right-click on Journal Sheet images instead. This right-click functionality was already implemented for images on Item and Actor sheets, as left-clicking on those images causes the file-picker to open.
While both right-clicking and left-clicking in Journal Sheets will send the image to the "Default" tile as stated above, right-clicking will avoid opening the Image Popout.
display on default tile demo
Window Popouts, Art Journal and Art Scene - (Upgraded Features)
Two of the options in the controls allow you to display images in a window popout, or a dedicated Journal Entry
(Note: The window popout option will render a new "popout" window each time you click it, allowing multiple windows for multiple different images, while the Journal Entry option will simply change the image in that specific journal, showing one image at a time, and providing more of a "slideshow" effect.
journal entry popover demo
You can also have a dedicated "Art Scene" that images are sent to. Images displayed through this method will automatically display on the "Default Art Tile" in that Art Scene (see "Default Art Tiles" section for more info).
art scene demo
URL Image Sharing
You can also share images via URLs through the Scene Gallery Config App.
Clicking on the first button at the top will open up a Dialog window. Here you can paste your image URL, and select whichever display method you would like.
URL Sharing Limitations (IMPORTANT)
Do be aware that for web security reasons, not all image URLs will work. Some sites do not allow resources like images to be shared "externally".
See these Wikipedia articles for more information:
URL Image Sharing (Cont.)
The display methods in the URL Image Sharing Dialog work pretty much identically those available when hovering over a Journal Entry, Actor or Item Sheet.
The below options are included in both:
- Window - will render a new "popout" window each time you click it, allowing multiple windows for multiple different images
- Art Journal - will simply change the image in your Art Journal, showing one image at a time, and providing a "slideshow" effect.
- Art Scene - will automatically display on the "Default Art Tile" in that Art Scene (see "Default Art Tiles" section for more info).
Note: A fourth option to Share URLs on specific tiles will be explained below in the Art Gallery section.
The Art Gallery - (New Features!)
Clicking the top button on the Sheet Image controls will display a button list of all of the tiles in the scene, and clicking on one of those buttons will display the specific image on that tile
art gallery display demo
Art Gallery Config
Open the Art Gallery Config to see all of the Gallery Tiles a scene.
You can open it by clicking on a button in the "Tiles" controls, or via utility buttons on any Journal Entry, Actor, or Item sheet.
Contextual instructions about each type of tile will show to the right
Click on the floating i button to toggle contextual instructions on and off.
config highlight demo
The Gallery Tiles shown in the "Art Gallery Config" automatically change depending on which scene you're viewing.
Upon switching a scene, the Config will update to show that particular scene's Art Gallery tiles.
change config based on scene
Default Art Tiles
Select a "Default Art Tile" for each scene in the Art Gallery config with Ctrl/Cmd + Click. (The "Default" tile will automatically be set to the first "linked" Art Tile in a scene )
default Art Tile demo
Clicking on a sheet image itself, rather than any of its controls, will automatically send it to the "Default Art Tile" in the current scene
display on default tile demo
Note: If you haven't manually selected a Default Art Tile, the first Art Tile in a scene that is linked to a tile on the canvas will be chosen as the Default Art Tile.
If there is no Art Tile that fits these conditions, you will receive a notification that there are no Default Art Tiles in the scene.
Art Tiles and Frame Tiles
- A frame tile acts like an "Frame" for the Art Tile.
- The "Frame" Tile will contain the Art Tile within it, making sure it gets no larger than the frame, but maintaining the image's original dimensions/aspect ratio.
- While an "Art Tile" can only have one "Frame Tile", a "Frame" tile can have more than one "Art Tile" linked to it, which can be useful for many reasons.
Frame Tiles vs Decorative Tiles
Frame Tiles are completely transparent by default, and are used specifically for sizing and positioning Art Tiles, not really meant for displaying anything themselves. If you want the visual of a "Frame" (like a picture frame, a door, a window, etc.) overlayed on top of your Art Tiles, like is demonstrated in the included "Premade Gallery Scene", you could either use 'decorative tiles', tiles on the canvas that are not linked to an Art or Frame tile, and position them manually, or use two Art Tiles bound to the same Frame Tile, with one on top to represent the actual visual "Frame", and another below to represent the "Art".
Here's an example of how you could layer the various Gallery tile types with decorative tiles and/or scene foreground/background images
Art and Frame Tiles (Cont.)
By default after an Art Tile is created, or if you select "Use Canvas as Frame", the Art Tile will treat the scene canvas's boundaries as its frame, getting no bigger than that.
Art frame tile bounding demo
You can change an Art Tile's "Frame" by selecting a new Frame in the dropdown on the ArtTile. Hovering over an Art Tile in the Art Gallery Config will also highlight the Frame Tile it was linked to
frame and art tile link demo
Gallery Tile Creation
When creating a new scene or viewing one without Art Gallery tiles, the Art Gallery Config will be blank.
You can create a new Gallery tile of either type by clicking on the "Create new Frame Tile" or "New Art Tile" buttons at the bottom of each column in the Art Gallery Config.
By default, these tiles will be "Unlinked", meaning they aren't connected to a 'physical' tile on the canvas. Unlinked tiles will show a warning on them indicating that they aren't linked.
To link an Gallery tile to a 'physical' tile on the Canvas, there are two methods.
One is to click the "Plus" button on an unlinked tile, which will create a new "blank" tile linked.
create new tile demo
A new Art Tile will be created with a black gradient as its image, while a new frame tile will have a completely transparent image (however you can still highlight both by hovering over them in the Art Gallery Config)
You can change the 'default' image for both Gallery tile types in the settings, as this also affects what image the Gallery tile 'resets' to if you 'clear' it (more on this functionality to be explained later)
Linking Preexisting Tiles
If you have pre-existing canvas tiles you wish to turn into Gallery Tiles, you can do that too.
Upon creating a new Gallery Tile in the Art Gallery Config, one of the buttons that will appear has a "link" icon.
Clicking on that button display a list of all the "Unlinked" tile objects in your current scene.
You can hover over each item in the list to highlight the specific tile on the canvas, and then click to select which one you would like to "link" to the Gallery Tile.
This works the same for both Art and Frame Tiles.
URL Image Sharing on Specific Art Tiles
- Clicking the icon highlighted below on a Gallery Tile item in the Scene Gallery Tile Config will bring up a small textbox.
- Here you can paste your Image URL and press Enter/Return (or click outside of the text box), and the image pointed to by the URL will be shared on the specific Art Tile.
Utilities, Settings and Customization
You can configure and customize various settings for this module.
The JTCS Art Gallery settings application can either be accessed as usual through the "Module Settings" tab in Foundry's default settings, or by clicking on this Gear icon in the Art Gallery Config app or on a sheet that has the controls toggled on.
> Here is what the JTCS Art Gallery Settings App looks like
Color Theme and Color Customization
Custom Colors
You can change the colors of various UI elements in the JTCS Art Gallery.
(Selecting a new color, and clicking "Apply" to see how it appears. )
The "Accent Color" property affects the colors of buttons, controls and inputs, including the color of the controls in Actor, Journal, and Item Sheets.
The "Background Color" property affects the background color of the "JTCS Art Gallery Settings" application and the "Scene Gallery Config" application.
The "Tile Indicator Colors" affect the colors that represent the different types of Gallery Tiles, both in the UI elements that represent them, and in the color they are highlighted on the canvas when hovering over the items in the UI.
Default Dark and Light Theme
There are two default themes included, one Dark and one Light.
You can switch between them by clicking one of the buttons in the JTCS Art Gallery Settings app, but do be aware that doing so will overwrite any custom colors you have chosen.
Tips and Utilities
Fading Overlapping Elements
There are various ways to fade parts of the UI or tiles on the screen to better see the Highlighted Gallery Tiles on the Canvas.
Fading Tiles
Clicking the button with two overlapping squares on a Gallery Tile item in the Scene Gallery Config App will make all tiles in the scene except the one whose button you clicked upon fade out/become partially translucent, allowing you to better see the highlighted area that represents each Gallery Tile if you have lots of tiles overlaid on top of each other.
Fading Journals
You can fade out the UI of the Journal Entry, Actor, and Item Sheets by clicking the Icon that looks like an Eye in the controls at the Sheets' bottom.
The transparency/fade can be toggled off by clicking the eye button once again.
(Note: (QOL/UX Improvement) This feature could be improved so that the Fade Toggle Button itself is fully opaque and visible regardless of if the fade feature is toggled on or off)
Fading the Scene Gallery Config App
This goes similarly for the Scene Gallery Config App.
(Note: The value dictating how transparent the document Sheets and the Scene Gallery Config App become when the fade function is toggled on can be changed in the JTCS Art Gallery Settings. )
