HTML5 FrontEnd

[arximidis]

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.

Hello
I am glad everything is working for you now

Thank you for your comments. They help to improve the program

1) The default configuration is when hitting ESC (and whereever you are) terminates the program. To go back hit BACKSPACE. However it's more logical to hit ESC to go back and something else to terminate the program, so I will change it in the next version
Remember that you already got the code. So it is possible to change it by yourself. In this forntend everything is defined inside the html/css/javascript code, even keystrokes

For version 1.4: Open main.html and
                         Go to line 387: You will find the command if (e.keyCode == {   Change 8 with the number 27
                        Then go to line 402: You will find the command if (e.keyCode == 27) {   Cange the 27 with the number 8. Change nothing else, especially the ==

save the file. After that when you are hitting ESC will go back, and BASCSPACE will terminate the program


2) This is an excellent idea. I will add it in the next version. You will hit ESC and cancel the intro video. You can add this feature by your own, but it will take a lot of commands, so that is why I am not posting them. If you look how main.html captures keystrokes, it is not so difficult to understand what to do (allthough you need to now how to program in javascript)


3) This is only for the first time. If it loads and you don't close the FrontEnd, the list will load fast next times. Gamelist.xml is huge and javascript needs some time to load it. However I am sure that some optimizations can be done to imporve the code and make it faster

4) This is a harmless bug. I see that on Windows 8 too and I have seen it in other programs too. It's not actually a second version. Both are pointing to the same. If you close one, will close both. Ignore that.
Close the Front End by hitting "Exit to Windows" inside the menu (or hit ESC)

[arximidis]

News

One step before the multiplatform application

I have great news!

I have almost converted the app in order to use webkit and QT libraries. This is the first step of the transistion to a multiplatform app

   1) No internet explorer is required
   2) No media player is required. Instead I use the VLC plugin
   3)  HTML5 support. It means that the canvas tag is supported and you can do wanders

First I will publish the windows version and the the Linux version will follow

This will be version 2

[arximidis]

Update

I have released the version 2.0 (beta) of HTMLFrontEnd

HTMLFrontEnd version 2.0 is now multiplatform. It is based on webkit and QT4 libraries

Notes
  1) No internet explorer is required
  2) No Windows media player is required. HTMLFrontEnd v2.0 supports HTML5 (meaning you can use canvas tag) but it doesn't support video tag. So, in order to play music and videos VLC plugin is used. Download and install VLC from the official site (For Linux users most distributions have VLC already installed).
  3) Supported platforms Windows and Linux (Mac support will be ready soon... I hope )


Download from here: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/HTMLFrontEndEN.htmm

I wrote a tutorial on how to setup here: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm

Let me know about any bugs or suggestions

[GoYouSalukis]

Thanks,
I was able to follow your instructions no problems.

Here is a bug (on my machine):

When I run the program, I get the video like before, but when the video is done, it just goes to a black screen. The only way to exit is to kill in in the task manager.

