Field Engine – Tutorial – Basic Hex Grid with HTML

October 28, 2023 at 2:37 AM UTC

This post has no media.

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.

Check out these similar posts and Ortingos?

from sdtk import com_sdtk_api_OrtingoAPI


def printer(data, reader):
    print(reader.toArrayOfNativeMaps(None))

com_sdtk_api_OrtingoAPI.postsAPI().retrieveData({"owner": "60CQ59FN46SVQFXJ"}, printer)

from sdtk import com_sdtk_api_OrtingoAPI


def printer(data, reader):
    print(reader.filterColumnsOnly(["title"]).toArrayOfNativeMaps(None))

com_sdtk_api_OrtingoAPI.postsAPI().retrieveData({"owner": "60CQ59FN46SVQFXJ"}, printer)

from sdtk import com_sdtk_api_OrtingoAPI

def printerUrls(data, reader):
    print(reader.filterColumnsOnly(["url"]).toArrayOfNativeMaps(None))

com_sdtk_api_OrtingoAPI.suggestionsAPI().retrieveData({"query": "data"}, printerUrls)

from sdtk import com_sdtk_api_OrtingoAPI

def printerComments(data, reader):
    print(reader.filterColumnsOnly(["commentDate", "post"]).toArrayOfNativeMaps(None))

com_sdtk_api_OrtingoAPI.commentsAPI().retrieveData({"owner": "60CQ59FN46SVQFXJ", "id": "test"}, printerComments)

Ortingo is a platform that makes publishing easier and information more accessible. Publish from a wide spectrum of various topics and connect with your audience with new ways of writing articles. Be part of a wealth of new information, through Ortingo.

Ready to write the right way?

Made with ❤️ + 💻 + ☕️ in Silicon Valley

© 2024 Ortingo.com

Report Abuse

Privacy Policy

User Agreement

API (Coming Soon)