Module:TestProtoFlux1: Difference between revisions

From Resonite Wiki
← Older edit
No edit summary
Tag: Manual revert
m mul
 
(20 intermediate revisions by the same user not shown)
Line 2: Line 2:
-- when this module is targeted.
-- when this module is targeted.
local p = {}
local p = {}
bit32 = require( 'bit32' )
-- Type colors - RGB values to be included in the HTML output when a color is needed. This will be replaced with CSS at some point.
local typeColor =
{
User = '255, 128, 255',
Impulse = '179, 255, 255',
bool = '115, 115, 115',
AsyncImpulse = '204, 179, 255',
String = '245, 31, 31',
Dummy = '255, 0, 255',
colorX = '255, 89, 0',
float3 = '0, 255, 255',
float2 = '0, 255, 255',
    ulong = '0, 255, 127',
    int = '0, 255, 0',
    Continuation = '255, 255, 178',
    Slot = '191, 255, 127',
Uri = '123, 49, 186',
int2 = '0, 255, 0',
floatQ = '0, 127, 255'
}


local pack2 = {
local color_crc_module = require("Module:ProtoFlux_Type_Color")
"int2",
"float2",
"uint2",
"double2",
"long2",
"ulong2",
"bool2"
}
 
local pack3 = {
"int3",
"float3",
"uint3",
"double3",
"long3",
"ulong3",
"bool3"
}
 
local pack4 = {
"int4",
"float4",
"uint4",
"double4",
"long4",
"ulong4",
"bool4"
}


--- Method that generates the HTML output
--- Method that generates the HTML output
Line 254: Line 205:
-- @param Alpha The alpha to use in the RGBA value.  
-- @param Alpha The alpha to use in the RGBA value.  
function GetTypeColor(Connector, Alpha)
function GetTypeColor(Connector, Alpha)
return (Connector and 'rgba(' .. (typeColor[Connector.Type] or hashToColor(Connector.Type)) .. ',' .. Alpha .. ')' or 'rgba(0, 0, 0, 0)')
return (Connector and 'rgba(' .. (create_color_crc(Connector.Type)) .. ',' .. Alpha .. ')' or 'rgba(0, 0, 0, 0)')
end
end


 
function create_color_crc( str )
 
 
 
 
--- Returns an RGBA value representing the type color within Resonite using CRC hash
--- this code was made using decompiled dlls of Resonite as reference.
-- @param Connector Table containing a Name (Optional) and Type (Required) for the input/output attachment point.
-- @param Alpha The alpha to use in the RGBA value.
function hashToColor( crc )
local string = mw.hash.hashValue("crc32b", crc);
local table = color_crc_module.get_type_color( str )
local num = 0;
for i = 1, #string do
num = num .. string.byte(string, i);
end
 
local h = bit32.band(num , 255) / 255;
local s = bit32.band(bit32.rshift(num , 8), 255) / 255;
local v = bit32.band(bit32.rshift(num , 16), 255) / 255;
s = lerpunclamped(0.25,0.75,s);
return (table.r*255 .. "," .. table.g*255 .. "," .. table.b*255)
v = lerpunclamped(0.25,1,v);
local r,g,b = hsvToRgb(h, s, v, 1);
-- return num;
return ((r) .. "," .. (g) .. "," .. (b));
end
function lerpunclamped(a, b, lerp)
return a + (b - a) * lerp;
end
end
-- https://github.com/EmmanuelOga/columns/blob/master/utils/color.lua
function hsvToRgb(h, s, v, a)
  local r, g, b
  local i = math.floor(h * 6);
  local f = h * 6 - i;
  local p = v * (1 - s);
  local q = v * (1 - f * s);
  local t = v * (1 - (1 - f) * s);
  i = i % 6
  if i == 0 then r, g, b = v, t, p
  elseif i == 1 then r, g, b = q, v, p
  elseif i == 2 then r, g, b = p, v, t
  elseif i == 3 then r, g, b = p, q, v
  elseif i == 4 then r, g, b = t, p, v
  elseif i == 5 then r, g, b = v, p, q
  end
  return r * 255, g * 255, b * 255
end


return p
return p

Latest revision as of 18:12, 9 February 2024

This is a test for auto generated colors for nodes using CRC hashing like FrooxEngine does. Here are some examples:

Field As Variable<T>
Field
*
Core
System Empty type
Field
*
Core
Anchored User
Anchor
User
Anchors
CommonAnchor Anchored User
Anchor
User
Anchors
-- Package definition to return to Scribunto - this allows us to define methods that can be called
-- when this module is targeted.
local p = {}

local color_crc_module = require("Module:ProtoFlux_Type_Color")

