BarTop Theme (WIP)

[viking]

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)

What 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)

[CADScott]

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.

[viking]

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 :

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?

[DOS76]

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.

[JettnJagg]

I would use this on my upgright cabinet it if were widescreen :-)

 

 

[Evil_Orko]

I like it, I will be keeping an eye on this!

[Jason Carr]

Very nice @viking! Looks great! I'll do my best to get you those features next week.

[viking]

Thx ! It would be nice !

Progress update:

Capture direct for BigBox :

• 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 :Thanks !!!

Edited September 5, 2016 by viking

[solidmeister]

It looks gorgeous, i will keep track of your work

[viking]

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 .

• 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)

[Jason Carr]

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.

[viking]

@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.

[martinconroy]

@viking - could you page a semi-transparent PNG over the wheel elements you want to create a faded effect?

[viking]

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

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 VIEW : 

GAMES VIEW #01 :

GAMES VIEW #02 :GAMES VIEW #03 :GAMES VIEW #04 : (same with details)GAMES VIEW #05 :

Edited September 23, 2016 by viking

[martinconroy]

44 minutes ago, viking said:

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

 

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?

 

[viking]

Ah yes ! Not a bad idea !!! I think about it =)

[viking]

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.# PLATFORM VIEW 02 :

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

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

# GAMES VIEW 02 :

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

# GAMES VIEW 03 :

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

# GAMES VIEW 04 :

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

 

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

 

[Jason Carr]

Looking incredible @viking.

[Parcade]

It looks great !

With bartops, 4:3 is the most common but when it's vertical i would say 16:9

[viking]

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 !