PS3 HTML Frontend Idea with simple wMM game browser example included

DeViL303

DeViL303

Developer
PSX-Place Supporter
I was messing around and made this HTML just to show what's possible with the PS3 browser, Maybe someone finds it useful.

Example version hosted here with a fake list of games as a demo. This host is kinda slow to load images, on the local version its pretty much instant so I recommend trying that if you have the cover pack and webman mod. (See attached html, put it somewhere on HDD, access it with a http://0/dev_hdd0/ url in web browser)


Not tested with hundreds of games, so idk how it will work out there. It's probably got a load of bugs too, so.. enjoy! Maybe someone wants to expand on it.

Demo Version: http://psho.me/UI/

Note: Only works on PS3 web browser, not PC due to some tricks used.

upload_2024-6-6_18-44-30.png


upload_2024-6-6_18-44-40.png


upload_2024-6-6_18-44-51.png



Usage:
  • Use D-Pad up/Down to move between games and categories row
  • Use D-Pad left/right to change game or category depending which row is active.
  • When on game row, press D-Pad Up again to toggle a simple debug log of image paths and actions
  • Press X on a game to send mount command to wMM. (local version only)
  • Requires webman mod installed and running
  • Requires cover pack installed.

Even though the PS3 web browser is not great its actually not bad for something like this and might work well for some other simpler projects in theory where you only need to do a few things, like choose between a few options.

All they would need is a webserver component (or wMM) to host the GUI HTML and then a plugin backend.

Advantages:
  • Great XMB integration compared to normal PS3 apps.
  • Time saver, No boot time, No exit time etc, less time looking at black screens.
  • No XMB reloads needed to see updates, just hit refresh for instant updates, or have it do that automatically when needed.
  • It is possible to make stuff that looks half decent, especially with transparencies and the wave behind.
  • Convenient to be able to offload some functions to java in the HTML like in my example.
  • Or just have complete HTML generated by backend if you prefer/need that.
  • Its HTML, Much more open for others to create, Mod and submit themes/frontends for apps, no special tools needed.
  • Data can be installed with a LINK.XML pkg so its still an all in one pkg*

Downsides:
  • Plenty of those too. Limited use cases.

*Would need slight XMBML change to show certain official title ID ranges in TV category, and others in Game.

I wonder could xai plugin be made so it can work from browser calls somehow as well. Would be kinda cool to give some CFW settings options a proper GUI somehow too.
 

Attachments

Last edited:
Simple debug logs built in are kinda cool, just so you can see what icons its reading, what module action each item will use, and if something doesn't load properly it might tell you why.

Untitled.jpg
 
WOW It looks outstanding!! Maybe you could adjust your code to use /dev_hdd0/xmlhost/game_plugin/gamelist.js

It generates the array variable slides with this structure:

slides = [
{img:"cover path 1", width:280, height:280, desc:"game title 1", url:"game path 1"},
{img:"cover path 2", width:280, height:280, desc:"game title 2", url:"game path 2"},
]

It's used by the Coverflow GUI accessed via /games.ps3 or the Coverflow button in the web GUI.
Unlike your GUI, the coverflow was designed for PC, smartphones and tablets.

EDIT:
Ah the local version uses it. Nice!! :encouragement:
 
Last edited:
@DeViL303 I have added your Coverflow GUI to webMAN MOD.

Update to latest build using the online updater. The new GUI can be accessed with the web command 0/games.ps3
or use the Coverflow button that is available also in PS3 webGUI. Previously it was limited to PC.

BTW I have made these 4 small changes:
- Now the PS3 browser window is maximized (in normal size the GUI is buggy)
- PS3 now is the default category
- Changed the title to "webMAN MOD - PS3 Coverflow"
- Replaced spaces with tab in the source code to make the code more compact
 

Attachments

Last edited:
aldostools said:
WOW It looks outstanding!! Maybe you could adjust your code to use /dev_hdd0/xmlhost/game_plugin/gamelist.js

It generates the array variable slides with this structure:

slides = [
{img:"cover path 1", width:280, height:280, desc:"game title 1", url:"game path 1"},
{img:"cover path 2", width:280, height:280, desc:"game title 2", url:"game path 2"},
]

It's used by the Coverflow GUI accessed via /games.ps3 or the Coverflow button in the web GUI.
Unlike your GUI, the coverflow was designed for PC, smartphones and tablets.

EDIT:
Ah the local version uses it. Nice!! :encouragement:
Click to expand...
Oh that's cool. I didn't see that. It just uses mygames.xml currently.

aldostools said:
@DeViL303 I have added your Coverflow GUI to webMAN MOD.

Update to latest build using the online updater. The new GUI can be accessed with the web command 0/games.ps3
or use the Coverflow button that is available also in PS3 webGUI. Previously it was limited to PC.

BTW I have made these 4 small changes:
- Now the PS3 browser window is maximized (in normal size the GUI is buggy)
- PS3 now is the default category
- Changed the title to "webMAN MOD - PS3 Coverflow"
- Replaced spaces with tab in the source code to make the code more compact
Click to expand...
Awesome. I like the changes. I don't know if I'll have much time to develop it further. I was actually working on something for Playstation Home when I started this but then got side tracked. :)

