WebCam Surfspots Brombachsee und Altmühlsee: Diese Seite gehört zur Homepage der WebCamWidgetsSylt: https://wwsylt.live. Dieses iPhone Widget zeigt die WebCam am Brombachsee, das Bild wird alle 10 Minuten aktualisiert. Was genau zu tun ist, steht ganz unten.

Webcam_Surfcams_Bayern.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: blue; icon-glyph: camera-retro;
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: blue; icon-glyph: camera-retro;
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: blue; icon-glyph: camera-retro;
// Script by Jens Luetzen: <kliffkieker67@gmail.com>
// 16:34

//
// assigning parameters from scriptable callup
//

{
let param = args.widgetParameter;

//
// Initialization of variables
//

let campic; //number of cam being handed over to Widget
let errParam;
let url;
let widget;
let helpwidget;
const logoImg = await getImage('WWS-Logo.png');
CamFamily = "Surfcams Bayern"
let stream_date_time


//
// assignment of callup parameters to variables
//
// param= 10 ;

if (param != null && param.length > 0) {
	campic = param-1; //Correction by -1 as arrays begin at Zero
	console.log("Campic: " + campic);
	errParam = "Parameter received. ";
	} else {
	errParam = "No Parameter received";
	}


//
// Creating value for date and time
//

let actualdate = new Date();
let lastrefresh = new DateFormatter();
lastrefresh.useShortDateStyle();
lastrefresh.useShortTimeStyle();
timestamp = lastrefresh.string(actualdate);


//
// fro www.addicted-sports.com double digits needed to calculate most actual jpg- and mp4 URL:
// correction for month, day, hour & minutes 0-9 --> 00 - 09
//

let month10 = ("00" + (1 +  actualdate.getMonth())).slice(-2)
let date10 = ("00" + (actualdate.getDate())).slice(-2)
let hours10 = ("00" + (actualdate.getHours())).slice(-2);
let time10 = ("00" + (10 * Math.floor(actualdate.getMinutes()/10))).slice(-2);

//
// Website addicted-sports stops feeding new pics / videos at 22:00
// so if time > 22 this time needs to be fixed
// Attention: Parameter campic is corrected by -1
console.log("campic:" + campic);
switch ( campic ) {
	case 0:
	case 2:
		if ( hours10 >= 22 ) {
		hours10 = "22" ;
		time10 = "00" ;
		}
		break;
	case 3:
		if ( hours10 >= 22 ) {
			if ( time10 >= 30 ) {
				hours10 = "22" ;
				time10 = "30" ;
			}
		}
		break;
	}

/*
let notify1 = new Notification();
notify1.title = "Übergabe-Parameter";
notify1.body = "Error Param: " + errParam + " . Empfangen: campic: " + campic + " Time: " + hours10 + time10;
await notify1.schedule();
*/

/* console.log("Monat: " + month10);
 console.log("Tag: " + date10);
 console.log("Stunde: " + hours10);
 console.log("10er Minute: " + time10);
*/

// example https://www.addicted-sports.com/fileadmin/webcam/brombachsee/2021/07/15/1450.mp4
stream_date_time = actualdate.getFullYear() + "/" + month10 + "/" + date10 + "/" + hours10 + time10

// console.log("Stream_Date_Time : " + stream_date_time);
// console.log( "https://www.addicted-sports.com/fileadmin/webcam/brombachsee/" + stream_date_time + "_lm.jpg" );
// console.log("https://www.addicted-sports.com/fileadmin/webcam/chiemsee/"  + stream_date_time + "_lm.jpg" ) ;
// console.log("https://www.addicted-sports.com/fileadmin/webcam/chiemsee/" + stream_date_time + ".mp4" ) ;
// console.log("https://www.addicted-sports.com/fileadmin/webcam/ammersee/"  + stream_date_time + "_lm.jpg");
console.log("https://www.addicted-sports.com/fileadmin/webcam/walchensee/" + stream_date_time + ".mp4");
console.log("https://www.terra-hd.de/prienavera/" + stream_date_time + ".jpg");
//
// creating JSON for Cam location, preview jpg URL and livestream URL
//

let myWebCams = {
			"Spotlocation" : [
				"Brombachsee" ,
				"Altmühlsee" ,
				"Chiemsee" ,
				"Ammersee" ,
				"Walchensee" ,
				"Kochelsee" ,
				"Starnbergersee",
				"Tegernsee" ,
				"Gardasee, Malcesine" ,
				"Chiemsee Prienavera" ,
				],
			"imgURL" : [
//				"https://www.addicted-sports.com/fileadmin/webcam/brombachsee/" + stream_date_time + "_lm.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/brombachsee/current/400.jpg" ,
//				"https://flus.spotfav.com/altmuhlsee/preview.jpg" ,
				"https://timeshift.odn.de/cam-seenland-01/live.jpg" ,
//				"https://www.addicted-sports.com/fileadmin/webcam/chiemsee/"  + stream_date_time + "_lm.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/chiemsee/current/400.jpg" ,
//				"https://www.addicted-sports.com/fileadmin/webcam/ammersee/"  + stream_date_time + "_lm.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/ammersee/current/400.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/walchensee/current/400.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/kochelsee/current/400.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/starnbergersee/current/400.jpg" ,
				"https://www.foto-webcam.org/webcam/tegernseewest/" +stream_date_time + "_lm.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/gardasee/current/400.jpg" ,
				"https://www.terra-hd.de/prienavera/" + stream_date_time + ".jpg" ,
				] ,
			"LiveStreamURL" : [
				"https://www.addicted-sports.com/fileadmin/webcam/brombachsee/" + stream_date_time + ".mp4" ,
//				"https://flus.spotfav.com/altmuhlsee/embed.html" ,
			"https://timeshift.odn.de/cam-seenland-01/live.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/chiemsee/" + stream_date_time + ".mp4" ,
				"https://www.addicted-sports.com/fileadmin/webcam/ammersee/" + stream_date_time + "_lm.jpg" ,
//				"https://www.4b2.de/stefan/HSCWebcam/xl.php" ,
				"https://www.addicted-sports.com/fileadmin/webcam/walchensee/current/400.jpg" ,
//				"https://www.addicted-sports.com/fileadmin/webcam/walchensee/" + stream_date_time + ".mp4", <-- hat einfach nicht funktioniert :( Browser hat immer / angehängt
				"https://www.addicted-sports.com/fileadmin/webcam/kochelsee/" + stream_date_time + ".mp4" ,
				"https://www.addicted-sports.com/fileadmin/webcam/starnbergersee/" + stream_date_time + ".mp4" ,
				"https://www.foto-webcam.org/webcam/tegernseewest/" +stream_date_time + "_lm.jpg" ,
				"https://www.addicted-sports.com/fileadmin/webcam/gardasee/" + stream_date_time + ".mp4" ,
				"https://www.terra-hd.de/prienavera/"
				]
			};



//
// Main: display preview pics with information or helpwidget, if parameters are missing
//

switch (errParam) {
	case "Parameter received. ":
		camLocation = myWebCams.Spotlocation[campic];
		camSubtitle = timestamp;
		url = myWebCams.LiveStreamURL[campic];

/*
let notify2 = new Notification();
notify2.title = "URL Livestream";
notify2.body = url;
await notify2.schedule();
*/

		let imgReq = await new Request(myWebCams.imgURL[campic]);
		let img = await imgReq.loadImage();

		let widget = createWidget(img,camLocation,camSubtitle,url,logoImg);

		if (!config.runsInWidget) {
			await widget.presentLarge();
			} else {
			await Script.setWidget(widget);
			}
	break;

	case "No Parameter received":
		let helpwidget = createHelpWidget();

		if (!config.runsInWidget) {
		await helpwidget.presentLarge();
		} else {
		await Script.setWidget(helpwidget);
		}
	break;
	}

Script.complete()
}

