Jump to content

  • Announcement

    The HyperSpin 2 beta is here!

    We’re starting the first public testing phase with Platinum Members to keep the scope manageable while we test the current feature set and begin to add more. In the future, we’ll provide a version for basic members as well.  On behalf of the entire HyperSpin team, we look forward to another exciting adventure with our community.

Read Me: Please use the correct SUPPORT forum for reporting issues.

HTML5 based front-end

Krum110487

By Krum110487
in Off Topic

Recommended Posts

Krum110487 Newbie

Krum110487

Posted
Posted

First off, Hello,

I have been working the last couple of days on a side project, I am looking to have the flexibility of hyperspin with the ease of use of html5, this is what I have come up with...

I used C++ with OpenGL and FreeGlut to render the chromium browser (awesomium library) on screen (full screen), I have all the keyboard/mouse functions working great and tested initial js performance it seems to run very fast. I found a fast animation tweening library which runs very well so far. I plan on using SQLite for local data storage, but I will keep them pretty normalized for speed and focus on very few (none if possible) inner-joins. I am looking to replicate hyperspin in many ways (which is why I am posting here).

Pros to this setup:

It is easy to make themes for (still a work in progress)

I can setup javascript functions to call code in C++, right now I have a function which loads 5000 games at once and one that shuts down the application via html button.

C++ obviously makes many things possible and faster, and all the libraries I am using so far are cross-platform so I am sure I can port it.

Native Gamepad support is possible, including xinput, but I have yet to work out the details on this

Networking capabilities, in the future, it may be possible to "host" your front-end locally and have the rom sent over before it is ran, to allow multiple users

3D models are possible for game cases to be rendered on screen

Cons to this setup:

FreeGlut has pretty terrible gamepad support (surprisingly) so I might have to one day port to SDL 2.0

While it may be able to support current flash themes, it doesn't work so well locally (mostly due to flash's security)

Chromium took out the support for h.264/ACC/MP3, meaning videos would have to be converted to VP8/9 or someone builds a version of CEF3 that supports h.264/AAC/MP3 (possible)

On this note, MP4 works great in chrome, but chrome itself fullscreen has a stupid "you are in full screen mode" thing which is VERY annoying

An alternative would be to figure out how to get flash to work locally, because if you can get it to work, it works great for h.264/ACC video

Features I would like to have:

I want to fully support hyperspin file structures and videos

I want built in tools to tweak themes (html tools)

I want to be able to make any complex theme that hyperspin can (lofty goal, I know!)

Built in syncing of game information and videos

and much more!

So far I have a proof of concept done, it isn't much, but I feel I can do most of the things I listed (with time or HELP!)

What do you guys think about this?

dark13 Community Regular

dark13

Posted
Posted

First time i saw webgl capacities I guessed if an html5 frontend could be written but I'm not a coder :P . Are you planning to use webgl too? With webgl we could have 3d object in themes (cartridges, boxes, consoles models) and make good use of these >200€ videocard a lot of people is getting just for demul, pcsx2 and dolphin :P

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted
First time i saw webgl capacities I guessed if an html5 frontend could be written but I'm not a coder :P . Are you planning to use webgl too? With webgl we could have 3d object in themes (cartridges, boxes, consoles models) and make good use of these >200€ videocard a lot of people is getting just for demul, pcsx2 and dolphin :P

While it can use 3d rendering, currently it won't be 3d accelerated, mostly because of the "awesomium" plugin doesn't allow 3d acceleration with off-screen rendering (which is what has to be used for openGL rendering). It is still pretty fast from the tests I try, plenty of speed to render a couple 3d boxes or carts. in the future if it is too slow I can try a win32 (windowed-fullscreen) version see if it renders faster.

but from all the benchmarks I try, it seems plenty fast enough (thousands of moving objects, 80fps)

Edit:

ALSO! Currently I am looking for help with making html/javascript based themes, which have all the placeholders and information to render a game screen, if anyone wants to submit samples that work on chrome, that would be awesome, you can make up function calls that need to go through my browser, I am running through iterations of theme ideas and I would like to see some samples of what people can do! The only requirement is that animations must use http://www.greensock.com/get-started-js/ for animations. I welcome all and any suggestions of how the themes should be ordered.

Guidlines:

Themes only worry about themselves and not the wheel/list

Backgrounds should be wider than the largest supported resolution and at least tall as the tallest resolution

Video guidelines are still up in the air of how I will code them, so just use a html5 video tag with webm or ogv video file

Themes should not "navigate" all pages will be loaded "ajax" style so really there is only 1 master page with the content and wheel settings applied then themes applied to that.

