HTML5 FrontEnd

[arximidis]

As you may know I 've been working on a custom arcade machine (http://forum.arcadecontrols.com/index.php/topic,114816.0.html) and I am creating my own controller/interface and FrontEnd

FrontEnd
My first attempt was something like this






There result was a... "crap"
It's difficult to customize and the code is a total mess and buggy
Too much work for nothing


An then I had my "eureka" moment

Create a html5 FrontEnd. Customization on the maximum and with the power of jquery you can do wonders

Now, if you are wondering how this would possibly work... the answer is quite simple. Don't think your browser. The html - javascript code runs within an app
This app is a simple exe program, that loads on windows boot and works like a browser (internet explorer to be exact)

The app also gives you functions to load the emulators, reboot the computer etc (that normal javascript can't do)

The trick is something like this:
You write the code as you normally would do to run inside the browser, but if you want to acces the extra functions you write for example
<a id="CloseFrontEnd" href="FrontEnd::Close"></a> 

The highlighted code is all the trick behind this app. This will close the frontEnd (like closing a normal windows app)
Another function e.g. FrontEnd::Reboot will reboot the pc and so on


I have already wrote a first version of this and for now (my theme) look like this


P.S. I don't know if a html5 frontEnd is an original thought, so I will avoid calling it the first html5 frontEnd for arcade machines

[arximidis]

It wokrs

Minor things are missing now and I will be ready to upload it

Remember It's HTML -> and that means you get the code too... You can customize it or completely change it.
A FrontEnd made with html - javascript and css

Some pictiures:

[Fursphere]

I would be concerned with:

1) Browser compatibility
2) Future support as browers get updated

[keilmillerjr]

I would be concerned with:

1) Browser compatibility
2) Future support as browers get updated

Don't use internet exploder. Use a w3c compliant browser. Problem solved. You could make your own browser for this purpose using the open source webkit. On a mac, I have seen videos where you can implement a webview using Xcode in minutes. Not sure about windows or linux.

[Fursphere]

I would be concerned with:

1) Browser compatibility
2) Future support as browers get updated

Don't use internet exploder. Use a w3c compliant browser. Problem solved. You could make your own browser for this purpose using the open source webkit. On a mac, I have seen videos where you can implement a webview using Xcode in minutes. Not sure about windows or linux.

I work in the web world (security mostly).

I was testing some code today and got slightly different results in IE8, IE9, IE10, Safari, Chrome, Firefox, and iOS Safari.  They all did something a little different. 

So while "Don't use Internet Exploder" sounds cute and all, the reality is that they all do things a little different.

[keilmillerjr]

I would be concerned with:

1) Browser compatibility
2) Future support as browers get updated

Don't use internet exploder. Use a w3c compliant browser. Problem solved. You could make your own browser for this purpose using the open source webkit. On a mac, I have seen videos where you can implement a webview using Xcode in minutes. Not sure about windows or linux.

I work in the web world (security mostly).

I was testing some code today and got slightly different results in IE8, IE9, IE10, Safari, Chrome, Firefox, and iOS Safari.  They all did something a little different. 

So while "Don't use Internet Exploder" sounds cute and all, the reality is that they all do things a little different.

I am an aspiring ruby web developer. I know a thing or two about cross-platform compatibility. When there is tons of different outdated ie versions that people are still using and are not w3c compliant, "Don't use Internet Exploder" is pretty sound advice.

If you are getting different results, you are probably using unofficial "css3". If you do use css 3, use sass and compass mixins to make your styles more cross browser friendly. A good css base (such as boilerplate or something similar) also helps, and many browsers have different default styles. I can design a website that looks identical in almost every browser. But when it comes to IE, I can only pull so many tricks out of the bag before it becomes counter productive.

Of course, if you implement this as a compiled app with a web view / webkit layer, you wouldn't have to worry about cross browser compatibility. You could them use webkit's css animations without worries. Webkit is quite powerful. The less javascript, the better. I hate that language. Coffeescript makes it better, but it only disguises it.

[Player 3]

