GOOGLE CHROME - For some reason when I browse the ui2.htm with Chrome, I only get the cameras....no banner up top, or the clips list on the left side. Is there something I accidentally turned off in Chrome to see these? Firefox/IE work fine. I reset chrome completely, even reinstalled the app and still same issue.
I made a better remote-live-view page [OLD]
- Thread starter bp2008
- Start date
Yes, I agree with Jaceon, it sounds like you just have it in full-screen mode. As he said, if you put the mouse at the left edge of the window a bar should appear that you can click and drag (or double-click it to return to the default size). Alternatively the tilde key (~) is the hotkey for entering and exiting fullscreen mode in UI2.
Thanks guys that was it. Never knew about that option...I must have accidentally hit the tilde key.
Wrathwielder
n3wb
- Joined
- Dec 4, 2015
- Messages
- 7
- Reaction score
- 0
Hiya!
AWESOME UI!! I think I may just use it instead of BI4 itself
One question though...is there a way to increase the size of the alert thumbnails? I can't figure out any way to do this within the BI program itself, so I thought I'd check out your UI to see if you possibly had this feature...
I frequently like to quickly scan all my alert clips for anything that catches my eye (usually deer) so I can check out the video, but it's tough to see any changes when the thumbnails are so small...
I can, of course, use CTRL-+ to enlarge them within the browser, but then EVERYTHING gets larger as well and I end up without much screen real estate.
Thanks much!
-Greg
AWESOME UI!! I think I may just use it instead of BI4 itself
One question though...is there a way to increase the size of the alert thumbnails? I can't figure out any way to do this within the BI program itself, so I thought I'd check out your UI to see if you possibly had this feature...
I frequently like to quickly scan all my alert clips for anything that catches my eye (usually deer) so I can check out the video, but it's tough to see any changes when the thumbnails are so small...
I can, of course, use CTRL-+ to enlarge them within the browser, but then EVERYTHING gets larger as well and I end up without much screen real estate.
Thanks much!
-Greg
No convenient way, sorry.Hiya!
AWESOME UI!! I think I may just use it instead of BI4 itself
One question though...is there a way to increase the size of the alert thumbnails? I can't figure out any way to do this within the BI program itself, so I thought I'd check out your UI to see if you possibly had this feature...
I frequently like to quickly scan all my alert clips for anything that catches my eye (usually deer) so I can check out the video, but it's tough to see any changes when the thumbnails are so small...
I can, of course, use CTRL-+ to enlarge them within the browser, but then EVERYTHING gets larger as well and I end up without much screen real estate.
Thanks much!
-Greg
piconut
BIT Beta Team
Another request: How difficult would it be to add the option of showing sunrise and sunset times in the upper bar? I'm no programer but I do know the formulas for calculating those are out there on the interwebs and they're based on latitude and longitude of the user. Or maybe there might be an option to pull the sunrise and sunset data from a URL like http://www.timeanddate.com/sun/usa/austin at the top where it says "Sunrise Today"? The user would have a place in the options dialogue box to add the country and city they live in and then you could append that to the main Time and Date URL? If this isn't feasible, that's OK too.
This one isn't so hard. We'll use a JavaScript library called SunCalc to calculate the sunrise and sunset times.
Create a file named suncalc.js in your /www/ui2/ directory.
Paste in the following content:
Code:
/*
(c) 2011-2015, Vladimir Agafonkin
SunCalc is a JavaScript library for calculating sun/moon position and light phases.
https://github.com/mourner/suncalc
*/
(function () { 'use strict';
// shortcuts for easier to read formulas
var PI = Math.PI,
sin = Math.sin,
cos = Math.cos,
tan = Math.tan,
asin = Math.asin,
atan = Math.atan2,
acos = Math.acos,
rad = PI / 180;
// sun calculations are based on http://aa.quae.nl/en/reken/zonpositie.html formulas
// date/time constants and conversions
var dayMs = 1000 * 60 * 60 * 24,
J1970 = 2440588,
J2000 = 2451545;
function toJulian(date) { return date.valueOf() / dayMs - 0.5 + J1970; }
function fromJulian(j) { return new Date((j + 0.5 - J1970) * dayMs); }
function toDays(date) { return toJulian(date) - J2000; }
// general calculations for position
var e = rad * 23.4397; // obliquity of the Earth
function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); }
function declination(l, b) { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); }
function azimuth(H, phi, dec) { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); }
function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); }
function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; }
function astroRefraction(h) {
if (h < 0) // the following formula works for positive altitudes only.
h = 0; // if h = -0.08901179 a div/0 would occur.
// formula 16.4 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
// 1.02 / tan(h + 10.26 / (h + 5.10)) h in degrees, result in arc minutes -> converted to rad:
return 0.0002967 / Math.tan(h + 0.00312536 / (h + 0.08901179));
}
// general sun calculations
function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); }
function eclipticLongitude(M) {
var C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center
P = rad * 102.9372; // perihelion of the Earth
return M + C + P + PI;
}
function sunCoords(d) {
var M = solarMeanAnomaly(d),
L = eclipticLongitude(M);
return {
dec: declination(L, 0),
ra: rightAscension(L, 0)
};
}
var SunCalc = {};
// calculates sun position for a given date and latitude/longitude
SunCalc.getPosition = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
c = sunCoords(d),
H = siderealTime(d, lw) - c.ra;
return {
azimuth: azimuth(H, phi, c.dec),
altitude: altitude(H, phi, c.dec)
};
};
// sun times configuration (angle, morning name, evening name)
var times = SunCalc.times = [
[-0.833, 'sunrise', 'sunset' ],
[ -0.3, 'sunriseEnd', 'sunsetStart' ],
[ -6, 'dawn', 'dusk' ],
[ -12, 'nauticalDawn', 'nauticalDusk'],
[ -18, 'nightEnd', 'night' ],
[ 6, 'goldenHourEnd', 'goldenHour' ]
];
// adds a custom time to the times config
SunCalc.addTime = function (angle, riseName, setName) {
times.push([angle, riseName, setName]);
};
// calculations for sun times
var J0 = 0.0009;
function julianCycle(d, lw) { return Math.round(d - J0 - lw / (2 * PI)); }
function approxTransit(Ht, lw, n) { return J0 + (Ht + lw) / (2 * PI) + n; }
function solarTransitJ(ds, M, L) { return J2000 + ds + 0.0053 * sin(M) - 0.0069 * sin(2 * L); }
function hourAngle(h, phi, d) { return acos((sin(h) - sin(phi) * sin(d)) / (cos(phi) * cos(d))); }
// returns set time for the given sun altitude
function getSetJ(h, lw, phi, dec, n, M, L) {
var w = hourAngle(h, phi, dec),
a = approxTransit(w, lw, n);
return solarTransitJ(a, M, L);
}
// calculates sun times for a given date and latitude/longitude
SunCalc.getTimes = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
n = julianCycle(d, lw),
ds = approxTransit(0, lw, n),
M = solarMeanAnomaly(ds),
L = eclipticLongitude(M),
dec = declination(L, 0),
Jnoon = solarTransitJ(ds, M, L),
i, len, time, Jset, Jrise;
var result = {
solarNoon: fromJulian(Jnoon),
nadir: fromJulian(Jnoon - 0.5)
};
for (i = 0, len = times.length; i < len; i += 1) {
time = times[i];
Jset = getSetJ(time[0] * rad, lw, phi, dec, n, M, L);
Jrise = Jnoon - (Jset - Jnoon);
result[time[1]] = fromJulian(Jrise);
result[time[2]] = fromJulian(Jset);
}
return result;
};
// moon calculations, based on http://aa.quae.nl/en/reken/hemelpositie.html formulas
function moonCoords(d) { // geocentric ecliptic coordinates of the moon
var L = rad * (218.316 + 13.176396 * d), // ecliptic longitude
M = rad * (134.963 + 13.064993 * d), // mean anomaly
F = rad * (93.272 + 13.229350 * d), // mean distance
l = L + rad * 6.289 * sin(M), // longitude
b = rad * 5.128 * sin(F), // latitude
dt = 385001 - 20905 * cos(M); // distance to the moon in km
return {
ra: rightAscension(l, b),
dec: declination(l, b),
dist: dt
};
}
SunCalc.getMoonPosition = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
c = moonCoords(d),
H = siderealTime(d, lw) - c.ra,
h = altitude(H, phi, c.dec),
// formula 14.1 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
pa = atan(sin(H), tan(phi) * cos(c.dec) - sin(c.dec) * cos(H));
h = h + astroRefraction(h); // altitude correction for refraction
return {
azimuth: azimuth(H, phi, c.dec),
altitude: h,
distance: c.dist,
parallacticAngle: pa
};
};
// calculations for illumination parameters of the moon,
// based on http://idlastro.gsfc.nasa.gov/ftp/pro/astro/mphase.pro formulas and
// Chapter 48 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
SunCalc.getMoonIllumination = function (date) {
var d = toDays(date),
s = sunCoords(d),
m = moonCoords(d),
sdist = 149598000, // distance from Earth to Sun in km
phi = acos(sin(s.dec) * sin(m.dec) + cos(s.dec) * cos(m.dec) * cos(s.ra - m.ra)),
inc = atan(sdist * sin(phi), m.dist - sdist * cos(phi)),
angle = atan(cos(s.dec) * sin(s.ra - m.ra), sin(s.dec) * cos(m.dec) -
cos(s.dec) * sin(m.dec) * cos(s.ra - m.ra));
return {
fraction: (1 + cos(inc)) / 2,
phase: 0.5 + 0.5 * inc * (angle < 0 ? -1 : 1) / Math.PI,
angle: angle
};
};
function hoursLater(date, h) {
return new Date(date.valueOf() + h * dayMs / 24);
}
// calculations for moon rise/set times are based on http://www.stargazing.net/kepler/moonrise.html article
SunCalc.getMoonTimes = function (date, lat, lng, inUTC) {
var t = new Date(date);
if (inUTC) t.setUTCHours(0, 0, 0, 0);
else t.setHours(0, 0, 0, 0);
var hc = 0.133 * rad,
h0 = SunCalc.getMoonPosition(t, lat, lng).altitude - hc,
h1, h2, rise, set, a, b, xe, ye, d, roots, x1, x2, dx;
// go in 2-hour chunks, each time seeing if a 3-point quadratic curve crosses zero (which means rise or set)
for (var i = 1; i <= 24; i += 2) {
h1 = SunCalc.getMoonPosition(hoursLater(t, i), lat, lng).altitude - hc;
h2 = SunCalc.getMoonPosition(hoursLater(t, i + 1), lat, lng).altitude - hc;
a = (h0 + h2) / 2 - h1;
b = (h2 - h0) / 2;
xe = -b / (2 * a);
ye = (a * xe + b) * xe + h1;
d = b * b - 4 * a * h1;
roots = 0;
if (d >= 0) {
dx = Math.sqrt(d) / (Math.abs(a) * 2);
x1 = xe - dx;
x2 = xe + dx;
if (Math.abs(x1) <= 1) roots++;
if (Math.abs(x2) <= 1) roots++;
if (x1 < -1) x1 = x2;
}
if (roots === 1) {
if (h0 < 0) rise = i + x1;
else set = i + x1;
} else if (roots === 2) {
rise = i + (ye < 0 ? x2 : x1);
set = i + (ye < 0 ? x1 : x2);
}
if (rise && set) break;
h0 = h2;
}
var result = {};
if (rise) result.rise = hoursLater(t, rise);
if (set) result.set = hoursLater(t, set);
if (!rise && !set) result[ye > 0 ? 'alwaysUp' : 'alwaysDown'] = true;
return result;
};
// export as AMD module / Node module / browser variable
if (typeof define === 'function' && define.amd) define(SunCalc);
else if (typeof module !== 'undefined') module.exports = SunCalc;
else window.SunCalc = SunCalc;
}());Next, we have to load the script and use it to calculate the times. If you do not have one already, create a file named ui2-local-overrides.js in your /www/ui2/ directory. At the bottom of this file, paste the following:
Code:
(function($)
{
// If latitude is S, the number must be negative. N, postive.
var latitude = 40.7127;
// If longitude is W, the number must be negative. E, positive.
var longitude = -74.0059;
// The example coordinates are New York City, latitude 40.7127 (N), longitude 74.0059 (W)
var textColor = "Yellow";
$(function()
{
$.getScript("ui2/suncalc.js") // suncalc library is from: https://github.com/mourner/suncalc
.done(function()
{
$("#profile_wrapper").after('<div id="sunrisesunset" class="inlineblock topbarinfo" style="font-size:16px;margin-right:10px;color:' + textColor + ';"></div>');
SetSunriseSunsetText();
// Update the text periodically
setInterval(SetSunriseSunsetText, 10000);
});
});
var lastUpdateDay = -1;
function SetSunriseSunsetText()
{
var date = new Date();
if (lastUpdateDay != date.getDate())
{
lastUpdateDay = date.getDate();
var times = SunCalc.getTimes(date, latitude, longitude);
$("#sunrisesunset").html("Rise: " + GetTimeHoursMinutes(times.sunrise) + "<br/> Set: " + GetTimeHoursMinutes(times.sunset));
}
}
function GetTimeHoursMinutes(date)
{
var ampm = "AM";
var hour = date.getHours();
if (hour == 0)
hour = 12;
else if (hour == 12)
ampm = "PM";
else if (hour > 12)
{
hour -= 12;
ampm = "PM";
}
var str = hour + ":" + date.getMinutes().toString().padLeft(2, '0') + " " + ampm;
return str;
}
}(jQuery));Change the latitude and longitude values as necessary to match your location.
Last edited:
piconut
BIT Beta Team
Very Cool!
You da man BP2008! I know it's kind of nerdy but I really like to keep track of things like sunrise and sunset. It will be interesting to see just when the cameras change from color to infrared as compared to sunset.
You da man BP2008! I know it's kind of nerdy but I really like to keep track of things like sunrise and sunset. It will be interesting to see just when the cameras change from color to infrared as compared to sunset.
piconut
BIT Beta Team
OK, I'm embarrassed to ask for another tweak but can you please post the code that would make the Sunrise and Sunset text yellow so that it is visually set off from the other text?
Find the section in ui2-local-overrides.js:
Code:
style="font-size:16px;margin-right:10px;"
Code:
style="font-size:16px;margin-right:10px;color:#FFFF00;"The ui2-local-overrides.js script above now contains a setting near the top for assigning the text color, and it defaults to yellow.
This site can help you choose a color value: http://www.w3schools.com/colors/colors_picker.asp
Last edited:
piconut
BIT Beta Team
That was perfect! Thank you kind sir.
@piconut, I updated the ui2-local-overrides.js script above to make it update the sunrise/set text just after midnight (as the day number changes), so that if you leave ui2 open for a long time or change you computer's clock or something then the sunrise/sunset date will update itself without requiring a page refresh. Get the new script if you want this change.
I also made the default text color "Yellow" and made it an easily-accessible setting at the top of the script.
Last edited by a moderator:
piconut
BIT Beta Team
Hi bp2008, I made the changes! Thanks again!
Q™
IPCT Contributor
Hey Brian. I've been away, absorbed learning Drupal 8, but I wanted to stop back and say that the be new BRLVP "camera label" feature is teriffic. Thanks again for all your hard work...it's quite an accomplishment IMO. 
Larry Petty Jr
n3wb
Is it possible to enable the BI4 option "Only cycle when at least one camera is triggered" in UI2?
Not possible.
Is it possible to use something like http://xxxxxxxx.xxx:81/ui2.htm/OFU (OFU is the camera short name in BI) to access a specific camera? I want to use this in a mobile app (Imperihome) to get a view of a specific camera (just the view).