//
// end Main
//


//
// Here come the functions
//

//
// Creating Widget with parameters img, camLocation cLoc and camSubtitle cSub
//

function createWidget(prv_img,prv_Loc,prv_Subt,prv_URL,prvlogoImg) {
	const widget = new ListWidget();
	sourceURL = "https://wwsylt.live";
	widget.backgroundColor = Color.black();
	widget.url = prv_URL;
	widget.backgroundImage = prv_img;

	widget.setPadding(3,15,15,3);

  const logoStack = widget.addStack();
  logoStack.addSpacer();
  const logoImageStack = logoStack.addStack();
  logoImageStack.addSpacer();
  const wimg = logoImageStack.addImage(prvlogoImg);
  wimg.imageSize = new Size(80, 80);
  wimg.rightAlignImage();

  widget.addStack;
	widget.addSpacer();

	const CamFamilyText = widget.addText(CamFamily)
	CamFamilyText.font = Font.boldSystemFont(12);
	CamFamilyText.textColor = Color.white();
	CamFamilyText.shadowRadius = 3;
	CamFamilyText.shadowColor = Color.black();
	const titleText = widget.addText(prv_Loc);
	titleText.font = Font.boldSystemFont(12);
	titleText.textColor = Color.white();
	titleText.shadowRadius = 3;
	titleText.shadowColor = Color.black();

	widget.addSpacer(2);

	const subtitleText = widget.addText(prv_Subt);

	subtitleText.font = Font.systemFont(8);
	subtitleText.textColor = Color.white();
	subtitleText.textOpacity = 0.8;
	subtitleText.shadowRadius = 3;
	subtitleText.shadowColor = Color.black();

	const sourceURLText = widget.addText(sourceURL);
	sourceURLText.font = Font.systemFont(8);
	sourceURLText.textColor = Color.white();
	sourceURLText.textOpacity = 0.8;
	sourceURLText.shadowRadius = 3;
	sourceURLText.shadowColor = Color.black();

	return widget;
}