I'm trying to understand what exactly this is besides "a browser frontend." If it's going to launch MAME and perform low-level tasks like rebooting from a browser, this is quite a security concern regardless of intent. Plus there isn't going to be the real benefit of execution speed compared to a native frontend which will seem like a more friendly option for weaker PCs.

As for "Don't use Internet Exploder", this is bollocks. Any version from IE10+ is mostly HTML5 compliant, though the rendering engine will look awful and it being lacking in nature. If you want a browser to avoid, Konqueror is it. It explodes more than IE.

[Fursphere]

Sorry, I'm guess I'm just stuck with IE because of all the crappy horrible business applications I have to deal with that won't run on other platforms.    And all the cross compatibility crap that I have to deal with.

[Player 3]

Sorry, I'm guess I'm just stuck with IE because of all the crappy horrible business applications I have to deal with that won't run on other platforms.    And all the cross compatibility crap that I have to deal with.

Worries for cross-browser compatibility is close to null once the HTML5 and CSS3 standards are more set in stone and prefix-free except for the occasional browser perk. As for the dealing with IE6, everywhere I heard that business still use it, it's because of a contract. A more recent contract may be using IE9/10 rather than IE6/7. Of course, I can't exactly say anything about IE other than the hour of using it and the OS jump.

[arximidis]

I would be concerned with:

1) Browser compatibility
2) Future support as browers get updated

You don't need to worry about that. The app uses internet explorer's engine, so you don't need to be browser compatible. You don't run this inside a browser. It doesn't work that way. (note: however you can run it inside a browser to see how it looks, but you can't run the emulators or use the low level functions)

Don't use internet exploder. Use a w3c compliant browser. Problem solved. You could make your own browser for this purpose using the open source webkit. On a mac, I have seen videos where you can implement a webview using Xcode in minutes. Not sure about windows or linux.

I use internet explorer's engine, which is build in to windows (so no Linux, Mac support -> at least for now)
It's not necessary internet explorer to be installed on your system. Only the engine (which I beileive is preinstalled).

For my default theme I don't use html5 to play the intro videos. I am using media player instead

I'm trying to understand what exactly this is besides "a browser frontend." If it's going to launch MAME and perform low-level tasks like rebooting from a browser, this is quite a security concern regardless of intent...

The low level code doesn't run inside the browser, so you will be safe. Also you don't use the app to surf the internet.
Moreover you get the html and javascript code and you can see how it works

