Jump to content

[Lua][Script] HTML handler

Recommended Posts

I have been working on a script to construct HTML for those who want a simple tool yet quite powerfull I hope.
The Idea is to have the script as a file in your Lua environement and just use the require() function, then start building your HTML.

There is a demo at the end of the script (put the commented lines in your unit.start then uncomment them)

HTMLhandler = require(HTMLhandler)
HUD = HTMLhandler:Create(system)



The tool accept multiple monitors at once, like several screens or HUD (system).



Simple usage:

To get a simple window inside a left grid in your cockpit you can do:

local myHTMLhandler = require("HTMLhandler")
normalScreen = myHTMLhandler:Create(system)
local baseGrid = myHTMLhandler:addDiv("", "left grid")
local myWindow, myWindowContent = myHTMLhandler:addWindow(baseGrid, "MyWindow", "Inside the window")
---- change the content inside the window ----
local changeInside = "change the inside of the window"
myHTMLhandler:updateContent(myWindowContent, changeInside)




You can create a div with a string or a variable like that myHTMLhandler:createDiv(myVar) and it will display on the selected screen as long as the variable accept the tostring() conversion. You can pass in parameter custom style or/and class.

There is also function to create a window and a table. At any time you can change the content as the "addx" functions returns a contentId. For the table, when created you get a table of contentId to modify the column's header and when adding a line you get a table of contentId to modify what's in the line. You can also delete a line or push a new line at the top of the table.

indexSimpleDiv = myHTMLhandler:addDiv("simpleDiv")
myHTMLhandler:addDiv(indexSimpleDiv, "anotherDiv in SimpleDiv")
-- the anotherDiv will be anchor into the simple Div, but once you delete the simpleDiv it will also delete its child, being "anotherDiv"

mainDiv, contentIdMainDiv = myHTMLhandler:addDiv("MainDiv", "left grid") -- this will create a div with the content "MainDiv" and class "left" and "grid"
local tableDiv = myHTMLhandler:addDiv(mainDiv, "", "window") -- create a div with the class window as NQ style (works only with HUD)
local columnHeaders = {"Name", "Quantity", "Container", "Container size"} --define the title of the column's header for the table
local simpleTable = myHTMLhandler:addSimpleTable(tableDiv, columnHeaders) -- create a table with headers
local firstLine = {"Gold", "153kL", "Treasure", "L"}
local firstLineId, firstLineContentId = myHTMLhandler:addSimpleLine(simpleTable, firstLine) -- add a first line
local secondLine = {"Silver", "20kL", "Chest"}
local secondLineId = myHTMLhandler:addSimpleLine(simpleTable, secondLine) --add a second line but without data in the last column
local pushToFirstLine = {"Plastic", "FULL", "line pushed #1", "M"}
myHTMLhandler:addSimpleLine(simpleTable, pushToFirstLine, 2) -- add a third line but at the top position in the table (1 being the headers)
myHTMLhandler:updateContent(firstLineContentId[2], "20kL") -- change the amount of gold of "firstLine"



Advanced usage:
You can change the position of element, attach it to any other element, pass the class and the style in parameters, you can delete it and you can update the content.
But it is also possible to do more advanced stuff like creating any HTML element template and use them by referencing them.
It should also be possible to do svg tags like that :

myHTMLhandler:defineElement("svg", '<svg height="100%" width="100%">', '</svg>')

then use


The defineElement and the addElement accept variadic parameters so there is in theory no limit


Another example, to make this '<line x1="939" y1="537" x2="957" y2="519" style="stroke:rgb(1, 165, 177);opacity:0.7;stroke-width:3"/>' being encapsulated as an element you can do:

myHTMLhandler:defineElement("svgLine", '<line ', '" style="stroke:rgb(1, 165, 177);opacity:', ';stroke-width:', '"/> ')
local content = 'x1="939" y1="537" x2="957" y2="519"'
local svgLineId, svgLineContent = myHTMLhandler:addElement("svgLine", content, 0, '0.7', '3')

0 being a default postion value, if you want to change the position in a list of element (see above for the table). '0.7' the opacity and '3' the strokewidth.
now you can change the content by using (by default it will rebuild the HTML and display it as soon as the function ends) :

myHTMLhandler:updateContent(svgLineContent, 'x1="0" y1="12" x2="37" y2="24"')

Note that multi-content is only availible for table for the moment.


others functions:

addWindow(Anchor, Title, Content, TitleClass, TitleStyle, ContentClass, ContentStyle, Pos) -- to build a window with the NQ style
setAutoCompute(boolean) -- for big HTML structure you might want to turn them off as every time you add element or edit content the HTML is rebuild and displayed
compute() --build the HTML
display() --display HTML on all the "monitors"
computeAndDisplay() --straightforward
getElementHTML(Index) -- to get just a chunk of HTML could be used to display just a part of the structure somewhere else

I am aware that there is other tool to build HTML.
If you find a bug please report it.
If you need help, ask me (same name on discord and IGN) or in the #lua-scripting discord channel
If you make your own design using the tool, consider sharing :)


Special thanks to @hdparm



ps: I'll put images when the server works


pastebin instead of file:


create a file "HTMLhandler.lua" and save it at the root of lua folder as below




Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...