//
// Creating HELP-Widget without parameters
//

function createHelpWidget() {
	const helpwidget = new ListWidget;
	helpwidget.backgroundColor = Color.blue();

	const titleText = helpwidget.addText("To Do's to configure the Widget");
	titleText.leftAlignText();
	titleText.font = Font.boldSystemFont(12);
	titleText.textColor = Color.white();

	myText = addLine(helpwidget,"===============================");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"1. Widget lange drücken für den Config Mode");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"2. Option Scripts: dieses Script wählen");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"3. Option When interacting: 'Open URL'");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"4. Option Parameter: Zahl zwischen 1 und 10");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"5. Fertig mit einzelnem Widget, wiederholen für die andere Cam");
	helpwidget.addSpacer(1);
	myText = addLine(helpwidget,"6. Widges aufeinander ziehen für scrollbaren Smart Stack");

	return helpwidget;
}

//
// Adds single line to the widget, parameter: text to be displayed;
// same for Thankyou line, only smaller
//

function addLine(prvHW,prvTXT) {
	var TextLine = prvHW.addText(prvTXT);
	TextLine.leftAlignText();
	TextLine.font = Font.boldSystemFont(10);
	TextLine.textColor = Color.white();
}

function addThankyouLine(prvHW,prvTXT) {
	var TextLine = prvHW.addText(prvTXT);
	TextLine.leftAlignText();
	TextLine.font = Font.boldSystemFont(7);
	TextLine.textColor = Color.white();
}

// get images from local filestore or download them once
async function getImage(image) {
    let fm = FileManager.local();
    let dir = fm.documentsDirectory();
    let path = fm.joinPath(dir, image);
    if (fm.fileExists(path)) {
        return fm.readImage(path);
    } else {
        // download once
        let logoUrl;
        switch (image) {
            case 'WWS-Logo.png':
                logoUrl = "https://wwsylt.live/images/WWS_Logo.png";
                console.log("set URL:  " + logoUrl);
                break
            default:
                console.log(`Sorry, couldn't find ${image}.`);
        }
        console.log("passing URL:  " + logoUrl);
        let iconImage = await loadImage(logoUrl);
        fm.writeImage(path, iconImage);
        return iconImage;
    }
}

// helper function to download an image from a given url
async function loadImage(prvlogoUrl) {
  console.log(`passed URL: ${prvlogoUrl}.`);
    const req = new Request(prvlogoUrl);
    return await req.loadImage();
}

Webcam Surfcams Bayern

---

Diese Seite gehört zur Homepage der WebCamWidgetsSylt: https://wwsylt.live

Das Script auf dieser Seite zeigt die Webcams am

• Brombachsee
• Altmühlsee
• Chiemsee
• Ammersee
• Walchensee
• Kochelsee
• Starnbergersee
• Tegernsee
• Gardasee

direkt auf dem HomeScreen vom iPhone.

Wenn man das Bild antippt, öffnet sich das Bild im Browser in großer Darstellung bzw der Livestream vom Spot.

Hinweis:

Es kann passieren, dass das Video nicht startet und statt dessen eine Fehlermeldung kommt.
Ich schau mir das in den kommenden Tagen auch noch an, denn der Weg zu den Cams muss ausgerechnet werden.
Im Normalfall gibt es hier immer ein Video zu den vollen 10 min, also zB 1510, 1520, usw.
Nach 22 Uhr ändert sich das aber bis ca 7 Uhr, abhängig von der Cam.
Auch tagsüber wird mal ab und an ein 10 min Intervall ausgelassen.
Dann ist es halt so. Wer das gar nicht mag, kann im Script den Eintrag für den Stream den Teil vom Vorschaubild einkopieren.
Das kommt dann wenigstens im Großformat.

HowTo: (Einfach) (nach unten scrollen für die detaillierte Anleitung)

---

Auf dem iPhone:

1. Das Script über diesem Kommentar markieren (von unten nach oben), kopieren, als neues Script in Scriptable einfügen und unter einem Namen speichern. Beispiel
2. Auf den HomeScreen tippen, bis die Icons wackeln und über das Pluszeichen ein neues Scriptable Widget hinzufügen. Das Widget so einstellen, dass es das neue Script verwendet, bei "when interacting" auf "Open URL" und bei "Parameter" auf eine Zahl zwische 1 und 9 stellen. Beispiel
3. Schritt 2 wiederholen und wenn die Icons wackeln, das neue Widget auf das vorherige ziehen, um einen Smart Stapel zu bauen.