The only way to have problems, is someone accessing the html files to the directory your theme lies, change the html code (on the background) and run the app. But if he is in the position to do all that, I believe you are already in deep problem (and in fact he doesn't need my app to do damage)

...Plus there isn't going to be the real benefit of execution speed compared to a native frontend which will seem like a more friendly option for weaker PCs.

I installed hyperspin to a "weaker" PC and CPU usage was about 90% on idle

In my case (and for the same PC) CPU usage is close to zero. When the pictures are smoothly rotating, or the media player loads, I get some CPU usage, but even then is nothing.
That depends on how "heavy" your code will be.




The  difference with this frontEnd is that when you run it, you get NOTHING. How will work, how will look, which emulators will support, depends on YOUR code (html/css - javascript).
Now, when I release the first version, I will include a custom theme (the one you see in the pictures), to see how it works, to get the code, modify it and do what ever you want.
In my custom theme I am supporting only MAME (and for now is not a full support as more code must be written)

I understand that this frontend is more suitable for people that know how to program using html/css and javascript

..........
 The less javascript, the better. I hate that language. Coffeescript makes it better, but it only disguises it.

Hmm, First time I hear that. Jquery is a very powerful tool.
I hate java and not javascript. I have write code with java for android (in fact I wrote an app to control the machine and play games using my android smartphone as controls. I will demonstrate this in a video).
I could understand someone hating java, but javascript it's nice

[AllisterFiend2]

I'm interested in this concept.

I look forward to hearing and seeing more about it.

Allister Fiend

[lordnacho]

Sorry but I'm on the negative side of this.  You'll need to run some sort of programming language outside of the browser.  How can jquery/javascript launch an executable(mame or other emulators)?  ActiveX controls? 
Or how about parsing game lists?

If doing this just for jquery animations, then I don't see it being worth all the trouble.  Hyperspin is a flash app, but relies on autohotkey scripts.  Note: you can turn a lot of the settings down to run on older pc's

[arximidis]

I'm interested in this concept.

I look forward to hearing and seeing more about it.

Allister Fiend

Thanks. I will also need people to know how to program in html/css and javascript, in order to improve the UI feeling, support more emulators or even tell me what more I could do

Sorry but I'm on the negative side of this.  You'll need to run some sort of programming language outside of the browser.  How can jquery/javascript launch an executable(mame or other emulators)?  ActiveX controls? 
Or how about parsing game lists?

If doing this just for jquery animations, then I don't see it being worth all the trouble.  Hyperspin is a flash app, but relies on autohotkey scripts.  Note: you can turn a lot of the settings down to run on older pc's

As I said before, It doesn't run inside your browser (ok, if you run it, you will see the UI and all the things but you will not be able to load the emulators or use the low level functions)
You run it inside my application, but it's all html and javascript. I am not using ActiveX controls.. In fact the application is portable (no installation is required)

I am only capturing the navigation links and if one is in a specific form, then a low level function is called by the app. I gave an example in the first post

...
Or how about parsing game lists?
...

I don't know what you mean. I used this call
mame -listxml >gamelist.xml
to get all the supported games saved in a xml file. I use javascript to read this file and fill the list with all the games

You can run this command manually or using html/javascript (within my app). For now I have not included this command in my custom theme (I run the command manually), but in the future maybe I will include it (or someone else could do it)

[lordnacho]

So what is the app actually written in?

[arximidis]

The app is written in Delphi (but I am thinking to convert it to Lazarus, using another engine to avoid internet explorer)

Think of the application as a browser like the very well known ones. The difference is that it doesn't have an address bar and all the other cool stuff you want in order to surf the net.
It is rendering html/css documents with javascript by using internet explorer's engine (but not the most updated. I beleive it uses older versions, which are embended in windows. So you don't need to install anything else)
However, I don't think that it supports html5, but the previous version. This is not a big problem because jquery runs smoothly and I have tested it on Windows XP, Windows 7 and 8
I also tested it to my game machine and everything worked ok (I will demonstrate it with a video)

The mazor difference with all other browsers is the trick behind this idea. If you write this url to your browser FrontEnd::Reboot, nothing will happen
But if you direct with javascript to this url within my app, then the computer will reboot (And it will force to close all running programs)

So you do all the stuff with html/css and javascript. And you can do whatever you want

[Fursphere]

Sorry but I'm on the negative side of this.  You'll need to run some sort of programming language outside of the browser.  How can jquery/javascript launch an executable(mame or other emulators)?  ActiveX controls? 
Or how about parsing game lists?

If doing this just for jquery animations, then I don't see it being worth all the trouble.  Hyperspin is a flash app, but relies on autohotkey scripts.  Note: you can turn a lot of the settings down to run on older pc's

Ever played Battlefield 3 on the PC?  The "Launcher" is an online web page, that installs a plugin to launch the game locally.  (its complete crap too)

[arximidis]

I don't know about this launcher

In my case I am building a browser, but it has very limited functions compared with the well known browsers.
It doesn't have all of their features and it only loads html files that are saved to your computer locally, for security reasons (meaning you can't surf the net with it)
It's a stand alone application and no other software needs to be installed (no AvtiveX, no nothing)
It's portable and you can even run it from a flash drive (if you provide to the html code, the directories where your emulators, roms etc are)

P.S. I am now working on converting the application to use qt libraries (with Lazarus/free pascal) and thus making the application/browser compatible with other platforms (Linux/Mac). But this will be on version 2. I will release the first version as it is (meaning only for windows)

[404]

very nice. I was thinking of the same thing months ago when i saw sandheaver's *sp html UI implementation.

There are quite a few browser forks that do not contain interfaces including prizm/moz chromeless.

[arximidis]

very nice. I was thinking of the same thing months ago when i saw sandheaver's *sp html UI implementation.

There are quite a few browser forks that do not contain interfaces including prizm/moz chromeless.

Thanks!!

