BYOND webclient .dms javascript

ID:1687241
 
Sep 26 2014, 5:23 am
(See the best response by Kaiochao.)
Webclient doc: http://files.byondhome.com/LummoxJR/webclient_doc.html

Lummox JR wrote:
http://www.byond.com/forum/?post=1681806#comment12071338
I'd just like to add for those who are playing with the webclient: We encourage the creation of third-party .dms controls and if anything is found to be really special, we'd be interested in incorporating it.

Right now there is no grid control, tab control, or bar control. The tab control is relatively low-hanging fruit now. Also I'd like to have a D-pad control for mobile gaming, which is quite feasible by grabbing a list of macros (it's all in the webclient docs).

Another idea for modders might be expanding our color prompt. Right now it uses Flexi for the color selection which is pretty good, but it has no palette built in--which would be interesting to add.

Lummox JR has mentioned it'd be nice for people to make 3rd party .dms controls. I, unfortunately, am no expert when it comes to css or web languages so I'm having a bit of a hard time getting started with it. If anyone has example projects that they could post here that would be really helpful. I find it easiest to learn from examples and I'm sure others will benefit as well.

When it comes to .dms controls is it possible to mix javascript? It sounds like it from what I've read so far. If so how does that work?

Can I import javascript libraries?

Can I create something to draw lines or text on the map or other controls from a .dms file?
- Would it use javascript?
- Is the .dms file the right place?

My end goal is to increase my understanding of how to make custom controls and to make BYOND more friendly for mobile devices. I develop for iOS devices for a living and would love to be able to make BYOND games/projects for/from mobile devices or other Operating Systems other than Windows.
Sep 26 2014, 8:50 am
Best response
Everything is HTML, CSS, and JavaScript in webclient .dms files. You can find the current default controls in the web/ folder in your BYOND directory (either Documents or Program Files, I'm using my phone and just forgot). I've been able to simply modify a few default controls; add pointer lock and mouse tracking to the map control, with JavaScript, use CSS to make the status bar transparent with a drop shadow and no background, and a transparent output with soft edges and rounded corners.

But I still haven't made a completely custom control from scratch yet.
Sep 26 2014, 11:58 am
In response to Kaiochao
Creating custom controls from scratch is pretty easy. And if you plug in some jquery here and there, you get some very neat and polished effects.

This is the kind of stuff that you could only dream of doing in the default BYOND interface.



To answer some of your questions:

Can I import javascript libraries?

Yes. You can import exterior libraries (jQuery!!!).



Can I create something to draw lines or text on the map or other controls from a .dms file?

Yes. You would do this by either manually creating a div to display on top of the map or by defining a control with text in it.

As for actually controlling what's going on inside the main map canvas... for that, you'll probably have to wait until Tom&Lummox open source the files.
Sep 26 2014, 12:09 pm
In response to Kaiochao
For anyone who doesn't know where to start customizing a webclient interface, I offer you the code for the screenshot I posted above:

https://gist.github.com/Doohl/c0e84380706e7f55b647

Disclaimer: not plug and play. Won't make any sense without the accompanying .dm could, but should help, maybe.
Sep 26 2014, 12:25 pm
Thanks for the replies, both gave very useful information. Also, thanks for the visual example and code snippet. :)
Feb 28 2015, 12:10 pm
In response to Doohl
Doohl wrote:
For anyone who doesn't know where to start customizing a webclient interface, I offer you the code for the screenshot I posted above:

https://gist.github.com/Doohl/c0e84380706e7f55b647

Disclaimer: not plug and play. Won't make any sense without the accompanying .dm could, but should help, maybe.

Sorry for the serious necro...

How are you... attaching(?) those html files to the project? I've tried setting up jQuery within a dms file, but invariably I get errors regarding an invalid token $ when I try and use it. Does it need to be set up in an html file and browsed in somehow?

To be fair, I know jack squat about javascript or jQuery :P My issues could easily be because I'm screwing up all the {'s, ('s, and ;'s I've got to use... I'm terrible at keeping track of that. I'm trying to 'teach' myself by doing stupid stuff that I've got no business doing. I've got a canvas based minimap mostly working so far, but jQuery is stumping me...

(I was trying to wait for your next tutorial, but I'm impatient ;)
Feb 28 2015, 12:36 pm
In response to Flick
To include jQuery in your project you would use this in a dms file.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>


That will allow you to use jQuery from Google, which is good, because most people would have it downloaded already from visiting other websites.
Feb 28 2015, 12:49 pm
In response to Flick
Mar Big has got the right idea but I personally would include the minimized jquery within the actual game's resource files. I ran into some issues trying to import js files from external servers.

Particularly one issue you'll have to be aware of if you're using jQuery is the fact that your .dms file will probably load and execute prior to jQuery - this will lead to the browser spitting out the invalid '$' token error, or saying that $ is unidentified. In the (rather outdated and ugly) code I posted above I mitigated this by sleeping the code until jquery was loaded, before actually trying to execute any jquery.

I found that just waiting for jQuery to load is the best workaround for the issue. You can't accurately predict if jquery will be loaded before or after your .dms files.

Oh, and yeah, I've been lagging it with the latest webclient lesson! Sorry! I've just been super bogged down with life stuff, but I should have it out early next week. Following lesson after that should more clearly explain using jQuery.
Feb 28 2015, 1:08 pm
In response to Mar big
Mar big wrote:
To include jQuery in your project you would use this in a dms file.
<head>
> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
> </head>

That will allow you to use jQuery from Google, which is good, because most people would have it downloaded already from visiting other websites.

Yeah, that's what I've been doing, but I've still been getting invalid token errors. Oddly, when I reboot the game, I get no errors, but the jQuery doesn't seem to run. If I reconnect to the game again, I get errors. I was trying to run stuff as the page was loading though. I'll have to try calling from the game itself after everything is done loading. Thanks :)
Feb 28 2015, 1:32 pm
In response to Doohl
Doohl wrote:
Mar Big has got the right idea but I personally would include the minimized jquery within the actual game's resource files. I ran into some issues trying to import js files from external servers.

Particularly one issue you'll have to be aware of if you're using jQuery is the fact that your .dms file will probably load and execute prior to jQuery - this will lead to the browser spitting out the invalid '$' token error, or saying that $ is unidentified. In the (rather outdated and ugly) code I posted above I mitigated this by sleeping the code until jquery was loaded, before actually trying to execute any jquery.

I found that just waiting for jQuery to load is the best workaround for the issue. You can't accurately predict if jquery will be loaded before or after your .dms files.

Thanks for the tips. I'll play with it some more when I get home tonight.


Oh, and yeah, I've been lagging it with the latest webclient lesson! Sorry! I've just been super bogged down with life stuff, but I should have it out early next week. Following lesson after that should more clearly explain using jQuery.

Take your time, life first. Looking forward to it when it gets here :)
Mar 1 2015, 7:35 pm
You actually don't need, and shouldn't use, the <head> tag in .dms files.