Bitte Folgendes berücksichtigen:

---

• Für sämtliche Bilder gilt das Copyright des Besitzers der WebCam
• Das iPhone aktualisiert die Bilder alle 15-20 Minuten
• Scriptable bietet einen iPhone Kurzbefehl "Refresh all Widgets" zum sofortigen Aktualisieren der Bilder
• Durch die Nutzung der Widgets erhöht sich der mobile Datenverbrauch

Dieses und andere Widgets teilen:

---

Ihr wollt vielleicht die Links zu diesem und anderen Widgets teilen:

• Homepage der WebcamWidgetsSylt: https://wwsylt.live
• 6 Webcams Autozug Sylt-Shuttle: https://bit.ly/3dj5YcN
• 3 WebCams Syltfähre (dieses Widget): https://bit.ly/3eCBe7d
• 7 Webcams Livespotting & andere von Sylt: https://bit.ly/3b2wrsd

Auf YouTube:

---

Präsentation der Widgets
https://youtu.be/YtO87t9DvtA

Demo aller Widgets
https://youtu.be/En-h2LZYh1w

Demo Autozug / Sylt-Shuttle
https://youtu.be/okgi-ZKg_PY

Erklärung Script Laden am Beispiel Westerland Kurpromenade
https://youtu.be/tRHFpwIr_l0

Erklärung Widget Einrichten auf dem Homescreen am Beispiel Westerland Kurpromenade
https://youtu.be/LnrikIM3T0U

Erklärung Widget Einrichten auf dem Homescreen am Beispiel Autozug / Sylt-Shuttle
https://youtu.be/vTvw9BsSmVY

2,99 € für die Kaffeedose:

---

Die hier zur Verfügung gestellten Widgets sind kostenlos und "as-is".
Wenn sie Euch gefallen, würde ich mich freuen, wenn Ihr mir einen Kaffee ausgebt.

HowTo: (detaillierte Schritt für Schritt Anleitung)

---

1. Im App Store die App Scriptable auf dem iPhone installieren
2. Dann den Code auf dieser Seite (oben) von unten nach oben markieren und kopieren. Bitte passt auf, dass Ihr alle Zeichen kopiert!
3. Auf die App "Scriptable" wechseln und das blaue Pluszeichen rechts oben antippen. Damit öffnet sich ein leeres Fenster vom Scriptable Editor.
4. Da hineintippen und "Einfügen" wählen, dann "Done" klicken. Jetzt das neue Script lang-tippen (Untitled Script) und unter "Rename" einen neuen Namen eingeben, zB "Surfspots"
5. Zum Schluss noch das "Done" in der oberen linken Ecke antippen und dann sind wir hier fertig: Wir haben in Scriptable das neue Script unter einem Namen abgelegt. Jetzt muss das Widget eingestellt werden:
6. Einmal lange auf den HomeScreen tippen, bis die Icons wackeln. Dann über das Plus-Zeichen oben ein neues Widget erstellen.
7. Nach unten scrollen und "Scriptable" auswählen (Schneller gehts, wenn man in das Suchfenster SC eingibt...), die mittlere Widget-Größe auswählen und "Add Widget" antippen.
8. Die Icons sollten immer noch wackeln. Jetzt das neue Widget antippen, um die Einstellung zu starten
9. Falls die Icons nicht wackeln, einfach den Homescreen lang drücken, bis sie es tun
10. Unter "Script" das neue Script auswählen, zB "Surfspots"
11. Unter "When interacting" auf "Open URL" stellen
12. Unter Parameter: eine Zahl zwischen 1 und 9 eingeben
13. Das war's. Jetzt auf den HomeScreen tippen, um die Einstellung abzuschliessen.
14. Schritte 6-12 wiederholen, um das nächste Widget zu erstellen. Bei "Parameter" die 2 eingeben für die 2. WebCam.
    Wenn die Icons wackeln, das neue Widget auf das vorherige ziehen, um einen Smart Stapel zu erzeugen, mit dem man durch die Cams mit dem Daumen durchscrollen kann. Das ist ein Smart Stack
    Anmerkung:
    Wenn Ihr vergesst, bei "Parameter" eine Zahl einzugeben, zeigt das Widget einen blauen Hilfetext, der auch kommt, wenn man in Scriptable auf das Script tippt.

Anmerkung:
Wenn Ihr vergesst, bei "Parameter" eine Zahl einzugeben, zeigt das Widget einen blauen Hilfetext, der auch kommt, wenn man in Scriptable auf das Script tippt.