And I have great news. I have just tested my FrontEnd to my game machine and it works!!!

So I am ready now to upload the first version. For now it is not fully supporting mame, but you can load the roms and play. In the future I will support more emulators (except if someone writes a more complete html code).
I will upload my html theme in order to see how it works or modify it.

For now I will not include a very good tutorial (and I hope to understand how it works by reading the code). Soon I will write a more complete tutorial

Tomorrow or the day after I will upload the code. I will inform you when this happens
See you

[UFO]

Sounds interesting... Looking forward to some beta testing with my new cab when its ready!

)

[arximidis]

Sounds interesting... Looking forward to some beta testing with my new cab when its ready!

)

Thanks! I will need beta testing. After all this is the first version

I have not included some features yet.
For example you can not fast select roms by changing the letters (from A to B etc). I will include it in the next version.
However, it's html/css and javascript. Someone can include it for me. If someone does, I will need the feedback (I will publish his/her name too)

Also my custom theme works for a resolution 640x480 (due to the fact that I am using a television in my game machine).
If you have bigger resolution, then it will not cover the whole screen

Thank you

[UFO]

Sounds interesting... Looking forward to some beta testing with my new cab when its ready!

)

Thanks! I will need beta testing. After all this is the first version

I have not included some features yet.
For example you can not fast select roms by changing the letters (from A to B etc). I will include it in the next version.
However, it's html/css and javascript. Someone can include it for me. If someone does, I will need the feedback (I will publish his/her name too)

Also my custom theme works for a resolution 640x480 (due to the fact that I am using a television in my game machine).
If you have bigger resolution, then it will not cover the whole screen

Thank you

I wouldn't be expecting a completed package arximidis, but it sounds like you've put a lot of work in so far.

I would be glad to offer help and constructive criticism - should you require any.

I have a background in design and a keen eye for detail.

By all means let me know if you need some help ... 

[OxACE]

This is an excellent idea! There are numerous HTML/CSS/JavaScript fluent folks out there and there are many frameworks to leverage. Their numbers would help ensure the project could be maintained. It looks like there was some discussion of an IE/Windows-centric program, but you could easily create a very nice cross-platform (Win/Mac/Linux) front-end with these technologies.

