A comprehensive library for creating and displaying tutorial pages with images, text, and navigation controls to guide users through curated content
Description
A comprehensive library for creating and displaying tutorial pages with images, text, and navigation controls to guide users through curated content in World of Warcraft addons.
Features
Tutorial System (Krowi_Tutorials)
- Page-Based Tutorials: Create multi-page tutorials with images and text
- Image Support: Display images with customizable sizes and margins
- Flexible Layout: Customize text margins, frame titles, and page content
- Navigation Controls: Built-in page navigation for easy browsing
- State Persistence: Remembers the last viewed page using SavedVariables
- Easy Integration: Simple API for quick implementation
- LibStub Support: Standard LibStub library structure for dependency management
Usage Examples
Basic Tutorial Setup
local tutorials = LibStub("Krowi_Tutorials")
local featuresTutorial = tutorials:New("FeaturesTutorial", SavedData)
-- Configure the tutorial
featuresTutorial:SetFrameTitle("Your Title")
-- Create pages
local pages = {}
tinsert(pages, {
Image = "Interface\\AddOns\\YourAddon\\Images\\Feature1",
ImageSize = {930, 158},
SubTitle = "Feature 1 Overview",
Text = "Detailed description of your first feature..."
})
tinsert(pages, {
Image = "Interface\\AddOns\\YourAddon\\Images\\Feature2",
ImageSize = {930, 158},
SubTitle = "Feature 2 Overview",
Text = "Detailed description of your second feature..."
})
-- Apply pages and display
featuresTutorial:SetPages(pages)
featuresTutorial:SetImageMargin(10)
featuresTutorial:SetTextMargin({10, 0, 10, 20})
featuresTutorial:ShowTutorial(1) -- Show page 1API Reference
Tutorial Arguments
When creating a new tutorial with New(key, savedVariables, icon, font):
| Argument | Required | Description |
|---|---|---|
key |
Yes | The variable name used to save the last viewed page index |
savedVariables |
Yes | The table used in the .toc file for SavedVariables |
icon |
Optional | Path to image (tga or blp). Default is '?'-mark |
font |
Optional | Font name to be used. Default is GameFontHighlight |
Tutorial Functions
| Function | Description |
|---|---|
New(key, savedVariables, icon, font) |
Creates a new tutorial frame |
SetPages(pages) |
Sets the pages the tutorial contains |
AddPage(page) |
Adds a single page to the tutorial |
Reset() |
Resets the tutorial to start on the first page |
ShowTutorial(pageIndex) |
Shows the tutorial on the specified page |
SetFrameTitle(title) |
Sets the title at the top of the tutorial window (can be overwritten by page's 'Title') |
SetFrameWidth(width) |
Sets the internal frame width (without borders). Default is 532. Can be overwritten by page's 'Width' |
SetCloseButtonHook(func) |
Hooks a function to the closing of the tutorial |
SetImageSize(width, height) |
Set the image size for all pages |
SetImageMargin(margin) |
Set the image margins for all pages |
SetTextSize(width, height) |
Set the text size for all pages |
SetTextMargin(margin) |
Set the text margins for all pages |
Page Arguments
All page arguments are optional and can also be declared at the tutorial level:
| Argument | Type | Default | Description |
|---|---|---|---|
Point |
string | "CENTER" | Used in Tutorial:SetPoint |
RelativeFrame |
frame | UIParent | Used in Tutorial:SetPoint |
RelativePoint |
string | "CENTER" | Used in Tutorial:SetPoint |
OffsetX |
number | 0 | Used in Tutorial:SetPoint |
OffsetY |
number | 0 | Used in Tutorial:SetPoint |
Title |
string | "Tutorial" | Overwrites SetFrameTitle for the specific page |
Width |
number | 50 | Overwrites SetFrameWidth for the specific page |
Image |
string | none | Image path (tga or blp) |
ImageSize |
table | {0, 0} | {Width, Height} of the image |
ImageTexCoord |
table | {0, 1, 0, 1} | {Left, Right, Top, Bottom}. See SetTexCoord |
ImageMargin |
table | {0, 0, 0, 0} | {Left, Top, Right, Bottom} margins of the image |
Text |
string | none | Text string displayed under Image if provided |
TextSize |
table | {0, 0} | {Width, Height} of the text area. Auto Width/Height if default |
TextMargin |
table | {0, 0, 0, 0} | {Left, Top, Right, Bottom} margins of the text area |
Shine |
frame | none | The frame to anchor the flashing "look at me!" glow |
ShineAll |
number | none | Set ShineTop, ShineBottom, ShineLeft, ShineRight to the same value |
ShineWidth |
number | none | Set ShineLeft, ShineRight to the same value |
ShineHeight |
number | none | Set ShineTop, ShineBottom to the same value |
ShineTop |
number | none | Top offset for shine effect |
ShineBottom |
number | none | Bottom offset for shine effect |
ShineLeft |
number | none | Left offset for shine effect |
ShineRight |
number | none | Right offset for shine effect |
Use Cases
- Feature walkthroughs for new users
- Update announcements with visual guides
- Configuration help screens
- Achievement or quest guides
- Step-by-step instructions
- Changelog displays with images
- Any scenario requiring visual documentation
Requirements
- LibStub