Jump to content
LaunchBox Community Forums

BarTop Theme (WIP)


viking

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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 3 weeks later...

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
Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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 !

Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
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...