There is currently a lot of work being put into performance improvements in JavaScript. In fact it very well may approach native speeds soon, as was done with Java and just in time (JIT) compilation. The Google V8 engine is rather prominent for Node.js work on the server-side (http://code.google.com/p/v8/)
   
There is also App.js being developed to work better with desktop applications. It might be as relevant to your project as V8.

From: https://github.com/appjs/appjs
---------------------------------------------
AppJS
AppJS is an SDK to develop desktop applications using Node.js melded with Chromium. With AppJS you can develop desktop tools and applications using the same libraries and knowledge used to build websites. You get all the following in one package:

JS, HTML5, CSS, SVG, WebGL provided by Chromium
mature http/https servers and client APIs - Node
filesystem, dns, cryptography, subprocesses, OS APIs - Node
sandboxed code execution environements virtual machines - Node
tools for exposing native C++ bindings to JavaScript- Node
---------------------------------------------

There is even a V8-GL project integrating OpenGL with V8 for desktop apps.

http://drawlogic.com/2009/06/21/v8-gl-hardware-accelerated-desktop-apps-with-opengl-in-javascript/

Again, very interesting.

EDIT: Forgot to mention the most compelling -- node-webkit -- at https://github.com/rogerwang/node-webkit

[arximidis]

This is an excellent idea! There are numerous HTML/CSS/JavaScript fluent folks out there and there are many frameworks to leverage. Their numbers would help ensure the project could be maintained. It looks like there was some discussion of an IE/Windows-centric program, but you could easily create a very nice cross-platform (Win/Mac/Linux) front-end with these technologies.

There is currently a lot of work being put into performance improvements in JavaScript. In fact it very well may approach native speeds soon, as was done with Java and just in time (JIT) compilation. The Google V8 engine is rather prominent for Node.js work on the server-side (http://code.google.com/p/v8/)
   
There is also App.js being developed to work better with desktop applications. It might be as relevant to your project as V8.

From: https://github.com/appjs/appjs
---------------------------------------------
AppJS
AppJS is an SDK to develop desktop applications using Node.js melded with Chromium. With AppJS you can develop desktop tools and applications using the same libraries and knowledge used to build websites. You get all the following in one package:

JS, HTML5, CSS, SVG, WebGL provided by Chromium
mature http/https servers and client APIs - Node
filesystem, dns, cryptography, subprocesses, OS APIs - Node
sandboxed code execution environements virtual machines - Node
tools for exposing native C++ bindings to JavaScript- Node
---------------------------------------------

There is even a V8-GL project integrating OpenGL with V8 for desktop apps.

http://drawlogic.com/2009/06/21/v8-gl-hardware-accelerated-desktop-apps-with-opengl-in-javascript/

Again, very interesting.

EDIT: Forgot to mention the most compelling -- node-webkit -- at https://github.com/rogerwang/node-webkit

Thanks for all the info and your nice words. That is the whole idea. I am counting on the HTML/CSS/JavaScript fluent folks out there

I am working on creating a multiplatform app, for the next version
However, the first version will only run on windows


P.S. Now I know why I wasn not able to render html5 files.  To do so you must include the meta command
<meta http-equiv="X-UA-Compatible" content="IE=9" /> inside your head section. That will tell to the system to render html files with IE9 standards -> and that means html5. I have test it and it works!!!

However for the first version I comment out this line, because I must do some changes to the css file. I will do them some other time (or maybe some does it for me


Tomorrow I will upload the first vewrsion. No funcy tutorials though (at least for now)

[UFO]

Cool ... looking forward to seeing it! 

[OxACE]

I'm looking forward to seeing more of your work on this. I'd love to see your code and might be able to help with cross platform work.

[arximidis]

Ok, I have finally uploaded the official first version of HTMLFrontEnd
I haven't write a tutorial yet.
However, I am posting some basic stuff and notes


Download the zip file from this link (http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/HTMLFrontEndEN.htm) and unpack it somewhere. No installation is required

Inside you will found two exe programs, a settings.ini file and a directory with the name "default" (this is where all the html/css/javascript code lies).
You run the app HTMLFrontEnd.exe (which is the browser). This application is embedding internet explorer and gives you access to the low level functions. For security reasons it blocks navigation to the internet (however it is possible to run javascript code downloaded from the internet, so be carefull. It's better to run javascript only locally, to have access to the code)

Note: Ignore the file kbrdController.exe (at least for now). This is a program that communicates with the buildin keyboard controller/interface of my arcade machine. If you use a keyboard or a third party interface (e.g. like ipac) you don't need kbrdController.exe (however you don't need to delete it)

Open settings.ini file and read the comments. They will quide you for the supported settings. Don't forget to change the path to MAME in the ALLOWED PROGRAMS section
Don't forget to change the variable MAME_ROMS in the file main.html (= under the default directory), to the path of your mame roms. It's about line 45 of the code (use the format you see it in the code, using \\ instead of \)

Inside the directory default\emulators\MAME\snaps you can copy all your game snaps
Inside the directory default\emulators\MAME\videos you can copy all your game videos


Usage:
LEFT/RIGHT arrow keys navigate to emulators. ENTER shows the rom list of the selected emulator
UP/DOWN arrrow keys navigate to roms. ENTER starts the selected rom
BACKSPACE closes rom list
ESC terminates the program



Notes

• You will notice that when you run the app the mouse moves to the upper left corner. This is not a bug. It is made on purpose to ensure your html code will have keyboard focus. This will change in the future
• You can run the code inside internet explorer but you will not have access to the low level functions (run the emulators, reboot, shutdown etc)
• I have included a small gamelist (default\emulators\MAME\gamelist.xml) for the tests. Replace it with the gamelist_full.xml (in the same directory) for a more complete list
  (Attention: The first time you load the full list it will take some time because is "enormous". After the first load, then it will load fast)
  If you want a more updated list, extract from mame.exe with the following command:
  mame -listxml >gamelist.xml
  and overwrite the old list

My default html theme is made for a resolution 640x480, because I am using a televison in my arcade machine. If you have greater resolution, the main window will be smaller


Here is a video showing HTMLFrontEnd in action on my arcade machine





P.S. Please report any suggestions or bugs you find in the program. If someone updates the code, if you like, you can send it back to me. I will add it to the next version, publishing his/her name too
The best way to edit the files is by using programmers notepad (http://www.pnotepad.org/) or notepad++ (http://notepad-plus-plus.org/)


Thank you!

[UFO]

Well, that's my Sunday sorted!

Downloaded -- I'll let you know arximidis, but from the video, it looks fantastic in its simplicity...

[arximidis]

Well, that's my Sunday sorted!

Downloaded -- I'll let you know arximidis, but from the video, it looks fantastic in its simplicity...

Thanks! I will wait for your feedback

[404]

I'm packed with work for the next few days but i will test it out before this upcoming week is over. video looks very promising. 

[UFO]

Great so far... even works over my network running it on my laptop with my roms on the MAME-PC.

[arximidis]

I'm packed with work for the next few days but i will test it out before this upcoming week is over. video looks very promising. 

Thank you!

Great so far... even works over my network running it on my laptop with my roms on the MAME-PC.

Cool!



UPDATE  (version 1.1)

DOSBox support added

Settings:
Same thing with MAME.
   1) Go to settings.ini and Change the path to the directory where DOSBox is installed
   2) Then open main.html and go to line about 59. Change the path to the directory where your DOS games ar installed

The way it works is the following:
You install all your DOS games under subdirectories inside the previous directory. The importand thing to remember is is that the name of each subdirectory must have the same name with the main executable file of each game (without the extension .exe)
Don't change the single quote of the variable in line 59 with double quotes


Video: (Playing extreme pinball)




PS: all the artwork needs to be replaced. A background picture would be nice. The startup video needs to be more general and not only for MAME

[arximidis]

UPDATE  (version 1.3)   (link: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/HTMLFrontEndEN.htm)

Nestopia support added

Settings:
   1) Go to settings.ini and Change the path to the directory where Nestopia is installed
   2) Then open main.html and go to line about 63. Change the path to the directory where your roms are installed


