Adding a Ridge Around Merged Cells

Let’s say that you’ve created a region of merged cells.  In this instance, you’ve horizontally merged cell 2 and the cell to its right, and you’ve vertically merged cell 3 and the cell above:

You’ve already put a ridge around cell 4 and you’d like to add a ridge around the merged region as well.  If you add cells 2, 3, and 6 to the collection of cells that should have ridges,

The designer will respond literally and uselessly by adding ridges as if no merging had taken place:

Instead, you’ll undo those instructions and add the ridges “by hand”.  You’ll add instructions to the screen_openings region of the openings_and_additions.txt file to build the ridge using “hridge”, “vridge”, and “aridge1-4” (arc ridges in each of the 4 quadrants) shapes.

Let’s look at the three kinds of ridges. 

A horizontal ridge (“hridge”) runs horizontally and is anchored at its left edge:

You specify its “x” and “y” location, length in “width”, height above the surface of the keyguard in “left slope”, thickness in “right slope”, and radius in “corner radius”.

A vertical ridge (“vridge”) runs vertically and is anchored at it’s bottom edge:

You specify its “x” and “y” location, length in “height”, height above the surface of the keyguard in “left slope”, thickness in “right slope”, and radius in “corner radius”.

There are four “arc ridges”:

They’re named based on the quadrant in which they’re found.  They’re anchored based on lines that pass through the center of their ends:

This will ensure that the arcs line up properly with the horizontal and vertical ridges.

The size of an arc ridge is determined by its radius as shown below:

In order to create a ridge around the merged region total you’ll need 11 “partial ridges”:

Sections 1, 5, and 8, are horizontal ridges.  Sections 3, 7 and 10, are vertical ridges.  Section 2 is an aridge2.  Section 4 is an aridge1.  Sections 6 and 9 are both an aridge4.  And finally, section 11 is an aridge3.

The hardest part of defining the 11 instructions is properly setting the x and y locations for each section.  You can take a “brute force” approach and put a number (in pixel or millimeter units) in the x and y locations.  That will work but you may have to experiment to find just the right values so that all the sections align.  Also, if you change the number of height of a bar, the thickness of the horizontal or vertical rails, or anything else that affects the size of a cell opening, your ridges will need to be adjusted.

You can solve these problems by taking advantage of “variables” when you define your ridge sections.   Variables change value as you make changes to your keyguard design. There are lots of variables available to you in the openings_and_additions.txt file and you can use them for lots of reasons to make your life easier.  The variables you take advantage of to create these manual ridge are:

  • gw = grid width
  • gh = grid height
  • gb = grid bottom
  • gt = grid top
  • hrw = horizontal rail width – specified in Grid Layout
  • vrw  = vertical rail width – specified in Grid Layout
  • cw = cell width
  • ch = cell height
  • ccr = cell corner radius
  • hor = height of ridge – specified in Grid Special Settings
  • tor = thickness of ridge – specified in Grid Special Settings

Let’s look at how to determine the x and y locations along with the length of the horizontal ridge that makes section 2 of the example above:

We’re going to define the x and y locations of the hridge relative to the lower-left corner of the grid region.  This is the grid region of a keyguard (in yellow):

The “grid region” is similar to the “screen region” except that the grid region doesn’t include any upper or lower message/command bars.

Some of the variables we’ll use are only available in millimeters so we’ll set “unit of measure for screen” to “mm”:

We’ll also set “starting corner for screen measurements” to “lower-left” so that the (0,0) location of the grid will be in the lower left corner.

Note that there are lots of equivalent ways to describe a location.  We’ll use one of them but one could easily do it differently and it would still work.  For example, we’ll start our x measurement from the middle of the grid width. That “x” location is gw/2.  If we set that as  the x-location of the  hridge we see this:

That location is in the middle of the cell that we want to add the ridge to, so we’ll subtract half of the width of a cell: gw/2-cw/2.  We’ll adjust the length of the hridge later.

That location will put the start of the ridge here:

However, we have to make room for the aridge3 that will go in the lower-right corner of the cell.  So, we’ll move it to the right the corner radius of the cell (that will also be the radius of the aridge3).  Our final x-location will be gw/2-cw/2+ccr.

Next we’ll move the ridge up so that it sits flush with the cell opening.  Right now it’s sitting at the grid bottom (gb).  Note that a balanced grid has 1/2 the space around the outside of all cells as between cells.  So, the distance between the bottom of the grid and the bottom opening of the cells in the bottom row is 1/2 of the horizontal rail width.  So let’s start by moving the hridge up by hrw/2.  The result looks like this:

