Einfach mal zeigen will….. :-) - Teil 2

[StM47]

@Annuit20:

Ich habe meine Visu auch komplett neu aufgebaut, ist aber noch nicht fertig bzw. es ist noch nicht alles eingebunden.

Danke an alle fürs teilen.

Screenshot_2018-12-03-20-48-47.png

Screenshot_2018-12-03-20-43-09.png

Screenshot_2018-12-03-20-38-26.png

Screenshot_2018-12-03-21-01-50.png

Screenshot_2018-12-03-20-42-38.png

Screenshot_2018-12-03-20-42-44.png

Screenshot_2018-12-03-20-42-51.png `

Hi Annuit20,

wie hast du den blauen Hintergrund bei deinen icons gemacht.

Ich habe ein etwas größeres Widget dahinter gelegt und mit blau eingefärbt.

Sieht aber lange nicht so geil aus, wie deine icons.

[Annuit20]

Hi,

einfach mal mein Projekt importieren, da kann man sich ja eigentlich alles raus kopieren

Hier der Menürahmen:

[{"tpl":"tplFrame","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","title":"","title_color":"black","title_top":"-10","title_left":"15","header_height":"0","header_color":"black","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"15px","top":"685px","width":"105px","height":"105px","border-color":"#0e6ed8","border-radius":"12px","border-width":"2px","background":"","z-index":"10","box-shadow":"1px 1px 1px rgba(14,110,216)"},"widgetSet":"basic"}]

[JoJ123]

Ich habe das Müll Script angepasst.

Wer nur die Tage bis zum Abholen der 4 Müllsorten benötigt, ist damit sicher einfacher bedient.

Ihr müsst nur diese beiden Konstanten anpassen:

• MUELL_KALENDER –> iCal Instanz mit dem jeweiligen Müll Kalender
• MUELL_EINTRAEGE –> Müll Namen aus dem Kalender mit gewünschtem Object Name. (Werden unter der laufenden JavaScript Instanz angelegt)

// Abruf der verbleibenden Tage bis zum nächsten Abholtermin
// 16.12.2018 JoJ123
// v.0.0.1
 const MUELL_KALENDER = "ical.2.data.html"
const MUELL_EINTRAEGE = {
    "Restmüll": 'vis.muell.restmuell',
    "Papiertonne": 'vis.muell.papier',
    "Bioabfall": 'vis.muell.bioabfall',
    "Gelber Sack": 'vis.muell.gelbersack'
};
 debug = false;
Object.keys(MUELL_EINTRAEGE).forEach(key => {
    createState(MUELL_EINTRAEGE[key], -1);
})
 function muell() {
    const contentString = readHTML();
    if (debug) log(contentString);
     const dateRegExp = /[0-9]{2}.[0-9]{2}.[0-9]{4}/g;
    const rangeRegExp = /In [0-9] Tagen/g;
    const todayRegExp = /Heute/g;
    const tomorrowRegExp = /Morgen/g;
    const dayAfterTomorrowRegExp = /Übermorgen/g;
     Object.keys(MUELL_EINTRAEGE).forEach(eintrag => {
        if (debug) log("eintrag: " + eintrag);
        // Position bestimmen
        const pos = contentString.indexOf(eintrag, 1);
        if (debug) log("pos: " + pos);
         // Check Datum
        const date = contentString.substring((pos - 13), pos - 3);
        const range = contentString.substring((pos - 13), pos - 3);
        const today = contentString.substring((pos - 8), pos - 3);
        const tomorrow = contentString.substring((pos - 9), pos - 3);
        const dayAfterTomorrow = contentString.substring((pos - 13), pos - 3);
        if (dateRegExp.test(date)) {
            if (debug) log("datum ist: ---" + date + "---");
            var newDateRegExp = /(\d{2}).(\d{2}).(\d{4})/;
            var dayArray = newDateRegExp.exec(date);
            const dateObj = new Date(
                (dayArray[3]),
                (dayArray[2]) - 1,
                (dayArray[1])
            );
            setState(MUELL_EINTRAEGE[eintrag], Math.ceil(((dateObj - new Date()) / (1000 * 60 * 60 * 24))));
        } else if (rangeRegExp.test(range)) {
            if (debug) log("range ist: ---" + range + "---");
            setState(MUELL_EINTRAEGE[eintrag], Number(range.substring(3, 4)));
        } else if (todayRegExp.test(today)) {
            if (debug) log("today ist: ---" + today + "---");
            setState(MUELL_EINTRAEGE[eintrag], 0);
        } else if (tomorrowRegExp.test(tomorrow)) {
            if (debug) log("tomorrow ist: ---" + tomorrow + "---");
            setState(MUELL_EINTRAEGE[eintrag], 1);
        } else if (dayAfterTomorrowRegExp.test(dayAfterTomorrow)) {
            if (debug) log("dayAfterTomorrow ist: ---" + dayAfterTomorrow + "---");
            setState(MUELL_EINTRAEGE[eintrag], 2);
        }
    });
}
 function readHTML() {
    var contentString = getState(MUELL_KALENDER).val.toString();
    // remove all inside SCRIPT and STYLE tags
    contentString = contentString.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    contentString = contentString.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    // remove BR tags
    contentString = contentString.replace(/
/gi, "");
    contentString = contentString.replace(/<br\s\>/gi, "");
    contentString = contentString.replace(/<br\>/gi, "");
    // remove all else
    contentString = contentString.replace(/<(?:.|\s)*?>/g, "");
    // get rid of html-encoded characters:
    contentString = contentString.replace(/ /gi, " ");
    contentString = contentString.replace(/&/gi, "&");
    contentString = contentString.replace(/"/gi, '"');
    contentString = contentString.replace(/</gi, '<');
    contentString = contentString.replace(/>/gi, '>');
    return contentString
}
 schedule('10 0 * * *', () => muell());
muell();</br\></br\s\></style.*></script.*>

[Rinkimeku]

@Annuit20:

So anbei das Projekt. Wenn jemand was kritisches findet was nicht im Netz stehen sollte wäre ich über einen Hinweis dankbar.

@JB_Sullivan: Das sind Zähler der noch verbleibenden Tage bis zum Abholtag. Ist von jemand aus dem Forum.2018-12-07-Forum.zip `

