Replace three image layout with a single unified image

This new image positions all the images correctly and makes sure it all uses the correct line width even though they are scaled relatively to each other.

Contributes to issue CURA-8609.
This commit is contained in:
Ghostkeeper 2021-10-05 11:44:06 +02:00
parent 6b0e221b73
commit d8dcd0affc
No known key found for this signature in database
GPG key ID: 68F39EA88EEED5FF
5 changed files with 95 additions and 144 deletions

View file

@ -45,81 +45,13 @@ Window
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
wrapMode: Text.WordWrap
width: parent.width - parent.anchors.margins * 2
}
Row
{
/*
This is a row with 3 images, and a dashed line between each of them.
The images have various sizes, scaled to the window size:
- The computer screen and 3D printer have 1/3rd of the window size each.
- The remaining space is 2/3rds filled with the material spool image (so 2/9th in total).
- The remaining remaining space is divided equally over the two dashed lines (so 1/9th in total, or 1/18th per line).
*/
width: parent.width
height: parent.height * 2 / 3
Item
{
width: Math.round(parent.width * 2 / 9)
height: parent.height
Image
{
id: spool_image
source: UM.Theme.getImage("material_spool")
width: parent.width - UM.Theme.getSize("default_margin").width
anchors.bottom: parent.bottom
fillMode: Image.PreserveAspectFit
sourceSize.width: width
}
}
Canvas
{
width: Math.round(parent.width / 18)
height: UM.Theme.getSize("thick_lining").width
onPaint: {
var ctx = getContext("2d");
ctx.setLineDash([2, 2]);
ctx.lineWidth = UM.Theme.getSize("thick_lining").width;
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
}
anchors.bottom: parent.bottom
anchors.bottomMargin: spool_image.paintedHeight / 2 - height / 2 //Align to the vertical center of spool_image's real size.
}
Image
{
source: UM.Theme.getImage("connected_cura")
width: Math.round(parent.width / 3)
anchors.bottom: parent.bottom
fillMode: Image.PreserveAspectFit
sourceSize.width: width
}
Canvas
{
width: Math.round(parent.width / 18)
height: UM.Theme.getSize("thick_lining").width
onPaint: {
var ctx = getContext("2d");
ctx.setLineDash([2, 2]);
ctx.lineWidth = UM.Theme.getSize("thick_lining").width;
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
}
anchors.bottom: parent.bottom
anchors.bottomMargin: spool_image.paintedHeight / 2 - height / 2 //Align to the vertical center of spool_image's real size.
}
Image
{
source: UM.Theme.getImage("3d_printer")
width: Math.round(parent.width / 3)
anchors.bottom: parent.bottom
fillMode: Image.PreserveAspectFit
sourceSize.width: width
}
}
Image
{
source: UM.Theme.getImage("material_ecosystem")
width: parent.width
sourceSize.width: width
}
}
}