Latitude: xx.xxxx Longitude: ±yy.yyyy Altitude: xxm
seagull

AI Development Page

Click me

Current Data

Below is a two column flex box (style: "ow-twoCol") with each row forced to be equal height.  This can be changed by adding the class ow-flex-top or ow-flex-center or ow-flex-bottom.  Children have to be a "div" element.

You do need to add a margin to the bottom of one column panels.

Card title

Aside

This is a ow-card. It adds padding and a box shadow but no colour (it uses the colour of the page). Colour can be added using 'class="ow-theme-aaaX"', where 'aaa' is replaced with 'add' or 'sub' followed by a number 1 - 5.

The first three card use a style 'ow-titleBar' which allows more than one element to appear on the line. They will spread evenly across the available space and are set to align items on their baseline.

Card Gradient

Paragraph

button

This card is coloured using a gradient (class='ow-cardGradient'). This always uses the theme colour sub5 for the top changing to the theme colour add3 at the bottom. You may need to manually add the required theme colour for any text placed in the card.

As this is a gradient using screen height units, the dark section at the top will be smaller on shorter screens.

Title Bars

Title bars can be used anywhere on the page. As stated, by default content is aligned on the baseline. You can modify this by adding the classes mentioned in panel 1 above.

Title Bars don't wrap so if there is too much in them it will disappear off the right edge of the bar.  This can be modified by adding the style flex-flow: row wrap to the div.

Panel Sizes & Alignment

Panels can be set to one of 6 sizes: 1 to 6 columns. These will display the indicated number of columns on a large screen but automatically resize down to a minimum on smaller devices. If an odd number of cards or containers are used, these will center at the same size as the other panels in the set as can be seen below.

Basic Containers

Containers have no box shadow but they do have the same padding as cards. They can be coloured using a theme or gradient and can contain title bars as shown below.

Left aligned

Centered

Right aligned

Three columns panel

h4 title

Colour: ow-theme-add4

This container also uses an animation: 'ow-animate-drop' which is also used for the menues. Animations should only be used sparingly.

h4 title

Colour: ow-theme-add3

This container uses the animation: 'ow-animate-fadeIn'. Animations can be used on any element.

h4 title

Colour: ow-theme-add2

h4 title

Colour: ow-theme-add1

h4 title

Colour: ow-theme

h4 title

Colour: ow-theme-sub1

h4 title

Colour: ow-theme-sub2

Four Column panels

h5 Title
Basic LED:
h5 title
Small basic LED:
Basic round LED:
Small round LED:
Brick LED:
Lozenge LED:
Oval LED:

Theme: ow-theme-sub1

Theme: ow-theme-sub3

Theme: ow-theme-sub4

Theme: ow-theme-sub5

Five column panels

One

You can click this panel to show the modal popup.

Two

This card have no colour so use the page background colour.

Three

Four

Five

Six

Six column panels

ow-theme-add2
 
ow-theme-add2
ow-theme-add2
 
 
 
ow-theme-add2
ow-theme-add2
ow-theme-add2

Gauge Units

Temperature:
Rainfall
Pressure
 
Wind Speed
 
Cloud Base

Powered by Cumulus MX