For now I don't pass command line parameters to nestopia. I don't know them. I setup nestopia through the preferences window (it saves the settings).
However you can pass any parameter you want (about at line 308. You can pass them the same way the parameters are past to DOSBox -> about at line 293)

[ppv]

This is really interesting! I have seen neat things done in encapsulated html apps, but this one look gorgeous! Will check it out for sure.

Sent from my XT925 using Tapatalk 4

[GoYouSalukis]

Great effort so far! For some reason, it crashes on me when I select a game in MAME. I did change and verify the location of the .exe and the rom folders. I get "Unspecified error at line 335"

Looking in default.html, line 335 is "document.embeds[0].stop();" with the comment saying "Stop Background music". I tried commenting out the lines that stop and play the document, but still get an error.

FWIW, I do not have any background music playing. Is it supposed to play a wav file related to the game?

I would love to use this on my current project, but I would need to be able to rotate the screen 90 degrees. Is this something that can be accomplished?

Also, down the line, it would be great if it can be modified to allow mouse clicks to select emulators/games. It could be used for touchscreens as well. If it can respond to mouse movements, we could use a spinner/trackball to scroll through the emulators and then through the games!

Thanks for sharing!

[arximidis]

This is really interesting! I have seen neat things done in encapsulated html apps, but this one look gorgeous! Will check it out for sure.

Sent from my XT925 using Tapatalk 4

thank you

Great effort so far! For some reason, it crashes on me when I select a game in MAME. I did change and verify the location of the .exe and the rom folders. I get "Unspecified error at line 335"

Looking in default.html, line 335 is "document.embeds[0].stop();" with the comment saying "Stop Background music". I tried commenting out the lines that stop and play the document, but still get an error.

FWIW, I do not have any background music playing. Is it supposed to play a wav file related to the game?

I would love to use this on my current project, but I would need to be able to rotate the screen 90 degrees. Is this something that can be accomplished?