If I hit ESC while the video is playing, the video stops and the program goes to the carousel as expected. Once there MAME works fine (I don't have the other emulators).

Also, if I skip the video, it goes to the carousel, but if I now hit BKSPC, it starts the video again.

On the rotation issue, it seems I can rotate a canvas 90 degrees no problem. Is it perhaps possible to put the carousel in a canvas and then rotate it? Or is that too easy?

Thanks

[georgeb]

I really like the idea behind this. Really interested to see where it goes. arximidis, is there any reason why you can't use the html video tag in version 2? Looking forward to having some time to play around with this.

When I run the program, I get the video like before, but when the video is done, it just goes to a black screen. The only way to exit is to kill in in the task manager.

I had this issue too. To fix the issue I changed line 63 in index.html to:

Code: [Select]

if ((x == 0 || x == 6)&&(videoisplaying)) {
Also, by default backspace on webkit goes back to the previous page which is why you are seeing the video being played again.

Regarding the rotation you can always set the -webkit-transform style on the body element to rotate(-90deg) but the carousel in the default theme does not play nicely with this setting.

[arximidis]

......
Here is a bug (on my machine):

When I run the program, I get the video like before, but when the video is done, it just goes to a black screen. The only way to exit is to kill in in the task manager.

If I hit ESC while the video is playing, the video stops and the program goes to the carousel as expected. Once there MAME works fine (I don't have the other emulators).

Also, if I skip the video, it goes to the carousel, but if I now hit BKSPC, it starts the video again.

On the rotation issue, it seems I can rotate a canvas 90 degrees no problem. Is it perhaps possible to put the carousel in a canvas and then rotate it? Or is that too easy?
-----

Hmm, This is happening because VLC is not responding with the code 0 when playback has finished (response code 3 is when VLC is playing). This is weird because I never got a different response code both in Windows and Linux (For the tests I use Windows XP, Windows 8 and Linux Mint 14)
At first I was using events (link in the page: https://wiki.videolan.org/Documentation:WebPlugin) but it worked only in Windows

georgeb suggested a nice walk trough for this problem. Thanks for sharing georgeb

To fix the issue I changed line 63 in index.html to:

Code: [Select]

if ((x == 0 || x == 6)&&(videoisplaying)) {

Backspace is not working any more... I have remove it form code (actually I followed your suggestion). What you see is the default behavior of webkit (it loads the previous page when you hit backspace).
Maybe I will try to block this behavior in a next release to avoid confusion

In this version I have included a nice animation when you are in carousel and you hit ESC when not viewing the system menu. It will automatically rotate the carousel to the system menu and will select "Exit to Windows/Linux" option waiting to hit enter.

On the rotation issue: You can use css

Code: [Select]

-webkit-transform: rotate(90deg); to rotate, but the carousel in not working quite well (it is rotating but you can not view the whole part of the pictures)

I really like the idea behind this. Really interested to see where it goes. arximidis, is there any reason why you can't use the html video tag in version 2? Looking forward to having some time to play around with this.
...

I don't know why, but when I write the example code found here: http://www.w3schools.com/tags/tag_video.asp I always get the message "Your browser does not support the video tag.", in Windows. However video tag is supported in Linux

The canvas tag is working very well (in both operating systems).
Actually I have included an example code to demonstrate: Go to main.html line 653 and uncomment the <!-- sign. Also at line 657 uncomment the --> sign. Save the file and see what happens
I removed it because I didn't like the background picture and it consumes a lot of CPU power (Some optimizations to the code must be done)

Here is a link explain why it's not supported http://stackoverflow.com/questions/8653323/why-qtwebkit-4-8-0-webkit-2-2-dont-support-audio-video

Notice that the video tag in not supported only in Windows (in Linux works fine!)

[georgeb]

I actually had a look around to see what version of webkit is included and saw those issues with the 4.8 libraries with regards to video support.

I was thinking about it today and thought that maybe a chrome extension could be useful for developing a frontend. Obviously you need a way to launch the emulators which could be achieved through a plugin. I might have a play around with it over the next couple of days and see what I can come up with. I have no experience with qt and it looked like a steep learning curve whereas I have experience with javascript and extensions. Chrome also has a "kiosk" command line switch allowing to open a page or extension in full screen and no way for the user to exit.

I checked out the canvas cloud background this afternoon. Looks great.

[arximidis]

Yes, it may be possible to use chrome ( I think the html code is running well in chrome too, but I haven't tested it yet)
However you will need to write some sort of extention for the low level functions.

The way I am doing it is by trapping the urls. If they are in a specific form, I run a low level function. Some of them require parameters (eg run the emulators), which are also included in the url.
I don't allow running any executable file but only the ones included in the [ALLOWED PROGRAMS] section inside settings.ini by the user

I like the idea using chrome.  I am looking forward for your results

[arximidis]

New version 2.1


1) Fixed some bugs (especially in linux version where the main window was losing keyboard focus)
2) Added the fixed code when the video reaches at the end (thanks to georgeb. Included a comment in that line of code)
3) Added window mode setting
4) Added root password setting (linux version)  Attention This setting is not safe. Use it only in stand alone machines without internet access ( eg Linux based arcade machines). In this way you are not going to be prompt for the password

Note: Linux version uses sudo command to reboot/shutdown the computer


Edit Version 2.2
1) Fixed some bugs
2) Removed history feature. Now backspace is not redirecting to previous page

[arximidis]

I am taking advantage the vacation time to update the html theme

I have updated the html theme by adding new features

1) I have included the ability to load the xml file list for MAME (like the old version 1.4). It takes some time to load in the first time of use. Then it will load fast (as long as you don't close the main window)
Note: If you prefer to list only your existing roms, simple comment the line 361 and uncomment the line 363 in "main.html"

2) Added Page down and Page up search by the first letter (or number) inside the game list

[arximidis]

[message deleted by me]

[arximidis]

News

I have now added full mouse support. Even using the mouse wheel.
However because you must do too many changes to the code, I will upload the complete code soon

[arximidis]

New Version 2.3

I have uploaded the new version of HTML FrontEnd

Added full mouse support.