If it works in chrome, it will work in my program (except of course h.264 video)

brolly Newbie

brolly

Posted
Posted

Nice one, I'll be keeping tabs on this. We have already had some discussions about using HTML5 for a frontend, I think it's definitely a good idea and with the amount of good javascript libraries these days it's a technology with a lot of potential to create a good frontend. Even though I think Javascript syntax is a mess :)

Btw are you the same krum from the defunct U_G?

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted
Nice one, I'll be keeping tabs on this. We have already had some discussions about using HTML5 for a frontend, I think it's definitely a good idea and with the amount of good javascript libraries these days it's a technology with a lot of potential to create a good frontend. Even though I think Javascript syntax is a mess :)

Btw are you the same krum from the defunct U_G?

I am indeed!

as of now mine is a "fully functional" browser with the ability to run anything locally, but mostly I need to iron out how the themes should all be done. And possibly making tools to make it easier to create. So if anyone has input on that, I will happily take it, any JS guru's out there, I am ok with it, but by no means a master.

ps. I am almost done with that Mario Crossover, better late than never I suppose :-)

brolly Newbie

brolly

Posted
Posted

You were playing with a fully functional browser idea since a long time, first time we spoke about it was mostly intended to play Flash Games I see it has evolved since then :)

I'm sure many of the artists here can give you a lot of suggestions about what should be done regarding themes, for me as long as you support widescreen formats, more artwork layers and similar animations to HS it's all good.

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted

haha yea, then I was just using a swfobject player in C#, this is on a whole new level, it is basically chrome in openGL with C++ backing it :-)

one day I will get the idea of flash save states completed...IT IS POSSIBLE I JUST KNOW IT!

bleasby Newbie

bleasby

Posted
Posted

Nice work Krum.

I started myself a similar project not a long time ago, but because time limitations I was never able to reach a beta stage.

I had already some preliminary HyperSpin theme support made and working, but I expended much more time envisioning the structure behind the HTML5 based frontend to allow a complete powerful and user customizable experience, capable of present anything that any user could imagine on a frontend. If you want to discuss any ideas just send me a private message.

I definitely think this is the way to go in order to have a completely user defined and customizable frontend experience. And with the potential to use all the power behind HTML5, CSS and JavaScript on any themes.

One question, although. Do you have plans to make it open source?

About the video player limitations, at the time I was using the node-webkit for building the html5 frontend and I had only to replace the file with the video player codecs with one that included the correct codecs (google removed them because copyrights). I don't know if the same is applicable, but it was a very easy change for that case.

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted

I had already some preliminary HyperSpin theme support made and working, but I expended much more time envisioning the structure behind the HTML5 based frontend to allow a complete powerful and user customizable experience, capable of present anything that any user could imagine on a frontend. If you want to discuss any ideas just send me a private message.

Well the good news is that all I have to do now is make the javascript and theme standards I want to use.

I plan on making it so that my frontend will convert the themes automatically and rename the old themes to _old

so far I plan for the themes to work like so:

- Base html is loaded for all pages and NEVER navigated from

- Javascript adds/removes/animates images on the screen

- On theme change it will do the animations needed and load the next theme in

- As for menus these will also be loaded/moved/animated with javascript, the base html for these menu's will be available to change

- So themes will only have a js file and the images, maybe a info file

I also want to suppot non-game things like videos and such as well, I plan on using vlclib to openGL rendering

I definitely think this is the way to go in order to have a completely user defined and customizable frontend experience. And with the potential to use all the power behind HTML5, CSS and JavaScript on any themes.

One question, although. Do you have plans to make it open source?

I think so too! You can do pretty much anything with HTML5 these days!

Yes, I will open the source as soon as I am comfortable with my standard of quality, but I promise that if I ever drop the project, I will upload the complete source.

About the video player limitations, at the time I was using the node-webkit for building the html5 frontend and I had only to replace the file with the video player codecs with one that included the correct codecs (google removed them because copyrights). I don't know if the same is applicable, but it was a very easy change for that case.

Yea, it is a shame they removed it, but I am pretty sure I can get around this limitation using flash, CEF3 is open-source, so it could be built to play mp4 again, you have to rebuild the cef3 with a flag changed and then move the required dll's into the same folder (so I have read) it isn't a priority, BUT if you want to take a whack at it, that would be great!

I know chrome still renders it, so maybe we can cherry pick the files from it, does chrome have a CEF dll? I know it has the mpeg dll so we can use that, but I don't think CEF will use it without a bit of source code changes.

