HTML interface module (need a /tg/ dev to look at this!)
Posted: Sun Nov 09, 2014 9:10 pm
Hi,
I've been working on a pluggable HTML interface module that's supposed to replace the computers and other browser windows in the game. It works pretty well, and I'd like to contribute my work to the /tg/station project.
So er... Would anybody know how to go about doing that? :D
The HTML interface module is documented and utilizes BYOND's JavaScript call functionality to update content without refreshing the entire window. This removes the annoying "flicker" that you often see and also reduces network traffic as you don't need to download new HTML files to clog up your cache with every time a value changes.
It's been tested on the Hypatia Station build of SS13 with the power monitoring computer and a deck of cards (item), and it works pretty well. It may take some time getting used to the approach I've used but I think it'll benefit everyone in the long run.
The HTML interface comes with a built-in copy of jQuery and Twitter Bootstrap to provide a simple way of dealing with widgets and enable developers to add their own flair to their interfaces. These resources are downloaded by the client only once upon login so there's no significant loss of speed in using them.
A small JavaScript file (1.19 KB non-compressed) provides a simple JavaScript API which is used to send content from BYOND (DM) code, which is also sent only once upon login.
It's possible to create custom layouts as well as using standard layouts. This is done by creating a subtype of the /datum/html_interface type. The playing cards use a subtype but only because they need to send resources to the client upon login (the card artwork).
Screenshots:
The code for playing cards was changed to use the HTML interface module. The cards are downloaded from the web and may require attribution, but other than that I foresee no problems.
Note that clicking a card or action will only change the cards and action; the browser window does not refresh so there is no "flicker".
The power monitoring computer. This uses the images from Bay's (?) NanoUI but none of the underlying code.
Personally I found the horde of JavaScript to look messy and unmanageable (no offense intended to whoever is responsible for it!) which is why I wrote this simplified version. Also I don't know if there are licensing issues x.x
Using BYOND 4.0's skins a new window is created with a browser window. The titlebar and (albeit ugly) "X" and "-" icons you see are actually buttons on the skin. You can drag the window around by clicking on the (custom!) titlebar and moving it around. It can be resized and minimized as normal (tested in Win8.1 with BYOND v506.1247).
tl;dr I hope to coordinate with someone to implement this into /tg/station so that it will eventually "trickle down" to other versions. Anyone care to help me out / explain?
What still needs to be done:
[*]A generic way of authenticating the user (i.e., by ID). By creating a generic way of authentication rather than doing it on a per-computer basis the code will become that much cleaner.
[*]Widespread implementation in other computers and deprecate/remove the old stuff (though I recommend starting small and slowly phasing out the old code)
For those interested, here's the public API:
I've been working on a pluggable HTML interface module that's supposed to replace the computers and other browser windows in the game. It works pretty well, and I'd like to contribute my work to the /tg/station project.
So er... Would anybody know how to go about doing that? :D
The HTML interface module is documented and utilizes BYOND's JavaScript call functionality to update content without refreshing the entire window. This removes the annoying "flicker" that you often see and also reduces network traffic as you don't need to download new HTML files to clog up your cache with every time a value changes.
It's been tested on the Hypatia Station build of SS13 with the power monitoring computer and a deck of cards (item), and it works pretty well. It may take some time getting used to the approach I've used but I think it'll benefit everyone in the long run.
The HTML interface comes with a built-in copy of jQuery and Twitter Bootstrap to provide a simple way of dealing with widgets and enable developers to add their own flair to their interfaces. These resources are downloaded by the client only once upon login so there's no significant loss of speed in using them.
A small JavaScript file (1.19 KB non-compressed) provides a simple JavaScript API which is used to send content from BYOND (DM) code, which is also sent only once upon login.
It's possible to create custom layouts as well as using standard layouts. This is done by creating a subtype of the /datum/html_interface type. The playing cards use a subtype but only because they need to send resources to the client upon login (the card artwork).
Screenshots:
The code for playing cards was changed to use the HTML interface module. The cards are downloaded from the web and may require attribution, but other than that I foresee no problems.
Note that clicking a card or action will only change the cards and action; the browser window does not refresh so there is no "flicker".
The power monitoring computer. This uses the images from Bay's (?) NanoUI but none of the underlying code.
Personally I found the horde of JavaScript to look messy and unmanageable (no offense intended to whoever is responsible for it!) which is why I wrote this simplified version. Also I don't know if there are licensing issues x.x
Using BYOND 4.0's skins a new window is created with a browser window. The titlebar and (albeit ugly) "X" and "-" icons you see are actually buttons on the skin. You can drag the window around by clicking on the (custom!) titlebar and moving it around. It can be resized and minimized as normal (tested in Win8.1 with BYOND v506.1247).
tl;dr I hope to coordinate with someone to implement this into /tg/station so that it will eventually "trickle down" to other versions. Anyone care to help me out / explain?
What still needs to be done:
[*]A generic way of authenticating the user (i.e., by ID). By creating a generic way of authentication rather than doing it on a per-computer basis the code will become that much cleaner.
[*]Widespread implementation in other computers and deprecate/remove the old stuff (though I recommend starting small and slowly phasing out the old code)
For those interested, here's the public API:
Code: Select all
/*
Author: NullQuery
Created on: 2014-09-24
** CAUTION - A WORD OF WARNING **
If there is no getter or setter available and you aren't extending my code with a sub-type, DO NOT ACCESS VARIABLES DIRECTLY!
Add a getter/setter instead, even if it does nothing but return or set the variable. Thank you for your patience with me. -NQ
** Public API **
var/datum/html_interface/hi = new/datum/html_interface(ref, title, width = 700, height = 480, head = "")
Creates a new HTML interface object with [ref] as the object and [title] as the initial title of the page. [width] and [height] is the initial width and height
of the window. The text in [head] is added just before the end </head> tag.
hi.setTitle(title)
Changes the title of the page.
hi.getTitle()
Returns the current title of the page.
hi.updateLayout(layout)
Updates the overall layout of the page (the HTML code between the body tags).
This should be used sparingly.
hi.updateContent(id, content, ignore_cache = FALSE)
Updates a portion of the page, i.e., the DOM element with the appropriate ID. The contents of the element are replaced with the provided HTML.
The content is cached on the server-side to minimize network traffic when the client "should have" the same HTML. The client may not have
the same HTML if scripts cause the content to change. In this case set the ignore_cache parameter.
hi.executeJavaScript(jscript, client = null)
Executes Javascript on the browser.
The client is optional and may be a /mob, /client or /html_interface_client object. If not specified the code is executed on all clients.
hi.show(client)
Shows the HTML interface to the provided client. This will create a window, apply the current layout and contents. It will then wait for events.
hi.hide(client)
Hides the HTML interface from the provided client. This will close the browser window.
hi.isUsed()
Returns TRUE if the interface is being used (has an active client) or FALSE if not.
** Additional notes **
When working with byond:// links make sure to reference the HTML interface object and NOT the original object. Topic() will still be called on
your object, but it will pass through the HTML interface first allowing interception at a higher level.
** Sample code **
mob/var/datum/html_interface/hi
mob/verb/test()
if (!hi) hi = new/datum/html_interface(src, "[src.key]")
hi.updateLayout("<div id=\"content\"></div>")
hi.updateContent("content", "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor, leo nec facilisis aliquam, elit ligula iaculis sapien, non vulputate neque metus id quam. Cras mauris nisl, pharetra malesuada massa nec, volutpat feugiat metus. Duis sed condimentum purus. In ex leo, laoreet ac rhoncus quis, volutpat ac risus. Ut et tempus magna. Vestibulum in nisl vitae metus commodo tempus et dapibus urna. Integer nec vestibulum lacus. Donec quis metus non lacus bibendum lacinia. Aenean tincidunt libero vestibulum metus blandit pharetra. Nunc quis magna volutpat, bibendum nulla in, sagittis risus. Sed id velit sodales, bibendum purus accumsan, eleifend purus.</p><p>Suspendisse potenti. Proin lorem orci, euismod at elit in, molestie dapibus leo. Nulla lacinia vel urna nec vulputate. Praesent non enim metus. Quisque non pharetra justo. Integer efficitur massa orci, vitae placerat libero eleifend sit amet. Fusce in placerat quam. Praesent quis lectus turpis. Aenean mattis lacus sed laoreet sagittis. Aliquam efficitur nisl at tellus ultrices auctor. Quisque hendrerit, mi quis suscipit interdum, justo magna gravida libero, et venenatis sapien ante quis odio.</p><p>Etiam ullamcorper condimentum lacus, eu laoreet ipsum gravida et. Fusce odio libero, iaculis euismod finibus sit amet, condimentum ac ante. Etiam pretium lorem mauris, sit amet varius tortor efficitur eget. Pellentesque at lacinia lectus. Integer tristique nibh hendrerit purus placerat dapibus. Cras elementum est elementum, bibendum orci nec, consequat elit. Fusce porttitor neque quis libero placerat, vel varius arcu aliquet. Aenean vitae rhoncus nunc, non tempus magna. Aliquam lacinia sit amet dolor id maximus. Curabitur eget eleifend nisl. Mauris interdum nibh feugiat lectus lacinia fringilla. Aliquam nec magna vel leo ultricies dignissim. Duis eu luctus odio, finibus dictum nulla.</p>Mauris fringilla a lorem vel euismod. Sed auctor eget lorem sed lacinia. Maecenas vel posuere sapien. In lobortis odio non tincidunt ultricies. Sed consequat molestie orci et pharetra. Suspendisse potenti. Vestibulum vitae ornare risus, nec semper arcu. Duis et interdum lacus.</p><p>Etiam urna nulla, pulvinar at est auctor, varius feugiat orci. Vestibulum efficitur maximus imperdiet. Donec vehicula, leo sit amet condimentum pulvinar, urna felis aliquet velit, bibendum placerat dui libero sed tortor. Vivamus ac diam commodo nisi facilisis lacinia. Aenean a rhoncus risus, venenatis efficitur arcu. Curabitur tincidunt nulla eget augue malesuada imperdiet. Quisque ligula purus, dictum a imperdiet eget, eleifend eu leo. Phasellus massa ipsum, molestie nec pellentesque eu, scelerisque et mi. Vivamus at libero varius, lacinia magna non, imperdiet tortor. Donec scelerisque ipsum sollicitudin justo ornare accumsan. In velit orci, lobortis eget maximus et, scelerisque ut nulla. Cras sit amet finibus sapien. Aenean metus lorem, gravida a rutrum quis, varius eu arcu. Integer ac hendrerit purus. Aliquam cursus ultricies tortor. Fusce scelerisque, arcu id pellentesque accumsan, nulla turpis tempus lectus, tincidunt blandit mi nisi non metus.</p>")
hi.show(src)
*/
), and the last thing I did was implement the HUD from SS13. This week I've been occupied with a personal project but I hope to get back to the project.