I made a better remote-live-view page [OLD]

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.
 
It sounds to me like your just in full screen mode... If you put the mouse to the left of the screen does a bar come up that you can drag right to exit full screen?
 
Ox1574 said:
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.
Click to expand...

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.
 
bp2008 said:
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.
Click to expand...
Thanks guys that was it. Never knew about that option...I must have accidentally hit the tilde key.
 
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
 
Wrathwielder said:
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
Click to expand...

No convenient way, sorry.
 
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.
 
piconut said:
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.
Click to expand...

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/>&nbsp;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:
  • Like
Reactions: OldBobcat and piconut
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.
 
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?
 
piconut said:
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?
Click to expand...

Find the section in ui2-local-overrides.js:

Code: 
style="font-size:16px;margin-right:10px;"

and add a color style to it, like this:

Code: 
style="font-size:16px;margin-right:10px;color:#FFFF00;"

That will make it a pure yellow. You can change the color value if that doesn't look good.

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:
  • Like
Reactions: piconut and OldBobcat
piconut said:
That was perfect! Thank you kind sir.
Click to expand...

@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:
Tip of the hat to @bp2008 for taking the time writing and developing this.
I installed yesterday and is fantastic. Great work and thanks again.
 
Last edited by a moderator:
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. smiley20.gif
 
You must log in or register to reply here.
Top Bottom