Also, down the line, it would be great if it can be modified to allow mouse clicks to select emulators/games. It could be used for touchscreens as well. If it can respond to mouse movements, we could use a spinner/trackball to scroll through the emulators and then through the games!

Thanks for sharing!

I got the same error with an another friend

The problem is that you don't hear the background music. Maybe something with the embed tag. I will replace it with the object tag
After the intro video (did you see the intro video?) when the carousel loads you must hear a mp3 background music

Try this one.
Delete the line 335: document.embeds[0].stop();
Delete the line 347: document.embeds[0].play();

Also delete the line 563: <div id="backmusic"><embed src="img/music.mp3" showcontrols="0" LOOP=TRUE></embed></div>

Restart the app, after that


If you get an error please notify me (post the error picture if it is possible)



PS. Yes it is possible to add mouse clicks to the code. You can also add swipe evens for touch screens (left or right, up or down) . Remember this is javascript. You can do pretty much whatever you want
To rotate 90 degrees is not so easy (not impossible though). But I beleive that there are some videocards (like mine ) which can rotate 90 degrees the whole screen




edit
Yes I saw the error myself. The problem is with the embed tag. Deleting the previous lines inside main.html will solve the problem

[GoYouSalukis]

No luck,
I'll attach the screenshot.

I am assuming that software rotation would need to be implemented in the frontend engine. What code is it written in? Are you going to distribute that? I wouldn't mind taking a look at that problem. It might be beyond my skills, but it might not.

The first error (before deleting the lines), was a java error window with the error being "Unspecified Error). After deleting the lines, I get the picture below.

[arximidis]

No luck,
I'll attach the screenshot.

I am assuming that software rotation would need to be implemented in the frontend engine. What code is it written in? Are you going to distribute that? I wouldn't mind taking a look at that problem. It might be beyond my skills, but it might not.

The first error (before deleting the lines), was a java error window with the error being "Unspecified Error). After deleting the lines, I get the picture below.

This is a settings error. You are not providing the correct path to mame. Remember that if you are running a different version of mame, the main executable file is not mame.exe, but it could be mame32.exe or something else (depending on the version you use)
Also make sure you use \\ instead of \, only in main.html file (and don't forget to put \\ at the end. Example: var MAME_ROMS = "C:\\Emulators\\MAME\\roms\\"; )

In "settings.ini" use the \
example:MAME = C:\Emulators\MAME\mame.exe
I use the standard version, so a select mame.exe... For another version use the appropriate executable file

Also make sure you didn't change accidentally other commands inside the code


Yes, you are right. The previous error was a javascript error


This is HTML based FrontEnd. The entire FrontEnd is written in html/css/javascript. You already got the code (under default directory). In fact you did look at the code when you deleted those lines
The executable you are running HTMLFrontEnd.exe, is simply the browser and not the actual FrontEnd.
So, to answer your question, you need to change the code to rotate the screen, but it will not be so easy

[arximidis]

New Version (1.4)

bug fixes
WinUAE support

I have changed the way background music is played, to fix the error encountered in some cases

link:http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/HTMLFrontEndEN.htm

[GoYouSalukis]

Thanks, I had an extra \ in the .ini file.

The music plays for me now and I can play Mame games. Here are some comments.

1. After selecting Mame, and playing a game, when I hit escape, it goes back to Mame (expected). When I hit escape again, the front end disappears both on the screen and on the taskbar(unexpected). If I then try to edit the index.html, it says it is open by a program. If I open the Task Manager, it does not appear in the list of running programs. If I open the FE again and then hit escape (without running Mame), the index.html file is unlocked for edits.

2. It would be good to have a "skip video" flag, especially for debugging purposes. I played around a bit in the index.html, but haven't been able to skip it.


Regards,
Justin

edit: I forgot these:
3. When you load mame, it takes a long time to load the list. Is there any way to start loading the lists as soon as the program starts?

4. After I select Mame, the program seems to "Spawn" another version of itself. In my taskbar (windows 7), I get an additional "HTML Frontend". In the taskbar preview, they both look the same.

Edit 2:
I figured out how to skip video. I just commented out lines 44-46 in index.html and copied line 54 (window.location.href = 'main.html' after line 46.