hallo

danke für das bereitstellen leider weiß ich als Neuling nicht wie ich das importiert bekomme ich hoffe es kann mir jemand helfen

[Homoran]

@Rinkimeku:

leider weiß ich als Neuling nicht wie ich das importiert bekomme ich hoffe es kann mir jemand helfen `
steht in der Doku:

http://www.iobroker.net/docu/?page_id=2 … #Widgets_2

Unterpunkt 18

Gruß

Rainer

[Rinkimeku]

danke für die mega schnelle Antwort

aber leider steh ich glaub ein bisschen auf dem schlauch in der zip Datei befinden sich folgende Dateien

• vis-views.json

• vis-user.css

und paar Icons

[StM47]

Bist du Mac User? dann werden die Dateien beim Download automatisch entpackt.

Du musst mit der rechten Maustaste das Kontexmenü aufrufen und dann auf verknüpfte Datei laden gehen, dann wird die Zip.Datei runtergeladen.

Die Zip.Datei dann als neues Projekt importieren.

[Rinkimeku]

perfekt hat geklappt vielen danke für die schnelle Hilfe

[tempestas]

@JoJ123:

Ich habe das Müll Script angepasst.

Wer nur die Tage bis zum Abholen der 4 Müllsorten benötigt, ist damit sicher einfacher bedient.

Ihr müsst nur diese beiden Konstanten anpassen:

• MUELL_KALENDER –> iCal Instanz mit dem jeweiligen Müll Kalender
• MUELL_EINTRAEGE –> Müll Namen aus dem Kalender mit gewünschtem Object Name. (Werden unter der laufenden JavaScript Instanz angelegt)

! // Abruf der verbleibenden Tage bis zum nächsten Abholtermin // 16.12.2018 JoJ123 // v.0.0.1 ! const MUELL_KALENDER = "ical.2.data.html" const MUELL_EINTRAEGE = { "Restmüll": 'vis.muell.restmuell', "Papiertonne": 'vis.muell.papier', "Bioabfall": 'vis.muell.bioabfall', "Gelber Sack": 'vis.muell.gelbersack' }; ! debug = false; Object.keys(MUELL_EINTRAEGE).forEach(key => { createState(MUELL_EINTRAEGE[key], -1); }) ! function muell() { const contentString = readHTML(); if (debug) log(contentString); ! const dateRegExp = /[0-9]{2}.[0-9]{2}.[0-9]{4}/g; const rangeRegExp = /In [0-9] Tagen/g; const todayRegExp = /Heute/g; const tomorrowRegExp = /Morgen/g; const dayAfterTomorrowRegExp = /Übermorgen/g; ! Object.keys(MUELL_EINTRAEGE).forEach(eintrag => { if (debug) log("eintrag: " + eintrag); // Position bestimmen const pos = contentString.indexOf(eintrag, 1); if (debug) log("pos: " + pos); ! // Check Datum const date = contentString.substring((pos - 13), pos - 3); const range = contentString.substring((pos - 13), pos - 3); const today = contentString.substring((pos - 8), pos - 3); const tomorrow = contentString.substring((pos - 9), pos - 3); const dayAfterTomorrow = contentString.substring((pos - 13), pos - 3); if (dateRegExp.test(date)) { if (debug) log("datum ist: ---" + date + "---"); var newDateRegExp = /(\d{2}).(\d{2}).(\d{4})/; var dayArray = newDateRegExp.exec(date); const dateObj = new Date( (dayArray[3]), (dayArray[2]) - 1, (dayArray[1]) ); setState(MUELL_EINTRAEGE[eintrag], Math.ceil(((dateObj - new Date()) / (1000 * 60 * 60 * 24)))); } else if (rangeRegExp.test(range)) { if (debug) log("range ist: ---" + range + "---"); setState(MUELL_EINTRAEGE[eintrag], Number(range.substring(3, 4))); } else if (todayRegExp.test(today)) { if (debug) log("today ist: ---" + today + "---"); setState(MUELL_EINTRAEGE[eintrag], 0); } else if (tomorrowRegExp.test(tomorrow)) { if (debug) log("tomorrow ist: ---" + tomorrow + "---"); setState(MUELL_EINTRAEGE[eintrag], 1); } else if (dayAfterTomorrowRegExp.test(dayAfterTomorrow)) { if (debug) log("dayAfterTomorrow ist: ---" + dayAfterTomorrow + "---"); setState(MUELL_EINTRAEGE[eintrag], 2); } }); } ! function readHTML() { var contentString = getState(MUELL_KALENDER).val.toString(); // remove all inside SCRIPT and STYLE tags contentString = contentString.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, ""); contentString = contentString.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, ""); // remove BR tags contentString = contentString.replace(/ /gi, ""); contentString = contentString.replace(/<br\s\>/gi, ""); contentString = contentString.replace(/<br\>/gi, ""); // remove all else contentString = contentString.replace(/<(?:.|\s)*?>/g, ""); // get rid of html-encoded characters: contentString = contentString.replace(/ /gi, " "); contentString = contentString.replace(/&/gi, "&"); contentString = contentString.replace(/"/gi, '"'); contentString = contentString.replace(/</gi, '<'); contentString = contentString.replace(/>/gi, '>'); return contentString } ! schedule('10 0 * * *', () => muell()); muell();</br\></br\s\></style.*></script.*> `

