Jump to content
LaunchBox Community Forums
viking

BarTop Theme (WIP)

Recommended Posts

Hello everyone.
For not pollute the xaml-tips-and-tricks topic, I just create a WIP thread for my upcoming theme. Oriented 4:3 for my bartop arcade cabinet it will be inspired by the work of the community.

Here is the layout that I want to achieve. (based on my 1024x768px resolution)

mokup_v2.jpgWhat do you think ? Comments, suggestions, ideas?

The latest @Jason Carr update and the manual PDF helped me a lot. But I'm still missing some piece of code to find:

  • Align to the left all wheel logos.
  • Add transparency on unselect wheel logos.
  • Add transition in the images (here "Device")

If you have ideas, please share here !

 

By the way, my tiny bartop looks like this. (100% home made. From plan to achieve)

bartop_viking.jpg

  • Like 7

Share this post


Link to post
Share on other sites

Very nice theme!  I have a 4:3 screened bartop, and I would be VERY interested in this theme, great work and keep going please.:D

Share this post


Link to post
Share on other sites

Thx ! If it operates well and there is demand, I could easily make a 16:9 version and why not 21:9. (I have a monitor of this size)

Here is a concept update :

mokup_v2.1.jpg

I replaced platform with my own logo Wheel set. (Available here)
Goodbye bottom right logo (already present in the wheel) and replaced by the date.
I added two arrows, why not animated gif, which helps anyone to understand interface navigation.

What do you think ? Better or worse?

  • Like 4

Share this post


Link to post
Share on other sites

I like the arrows. I don't have a bartop but I've been running my older systems on a 17 inch Dell p170S on one of my PC's and I think this would look awesome with this theme.

  • Like 1

Share this post


Link to post
Share on other sites

Thx ! It would be nice !

Progress update:

Capture direct for BigBox :avancement_04-09-2016.jpg

  • Date OK (Thx to @Grila MinimalHD line code !)
  • Animated gif arrow : OK
  • Size and position of the clear wheel logo : almost OK

still missing:

  • Obviously,  the overlay.
  • Left alignment of clear logo.
  • Transparency of not-selected clear logo.

 

By the way, I have a question about transitions. For the hardware image, the most elegant is the vertical slide. And for a succeeded effect, the image must come and out outside screen. But I fail to have this effect. 

I made a grid on the edge of the screen. To center the image, I used margin, thinking that the transition stop on the edge of the grid. And not at the edge of the margin. But no.

It is possible to center the image with the margin. But the transition effect (sliding) continuous to the edge of the grid (here the edge of the screen)?

Here a Visual Studio screen :problem_transition.PNGThanks !!!

Edited by viking

Share this post


Link to post
Share on other sites

OK. After a good code training with my StationEmulation theme, I return to this theme for my bartop.

After some mockup, here is a new live capture from BigBox. I totally rebuild the page structure. But there is some problem I cant fix. I hope @Jason Carr will think about it in next developer session focus on BB theme :x.

  • Wheel: Left Item align.
  • Wheel: Transparency of non-selected item
  • Transition: Continue effect until the frame border. And not until the margin as now. (Especially for silde)

Theme_BarTop_WIP_001.jpg

  • Like 3

Share this post


Link to post
Share on other sites

Looks awesome @viking. Of course I still need to add all of those features. The first two should be relatively easy, but the third isn't likely to be possible due to the way the transition engine works. The only way to fix it, unfortunately, is to restructure the XAML. You basically have to make the item that is transitioning fill the screen in order to get it to slide properly.

Share this post


Link to post
Share on other sites

@Jason Carr Thx ! OK, I understand very well for the transition. I deal with. ^_^ I forgot 2 another request :

  • Transition : The ability to code them directly, without option. And document all of them in the PDF.
  • Transition : The ability to reverse. For example, the vertical slide: up>down, or revers,  down>up.
  • Like 1

Share this post


Link to post
Share on other sites

@martinconroy : I'm not understanding what you want. Sorry. o.O

OK, waiting for the next BigBox function, I worked the GamesViews. Here is where I am:

Note: This all theme is designed for background video !

PLATFORM VIEWTheme_BarTop_WIP_002.jpg

GAMES VIEW #01 :Theme_BarTop_WIP_003.jpg

GAMES VIEW #02 :Theme_BarTop_WIP_004.jpgGAMES VIEW #03 :Theme_BarTop_WIP_005.jpgGAMES VIEW #04 : (same with details)Theme_BarTop_WIP_006.jpgGAMES VIEW #05 :Theme_BarTop_WIP_007.jpg

Edited by viking
  • Like 1

Share this post


Link to post
Share on other sites
44 minutes ago, viking said:

@martinconroy : I'm not understanding what you want. Sorry. o.O

 

Just saying that maybe in the theme designer, if you placed a semi-transparent PNG image over the top of the non-selected wheel items it would give you the faded effect you are looking for?

 

  • Like 1

Share this post


Link to post
Share on other sites

OK. Daily progress.

I work more the underlayer bands effect. What do you think ? Always design for video background. As this is a "bartop" theme, I think to make one vertical view as well. What is the standard vertical ratio for you? 4:3 or 16:9 ?

# PLATFORM VIEW 01 :

To finish, I wait the left item align option + transparency.Theme_BarTop_WIP_008.jpg# PLATFORM VIEW 02 :

The same, but in simple list mode.Theme_BarTop_WIP_009.jpg# GAMES VIEW 01 :

Simple list mode. Cover angle and drop shadow are coded. No image changes need.Theme_BarTop_WIP_010.jpg

# GAMES VIEW 02 :

Same with ClearLogo wheel. I'm not happy with this view. A need a remake... but I have no idea!Theme_BarTop_WIP_011.jpg

# GAMES VIEW 03 :

Horizontal cover flow. To finish, I wait the item down align + transparency code option.Theme_BarTop_WIP_012.jpg

# GAMES VIEW 04 :

Central cover flow + details. Not sure this view to. Any ideas ?Theme_BarTop_WIP_013.jpg

 

That's it for today ! I dont have too much idea to move forward. So do not hesitate! =)

 

  • Like 2

Share this post


Link to post
Share on other sites

Thx @Parcade !

But I've realized that it might be difficult to do some vertical pages. If making a vertical page is "easy", when one selects a game, it is returned to the GameListPage. This is a problem because this page is common to all the Game View. So all the theme must be think in vertical or horizontal. If there is demand, I can do a vertical variant, but I should redo all the pages !

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...