QFS ‐ QFSDI ‐ Current Skin path ‐ Skin config ‐ Panel - stevehsudrawing/quantoflx GitHub Wiki

Navigation

QFS ‐ QFSDI ‐ Current Skin path - Skin config - Panel

Refer to: QFCCFD ‐ @Resources - Config - Style - Panel.inc

Get Started
Create a skin with scrolling content and Quick Resize function
Create a skin with Quick Resize function

Get started

To create a Panel skin, you should first add the following phrase to the beginning of the Config:

[Metadata]
Author=Your Name
Version=0.0.1
License=CC BY-NC-SA 4.0 International

[Variables]

; Package Root, usually `Package`
Pk.Rt=Package

; Package Internal Name
Pk.Nm=Custom.MyPackage1

; Skin Internal Name
Sk.Nm=SampleSkin

; Skin Type (Panel / Window / SkinSettings / Resizing)
Sk.Ty=Panel

; If you want to create a `Panel` type skin, then the `PW` and `PH` variables MUST be explicit
; You can explicit them in the current config or `#Pk@#Config\SkinSettings\SampleSkin.inc`
; The actual size of the skin is (#PW#*64*#Sc#) * (#PH#*64*#Sc#)

; Panel Width (Range: 1 - 16)
PW=4

; Panel Height (Range: 1 - 16)
PH=4

; Import the necessary configurations
@include=#@#Config\Global.inc
@include2=#@#Config\GlobalConfig.inc

; Background: General Panel Appearance
[Mt.Pn]
Meter=Shape
MeterStyle=St.Pn

; Content Container: Panel Zone
; All meters after this MUST first apply the `St.Zn` Style
[Mt.Zn]
Meter=Shape
MeterStyle=St.Zn

; Exterior Appearance: Panel Light Effect
[Mt.Le]
Meter=Shape
MeterStyle=St.Le

And add the following variables to #Pk@#Config\SkinSettings\SampleSkin.inc:

; Combination - Left (0/1)
Bnd.L=0
; Combination - Right (0/1)
Bnd.R=0
; Combination - Top (0/1)
Bnd.T=0
; Combination - Bottom (0/1)
Bnd.B=0

; Enable Gradient Background (0/1)
PnGdnt.Enab=0
; Gradient Background - Color 1 (Format: "R,G,B")
PnGdnt.Cl.01=180,220,255
; Gradient Background - Color 2 (Format: "R,G,B")
PnGdnt.Cl.02=255,255,255
; Gradient Background - Orientation (Range: 0 - 360)
PnGdnt.Ag=90

; Opacity (Range: 0.0 - 1.0)
Op.Bg_Cstm=1

Create a skin with scrolling content and Quick Resize function

[!CAUTION] St.PnSr is not compatible with St.PnQRsz_1.

If you want the content in the skin to be scrollable, you should first add the following variables to the current config:

; Scroll index
; This variable determines the location of the first Meter or the part currently displayed
Index=0

; Scroll offset
; This variable determines the index that will be added or subtracted by scrolling the mouse wheel once
IdxSpLt=1

; The total quantity of items
; It can be the total quantity of items, or the height of one or more Meters (use section variable, such as `([Mt.Sample1:H]+[Mt.Sample2:H])`)
MaxQ=16

; The quantity of items on display
DisQ=6

; Additional command executed when "Scroll previously or to the next" is executed
PMSUA=[]
PMSDA=[]

; Additional command executed when "Scroll to the previous/next page" is executed
PMSUAPg=[]
PMSDAPg=[]

; Auto Quantity
; You can explicit it in the current config or `#Pk@#Config\SkinSettings\SampleSkin.inc`
; 0 - The "Quick Resize" button will be displayed when the cursor is placed on the skin
; 1 - The "Quick Resize" button will NOT be displayed when the cursor is placed on the skin
AutoQ=0

And the following Measure:

; Determine whether the current quantity of items is sufficient to be displayed
[Ms.Calc.IsFull]
Measure=Calc
DynamicVariables=1

; Acceptable values: 0/1
; It should be a logical expression
; 0 - Not full
; 1 - Full
Formula=(#DisQ#<#MaxQ#)

Then, add St.PnSr to the end of the Style key of the Mt.Pn Meter, like this:

[Mt.Pn]
Meter=Shape
MeterStyle=St.Pn|St.PnSr

Add an Index variable for the position of the scrolled content in response to scrolling.

This is a demonstration of how items can be written to scroll in a vertical arrangement. Note the #Index# in the X or Y key.

; Vertically arranged items

; Custom display zone
[Mt.Zn2]
Meter=Shape
MeterStyle=St.Zn
Shape2=Rectangle 0,0,(64*#PW#*#sc#),(48*#sc#)
Shape3=Rectangle 0,(#CURRENTCONFIGHEIGHT#-16*#sc#),(64*#PW#*#sc#),(16*#sc#)
Shape4=Combine Shape | Exclude Shape2 | Exclude Shape3

; Item (text) Style
[St.Cstm.Tx.01]
Text=Lorem Ipsum dolor sit amet

; Style that places the next Meter directly below the previous Meter
[St.Cstm.Ps.YNx.01]
X=0r
Y=(32*#sc#)r

; Items
[Mt.Item.00]
Meter=String
MeterStyle=St.ZnCt2|St.Ft|St.Cstm.Tx.01|St.Bt.Gn
X=(16*#sc#)
Y=((64-32*#Index#)*#sc#)
[Mt.Item.01]
Meter=String
MeterStyle=St.ZnCt2|St.Ft|St.Cstm.Tx.01|St.Bt.Gn|St.Cstm.Ps.YNx.01
[Mt.Item.02]
Meter=String
MeterStyle=St.ZnCt2|St.Ft|St.Cstm.Tx.01|St.Bt.Gn|St.Cstm.Ps.YNx.01
[Mt.Item.03]
Meter=String
MeterStyle=St.ZnCt2|St.Ft|St.Cstm.Tx.01|St.Bt.Gn|St.Cstm.Ps.YNx.01
; ......

; Item Hovers
[HMt.Item.00]
Meter=Shape
MeterStyle=St.ZnCt2|St.Cstm.Hv.01
Y=((48-32*#Index#)*#sc#)
[HMt.Item.01]
Meter=Shape
MeterStyle=St.ZnCt2|St.Cstm.Hv.01|St.Cstm.Ps.YNx.01
[HMt.Item.02]
Meter=Shape
MeterStyle=St.ZnCt2|St.Cstm.Hv.01|St.Cstm.Ps.YNx.01
[HMt.Item.03]
Meter=Shape
MeterStyle=St.ZnCt2|St.Cstm.Hv.01|St.Cstm.Ps.YNx.01
; ......

Add these meters to the end of this config.

You don't have to worry about the Style keys in these Meters. If you need to change the position, just modify the X and Y keys.

If you need the appearance of horizontal scrolling, just replace all occurrences of the Ver keyword with Hor.

; Scroll bar appearance
[Mt.Srbr]
Meter=Shape
MeterStyle=St.ZnCt|St.Srbr.Ver

; When Touch Mode is enabled, these buttons will appear when the cursor is over the skin

; "Scroll to the Previous Page" Button
[Mt.Bt.MvPrePg.00]
Meter=Shape
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Bt.Sp|St.Sp.MvBts|St.Bt.MvPrePg
X=(#CURRENTCONFIGWIDTH#-(12+24)*#sc#)
Y=((12+40)*#sc#)
; Horizontally:
; X=(12*#sc#)
; Y=(#CURRENTCONFIGHEIGHT#-((12+24))*#sc#)

; "Scroll Previously" Button
[Mt.Bt.MvPre.00]
Meter=Shape
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Bt.Sp|St.Sp.MvBts|St.Bt.MvPre
X=(#CURRENTCONFIGWIDTH#-(12+24+32)*#sc#)
Y=((12+40)*#sc#)
; Horizontally:
; X=(12*#sc#)
; Y=(#CURRENTCONFIGHEIGHT#-((12+24+32))*#sc#)

; "Scroll to the Next" Button
[Mt.Bt.MvNxt.00]
Meter=Shape
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Bt.Sp|St.Sp.MvBts|St.Bt.MvNxt
X=(#CURRENTCONFIGWIDTH#-(12+24+32)*#sc#)
Y=(#CURRENTCONFIGHEIGHT#-(12+32)*#sc#)
; Horizontally:
; X=(#CURRENTCONFIGWIDTH#-((12+24))*#sc#)
; Y=(#CURRENTCONFIGHEIGHT#-((12+24+32))*#sc#)

; "Scroll to the Next Page" Button
[Mt.Bt.MvNxtPg.00]
Meter=Shape
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Bt.Sp|St.Sp.MvBts|St.Bt.MvNxtPg
X=(#CURRENTCONFIGWIDTH#-(12+24)*#sc#)
Y=(#CURRENTCONFIGHEIGHT#-(12+32)*#sc#)
; Horizontally:
; X=(#CURRENTCONFIGWIDTH#-((12+24))*#sc#)
; Y=(#CURRENTCONFIGHEIGHT#-((12+24))*#sc#)

; Icons
; The positions of these icons will be adjusted automatically, so there is no need to modify the positions
[Mt.Bt.MvPrePg.01]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvPrePg.Ver.01
[Mt.Bt.MvPrePg.02]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvPrePg.Ver.02
[Mt.Bt.MvNxtPg.01]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvNxtPg.Ver.01
[Mt.Bt.MvNxtPg.02]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvNxtPg.Ver.02
[Mt.Bt.MvPre.01]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvPre.Ver
[Mt.Bt.MvNxt.01]
Meter=Image
MeterStyle=St.ZnCt|St.Gp.MvBts|St.Mi|St.Sl|St.Im.MvBts|St.Im.MvNxt.Ver

When the AutoQ variable is set to 0, you also need to add the following meter at the end of the config, and create a new Resizing.ini in the current directory.

; "Quick Resizing" Function Entry
[Mt.Rsz]
Meter=Image
MeterStyle=St.ZnCt|St.Mi|St.Rsz

; Items are vertically arranged, so the following key should be added for a better guidance
MouseActionCursorName=SIZE_NS

; If it is necessary to distinguish the direction, then this key can be added to modify the config to be switched
; LeftMouseDownAction=[!ActivateConfig "#CURRENTCONFIG#" "Resizing_Ver.ini"]

When the AutoQ variable is set to 1, this does not necessarily mean that the quantity of displayed items will be consistent with the total quantity of items, and it may also indicate that this configuration does not require the "Quick Resizing" feature.

If you really want the displayed item quantity to be consistent with the total quantity of items, then you should put the DisQ variable in the appropriate place (such as #Pk@#Config\SkinSettings\SampleSkin.inc, so it can be set in the skin settings) and then add the following measure:

[Ms.AutoQ]
Measure=Calc
Formula=((Clamp(([&Ms.ActualQuantity]),4,32))<>#Quantity#)
IfCondition=([Ms.AutoQ]=1)
IfTrueAction=[!WriteKeyValue "Variables" "Quantity" "(Clamp(([&Ms.ActualQuantity]),4,32))" "#Pk@#Config\SkinSettings\#Sk.Nm#.inc"][!Refresh]
DynamicVariables=1
Disabled=1

Create a skin with Quick Resize function

[!CAUTION] St.PnQRsz_1 is not compatible with St.PnSr.

First, add the following variable to #Pk@#Config\SkinSettings\SampleSkin.inc:

; Enable "Quick Resizing" function or not
QRsz=1

Then add St.PnQRsz_#QRsz# to the end of the Style key of the Mt.Pn Meter, like this:

[Mt.Pn]
Meter=Shape
MeterStyle=St.Pn|St.PnQRsz_#QRsz#

Finally, add the following meter at the end of the config:

; "Quick Resizing" Function Entry
[Mt.Rsz]
Meter=Image
MeterStyle=St.ZnCt|St.Mi|St.Rsz