In the beginning, the module layout language was built on top of json. It was ugly and horrific, but it got us up-and-running. Eventually, I grew adequately tired of the unlovable syntax and developed Module Layout v2. It is an entirely custom layout language which includes our own tokenizer, parser and renderer. It is all still implemented with UIKit.
The characteristics of the new Module Layout v2 far better lend themselves to creating a visual style that is consistent across different devices and screen sizes. To accomplish this, we rely heavily on sizing and positioning based on a percentage of the module size, including font sizes.
The new Module Layout v2 language is used for Streamie’s built-in Clock and Weather modules. You can create your own layout for either of these modules, replacing the default layout for an entirely custom appearance.
Custom modules are available for you to try out at: discover.streamieapp.com.
A pound character (#) is used at the start of a line to denote a comment.
# This is a comment and will not be parsed or rendered.
You can write your module layout code and host the file yourself, or you can embed your custom layout directly within the module, which you can edit within Streamie.
The document object should be specified once per module. It includes a native width, height. The specific size is not used to render the module, but rather the corresponding aspect ratio.
document {
width: 1920pt;
height: 1080pt;
}
The container object is the basis for all of the layout that occurs. Each container has three vital elements: (1) a number of properties for affecting its appearance, (2) content, (3) sub-containers. Here are all of the supported elements of a container:
container someName {
width: 50%;
height: 20%;
position: 10% 10%;
margin: 0% 0% 0% 0%;
content: text("Hello, World!");
content: image("https://url-for-image.jpg");
content: movie("https://url-for-movie.mp4"); // <-- not supported yet
text-size: 5% height; // percent of module view size
text-align: left | center | right;
text-wrap: true;
text-inset: 5% 5% 5% 5%; // [top, right, bottom, left] percent of module view size
text-color: black;
text-mono: true;
image-mode: fill | aspect-fit | aspect-fill
border-width: 8pt; // "5%;" (of module width) or "8pt;"
border-color: white 0.5;
border-radius: 8pt; // "5%;" (of module width) or "8pt;"
hidden: true;
background-color: blue;
container subContainerOne {
# properties here
}
container subContainerTwo {
# properties here
}
}
Coming soon.
Here’s a complete example of a simple module that grabs a hurricane image map from NOAA and displays it. You’ll notice that the module size matches the image, so that when the module is rendered by Streamie, there are no black bars.
#
# Document
#
document hurricanes {
width: 900pt;
height: 665pt;
}
#
# Background Image
#
container image {
margin: 0% 0% 0% 0%;
image-mode: aspect-fill;
content: image("https://www.nhc.noaa.gov/xgtwo/two_atl_7d0.png");
}
Created: 3 weeks ago
Updated: 3 weeks ago
Author: Curtis Jones
Streamie provides a best-in-class user experience on your iPhone, iPad, Apple TV and Apple Silicon Mac, with an intuitive user interface that makes it simple to discover, stream, record, monitor and share your HomeKit, Google Nest, Ubiquiti UniFi Protect and ONVIF-compatible IP and RTSP cameras. Streamie keeps you informed with motion event notifications and it works with most cameras using its advanced audio and video codec support. You can watch your cameras from anywhere, record 24/7 to your private NAS, remotely manage multiple locations, device permissions and seamlessly synchronize settings across your devices; configure Hubitat smart home automations, live stream to YouTube and rely on the in-app technical support system when you need help -- and you can also reach us by phone. Download Streamie today for all of your CCTV needs.