Field Engine – Tutorial – Basic Hex Grid with HTML

October 27, 2023 at 7:37 PM PST
This post has no media.
Profile picture
Franklin Powers

On occassion, we need to display information in hex grids. With Field Engine, this is a relatively painless task.

We need to include the Field Engine files:
<link href="FieldEngine.css" rel="stylesheet" />
<link href="FieldEngine-Defaults.css" rel="stylesheet" />
<script src="fe-browser.js"></script>

Then we need to specify the CSS for the hex grid, we're going to make our borders black and our hexes white:
.field-hex .field_view_inner {
background-color: black;
}
.field-hex .field_location {
background-color: white;
color: black;
}

Then we specify the hex grid with a table and the class field-hex, like so:
<table class="field-hex" columns="3" rows="3" borderWidth="1px" borderColor="black">
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
</table>

And like magic, we have a hex grid.

Any thoughts on Franklin's post?

To comment or reply, you need an Ortingo account.

Sign in or sign up

Here's what Ortingoers think of Franklin's post.

There are no comments on this post.