vielen Dank. Das schaue ich mir an, um wieder was zu lernen. Sieht für mich so aus, als hättest du insbesondere den Teil des Datumsvergleichs eleganter gelöst, einiges andere scheint ja entsprechend zu sein. Schöne Sache, mit dem Thema Datumsvergleich kannte / kenne ich mich nicht aus, werds mir genauer ansehen

[JoJ123]

@tempestas:

@JoJ123:

Ich habe das Müll Script angepasst.

Wer nur die Tage bis zum Abholen der 4 Müllsorten benötigt, ist damit sicher einfacher bedient.

Ihr müsst nur diese beiden Konstanten anpassen:

• MUELL_KALENDER –> iCal Instanz mit dem jeweiligen Müll Kalender
• MUELL_EINTRAEGE –> Müll Namen aus dem Kalender mit gewünschtem Object Name. (Werden unter der laufenden JavaScript Instanz angelegt)

! // Abruf der verbleibenden Tage bis zum nächsten Abholtermin // 16.12.2018 JoJ123 // v.0.0.1 ! const MUELL_KALENDER = "ical.2.data.html" const MUELL_EINTRAEGE = { "Restmüll": 'vis.muell.restmuell', "Papiertonne": 'vis.muell.papier', "Bioabfall": 'vis.muell.bioabfall', "Gelber Sack": 'vis.muell.gelbersack' }; ! debug = false; Object.keys(MUELL_EINTRAEGE).forEach(key => { createState(MUELL_EINTRAEGE[key], -1); }) ! function muell() { const contentString = readHTML(); if (debug) log(contentString); ! const dateRegExp = /[0-9]{2}.[0-9]{2}.[0-9]{4}/g; const rangeRegExp = /In [0-9] Tagen/g; const todayRegExp = /Heute/g; const tomorrowRegExp = /Morgen/g; const dayAfterTomorrowRegExp = /Übermorgen/g; ! Object.keys(MUELL_EINTRAEGE).forEach(eintrag => { if (debug) log("eintrag: " + eintrag); // Position bestimmen const pos = contentString.indexOf(eintrag, 1); if (debug) log("pos: " + pos); ! // Check Datum const date = contentString.substring((pos - 13), pos - 3); const range = contentString.substring((pos - 13), pos - 3); const today = contentString.substring((pos - 8), pos - 3); const tomorrow = contentString.substring((pos - 9), pos - 3); const dayAfterTomorrow = contentString.substring((pos - 13), pos - 3); if (dateRegExp.test(date)) { if (debug) log("datum ist: ---" + date + "---"); var newDateRegExp = /(\d{2}).(\d{2}).(\d{4})/; var dayArray = newDateRegExp.exec(date); const dateObj = new Date( (dayArray[3]), (dayArray[2]) - 1, (dayArray[1]) ); setState(MUELL_EINTRAEGE[eintrag], Math.ceil(((dateObj - new Date()) / (1000 * 60 * 60 * 24)))); } else if (rangeRegExp.test(range)) { if (debug) log("range ist: ---" + range + "---"); setState(MUELL_EINTRAEGE[eintrag], Number(range.substring(3, 4))); } else if (todayRegExp.test(today)) { if (debug) log("today ist: ---" + today + "---"); setState(MUELL_EINTRAEGE[eintrag], 0); } else if (tomorrowRegExp.test(tomorrow)) { if (debug) log("tomorrow ist: ---" + tomorrow + "---"); setState(MUELL_EINTRAEGE[eintrag], 1); } else if (dayAfterTomorrowRegExp.test(dayAfterTomorrow)) { if (debug) log("dayAfterTomorrow ist: ---" + dayAfterTomorrow + "---"); setState(MUELL_EINTRAEGE[eintrag], 2); } }); } ! function readHTML() { var contentString = getState(MUELL_KALENDER).val.toString(); // remove all inside SCRIPT and STYLE tags contentString = contentString.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, ""); contentString = contentString.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, ""); // remove BR tags contentString = contentString.replace(/ /gi, ""); contentString = contentString.replace(/<br\s\>/gi, ""); contentString = contentString.replace(/<br\>/gi, ""); // remove all else contentString = contentString.replace(/<(?:.|\s)*?>/g, ""); // get rid of html-encoded characters: contentString = contentString.replace(/ /gi, " "); contentString = contentString.replace(/&/gi, "&"); contentString = contentString.replace(/"/gi, '"'); contentString = contentString.replace(/</gi, '<'); contentString = contentString.replace(/>/gi, '>'); return contentString } ! schedule('10 0 * * *', () => muell()); muell();</br\></br\s\></style.*></script.*> `

