Outerra forum

Please login or register.

Login with username, password and session length
Advanced search  

News:

Download Outerra Tech Demo. Unofficial Outerra Discord server, MicroProse Discord server for OWS.

Author Topic: Tool to use HTML menus in outerra (release)  (Read 11388 times)

fly77

  • Outerra Master Modder
  • Hero Member
  • *****
  • Posts: 1761
Tool to use HTML menus in outerra (release)
« on: November 29, 2022, 01:37:40 am »

Hi everybody !
Its my pleasure to share with you a nice tool that allows you to create mods with HTML menu windows that you can
make pop-up in whatever mode you are in outerra
, both in ufo mode or when entered vehicles, planes, boats,characters.
This is obviously very useful.
You could for instance create a mod for a survival game that lets you collect items to use later
and show them in your inventory menu. Or in a combat mod show your available armour and ammunitions..or use it to make your own navigation map
(embedding a leaflet map in html) or using a html file to call external webservices making HTML GET or POST or fetch requests to their web APIs . ...like get the realtime weather
into outerra...or the realtime international space station position.

The only thing which won't work is opening external webpages as the browser used in outerra only supports a part of normal browser functionality.


The tool is able to open four example demo HTML files that are to be placed in the outerra/Anteworld/plugins folder
menuAction1.html, menuAction2.html, menuAction3.html, menuAction4.html 
Use the keys "U", "Y", "I" ,"P" to make pop-up those HTML pages. If you wish you can customize the keybindings in F12 menu (see below)


by the way: this tool gives you a good occasion/motivation to learn the very useful HTML and the associated CSS and javascript languages !!
A very useful and complete resource to get started with lots of hands-on examples is https://www.w3schools.com/


How to use the tool:
The tool comes as a "vehicle" named "menuDemo" that you spawn to enable the HTML menu functionality.
Once spawned "menuDemo" you will be directly in ufo mode and can use outerra as usual, with the benefit that you now have four action keys
at your disposal to call the above mentioned 4 html menus that you can modify.

By default this is done by using keys
"U", "Y", "I" ,"P" but you can customize the keybindings in F12 menu by going to "ot" menu --> tick "show advanced" -->look under player
for the following entries:
chat --> U
lobby --> Y
spawn --> I
collect --> P
If these letters are already in use for some of your mods you could also bind keys with modfiers like ALT+I, ALT+P etc..for some reason typing directly in F12 menu you can't get ALT but you get LALT which seems not to be recognized.
But you can still add  ALT+some key manually in iomap/ot.cfg to the entries listed above. Seems an outerra bug.
(note: I choose this naming of the new action keys as I want them later to use in a game.. in principle you could change there namings in iomaps ot.cfg but
it will make them inactive because that naming is hardcoded as well in the required fly77menu_plugin.)

note: for now the tool will allow you to bring up those html menus but while it is totally possible that those menus could be used to
change parameters (vehicle-config.html brought up with "t" key does exactly that) or actions of your mod I have yet only a vague understanding
of how that may be achieved...so unless you know how to do it the
html menus will for now just be "info-screens" plus very importantly to  call web-services ..but I am sure you will find a way to use them in your mods
....suggestion: use the html files to make API calls to external webservices ...like why not...get the realtime weather into outerra !

Very Important note:  many outerra API calls can be made also inside the HTML javascript <script> tags like interfaces to world, plugins, weather, enviornment, explosions...so the HTML pages
can actually be used to change outerra weather, spawn objects, etc...


For sure as soon as I learn more I will post more interesting example HTML files that will allow to use the html menus to their full potential in our mods.

Oh: and before I forget..you can use the new Action keys not only to launch your custom HTML pages/scripts but also to trigger any other action inside your model script...just have a look at the menuDemo.js inside the mod ..it will be quite obvious how to use the new  action keys.

happy experimenting with HTML , CSS and JS and web-APIs in outerra !


download the tool from here:
https://drive.google.com/drive/folders/1akATx0hs4pvTsPFFxsYYTgEj2Tbgx0s_?usp=sharing



installation:

1) drag the fly77menu_plugin.dll as well as the four html files menuAction1.html, menuAction2.html, menuAction3.html, menuAction4.html
and the paper-texture.jpg files into outerra/Anteworld/plugins folder

2) drag the ot.cfg file into defaults/iomap  folder in the root folder ( outerra/Anteworld/defaults/iomap)  make a copy of the ot.cfg file beforehand
drag the ot.cfg file also into iomap in your user folder  (for example username/Outerra/iomap)  make a copy of the ot.cfg file beforehand

3) click on self-installing menuDemo.otx file


















 


« Last Edit: January 24, 2023, 11:40:37 pm by fly77 »
Logged

andfly

  • Sr. Member
  • ****
  • Posts: 347
Re: Tool to use HTML menus in outerra (release)
« Reply #1 on: November 29, 2022, 09:01:04 am »

Fantastic, when I can use the computer again it will be the first topic of study!

Thank you!     :D :D
Logged
I do not know the English language. I use Google Translate. I hope it's all understandable.