Maybe you or someone else will take it further, IMO It really needs to have some indicator of which carousel is active like maybe a thin border that moves up and down between main game image and main category icon. Also initially I had wanted to use these icons for the categories:

upload_2024-6-7_10-2-23.png


but for some reason I was getting a lot of render glitches with those that I dont really understand, when I switched to the disc icons they seemed more stable so I left them in.
 
Can the layout be tweaked to support the other display area options? I mean, the layout is bugged on display areas other than Full Pixel.

Standard:
T3EwX4e.png

-1:
qOlgSCf.png


-2:
5hVaCLU.png




Edit: on full pixel, there are minor bugs too

Sometimes the thunder icon is on the right and when changing the categories it is centered
ojSd2TD.png


zssferN.png


Also, I think the second label (I believe it's the icon file name) should include the file extension to better distinguish what it is. Otherwise, it looks like a duplicated title name label and for some reason my game doesn't show up as it should.

lblP7Sf.png
 
Last edited:
Not sure. I think some of those issues could be due to you using different higher resolution icons maybe? It was only tested with standard wMM icons.

But yeah it does have bugs, its really just thrown together yesterday so people can see it is possible.
 
DeViL303 said:
Not sure. I think some of those issues could be due to you using different higher resolution icons maybe? It was only tested with standard wMM icons.
Click to expand...

i forgot that my icons are modded but with same resolution, i will try with the standard ones

@DeViL303 can you add the rom category too?
 
Chat GPT 4o is not bad at working on htmls like this when you tell it it needs to work on 2006 web browser. :)


Categories can be added fairly easily here, needs an entry here for icon:

upload_2024-6-7_10-48-32.png


And another entry here for xml segment name:

upload_2024-6-7_10-49-52.png


I might spend some more time on it, but hopefully someone who really knows html does it, I'm just cheating with Chat GPT really.

BTW did you know that Evilnats CFW with debug cobra now outputs web browser debug info to socat too:

upload_2024-6-7_10-52-3.png
 
DeViL303 said:
Chat GPT 4o is not bad at working on htmls like this when you tell it it needs to work on 2006 web browser. :)


Categories can be added fairly easily here, needs an entry here for icon:

View attachment 43297

And another entry here for xml segment name:

View attachment 43298

I might spend some more time on it, but hopefully someone who really knows html does it, I'm just cheating with Chat GPT really.

BTW did you know that Evilnats CFW with debug cobra now outputs web browser debug info to socat too:

View attachment 43299
Click to expand...


It's awesome as it is. Thanks for your work. I may play with it a bit soon as I'm just busy with other stuff.

Yep, I saw the debug output improvements, but it's a shame that I never played with SOCAT. Now that I have a new laptop, I should play with it too.
 
LuanTeles said:
Also, I think the second label (I believe it's the icon file name) should include the file extension to better distinguish what it is. Otherwise, it looks like a duplicated title name label and for some reason my game doesn't show up as it should.
Click to expand...
That is actually meant to be the title ID extracted from the icon filename, but it can be switched to pull the Title ID from the info field too. I will take a look later.

It does have bugs with low amounts of items too currently. If only 1 item it will show in right hand side slot. Needs work tbh.

I will see what I can do too when I get time.
 

Attachments

You must log in or register to reply here.

Similar threads

Back
Top