--- Method that generates the HTML output
--	@param frame A Scribunto frame instance. frame.args contains the parameters passed into the module call
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 '[]')
	
	-- Create an HTML div element to contain our node UI
	local protofluxContainer = mw.html.create( 'div' )
	protofluxContainer
	    :attr('class', frame.args.Inline and '' or 'floatright')
		:cssText('color: rgb(224, 224, 224); background-color: rgb(18, 20, 28); width: 256px; display: flex; flex-direction: column; align-items: stretch;')
		:tag('div') -- HTML div to contain the node title
			:cssText('padding: 10px 0px 10px 0px; text-align:center; font-weight: bold; background-color: rgb(26, 41, 54); font-size: 18pt; flex-grow: 1;')
			:wikitext(frame.args.Name)
			:done() -- Close node title div
	
	local processedInputs = {}
	local processedOutputs = {}
	
	for i=1,#inputs do
		for j=1,(inputs and inputs[i].Multi or 1) do
			inputs[i].MultiIndex = j
			table.insert(processedInputs, { Name=inputs[i].Name, Type=inputs[i].Type, Multi=inputs[i].Multi, MultiIndex=j })
		end
	end
	
	for i=1,#outputs do
		for j=1,(outputs and outputs[i].Multi or 1) do
			table.insert(processedOutputs, { Name=outputs[i].Name, Type=outputs[i].Type, Multi=outputs[i].Multi, MultiIndex=j })
		end
	end
	
	-- Calculate the larger number of rows required (either for inputs or outputs, if the node is asymmetric)
	local maxRows = math.max(#processedInputs, #processedOutputs)
	
	
	-- Iterate over each row, and populate it with the inputs/outputs. If the node is asymmetric,
	-- the value passed for either input or output might be nil.
	
	for i=1,maxRows do
		CreateConnectorRow(protofluxContainer, processedInputs[i], processedOutputs[i])
	end
	
	-- Iterate over each global value in the node, and create a row. These elements take up the entire width
	-- of the node, and so don't need to be balanced in any way.
	for i=1,#globals do
		CreateGlobalsRow(protofluxContainer, globals[i])
	end
	
	protofluxContainer
		:tag('div') -- HTML div to contain the node category footer
			:cssText('text-align: center; padding: 10px; font-size: 18pt; color: rgb(64,64,64); font-weight: bold;')
			:wikitext(frame.args.Category)
			:done() -- Close category footer div
	
	-- Return the HTML generated above to the wiki page this script is invoked from.
	return tostring(protofluxContainer) .. '[[Category:ProtoFlux:All]]'
end

--- Creates a new ProtoFlux connector row in the output
-- @param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
-- @param Input Table containing a Name and Type for the input on this row. Can be nil if no input is to be placed on this row.
-- @param Output Table containing a Name and Type for the output on this row. Can be nil if no output is to be placed on this row.
function CreateConnectorRow(Container, Input, Output)
	local connectorRow = Container
		:tag('div') -- HTML div to contain the connector row. We specify a min-height of 70px for consistency.
			:cssText('display: flex; min-height: 70px;')
	
	-- Create the input (left) attachement point
	CreateConnectorAttachmentPoint(connectorRow, Input, true)

	local c = connectorRow
		:tag('div') -- HTML div to contain the input and output labels in the connector row
			:cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;')
	if Input and Input.Multi and Input.MultiIndex == 1 then
		c
			:tag('div') -- HTML div to contain the input label
				:attr('title', Input and (Input.Name .. ' <' .. Input.Type .. '>') or '') -- Add a basic mouseover description
				: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: transparent;')
				:wikitext(Input and Input.Name or '' )
				:done() -- Close input label div
	elseif Input and Input.Multi and Input.MultiIndex > 1 then
		local c2 = c
			:tag('div') -- HTML div to contain the input label
				:attr('title', Input and (Input.Name .. ' <' .. Input.Type .. '>') or '') -- Add a basic mouseover description
				:cssText('text-align: left; padding-left: 4px;  border-right: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color: transparent;')
		if Input.Multi == Input.MultiIndex then
			c2
				:tag('div')
					:cssText('position:relative; top:2rem; display:flex; gap: 4px;')
					:tag('div')
						:cssText('font-size: 1.75rem; width: 1em; height: 1em; background-color:grey; border-radius: 2em; display:flex; align-items:center; justify-content:center;')
						:wikitext('+')
						:done()
					:tag('div')
						:cssText('font-size: 1.75rem; width: 1em; height: 1em; background-color:grey; border-radius: 2em; display:flex; align-items:center; justify-content:center;')
						:wikitext('-')
						:done()
		end
	else
		c
			:tag('div') -- HTML div to contain the input label
				:attr('title', Input and (Input.Name .. ' <' .. Input.Type .. '>') or '') -- Add a basic mouseover description
				: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:' .. GetTypeColor(Input, 0.6) .. ';')
				:wikitext(Input and Input.Name or '' )
				:done() -- Close input label div
	end
	if Output and Output.Multi and Output.MultiIndex == 1 then
		c
			:tag('div') -- HTML div to contain the output label
				:attr('title', Output and (Output.Name .. ' <' .. Output.Type .. '>') or '') -- Add a basic mouseover description
				: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: transparent;')
				:wikitext(Output and Output.Name or '')
				:done() -- Close output label div
	elseif Output and Output.Multi and Output.MultiIndex > 1 then
		local c2 = c
			:tag('div') -- HTML div to contain the output label
				:attr('title', Output and (Output.Name .. ' <' .. Output.Type .. '>') or '') -- Add a basic mouseover description
				:cssText('text-align: right; padding-right: 4px; border-left: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color: transparent;;')
		if Output.Multi == Output.MultiIndex then
			c2
				:tag('div')
					:cssText('display:flex; justify-content:flex-end; gap: 4px;')
					:tag('div')
						:cssText('font-size: 1.75rem; width: 1em; height: 1em; background-color:grey; border-radius: 2em; display:flex; align-items:center; justify-content:center;')
						:wikitext('+')
						:done()
					:tag('div')
						:cssText('font-size: 1.75rem; width: 1em; height: 1em; background-color:grey; border-radius: 2em; display:flex; align-items:center; justify-content:center;')
						:wikitext('-')
						:done()
		end
	else
		c
		:tag('div') -- HTML div to contain the output label
			:attr('title', Output and (Output.Name .. ' <' .. Output.Type .. '>') or '') -- Add a basic mouseover description
			: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: ' .. GetTypeColor(Output, 0.6) .. ';')
			:wikitext(Output and Output.Name or '')
			:done() -- Close output label div
	end	
	-- Create the output (right) attachment point
	CreateConnectorAttachmentPoint(connectorRow, Output, false);
end

--- Creates a new ProtoFlux global input field row in the output
--	@param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
--	@param Global Table containing a Name and Type for the global field on this row.
function CreateGlobalsRow(Container, Global)
	Container
		:tag( 'div' )
			:attr('title', Global.Name .. ' <' .. Global.Type .. '>') -- Add a basic mouseover description
			:cssText('display: flex; min-height: 70px; flex-direction: column; border-left: 10px solid ' .. GetTypeColor(Global, 1.0) .. ';')
			:tag( 'div' )
				: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.Name)
					:done()
				:done()
			:tag( 'div' )
				:attr('style', 'display:flex; gap: 10px; flex-grow: 1;')
				:tag('div')
					:cssText('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')
					:cssText('border-radius: 16px; background-color: #333; text-align:center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;')
					:tag ( 'span' )
						:wikitext('∅')   
