Aesir Posted September 7, 2020 Share Posted September 7, 2020 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) Features: The tool accept multiple monitors at once, like several screens or HUD (system). myHTMLhandler:Create(system,screen1) 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") myHTMLhandler:deleteElement(indexSimpleDiv) -- 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 myHTMLhandler:addElement("svg",myContentInsideTheTag) 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 setAutoDisplay(boolean) 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: https://pastebin.com/KuMRGFFp create a file "HTMLhandler.lua" and save it at the root of lua folder as below Link to comment Share on other sites More sharing options...
Sambo726 Posted September 7, 2020 Share Posted September 7, 2020 File Unavailable Link to comment Share on other sites More sharing options...
Aesir Posted September 7, 2020 Author Share Posted September 7, 2020 1 minute ago, Sambo726 said: File Unavailable i removed the file and put a pastebin Sambo726 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now