Usage: All carousel pics are clickable. Click to load the game lists.
Scroll the carousel with the mouse wheel.
Clicking with the middle mouse button (sometimes this button is when you click the mouse wheel) enables search by the letter (same as Page down/page up). Roll the wheel to change letter.


link:http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/HTMLFrontEndEN.htm
Setup directions: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm

[arximidis]

New version 2.4

Added cookies support
Some bug fixes

In the FrontEnd I created a simple (for now) settings page based on cookies. You can set the paths of the roms, without interfering with the code. Also some other settings are added

----------------------------------------------------------------------------------------------------------------------

[edit]
Version 2.4.1
1) Improved settings page
2) Now you can set up the emulators without interferring with the code.
3) Improvements to the main html code

[arximidis]

....
On the rotation issue, it seems I can rotate a canvas 90 degrees no problem. Is it perhaps possible to put the carousel in a canvas and then rotate it? Or is that too easy?

Thanks

OK

The new version is comming... and you can rotate the whole thing 90 degress (CW or CCW). You can even rotate 180degrees, without even interfering with the code!

Comming soon...

Also I modified the code to add or remove emulators dynamically...

[GoYouSalukis]

Great news for the vertically oriented! The next hurdle would be the ability to rotate on the fly to support users with rotating monitors.

[arximidis]

I have already included a dropdown list on the settings page to change the rotation on the fly. There is also a preview in the same page

[arximidis]

Major update (version 2.6)

Major update to settings page. You have the ability to setup the emulators, pass parameters to the carousel and even change some settings of "setting.ini".
You can rotate the canvas 90 or 180 degrees. Also you can zoom the entire document to fit your needs.
You can add/remove emulators, without modifying the code (I tutorial will follow soon)
A preview of the main carousel was added

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

Thank you

P.S. Please notify my for bugs or suggestions

Vacations are officially over
The updates will not be so frequent from now on

[arximidis]

How to setup the emulators with explanation
http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/setupemututorEN.htm

I am covering only the emulators which have something new to tell (in order to understand how this works)
Then it will be easy to understand how to setup other emulators

For example:
For VisualBoyAdvace

Write the full path of the roms:
Select "Files inside in rom/games path" and write *.zip next to it
In "Emulator command line" write: {rom}

For JPCSP I wrote the settings in this article: http://forum.arcadecontrols.com/index.php/topic,134256.0.html

[arximidis]

BUG

I found a small bug in the previous version of the html theme (default640x480), where a javascript event didn't fire when you copied-pasted the data
I fixed it in version 2.6.3

[arximidis]

Version 2.7 and theme version 2.7.1

A new update for using command line arguments

In the new version you can pass any parameter to the current loaded page (or any page of your choice, defined in settings.ini)

I have included (for the theme) two parameters: rotation and zoom

Usage: If you start the program with this command line HTMLFrontEnd rotation=270 zoom=1.4   then the program will start with a 90CCW degrees rotation and a zoom factor 1.4
If the program is already running, then the orientation and the zoom factor will change, if current loaded page is main.html
(in this case the command will not start a new instance)

[ppv]

Finally got around to test it! I likes it a lot!
Three things though:
1. I would like to set the roms selected by .ini also. (I have all my faves in my custom.ini in MAME and would like to be able to choose from that)
2. Add a way to specify the path from snaps and video
3. WAAAAAAAAAAAAAAAAAAAAAAAY down the road, parental control.

I might try and import the AtomicFE layout I am working on now. This FE looks really promising!

[arximidis]

Finally got around to test it! I likes it a lot!
Three things though:
1. I would like to set the roms selected by .ini also. (I have all my faves in my custom.ini in MAME and would like to be able to choose from that)
2. Add a way to specify the path from snaps and video
3. WAAAAAAAAAAAAAAAAAAAAAAAY down the road, parental control.
......

Thanks for trying the software and for your nice words ppv

1. It can be done. Just send me a sample of your .ini file to see how the games are listed and I will add support in the next version (it will be faster to load too)

