App-RPi-EnvUI
view release on metacpan or search on metacpan
public/css/envui.css view on Meta::CPAN
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.graph {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
}
.button {
width: 200px;
}
public/css/flipswitch.css view on Meta::CPAN
* http://jquery.org/license
*
*/
/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
font-size: 100%;
}
/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-btn-corner-all deprecated in 1.4 */
.ui-corner-all {
-webkit-border-radius: .3125em /*{global-radii-blocks}*/;
border-radius: .3125em /*{global-radii-blocks}*/;
}
public/css/flipswitch.css view on Meta::CPAN
/* Bar: Toolbars, dividers, slider track */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
background-color: #e9e9e9 /*{a-bar-background-color}*/;
border-color: #ddd /*{a-bar-border}*/;
color: #333 /*{a-bar-color}*/;
font-weight: bold;
}
/* Button up */
.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
html body .ui-group-theme-a .ui-btn,
html head + body .ui-btn.ui-btn-a,
/* Button visited */
.ui-page-theme-a .ui-btn:visited,
public/css/flipswitch.struct.css view on Meta::CPAN
width: 12.5em;
filter: Alpha(Opacity=88);
opacity: .88;
box-shadow: 0 1px 1px -1px #fff;
height: auto;
margin-left: -6.875em;
margin-top: -2.6875em;
padding: .625em;
}
.ui-loader-default h1 {
font-size: 0;
width: 0;
height: 0;
overflow: hidden;
}
.ui-loader-verbose h1 {
font-size: 1em;
margin: 0;
text-align: center;
}
.ui-loader .ui-icon-loading {
background-color: #000;
display: block;
margin: 0;
width: 2.75em;
height: 2.75em;
padding: .0625em;
public/css/flipswitch.struct.css view on Meta::CPAN
clear: both;
}
.ui-bar h1,
.ui-bar h2,
.ui-bar h3,
.ui-bar h4,
.ui-bar h5,
.ui-bar h6 {
margin: 0;
padding: 0;
font-size: 1em;
display: inline-block;
}
.ui-header,
.ui-footer {
border-width: 1px 0;
border-style: solid;
position: relative;
}
.ui-header:empty,
.ui-footer:empty {
min-height: 2.6875em;
}
.ui-header .ui-title,
.ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}
public/css/flipswitch.struct.css view on Meta::CPAN
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
/* Buttons and icons */
.ui-btn {
font-size: 16px;
margin: .5em 0;
padding: .7em 1em;
display: block;
position: relative;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
public/css/flipswitch.struct.css view on Meta::CPAN
.ui-btn-icon-notext,
.ui-header button.ui-btn.ui-btn-icon-notext,
.ui-footer button.ui-btn.ui-btn-icon-notext {
padding: 0;
width: 1.75em;
height: 1.75em;
text-indent: -9999px;
white-space: nowrap !important;
}
.ui-mini {
font-size: 12.5px;
}
.ui-mini .ui-btn {
font-size: inherit;
}
/* Make buttons in toolbars default to mini and inline. */
.ui-header .ui-btn,
.ui-footer .ui-btn {
font-size: 12.5px;
display: inline-block;
vertical-align: middle;
}
.ui-header .ui-controlgroup .ui-btn-icon-notext,
.ui-footer .ui-controlgroup .ui-btn-icon-notext {
font-size: 12.5px;
}
/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right {
font-size: 12.5px;
}
.ui-mini.ui-btn-icon-notext,
.ui-mini .ui-btn-icon-notext,
.ui-header .ui-btn-icon-notext,
.ui-footer .ui-btn-icon-notext {
font-size: 16px;
padding: 0;
}
.ui-btn-inline {
display: inline-block;
vertical-align: middle;
margin-right: .625em;
}
.ui-btn-icon-left {
padding-left: 2.5em;
}
public/js/flot.js view on Meta::CPAN
// Create the text layer container, if it doesn't exist
if (this.textContainer == null) {
this.textContainer = $("<div class='flot-text'></div>")
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
'font-size': "smaller",
color: "#545454"
})
.insertAfter(this.element);
}
layer = this.text[classes] = $("<div></div>")
.addClass(classes)
.css({
position: "absolute",
top: 0,
public/js/flot.js view on Meta::CPAN
// The idea is that that the width, height, and general 'identity' of the
// text is constant no matter where it is placed; the placements are a
// secondary property.
//
// Canvas maintains a cache of recently-used text info objects; getTextInfo
// either returns the cached element or creates a new entry.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {string} text Text string to retrieve info for.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// Angle is currently unused, it will be implemented in the future.
// @param {number=} width Maximum width of the text before it wraps.
// @return {object} a text info object.
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
var textStyle, layerCache, styleCache, info;
// Cast the value to a string, in case we were given a number or such
text = "" + text;
// If the font is a font-spec object, generate a CSS font definition
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
} else {
textStyle = font;
}
// Retrieve (or create) the cache for the text's layer and styles
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
public/js/flot.js view on Meta::CPAN
if (info == null) {
var element = $("<div></div>").html(text)
.css({
position: "absolute",
'max-width': width,
top: -9999
})
.appendTo(this.getTextLayer(layer));
if (typeof font === "object") {
element.css({
font: textStyle,
color: font.color
});
} else if (typeof font === "string") {
element.addClass(font);
}
info = styleCache[text] = {
width: element.outerWidth(true),
height: element.outerHeight(true),
element: element,
positions: []
};
element.detach();
public/js/flot.js view on Meta::CPAN
// Adds a text string to the canvas text overlay.
//
// The text isn't drawn immediately; it is marked as rendering, which will
// result in its addition to the canvas on the next render pass.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number} x X coordinate at which to draw the text.
// @param {number} y Y coordinate at which to draw the text.
// @param {string} text Text string to draw.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which to rotate the text, in degrees.
// Angle is currently unused, it will be implemented in the future.
// @param {number=} width Maximum width of the text before it wraps.
// @param {string=} halign Horizontal alignment of the text; either "left",
// "center" or "right".
// @param {string=} valign Vertical alignment of the text; either "top",
// "middle" or "bottom".
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions;
// Tweak the div's position to match the text's alignment
if (halign == "center") {
x -= info.width / 2;
} else if (halign == "right") {
x -= info.width;
}
public/js/flot.js view on Meta::CPAN
// inactive, which will result in its removal on the next render pass.
// This avoids the performance penalty for 'clear and redraw' behavior,
// where we potentially get rid of all text on a layer, but will likely
// add back most or all of it later, as when redrawing axes, for example.
//
// @param {string} layer A string of space-separated CSS classes uniquely
// identifying the layer containing this text.
// @param {number=} x X coordinate of the text.
// @param {number=} y Y coordinate of the text.
// @param {string=} text Text string to remove.
// @param {(string|object)=} font Either a string of space-separated CSS
// classes or a font-spec object, defining the text's font and style.
// @param {number=} angle Angle at which the text is rotated, in degrees.
// Angle is currently unused, it will be implemented in the future.
Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
if (text == null) {
var layerCache = this._textCache[layer];
if (layerCache != null) {
for (var styleKey in layerCache) {
if (hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey];
for (var key in styleCache) {
if (hasOwnProperty.call(styleCache, key)) {
var positions = styleCache[key].positions;
for (var i = 0, position; position = positions[i]; i++) {
position.active = false;
}
}
}
}
}
}
} else {
var positions = this.getTextInfo(layer, text, font, angle).positions;
for (var i = 0, position; position = positions[i]; i++) {
if (position.x == x && position.y == y) {
position.active = false;
}
}
}
};
///////////////////////////////////////////////////////////////////////////
// The top-level container for the entire plot.
public/js/flot.js view on Meta::CPAN
position: "ne", // position of default legend container within plot
margin: 5, // distance from grid edge to default legend container within plot
backgroundColor: null, // null means auto-detect
backgroundOpacity: 0.85, // set to 0 to avoid background
sorted: null // default to no legend sorting
},
xaxis: {
show: null, // null = auto-detect, true = always, false = never
position: "bottom", // or "top"
mode: null, // null or "time"
font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
color: null, // base color, labels, ticks
tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
transform: null, // null or f: number -> number to transform axis
inverseTransform: null, // if transform is set, this should be the inverse function
min: null, // min. value to show, null means set automatically
max: null, // max. value to show, null means set automatically
autoscaleMargin: null, // margin in % to add if auto-setting min/max
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
tickFormatter: null, // fn: number -> string
labelWidth: null, // size of tick labels in pixels
public/js/flot.js view on Meta::CPAN
options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
if (options.grid.borderColor == null)
options.grid.borderColor = options.grid.color;
if (options.grid.tickColor == null)
options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString();
// Fill in defaults for axis options, including any unspecified
// font-spec fields, if a font-spec was provided.
// If no x/y axis options were provided, create one of each anyway,
// since the rest of the code assumes that they exist.
var i, axisOptions, axisCount,
fontSize = placeholder.css("font-size"),
fontSizeDefault = fontSize ? +fontSize.replace("px", "") : 13,
fontDefaults = {
style: placeholder.css("font-style"),
size: Math.round(0.8 * fontSizeDefault),
variant: placeholder.css("font-variant"),
weight: placeholder.css("font-weight"),
family: placeholder.css("font-family")
};
axisCount = options.xaxes.length || 1;
for (i = 0; i < axisCount; ++i) {
axisOptions = options.xaxes[i];
if (axisOptions && !axisOptions.tickColor) {
axisOptions.tickColor = axisOptions.color;
}
axisOptions = $.extend(true, {}, options.xaxis, axisOptions);
options.xaxes[i] = axisOptions;
if (axisOptions.font) {
axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
if (!axisOptions.font.color) {
axisOptions.font.color = axisOptions.color;
}
if (!axisOptions.font.lineHeight) {
axisOptions.font.lineHeight = Math.round(axisOptions.font.size * 1.15);
}
}
}
axisCount = options.yaxes.length || 1;
for (i = 0; i < axisCount; ++i) {
axisOptions = options.yaxes[i];
if (axisOptions && !axisOptions.tickColor) {
axisOptions.tickColor = axisOptions.color;
}
axisOptions = $.extend(true, {}, options.yaxis, axisOptions);
options.yaxes[i] = axisOptions;
if (axisOptions.font) {
axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
if (!axisOptions.font.color) {
axisOptions.font.color = axisOptions.color;
}
if (!axisOptions.font.lineHeight) {
axisOptions.font.lineHeight = Math.round(axisOptions.font.size * 1.15);
}
}
}
// backwards compatibility, to be removed in future
if (options.xaxis.noTicks && options.xaxis.ticks == null)
options.xaxis.ticks = options.xaxis.noTicks;
if (options.yaxis.noTicks && options.yaxis.ticks == null)
options.yaxis.ticks = options.yaxis.noTicks;
if (options.x2axis) {
public/js/flot.js view on Meta::CPAN
function measureTickLabels(axis) {
var opts = axis.options,
ticks = axis.ticks || [],
labelWidth = opts.labelWidth || 0,
labelHeight = opts.labelHeight || 0,
maxWidth = labelWidth || (axis.direction == "x" ? Math.floor(surface.width / (ticks.length || 1)) : null),
legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
font = opts.font || "flot-tick-label tickLabel";
for (var i = 0; i < ticks.length; ++i) {
var t = ticks[i];
if (!t.label)
continue;
var info = surface.getTextInfo(layer, t.label, font, null, maxWidth);
labelWidth = Math.max(labelWidth, info.width);
labelHeight = Math.max(labelHeight, info.height);
}
axis.labelWidth = opts.labelWidth || labelWidth;
axis.labelHeight = opts.labelHeight || labelHeight;
}
function allocateAxisBoxFirstPhase(axis) {
public/js/flot.js view on Meta::CPAN
ctx.restore();
}
function drawAxisLabels() {
$.each(allAxes(), function (_, axis) {
var box = axis.box,
legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
font = axis.options.font || "flot-tick-label tickLabel",
tick, x, y, halign, valign;
// Remove text before checking for axis.show and ticks.length;
// otherwise plugins, like flot-tickrotor, that draw their own
// tick labels will end up with both theirs and the defaults.
surface.removeText(layer);
if (!axis.show || axis.ticks.length == 0)
return;
public/js/flot.js view on Meta::CPAN
valign = "middle";
y = plotOffset.top + axis.p2c(tick.v);
if (axis.position == "left") {
x = box.left + box.width - box.padding;
halign = "right";
} else {
x = box.left + box.padding;
}
}
surface.addText(layer, x, y, tick.label, font, null, null, halign, valign);
}
});
}
function drawSeries(series) {
if (series.lines.show)
drawSeriesLines(series);
if (series.bars.show)
drawSeriesBars(series);
if (series.points.show)
public/js/flot.js view on Meta::CPAN
'<td class="legendLabel">' + entry.label + '</td>'
);
}
if (rowStarted)
fragments.push('</tr>');
if (fragments.length == 0)
return;
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
if (options.legend.container != null)
$(options.legend.container).html(table);
else {
var pos = "",
p = options.legend.position,
m = options.legend.margin;
if (m[0] == null)
m = [m, m];
if (p.charAt(0) == "n")
pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
views/main.tt view on Meta::CPAN
</td>
<td><div id="time"></div></td>
</tr>
</table>
<table class="top">
<tr>
<td>
<div class="drag" id="aux1_widget">
<table class="inner">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Temperature</p></font></th>
<tr>
<td style="text-align: center;"><font size="5"><div class="data" id="temp"></div></font></td>
</tr>
<tr>
<td style="text-align: center;"><font size="3"><div class="data" id="temp_limit"></div></font></td>
</tr>
<tr>
<td style="text-align: center;"><input type="checkbox" data-role="flipswitch" id="aux1" class="button" style="width:120px;height:30px"></td>
</tr>
<tr>
<!-- <td colspan="2"><div class="graph_container"><div id="temp_chart" class="graph" width="600" height="200"></div></div></td>-->
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux3_widget">
<table class="inner">
<th colspan="2"><font size="5"><p class="widget_handle">Light</p></font></th>
<tr>
<th style="text-align: center;"><font size="3">Status</font></th>
<td><input id="aux3" class="button" style="width:120px;height:30px" type="checkbox" data-role="flipswitch"></td>
</tr>
<tr>
<th style="text-align: center;"><font size="3">On at</font></th>
<td><div id="light_on_at"></div></td>
</tr>
<tr>
<th style="text-align: center;"><font size="3">Hours on</font></th>
<td><div id="light_on_hours"></div></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux2_widget">
<table class="inner">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Humidity</p></font></th>
<tr>
<td style="text-align: center;"><font size="5"><div class="data" id="humidity"></div></font></td>
</tr>
<tr>
<td style="text-align: center;"><font size="3"><div class="data" id="humidity_limit"></div></font></td>
</tr>
<tr>
<td style="text-align: center;"><input id="aux2" class="button" style="width:120px;height:30px" type="checkbox" data-role="flipswitch"></td>
</tr>
<tr>
<!-- <td colspan="2"><div class="graph_container"><div id="humidity_chart" class="graph" width="600" height="200"></div></div></td>-->
</tr>
</table>
</div>
</td>
</tr>
</table>
<br><br>
<table class="top">
<tr>
<td>
<div class="drag" id="aux4_widget">
<table class="inner_aux">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Aux #4</p></font></th>
<tr>
<td style="text-align: center;"><input type="checkbox" data-role="flipswitch" id="aux4" class="button" style="width:120px;height:30px"></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux5_widget">
<table class="inner_aux">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Aux #5</p></font></th>
<tr>
<td style="text-align: center;"><input id="aux5" class="button" style="width:120px;height:30px" type="checkbox" data-role="flipswitch"></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux6_widget">
<table class="inner_aux">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Aux #6</p></font></th>
<tr>
<td style="text-align: center;"><input type="checkbox" data-role="flipswitch" id="aux6" class="button" style="width:120px;height:30px"></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux7_widget">
<table class="inner_aux">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Aux #7</p></font></th>
<tr>
<td style="text-align: center;"><input id="aux7" class="button" style="width:120px;height:30px" type="checkbox" data-role="flipswitch"></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux8_widget">
<table class="inner_aux">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Aux #8</p></font></th>
<tr>
<td style="text-align: center;"><input type="checkbox" data-role="flipswitch" id="aux8" class="button" style="width:120px;height:30px"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
views/stats.tt view on Meta::CPAN
</td>
<td><div id="time"></div></td>
</tr>
</table>
<table class="top">
<tr>
<td>
<div class="drag" id="aux1_widget">
<table class="inner">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Temperature</p></font></th>
<tr>
<td style="text-align: center;"><font size="5"><div class="data" id="temp"></div></font></td>
</tr>
<tr>
<td colspan="2"><div class="graph_container"><div id="temp_chart" class="graph" width="600" height="200"></div></div></td>
</tr>
</table>
</div>
</td>
<td>
<div class="drag" id="aux2_widget">
<table class="inner">
<th colspan="2" align="center"><font size="5"><p class="widget_handle">Humidity</p></font></th>
<tr>
<td style="text-align: center;"><font size="5"><div class="data" id="humidity"></div></font></td>
</tr>
<tr>
<td colspan="2"><div class="graph_container"><div id="humidity_chart" class="graph" width="600" height="200"></div></div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
( run in 1.615 second using v1.01-cache-2.11-cpan-ceb78f64989 )