end

--- Creates a new input or output attachement point for a connector row.
--	@param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
--	@param Connector Table containing a Name (Optional) and Type (Required) for the input/output attachment point.
--	@param isInput	True if this is an input side attachment point, false if it is an output side attachment point.
function CreateConnectorAttachmentPoint(Container, Connector, isInput)
	if Connector and (Connector.Type == "Impulse" or Connector.Type == "AsyncImpulse" or Connector.Type == "Continuation")  then
		Container
			:tag( 'div' )
				:attr('title', Connector and (Connector.Name .. ' <' .. Connector.Type .. '>') or '') -- Add a basic mouseover description
				:cssText('width:30px; background-color: black; fill: ' .. GetTypeColor(Connector, 0.3) .. '; stroke: ' .. GetTypeColor(Connector, 1.0))
				:wikitext(mw.getCurrentFrame():expandTemplate({title = 'ProtoFluxConnector', args = {Type="InputArrow"}}))

	elseif Connector then
		Container
			:tag( 'div' )
				:attr('title', Connector and (Connector.Name .. ' <' .. Connector.Type .. '>') or '') -- Add a basic mouseover description
				:cssText('width:30px; fill: ' .. GetTypeColor(Connector, 0.3) .. '; stroke: ' .. GetTypeColor(Connector, 1.0))
				:wikitext(mw.getCurrentFrame():expandTemplate({title = 'ProtoFluxConnector', args = {Type=(isInput and "InputBox" or "OutputBox")}}))
	end
end

--- Returns an RGBA value representing the type color within Resonite
-- @param Connector Table containing a Name (Optional) and Type (Required) for the input/output attachment point.
-- @param Alpha The alpha to use in the RGBA value. 
function GetTypeColor(Connector, Alpha)
	return (Connector and 'rgba(' .. (create_color_crc(Connector.Type)) .. ',' .. Alpha .. ')' or 'rgba(0, 0, 0, 0)')
end

function create_color_crc( str )
	
	local table = color_crc_module.get_type_color( str )
	
	return (table.r*255 .. "," .. table.g*255 .. "," .. table.b*255)
	
	
end

return p
Retrieved from "https://wiki.resonite.com/index.php?title=Module:TestProtoFlux1&oldid=75008"