vielen Dank. Das schaue ich mir an, um wieder was zu lernen. Sieht für mich so aus, als hättest du insbesondere den Teil des Datumsvergleichs eleganter gelöst, einiges andere scheint ja entsprechend zu sein. Schöne Sache, mit dem Thema Datumsvergleich kannte / kenne ich mich nicht aus, werds mir genauer ansehen `

Ja den Datumsvergleich habe ich etwas vereinfacht

Außerdem hatte das alte Script einen Fehler, es wurde nicht auf "In X Tage" geprüft.

Außerdem erzeugt das Script nun States mit den verbleibenden Tagen und nicht nur ein JSON Object

[tempestas]

> Außerdem hatte das alte Script einen Fehler, es wurde nicht auf "In X Tage" geprüft.

Du meinst die Date to Text Sache? Ja die wurde in der Tat nicht berücksichtigt, stand originär auch immer dabei, dass es nicht mit "Ersetze mit Worten" geht. Ein Fehler war das nicht, aber wohl eine Einschränkung.

Ist j auch egal, fest steht, deine Version ist deutlich eleganter als meine… aber ich bin ja auch nur interessierter Laie

[tempestas]

Hi,

ich habe dein Skript mal ausprobiert.

Kann es sein, dass es Probleme gibt, wenn das Jahr größer ist, als das aktuelle?

3 von 4 Müllsorten funktionieren, bei der Papiertonne, die als einzige erst wieder im neuen Jahr abgeholt wird, liest er das Datum nicht aus und gibt dann als Wert -1 aus.

[sigi234]

Ist bei mir leider auch so….........bzw.Papier wird nicht eingelesen.

[gimix]

@Annuit20:

So anbei das Projekt. Wenn jemand was kritisches findet was nicht im Netz stehen sollte wäre ich über einen Hinweis dankbar.

@JB_Sullivan: Das sind Zähler der noch verbleibenden Tage bis zum Abholtag. Ist von jemand aus dem Forum.2018-12-07-Forum.zip `

Hi wenn ich das importiere kommt nur die Demoview. Was mach ich falsch? Beim ersten laden kam auch ne Fehlermeldung dass er irgendwas nicht öffnen konnte bzw, nicht existiert.

Bin nur in VIS EDIT rein und dann auf Projekete, importieren dann die ZIP Datei ausgewählt.

[sigi234]

Hast du unten das Projekt auch benannt?

[gimix]

Ja „Forum“ stand da standardmässig.

Wollte eig nur die Symbole. Hab metro installiert da sind aber nur paar Symbole.

[sigi234]

Benenne es mal um

[gimix]

Kommt erneut die Fehlermeldung

„Forum3/vis-views.json Not exists“

[sigi234]

ZIP neu runterladen, oder die ZIP ist defekt….....

[sigi234]

Ich sende dir mal eine Material Design ZIP, die sollte funktionieren…...teste die mal.

2858_md_simple.zip