The ridge has overshot the cell opening.  That’s because the y-location of an hridge sits in the middle of the left side.  We want this hridge to behave just like any ridge so we’ve set its thickness to “thickness of ridge” (tor) which is set in “Grid Special Settings”.  We can move it down by half of its thickness by subtracting tor/2.  That puts the hridge here:

Next we need to set the “width” of the hridge.  In order to determine that value it may be helpful to look at the grid again but without any merging:

It looks like the “width” of the hridge should be two times the cell width plus the vertical rail width.  However, remember that we want to allow space for the aridge2 on the right end of the hridge just like we did on the left end.  So the “width” of the hridge should be:

cw*2+vrw-ccr*2

That looks like this:

Of course, adding ridges around merged cells would be easier if the cell radius for the grid was 0.

Lastly, and this part is easy, we’ll set the “top slope” and “bottom slope” of every one of these manually added ridges to “hor” (height of ridge) and “tor” (thickness of ridge), respectively.

We’ll set the “corner radius” of every aridge to “ccr” (cell corner radius).

The instructions for each of the eleven ridge sections is included below.

screen_openings=[
// *** the numbers in screen_openings are assumed to be in pixels or millimeters depending on the value of "unit of measure for screen" in "Free-form and Hybrid Keyguard Openings "***
// ID, x, y, width, height, shape, top slope, bottom slope, left slope, right slope, corner radius, other
[ 1, gw/2-cw/2+ccr, gb+(hrw-tor)/2, cw*2+vrw-ccr*2, 0, "hridge", hor, tor, 90, 90, 0, ],
[ 2, gw-(vrw)/2, gb+ hrw/2, 0, 0, "aridge2", hor, tor, 90, 90, ccr, ],
[ 3, gw-(vrw-tor)/2, gb+hrw/2+ccr, 0, ch*2+hrw-ccr*2, "vridge", hor, tor, 90, 90, 0, ],
[ 4, gw-vrw/2, gb+gh/2+ch/2, 0, 0, "aridge1", hor, tor, 90, 90, ccr, ],
[ 5, gw-vrw/2-cw+ccr, gb+(gh+ch+tor)/2, cw-ccr*2, 0, "hridge", hor, tor, 90, 90, 0, ],
[ 6, gw/2+cw/2+vrw, gb+gh/2+ch/2, 0, 0, "aridge4", hor, tor, 90, 90, ccr, ],
[ 7, (gw+cw-tor)/2+vrw, gb+gh/2-ch/2-hrw, 0, ch+hrw-ccr, "vridge", hor, tor, 90, 90, 0, ],
[ 8, gw/2-cw/2+ccr, gb+ch+hrw/2+tor/2, cw-ccr+vrw, 0, "hridge", hor, tor, 90, 90, 0, ],
[ 9, gw/2-cw/2, gb+ hrw/2+ch, 0, 0, "aridge4", hor, tor, 90, 90, ccr, ],
[ 10, (gw-cw-tor)/2, gb+ hrw/2+ccr, 0, ch-ccr*2, "vridge", hor, tor, 90, 90, 0, ],
[ 11, gw/2-cw/2, gb+ hrw/2, 0, 0, "aridge3", hor, tor, 90, 90, ccr, ],
];

We’ll leave the verification of these remaining instructions to the reader :).

So, why go to all this trouble to base these instructions on designer variables?  Why not just use numbers and adjust them as necessary?

The first reason is because you’ll spend a lot of time adjusting before they look right.  The height and width of cell openings aren’t even numbers of millimeters.   So you’ll need to get just as precise when adjusting your numbers.

The second, and more important reason is that you’ll be back at square one as soon as you change the dimensions of the keyguard, case opening, bar sizes, or rail widths.  By using these variables, your manually added ridges will respond appropriately as you make changes in the customizer.

Look at how the hand-added ridges behave in comparison to the automatic ridge added to cell 4 (ridge height and thickness = 2 mm):

Now change the ridge  height to 4 mm:

Change ridge thickness to 5 mm:

Increase horizontal rail width to 10 mm:

Increase cell corner radius to 10 mm:

And finally, add a 20 mm upper message bar and expose it:

At each step the manually added ridges behaved just like the automatically added ridge.