mNo edit summary |
mNo edit summary |
||
Line 24: | Line 24: | ||
-- if a type doesn't exist in the typeColor table. | -- if a type doesn't exist in the typeColor table. | ||
local mt = {__index = function () return "0,0,0" end} | local mt = {__index = function () return "0, 0, 0" end} | ||
setmetatable(typeColor, mt) | setmetatable(typeColor, mt) | ||
function p. | function p.GenerateUI( frame ) | ||
local | -- Parse the JSON input, returning an empty array if no argument was passed | ||
local | local inputs = mw.text.jsonDecode( frame.args.Inputs or '[]' ); | ||
local | local outputs = mw.text.jsonDecode( frame.args.Outputs or '[]' ); | ||
local globals = mw.text.jsonDecode( frame.args.Globals or '[]' ); | |||
local protofluxContainer = mw.html.create( ' | local protofluxContainer = mw.html.create( 'div' ) | ||
protofluxContainer | protofluxContainer | ||
: | :cssText('color: white; background-color: #11151d; width: 256px; display: flex; flex-direction: column; align-items: stretch;' ) | ||
:tag( 'div' ) | |||
:cssText('padding: 10px 0px 10px 0px; text-align:center; font-weight: bold; background-color: #1a2a36; font-size: 18pt; flex-grow: 1;') | |||
:tag( ' | |||
: | |||
:wikitext(frame.args.Name) | :wikitext(frame.args.Name) | ||
:done() | :done() | ||
local maxRows = math.max(# | local maxRows = math.max(#inputs, #outputs) | ||
for i=1,maxRows do | for i=1,maxRows do | ||
CreateIORow(protofluxContainer, | CreateIORow(protofluxContainer, inputs[i], outputs[i]); | ||
end | end | ||
for i=1,# | for i=1,#globals do | ||
CreateGlobalsRow(protofluxContainer, | CreateGlobalsRow(protofluxContainer, globals[i]); | ||
end | end | ||
protofluxContainer | protofluxContainer | ||
:tag( ' | :tag( 'div' ) | ||
:cssText( 'text-align: center; padding: 10px; font-size: 18pt; color: rgb(64,64,64); font-weight: bold;' ) | |||
: | |||
:wikitext(frame.args.Category) | :wikitext(frame.args.Category) | ||
Line 71: | Line 61: | ||
end | end | ||
function CreateIORow(Container, Input, Output) | function CreateIORow(Container, Input, Output) | ||
local inputRow = Container | local inputRow = Container | ||
:tag( ' | :tag( 'div' ) | ||
: | :cssText('display: flex; min-height: 70px;'); | ||
createIOBindingPost(inputRow, Input, true); | createIOBindingPost(inputRow, Input, true); | ||
inputRow | inputRow | ||
:tag( ' | :tag( 'div' ) -- The Input name | ||
: | :cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;') | ||
:tag( 'div' ) | |||
:cssText('text-align: left; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; border-right: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color:' .. getIOColor(Input, 0.6) .. ';') | |||
:wikitext( Input and Input.Name or ' ' ) | |||
:done() | |||
:tag( 'div') | |||
:cssText('text-align: right; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; border-left: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color: ' .. getIOColor(Output, 0.6) .. ';') | |||
:wikitext( Output and Output.Name or ' ' ) | |||
: done() | |||
createIOBindingPost(inputRow, Output, false); | createIOBindingPost(inputRow, Output, false); | ||
end | end | ||
Line 98: | Line 87: | ||
function CreateGlobalsRow(Container, Global) | function CreateGlobalsRow(Container, Global) | ||
local inputRow = Container | local inputRow = Container | ||
:tag( ' | :tag( 'div' ) | ||
:cssText('display: flex; min-height: 70px; flex-direction: column; border-left: 10px solid ' .. getIOColor(Global, 1.0) .. ';') | |||
:tag( 'div' ) -- The Input name | |||
:cssText('display: flex; flex-direction: row; align-items: center; flex-grow:1; overflow: hidden;') | |||
:tag( 'span' ) | |||
:cssText('text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 14pt; font-weight: bold; flex-grow:1;') | |||
:tag( ' | :wikitext( Global and Global.Name or ' ' ) | ||
: | :done() | ||
:done() | :done() | ||
:tag( 'div' ) | :tag( 'div' ) | ||
:attr('style', ' | :attr('style', 'display:flex; gap: 10px; flex-grow: 1;') | ||
:tag(' | :tag('div') | ||
:attr('style', 'border-radius: 16px; background-color: #777; font-style: italic; text-align:center; flex-grow: 3;') | :attr('style', 'border-radius: 16px; background-color: #777; font-style: italic; text-align:center; flex-grow: 3; display: flex; flex-direction: column; justify-content: center;') | ||
:tag( 'span' ) | |||
:wikitext( 'null' ) | |||
:done() | |||
:done() | :done() | ||
:tag( ' | :tag( 'div') | ||
:attr('style', 'border-radius: 16px; background-color: #333; text-align:center; flex-grow: 1; | :attr('style', 'border-radius: 16px; background-color: #333; text-align:center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;') | ||
:tag ( 'span' ) | |||
:wikitext( '∅' ) | |||
end | end | ||
function createIOBindingPost(Container, Connector, isInput) | function createIOBindingPost(Container, Connector, isInput) | ||
Container | Container | ||
:tag( ' | :tag( 'div' ) | ||
: | :cssText('min-width:30px; background-color: ' .. getIOColor(Connector, 0.3) .. '; border: 5px solid ' .. getIOColor(Connector, 1.0) .. (isInput and '; border-left: none;' or ';border-right: none;')) | ||
end | end | ||
Revision as of 22:04, 13 January 2024
Documentation for this module may be created at Module:Test/doc
local p = {}
-- Type colors - RGB values to be included in the HTML output when a color is needed
local typeColor =
{
User = '255, 128, 255',
Impulse = '179, 255, 255',
Bool = '115, 115, 115',
Boolean = '115, 115, 115',
AsyncImpulse = '204, 179, 255',
String = '245, 31, 31',
Dummy = '255, 0, 255',
IFormatProvider = '168, 143, 214',
float = '0, 255, 255',
ColorProfile = '255, 196, 54',
colorX = '255, 89, 0',
Component = '112, 76, 85',
float3 = '0, 255, 255',
float2 = '0, 255, 255'
}
-- Set the __index function of the metatable to return '0, 0, 0' - this effectively acts as the default value
-- if a type doesn't exist in the typeColor table.
local mt = {__index = function () return "0, 0, 0" end}
setmetatable(typeColor, mt)
function p.GenerateUI( frame )
-- Parse the JSON input, returning an empty array if no argument was passed
local inputs = mw.text.jsonDecode( frame.args.Inputs or '[]' );
local outputs = mw.text.jsonDecode( frame.args.Outputs or '[]' );
local globals = mw.text.jsonDecode( frame.args.Globals or '[]' );
local protofluxContainer = mw.html.create( 'div' )
protofluxContainer
:cssText('color: white; background-color: #11151d; width: 256px; display: flex; flex-direction: column; align-items: stretch;' )
:tag( 'div' )
:cssText('padding: 10px 0px 10px 0px; text-align:center; font-weight: bold; background-color: #1a2a36; font-size: 18pt; flex-grow: 1;')
:wikitext(frame.args.Name)
:done()
local maxRows = math.max(#inputs, #outputs)
for i=1,maxRows do
CreateIORow(protofluxContainer, inputs[i], outputs[i]);
end
for i=1,#globals do
CreateGlobalsRow(protofluxContainer, globals[i]);
end
protofluxContainer
:tag( 'div' )
:cssText( 'text-align: center; padding: 10px; font-size: 18pt; color: rgb(64,64,64); font-weight: bold;' )
:wikitext(frame.args.Category)
return tostring(protofluxContainer);
end
function CreateIORow(Container, Input, Output)
local inputRow = Container
:tag( 'div' )
:cssText('display: flex; min-height: 70px;');
createIOBindingPost(inputRow, Input, true);
inputRow
:tag( 'div' ) -- The Input name
:cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;')
:tag( 'div' )
:cssText('text-align: left; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; border-right: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color:' .. getIOColor(Input, 0.6) .. ';')
:wikitext( Input and Input.Name or ' ' )
:done()
:tag( 'div')
:cssText('text-align: right; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; border-left: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color: ' .. getIOColor(Output, 0.6) .. ';')
:wikitext( Output and Output.Name or ' ' )
: done()
createIOBindingPost(inputRow, Output, false);
end
-- Each Globlals row is really 2 rows high.
function CreateGlobalsRow(Container, Global)
local inputRow = Container
:tag( 'div' )
:cssText('display: flex; min-height: 70px; flex-direction: column; border-left: 10px solid ' .. getIOColor(Global, 1.0) .. ';')
:tag( 'div' ) -- The Input name
:cssText('display: flex; flex-direction: row; align-items: center; flex-grow:1; overflow: hidden;')
:tag( 'span' )
:cssText('text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 14pt; font-weight: bold; flex-grow:1;')
:wikitext( Global and Global.Name or ' ' )
:done()
:done()
:tag( 'div' )
:attr('style', 'display:flex; gap: 10px; flex-grow: 1;')
:tag('div')
:attr('style', 'border-radius: 16px; background-color: #777; font-style: italic; text-align:center; flex-grow: 3; display: flex; flex-direction: column; justify-content: center;')
:tag( 'span' )
:wikitext( 'null' )
:done()
:done()
:tag( 'div')
:attr('style', 'border-radius: 16px; background-color: #333; text-align:center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;')
:tag ( 'span' )
:wikitext( '∅' )
end
function createIOBindingPost(Container, Connector, isInput)
Container
:tag( 'div' )
:cssText('min-width:30px; background-color: ' .. getIOColor(Connector, 0.3) .. '; border: 5px solid ' .. getIOColor(Connector, 1.0) .. (isInput and '; border-left: none;' or ';border-right: none;'))
end
function getIOColor(Connector, alpha)
return (Connector and 'rgba(' .. typeColor[Connector.Type] .. ',' .. alpha .. ')' or 'rgba(0,0,0,0)')
end
return p