suspendedhatch Newbie

suspendedhatch

Posted
Posted

Sounds awesome. I can't wait to see it, even in a preliminary stage.

If there's anything I can do to contribute let me know. Virtually anything you can envision in Photoshop, I can create in html/css. That has been my primary job responsibility for the past three years.

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted

unfortunately, awesomium is closed source and they modify/contribute to CEF, meaning I can't just replace the dll.

I could migrate to node-webkit, but it is missing a bunch of features I am using currently with awesomium, I would rather use flash to display videos then have to rely on changing everything I have worked on so far.

if you could do me a huge favor (since you have experience building cef and making mp4's work, will you build and send me 2 versions of it (one with mp4/mp3 etc, and one without modification) I have the ffmpegsumo.dll, but if I have those two dll's I will compare the two and see if I can inject the differences into my dll, assuming awesomium didn't touch the code, it may be possible. It is either this or you are welcome to re-write my implementation to use node-webkit or pure-CEF when I release my source code :-D

speaking of what I have worked on, I have some updates!

I modified my program so that I have complete control over the request system, I can intercept any link (http or not) and inject my own file, I am hoping this means I can circumvent the stupid security measures for local flash videos and such, but this also means I can make it so if you were loading an online version of this site, it could use a link that would only work in my program to load local files, but still be a functioning link online (probably because they were not using my browser).

as a side note, I could use this very effectively on a "swf offline spoofer", simply map the web addresses that it requests with the files you have locally, although this is untested...fingers crossed.

This also gives me the power to keep themes inside zips so I can unzip them before the request is made via "asset://zip/path/to/file.zip/image.png" or "asset://zip/path/to/file.zip?image.png", I am going to use this for returning cached items as well

so I can keep all the base and system theme images in memory (or at least the immediate ones) and cache the next 5 games... work in progress, I still have to implement a proper settings module, let alone asynchronous loading.

I have looked into the themes and the ones without swf files seem pretty simple to convert using the tweenmin library, although I haven't tested it yet.

Once I have local flash files working without security issues, zip (or any other compression) support with 7zip library and caching implemented, I will work on support for hypertheme xml conversion and support.

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted
Sounds awesome. I can't wait to see it, even in a preliminary stage.

If there's anything I can do to contribute let me know. Virtually anything you can envision in Photoshop, I can create in html/css. That has been my primary job responsibility for the past three years.

I think I will take you up on that!!

I need to come up with html/css that can achieve the following (as simple as possible)

I have thought up 2 different scenarios

1) docked list, floating (like like hyperspin)

2) docked list, inline (for example, the list is on the left side, no content is under it)

so either the list item is on the left, right, top, or bottom, and it either effects the content area or it doesn't, it would be nice to have this with 2 divs and a wrapper, I have tried a couple ideas, but the more the marrier.

Javascript to change the docking location should look like this:

themeSettings.Games.List.dockRight(var isInline, var autohide);

so, for hyperspin's setup, the user's settings would use:

themeSettings.Games.List.dockRight(false, {hide:fade;hidden-transparency:5%;});

list iteself can contain anything, I just assume that when there is list of some sort, it will be on one of the edges, I know this setup accounts for hyperspin, but I also want to see what type of themes xbmc has to see if I can allow those to work as well.

suspendedhatch Newbie

suspendedhatch

Posted
Posted

The wheel would be a challenge. You'd probably need a jquery library for that. Animating a horizontal or vertical navigation menu is do-able, but it wouldn't repeat like HyperSpin does. html/css is really only good for static sites with minor reactions to input. Animation is more in the script and canvas realms. The marketing company I work for hasn't had much need for animation, just image slideshows.

Anything static you need built, lmk.

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted

way ahead of you on the wheel:

http://jsbin.com/bihepufo/1/edit

I am sure I can make it work, I just need to figure out the stuff, I don't need the wheel done though, I just need good css for containers.

I am trying to decide on fully floated containers or if they are even possible to go inline and why.

Also, I want to stay away from jquery if I can help it, I want to code this as native as possible (at least for the base stuff and default list types) but since it is a browser, technically anyone

could use any library they wished to make a theme. :-)

suspendedhatch Newbie

suspendedhatch

Posted
Posted

If you need something built in clean, perfect html/css, I'm your guy. Mock it up and send it to me. I typically work from Illustrator files and sometimes Photoshop, but depending on what you're doing a simple image may be enough.

I'm not sure what you mean by "containers". For the logos in the wheel? div's? ul li's? You can get any html element to behave like any other, just about. You can take a span tag and add display:block through css, essentially turning it into a div.

