Coffee machine demo

[pingpongcat]

Hello everyone. I'm presenting a first sketch of my coffee machine demwhich I proposed to Olivier.

Its primary goal is to look cool :) Im aware it's quite unlikely that this would be realistic approach in real maschine but to hell with it! i'm going for a wow effect here :)

Please tell me if it would be too much to ask to implement circular dial

dial

For the coffee foam level control, and a blurr effect

blur

for its representation inside a cup ?

[tronical]

Wow, this looks really nice! Thank you! I agree, the wow effect is more relevant in this context than how realistic a physical machine would be :)

You're right that a kind of dial is missing. I'm not sure if a generic dial would do the trick here given the need to give it a custom look for this demo. But a dial is conceptually needed here, so the question is: How could it be done?

The area the dial's knob can be moved along is probably best represented using one elliptical arc, rendered using a Path element and the same path could also be used for a PathLayout perhaps, on which the knob could be placed. The Knob would probably also be a Path with MoveTo, LineTo, etc. sub-elements that would use property bindings to dynamically adjust their position, depending on the offset on the path.

There are some bugs with the PathLayout for this to work, I'll look into that this week.

Another approach might be to do the math for the half circle by "hand" in property bindings using sin() and cos().

The blur effect is a bit trickier to do, our renderers don't support that out of the box right now. It is a missing feature though that we'd like the add. In the meantime I think for this demo I'd rather make that effect "by hand" using a pre-rendered image, given that it's static around/underneath the lens. It's not static underneath the knob of the dial, so that would be missing for now :-/. We need a rotate property for that, which is doable though.

What do you have in mind regarding animations for this, btw? How did you render this mockup?

Would you be interested in trying to implement this piece by piece in .60? Or would you like us to give it a try?

Either way we need to provide a few building blocks - as you've also noticed. I hope that we can get around to doing that soon. My goal would be to provide some kind of dial element that could either become the basis for this demo or be an inspiration at least.

Thanks again for your initiative!

[tronical]

Hi @neurotok !

I've worked a bit more towards this, in particular the dial. I've pushed some underlying primitives into the master branch to allow for implementing a dial and with the help from Oliver I've begin prototyping a dial. I've uploaded the .60 file to a gist at https://gist.github.com/tronical/ab96ff0230159cdc037c4449f7db426c and here's a small clip of how it looks:

coffee_dial.mp4

This is clearly not the same as your design, but it's a starting point. Would it be possible for you to describe your design a little closer in terms of which colors you chose for the gradients, the lens, the handle, etc. ? Do you have individual assets for the elements?

I wonder though if in the end the dial is best represented using a (rotated) image for the knob of the dial.

[pingpongcat]

Wow! that's realy cool :) yes Simon that was exactly what I had in mind. I just send this project using figma on info@sixtyfps.io. I can send one directly to you. I will try to continue working on this project in code during the weekend.

[tronical]

Awesome timing - a Figma importer is working in progress :)

Could you send an invite to simon.hausmann@sixtyfps.io please? Thanks :)

[pingpongcat]

Invitation send. I never saw any useful importer to be honest ;) the Qt's one is garbage, it's always was better to write qml by hand. As the coffee design goes, I also had an idea to move this circles that which symbolize coffee and milk left and right respectively by adjusting sliders. But then the blur effect would have to be generated dynamically.

[ogoffart]

Right, our figma importer does not work at all with this design yet, because we have too much unsupported features.

[ogoffart]

I think the way to implement that is to pre-render the backrgound which would include all static elements including the blur and fixed shadow. Then put the dial component on top of it.
Everything else seems to be either an image or a text that should be easy to place over the background.
The slider on the side can be done the same way we have a slider widget already.

A question is what should happen when pressing the different buttons?