2. This is already there. If you watch the first video you will notice it (see bellow).
However when I was updating the html code, one small bug got through. I have corrected the problem in the new version of the html theme version 2.7.2 (I hope... because I haven't tested the changes yet).
If you want to see your snaps and videos, here what you have to do. First download the version 2.7.2 of the theme.
Go to the directory HTMLtheme/default640x480/MAME and create a directory with the name snaps (if it does not exist). Copy all your .png snaps there. They must have the same name with the actual rom of the game (meaning the zip file and not the description) Example: if you have the rom 1942.zip the snap must have the name 1942.png
For the videos, go to the directory HTMLtheme/default640x480/MAME and create a directory videos (if it doesn't exist). Copy all your video previews (.avi) there. Again they must have the same name with the roms

3. I have added some sort of parental control to my homemade machine, with a key button. Without the key the machine will not start.
It's a good idea to add parental control to the software too

....
I might try and import the AtomicFE layout I am working on now. This FE looks really promising!

I would love to see that!!! 

[ppv]

2. This is already there. [snip

What I meant was choosing you own paths! But I know the option is there!

The parental control is to block my autistic  kid from playing the more violent games (i.e. MK and their ilk)

Th ini file goes in the FOLDERS folder of the mame dir... This is my custom game list and categories

[arximidis]

What I meant was choosing you own paths! But I know the option is there!

The parental control is to block my autistic  kid from playing the more violent games (i.e. MK and their ilk)

Th ini file goes in the FOLDERS folder of the mame dir... This is my custom game list and categories

It is possible to add the ability of choosing the snaps/videos directories. For pictures adding the prefix file:/// in front of the path of an image is all you need to do
For example <img src="file:///<full path of image>" />  where <full path of image> could be C:/emulators/mame/snaps/1942.png etc
I will try to add this feature in the next version

For the parental control we may be able to do something in the future

But first I want to add the support for the .ini files, because it will give the ability to create favorite lists etc

-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Edit
Especially for the images issue, you can easily modify the code
Go to line 850 of main.html (version 2.7.3) and replace the line

Code: [Select]

var tsrc = 'emulators/'+emuArray[iGame-1][0]+'/snaps/' + irom.substr(0, irom.lastIndexOf('.')) + '.png';
with something like this

Code: [Select]

var tsrc = 'file:///<path of snaps directory> + irom.substr(0, irom.lastIndexOf('.')) + '.png';

where <path of snaps directory> the full path of the directory where your images are stored. E.g. C:/emulators/mame/snaps/ (Note: Don't forget the / at the end)

[arximidis]

Note
I am searching for intro videos/musics and better artworks for the upcoming version 3.0

Because HTMLFrontEnd is free (and open source) all videos and artworks must be free of charge.
I will include the names of the people which are willing to contribute

Thank you

[arximidis]

Version 2.8

Added the ability to load the game/rom list from ini files
Auto zoom and auto center to main window


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


Install: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm
Setup the emulators: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/setupemututorEN.htm

[Le Chuck]

Just now seeing this, thanks for posting it up.  I'm going to dig into this and see how it goes 

[arximidis]

Just now seeing this, thanks for posting it up.  I'm going to dig into this and see how it goes 

Hello Le Chuck
Thanks for trying the frontend
I am waiting for your reply

[Le Chuck]

Just now seeing this, thanks for posting it up.  I'm going to dig into this and see how it goes 

Hello Le Chuck
Thanks for trying the frontend
I am waiting for your reply

So far I've been unable to get it going due to a number of dll's not being present.  I went through and downloaded all but then ran into qt issues even after installation of the qt and lazarus stuff so I'm not exactly sure where I'm going wrong with this but can't seem to get it going.  W7-64 fyi.

[ark_ader]

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.

You fall into the 30% category of IE users, where the 70% is geared to noob and idiot Internet users (I read that somewhere) so I know where you are coming from. 

I like the interface and the work is very good.  Kudos to ARXMIDIS for the design and the sharing of code, which I am sure we will use for light weight distributions. 

If I was coding a HTML 5 application I would focus on Firefox and Chrome platforms.

[arximidis]

So far I've been unable to get it going due to a number of dll's not being present.  I went through and downloaded all but then ran into qt issues even after installation of the qt and lazarus stuff so I'm not exactly sure where I'm going wrong with this but can't seem to get it going.  W7-64 fyi.

You don't need to download all the qt libraries separately, especially if you are using windows. I have included a zip file with all the necessary libraries for you. Unzip and copy them to the same directory where the exe file is.

Instructions:  http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm
direct link: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/QT4libs.zip

Thank you

[arximidis]

...

I like the interface and the work is very good.  Kudos to ARXMIDIS for the design and the sharing of code, which I am sure we will use for light weight distributions. 

If I was coding a HTML 5 application I would focus on Firefox and Chrome platforms.

Thank you for the nice words
The frontend is based on html (html5) and of course you get the code too. I will also publish the code for the browser (which is based on webkit) and I will post the schematics and firmware (code) of my homemade controller/interface, which I have build for my custom arcade machine
My priority is to fix the damaged television when I found some time

[Le Chuck]

So far I've been unable to get it going due to a number of dll's not being present.  I went through and downloaded all but then ran into qt issues even after installation of the qt and lazarus stuff so I'm not exactly sure where I'm going wrong with this but can't seem to get it going.  W7-64 fyi.

You don't need to download all the qt libraries separately, especially if you are using windows. I have included a zip file with all the necessary libraries for you. Unzip and copy them to the same directory where the exe file is.

Instructions:  http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm
direct link: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/QT4libs.zip

Thank you

Thanks so much!  Major reading comp fail on my part 

I've been playing around with this and really think it has great bones - I'm excited to see integration of the shortcuts menu as that's what I would like to run rather than emulators.  I want to try this out as a base for the Star Wars Theme that Rockyrocket, MikeBoss, and I have all been working on for a while.  I think the carousel effect is really great but it would take some work to get it over. I love how much control you have over the size of that carousel, it's a really great effect.

I don't mind learning this stuff but just want to ask a few questions before I dig into this:

How difficult would it be to run a .swf or an animated .gif as the background with the carousel on top?  Any chance of layering multiple .swfs with alpha channels? What about using .png with a transparent alpha channel over the top of that for shortcut selection? 

I hope you have an update planned with shortcuts enabled on the carousel - that would really be awesome! 

Basically I want to make your FE look like the video below, only better 

http://forum.arcadecontrols.com/index.php/topic,137291.0.html

[arximidis]

Thanks so much!  Major reading comp fail on my part 

I've been playing around with this and really think it has great bones - I'm excited to see integration of the shortcuts menu as that's what I would like to run rather than emulators.  I want to try this out as a base for the Star Wars Theme that Rockyrocket, MikeBoss, and I have all been working on for a while.  I think the carousel effect is really great but it would take some work to get it over. I love how much control you have over the size of that carousel, it's a really great effect.

I don't mind learning this stuff but just want to ask a few questions before I dig into this:

How difficult would it be to run a .swf or an animated .gif as the background with the carousel on top?  Any chance of layering multiple .swfs with alpha channels? What about using .png with a transparent alpha channel over the top of that for shortcut selection? 

I hope you have an update planned with shortcuts enabled on the carousel - that would really be awesome! 

Basically I want to make your FE look like the video below, only better 
.....

Yes some times it happens

Now to answer your questions:
If you are meaning that you want to directly run a game by clicking (or by selecting) a carousel item (rather than selecting it from the list which appears), I can tell you that I was indeed planning to implement that feature. Why? I was planning to directly run windows games (for example virtua cop), using a homemade light gun. But due to workload and bad luck (my machine's tv broke down) I have delayed the update

As for the background
I am planning to add a feature to choose a picture for background or something that is moving (for example the stars effect)
In the version you have, I have already included secret moving background (clouds). You can enable it if you uncomment the canvas command in main.html. It's html5
Go to line 1066 (Version 2.8.1) and remove the: <!--
Then go to line 1070 and remove the: -->
I have comment it out because it consumes a lot of cpu power (at least the demo code I use. However I am planning to improve the code)

Thank you

[Le Chuck]

Awesome, I'll play around with it and look forward to that update for entering games directly from the carousel!  Sorry to hear you're behind in development but I'll be anxiously awaiting updates when you get the chance!

[zobook]

I got a "missing mingwm10.dll" error when launching. There is a way to get this file (from a secure source) without installing the full "MinGW - Minimalist GNU for Windows" package?

[zobook]

I got a "missing mingwm10.dll" error when launching. There is a way to get this file (from a secure source) without installing the full "MinGW - Minimalist GNU for Windows" package?

I got that file copied from the Inkscape folder, but now there is a QtCore4.dll missig. I have 2 programs with that dll, but in both cases there is a _Z5qFreePv entry point missing from QtCore4.dll

 

[Le Chuck]

Did you install the dependancies linked on 14 March?  That did it for me.

[arximidis]

I got a "missing mingwm10.dll" error when launching. There is a way to get this file (from a secure source) without installing the full "MinGW - Minimalist GNU for Windows" package?

Hello

You don't need to install any external dlls manually in Windows. Just unzip the following zip file to the directory you copied the exe file
direct link: http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/QT4libs.zip

Instructions are here:  http://users.ntua.gr/dpiperid/MyWebPage/Catalog/games/FE_tutor/htmlFEtutorEN.htm


PS.  I have finally fixed the damaged television on the machine. These are the failed components

It's the switching regulator and the transistor of the flyback transformer