For the wheel I would suggest UL / LI's. Get it working just rotating up and down first before you turn it into a wheel.

Polemicist Newbie

Polemicist

Posted
Posted

You have got me interested.

I've seen many years ago a dhtml controlled wheel navigation that accelerated with mouse location. I've also seen some roulette wheel animations in HTML5 as well http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

The fact that you are moving away from proprietary software like Flash that requires licensing I think is a damn good idea. Steering clear of IE is an even better idea. :)

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted

by containers, I simply mean divs to hold the whatever is inserted, that is all. I could just make all menu's absolute and if they want to dock it use javascript. The example I had was rotating, but I was tinkering with it.

my main goal at the moment though is to get a strong baseline that all other themes will use. All themes will use javascript to insert their images and move/animate.

so far I have this idea for the themes:

Base Theme - Layout for all the menu's and such, including lists and ticker bar (bar that is always on top...could have date/time)

Content Theme - Game/System/Movie/Artist/Album specific themes that is ignorant of the base theme

I want the user to be able to choose the type of layout for each type of "View"

- Games on a single system

- Games on multiple systems

- Systems

- Movies

- Music on a single Album

- Albums

etc

I want to have the views be set by me, but allow Base Themes to be able to adjust their content depending on the current view, same goes for the list.

Content themes have width and contentWidth, the content width is how much space they have not including the list on screen, they should also be able to check if the list will fade. With this information the themes can adjust to any type required.

Right now I need people to suggest how to setup the theme system and how to deal with customization/Game

@Polemicist, thanks for that I will have a look :-)

Updates

Fixed the (most) of the keycode's being sent to the browser, still have a couple more

Added javascript based text editor to see/modify page code

Next up is implementing code to extract zip to serve content inside zip upon request

Krum110487 Newbie

Krum110487

Posted
  • Author
Posted
nice you join the race; welcome!

check here for a current overview of other up-pacing FE's (including an HTML5 one):

HTML5 FE:

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

RetroFE: (by fellow member emb known for Don's Tools)

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

Attract-Mode

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

Thanks!

Updates:

Added SQLite

Started designing the database and search results

In the middle of configuring ProtoBuf for fast loading of data and data serialization

All keycodes are returning the correct value now, copy and paste shortcuts are functioning as well

Tested functionality of Gamepad with FreeGlut, it only registers one of the joysticks, I wonder why they programmed it with that limitation?, I will have to move to SDL2.0 later to overcome this.

On the short list of things I need to do soon:

Create a settings system to change the folder where my front-end looks for content, including where the db is located, where each system's roms are located, where each system is located etc...

Update 2:

I have been working on the database and here are the ones I have come up with, these will work for most Games, Movie, Music...etc

I plan on making most of these optional to have hosted locally with the ability to scrape the data in real time optionally via saving a moby games link in the database or a imdb link, or maybe I will make an API so someone could host their own database for anyone to use online, which is a bit faster than scraping.

Title = Original Text for the name, optionally you can use the Romanized version below
Languages = The languages this particular game has (not all versions of the game)
ReleaseDate = When this game was released
Themes = The things in the game, like Cowboys, Wrestling, Platforming...what have you
Genres = Like themes, but more broad, but customization to be specific like FPS, RPG.. instead of just Action, Adventure..
UserRating = The rating you give this game

//Extended General Info
Description = Describes the plot or whatever else
ContentRating = ESRB, PEGI, CERO, MPAA, etc
ContentDescriptors = Why the game gets a specific rating (sex, drugs, etc etc)
SoundMix = The type of sound (Dolby Digital, etc)
prequalToId = This holds the game this game is a prequal to
sequalToId = This holds the game this game is a sequal to
Series = List of id's to different series this game is a part of
AlternateVersionIds = A list of id's pointing to the same game for different regions (assuming you have them)
AlternateTitles = A list of titles this game also goes by
RomanizedTitle =  For languages which use different character sets (popular one is romanji for japan)
totalTimePlayed = How long you have played this game so far
completed = Weather you beat this game or not

Then I have game specific stuff:

systemId = The system this particular game is on
Developers = Companies that developed this game
Publishers = Publishers that paid for this game
MultiplayerModes = Type of modes (Lan Co-op 4-8 Players...etc)
hasSinglePlayer = Most games this will be true, but some games are multiplayer only these days
Perspectives = Which perspectives this games allow (first-person, top-down)
AveragePlaytime = how long on average it takes to beat a game.

Am I missing anything? Any suggestions?

Thanks.

  • 4 weeks later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...