Module:Test: Difference between revisions

From Resonite Wiki
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.ProtoFlux( frame )
function p.GenerateUI( frame )
  local inputsDecode = mw.text.jsonDecode( frame.args.Inputs );
-- Parse the JSON input, returning an empty array if no argument was passed
  local outputsDecode = mw.text.jsonDecode( frame.args.Outputs );
  local inputs = mw.text.jsonDecode( frame.args.Inputs or '[]' );
  local globalsDecode = mw.text.jsonDecode( frame.args.Globals );
  local outputs = mw.text.jsonDecode( frame.args.Outputs or '[]' );
  local globals = mw.text.jsonDecode( frame.args.Globals or '[]' );


  local protofluxContainer = mw.html.create( 'table' )
  local protofluxContainer = mw.html.create( 'div' )
   
   
  protofluxContainer
  protofluxContainer
   :attr( 'cellspacing', '0px')
   :cssText('color: white; background-color: #11151d; width: 256px; display: flex; flex-direction: column; align-items: stretch;' )
  :attr( 'style', 'color: white; background-color: #11151d;' )
   :tag( 'div' )
  :attr( 'width', "256px" )
   :cssText('padding: 10px 0px 10px 0px; text-align:center; font-weight: bold; background-color: #1a2a36; font-size: 18pt; flex-grow: 1;')
   :tag( 'tr' )
   :attr( 'style', 'height: 50px; background-color: #1a2a36; font-size: 18pt;')
  :tag( 'th' )
    :attr('width', '15%')
    :done()
  :tag( 'th' )
    :attr('width', '70%')
     :wikitext(frame.args.Name)
     :wikitext(frame.args.Name)
     :done()
     :done()
  :tag( 'th')
    :attr('width', '15%');


  local maxRows = math.max(#inputsDecode, #outputsDecode)
  local maxRows = math.max(#inputs, #outputs)
  for i=1,maxRows do
  for i=1,maxRows do
   CreateIORow(protofluxContainer, inputsDecode[i], outputsDecode[i]);
   CreateIORow(protofluxContainer, inputs[i], outputs[i]);
  end
  end
   
   
  for i=1,#globalsDecode do
  for i=1,#globals do
CreateGlobalsRow(protofluxContainer, globalsDecode[i]);
CreateGlobalsRow(protofluxContainer, globals[i]);
  end
  end
   
   
protofluxContainer
protofluxContainer
  :tag( 'tr' )
  :tag( 'div' )
  :tag( 'td' )
   :cssText( 'text-align: center; padding: 10px; font-size: 18pt; color: rgb(64,64,64); font-weight: bold;' )
   :attr('colspan', '3')
  :attr('style', '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
 
-- Each Input/Output row is really 2 rows high.
function CreateIORow(Container, Input, Output)
function CreateIORow(Container, Input, Output)
  local inputRow = Container
  local inputRow = Container
   :tag( 'tr' )
   :tag( 'div' )
   :attr( 'style', 'height: 36px;');
   :cssText('display: flex; min-height: 70px;');
  createIOBindingPost(inputRow, Input, true);
  createIOBindingPost(inputRow, Input, true);
inputRow
inputRow
   :tag( 'td' ) -- The Input name
   :tag( 'div' ) -- The Input name
     :attr( 'style', 'text-align: left; border-right: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color:' .. getIOColor(Input, 0.6) .. ';')
     :cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;')
    :wikitext( Input and Input.Name or ' ' )
    :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);
Container
  :tag( 'tr')
  :attr( 'style', 'height: 36px;')
  :tag( 'td' )
    :attr( 'style', 'text-align: right; 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()
    
    
end
end
Line 98: Line 87:
function CreateGlobalsRow(Container, Global)
function CreateGlobalsRow(Container, Global)
  local inputRow = Container
  local inputRow = Container
   :tag( 'tr' )
   :tag( 'div' )
  :attr( 'style', 'height: 36px;')
    :cssText('display: flex; min-height: 70px; flex-direction: column; border-left: 10px solid ' .. getIOColor(Global, 1.0) .. ';')
    :tag( 'td' )
:tag( 'div' ) -- The Input name
    :attr( 'rowspan', '2' )
       :cssText('display: flex; flex-direction: row; align-items: center; flex-grow:1; overflow: hidden;')
:attr( 'colspan', '3')
  :tag( 'span' )
    :attr( 'style', 'border-left: 10px solid ' .. getIOColor(Global, 1.0) .. ';')
  :cssText('text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 14pt; font-weight: bold; flex-grow:1;')
:tag( 'span' ) -- The Input name
      :wikitext( Global and Global.Name or ' ' )
       :attr( 'style', 'text-align: center; font-weight: bold; display:block;')
  :done()
      :wikitext( Global and Global.Name or ' ' )
:done()
:done()
:tag( 'div' )
:tag( 'div' )
       :attr('style', 'width:100%; display:flex; gap: 10px;')
       :attr('style', 'display:flex; gap: 10px; flex-grow: 1;')
       :tag('span')
       :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;')
      :wikitext( 'null' )
        :tag( 'span' )
    :wikitext( 'null' )
    :done()
  :done()
  :done()
  :tag( 'span')
  :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;')
      :wikitext( '∅' )
      :tag ( 'span' )
Container
  :wikitext( '' )  
  :tag( 'tr')
  :attr( 'style', 'height: 36px;')
 
end
end


function createIOBindingPost(Container, Connector, isInput)
function createIOBindingPost(Container, Connector, isInput)
if nil and Connector and Connector.Type == "Impulse" then
  Container
    :tag( 'td' )
    :attr( 'rowspan', '2' )
    :attr( 'style', 'background-color: black; border-style: none;')
    :tag( 'svg' )
      :attr( 'width', '38')
      :attr( 'height', '72')
      :attr( 'style', 'display:block; stroke: rgba(179, 255, 255,1); fill: rgba(179, 255, 255,0.3); stroke-linejoin: round;')
      :tag( 'polygon' )
      :attr('style', 'stroke-width: 3px')
      :attr( 'points', '2,2 2,70, 36,36')
else
  Container
  Container
     :tag( 'td' )
     :tag( 'div' )
     :attr( 'rowspan', '2' )
     :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;'))
    :attr( 'style', 'background-color: ' .. getIOColor(Connector, 0.3) .. '; border: 5px solid ' .. getIOColor(Connector, 1.0) .. (isInput and '; border-left: none;' or ';border-right: none;'))
end
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