UIKit
UIKit
Overview
UIKit is a small Pine Script v6 library of chart interface helpers: a table colour theme that can follow the chart background, a table factory with one shared frame style, a converter from settings text such as "Top Right" to a table position, and a vertical gauge drawn beside the last bar for oscillators.
It exists so that scripts with several tables (dashboards, scorecards, option chains) look consistent in dark and light charts without each script repeating a dozen colour functions.
What's inside
Quick start
Pine Script®
Notes
Demo
Add the library to a chart on its own to see a demo that uses every exported function.
Library "UIKit"
Chart UI helpers: a dark / light table colour theme that can follow the chart background, a table
factory with one shared frame style, settings-string to position conversion, and a vertical gauge
drawn beside the last bar for oscillators.
theme(mode, textSize)
Table colour theme.
Parameters:
mode (string): (series string) "Auto" (dark when the chart background is dark), "Dark" or "Light".
textSize (string): (series string) "Small", "Normal" or "Large". Optional. Default is "Normal".
Returns: (Theme) The theme.
toPosition(pos)
Converts a settings string such as "Top Left" or "Middle Center" to a `position.*` value.
Parameters:
pos (string): (series string) "Top|Middle|Bottom" + " " + "Left|Center|Right". Anything else is bottom right.
Returns: (string) The position.
newTable(pos, columns, rows)
Creates a table with the shared frame style (black background, silver frame and borders). Declare the
result with `var` so the table is created once.
Parameters:
pos (string): (series string) A position string, as for `toPosition()`.
columns (int): (series int) Number of columns.
rows (int): (series int) Number of rows.
Returns: (table) The new table.
gauge(offset, top, bottom, valuePct, marker, valueCol, valueText, name, rangeCol, basePct)
Draws a vertical gauge `offset` bars right of the last bar: a range arrow from `bottom` to `top`, a tick at
`basePct`, a marker at `valuePct`, the value text under the range and the name above it. Draws on the last
bar only and replaces its own previous drawings, so call it on every bar (each call site keeps its own
drawings).
Parameters:
offset (int): (series int) Bars right of the last bar.
top (float): (series float) Price at 100%.
bottom (float): (series float) Price at 0%.
valuePct (float): (series float) Marker position, 0-100 of the range (clamped).
marker (string): (series string) Marker text, e.g. "◈".
valueCol (color): (series color) Colour of the marker and the value text.
valueText (string): (series string) Value text shown under the range.
name (string): (series string) Name shown above the range.
rangeCol (color): (series color) Colour of the range arrow and the tick.
basePct (float): (series float) Tick position, 0-100 of the range. Optional. Default is 50.
Returns: (void)
Theme
Table colours for one panel shade, returned by `theme()`.
Fields:
dark (series bool): The panel is dark.
textSize (series string): Table text size.
up (series color): Bullish / positive text.
down (series color): Bearish / negative text.
warn (series color): Warning / highlight text.
neutral (series color): Neutral text.
aqua (series color): Accent text.
headerBg (series color): Header row background.
bodyBg (series color): Body row background.
footerBg (series color): Footer / title row background.
accentBg (series color): Accent cell background.
centerBg (series color): Highlighted center cell background.
longBg (series color): Long-trade cell background.
shortBg (series color): Short-trade cell background.
Overview
UIKit is a small Pine Script v6 library of chart interface helpers: a table colour theme that can follow the chart background, a table factory with one shared frame style, a converter from settings text such as "Top Right" to a table position, and a vertical gauge drawn beside the last bar for oscillators.
It exists so that scripts with several tables (dashboards, scorecards, option chains) look consistent in dark and light charts without each script repeating a dozen colour functions.
What's inside
- theme(mode, textSize): returns a Theme with text colours (up, down, warn, neutral, aqua), backgrounds (header, body, footer, accent, center, long trade, short trade), a dark flag and a table text size. Mode "Auto" picks dark or light from the chart background brightness.
- toPosition(pos): converts "Top Left", "Middle Center", "Bottom Right" and the other combinations to a position.* value.
- newTable(pos, columns, rows): creates a table with the shared frame and border style. Declare the result with var.
- gauge(offset, top, bottom, valuePct, marker, valueCol, valueText, name, rangeCol, basePct): draws a vertical gauge to the right of the last bar: a range arrow, a reference tick, a marker at the value's position (0-100% of the range), the value below and the name above. Each call site keeps and replaces its own drawings.
Quick start
Notes
- gauge() draws only on the last bar and must be able to reach a few bars into the future; keep offsets small.
- Chart background detection reads chart.bg_color, which is fixed for a script run; switching the chart theme recalculates the script.
Demo
Add the library to a chart on its own to see a demo that uses every exported function.
Library "UIKit"
Chart UI helpers: a dark / light table colour theme that can follow the chart background, a table
factory with one shared frame style, settings-string to position conversion, and a vertical gauge
drawn beside the last bar for oscillators.
theme(mode, textSize)
Table colour theme.
Parameters:
mode (string): (series string) "Auto" (dark when the chart background is dark), "Dark" or "Light".
textSize (string): (series string) "Small", "Normal" or "Large". Optional. Default is "Normal".
Returns: (Theme) The theme.
toPosition(pos)
Converts a settings string such as "Top Left" or "Middle Center" to a `position.*` value.
Parameters:
pos (string): (series string) "Top|Middle|Bottom" + " " + "Left|Center|Right". Anything else is bottom right.
Returns: (string) The position.
newTable(pos, columns, rows)
Creates a table with the shared frame style (black background, silver frame and borders). Declare the
result with `var` so the table is created once.
Parameters:
pos (string): (series string) A position string, as for `toPosition()`.
columns (int): (series int) Number of columns.
rows (int): (series int) Number of rows.
Returns: (table) The new table.
gauge(offset, top, bottom, valuePct, marker, valueCol, valueText, name, rangeCol, basePct)
Draws a vertical gauge `offset` bars right of the last bar: a range arrow from `bottom` to `top`, a tick at
`basePct`, a marker at `valuePct`, the value text under the range and the name above it. Draws on the last
bar only and replaces its own previous drawings, so call it on every bar (each call site keeps its own
drawings).
Parameters:
offset (int): (series int) Bars right of the last bar.
top (float): (series float) Price at 100%.
bottom (float): (series float) Price at 0%.
valuePct (float): (series float) Marker position, 0-100 of the range (clamped).
marker (string): (series string) Marker text, e.g. "◈".
valueCol (color): (series color) Colour of the marker and the value text.
valueText (string): (series string) Value text shown under the range.
name (string): (series string) Name shown above the range.
rangeCol (color): (series color) Colour of the range arrow and the tick.
basePct (float): (series float) Tick position, 0-100 of the range. Optional. Default is 50.
Returns: (void)
Theme
Table colours for one panel shade, returned by `theme()`.
Fields:
dark (series bool): The panel is dark.
textSize (series string): Table text size.
up (series color): Bullish / positive text.
down (series color): Bearish / negative text.
warn (series color): Warning / highlight text.
neutral (series color): Neutral text.
aqua (series color): Accent text.
headerBg (series color): Header row background.
bodyBg (series color): Body row background.
footerBg (series color): Footer / title row background.
accentBg (series color): Accent cell background.
centerBg (series color): Highlighted center cell background.
longBg (series color): Long-trade cell background.
shortBg (series color): Short-trade cell background.
คำจำกัดสิทธิ์ความรับผิดชอบ
ข้อมูลและบทความไม่ได้มีวัตถุประสงค์เพื่อก่อให้เกิดกิจกรรมทางการเงิน, การลงทุน, การซื้อขาย, ข้อเสนอแนะ หรือคำแนะนำประเภทอื่น ๆ ที่ให้หรือรับรองโดย TradingView อ่านเพิ่มเติมใน ข้อกำหนดการใช้งาน
คำจำกัดสิทธิ์ความรับผิดชอบ
ข้อมูลและบทความไม่ได้มีวัตถุประสงค์เพื่อก่อให้เกิดกิจกรรมทางการเงิน, การลงทุน, การซื้อขาย, ข้อเสนอแนะ หรือคำแนะนำประเภทอื่น ๆ ที่ให้หรือรับรองโดย TradingView อ่านเพิ่มเติมใน ข้อกำหนดการใช้งาน