Autor Thema: widget_weatherdetail.js  (Gelesen 2040 mal)

Offline Bruchbude

  • New Member
  • *
  • Beiträge: 24
widget_weatherdetail.js
« am: 01 August 2018, 23:57:25 »
main mädels,
hatte gemerkt das die bestehenden widgets unbrauchbar für meine vorstellung von wettervorhersagen sind.
ich habe mir jetzt selbst was gebastelt wobei ich nicht weiss ob das ftui konform ist, da ich enweder keine infos finde oder es keine infos gibt.
habe, open source sei dank, was in dem quellcode gefunden was meine vorhersage jetzt statt in ca 40sek (weatherwidget) in ca 2sek aufbaut.
sieht so aus:
(https://ibb.co/dHkktz)

nutzt proplanta (mit patch für 3h genauigkeit) und kleinklima icons.
macht (noch) nix anderes. also nicht mehr/weniger tage. nicht mehr/weniger details
besteht interesse an sowas?






Online gloob

  • Hero Member
  • *****
  • Beiträge: 2179
Antw:widget_weatherdetail.js
« Antwort #1 am: 02 August 2018, 07:26:01 »
Aber natürlich besteht Interesse. Es ist immer gut auch mal neue Dinge auszuprobieren.

In mein FTUI würde es wunderbar rein passen und ich würde es gerne testen.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Offline Bruchbude

  • New Member
  • *
  • Beiträge: 24
Antw:widget_weatherdetail.js
« Antwort #2 am: 02 August 2018, 13:50:45 »
proplanta muss so gepatched werden: https://forum.fhem.de/index.php/topic,89499.0.html
falls es der patch nicht in die offizielle proplanta version schafft werde ich auf ein anderes wetter device umstellen.
ist sonst zu blöd nach jedem update wieder zu basteln.

ansonsten braucht es noch ne .css um die tabs zu stylen
und natürlich den aufruf in der .html datei (die aufruf parameter werden sich noch ändern)

habe mal alle dateien in den anhang gepackt.
aus der .html einfach den aufruf kopieren und ins eigene projekt einfügen.

todo:
- code aufräumen
- parameter: icons statt bilder in der tabelle
- windrichtungs icons

falls jemand das teil adoptieren möchte: immer gerne!
ich habe das nur aus der not heraus zusammengebaut und werde mich nicht in einem versionierungssystem anmelden,
da ich arbeitstechnisch bedingt kurzfristig für längere zeit auf montage sein kann.
im forum änderungen posten ok, aber für alles "offizielle" kann ich leider nicht genug zeit aufbringen


Offline Bruchbude

  • New Member
  • *
  • Beiträge: 24
Antw:widget_weatherdetail.js
« Antwort #3 am: 02 August 2018, 23:54:51 »
- habe jetzt den parameter "icons" eingebaut (zeigt in der tabelle meteocons statt kleinklima an) und den code ein wenig aufgeräumt
- tupol hat das proplanta device für die 3h auflösung erweitert
// widget_weatherdetail.js
//-------------------------------------------------------------------
//-------------------------------------------------------------------
// 2018-08-01 initial version
// 2018-08-02 cosmetics, added icon option

"use strict";
var strDaten = " STATE longpoll lastConnection ";
var iconArray = [ // [meteocons, kleinklima]
['B', 'sunny.png'], //t1
['H', 'partly_cloudy.png'], //t2
['H', 'partly_cloudy.png'], //t3
['N', 'mostlycloudy.png'], //t4
['Y', 'cloudy.png'], //t5
['Q', 'chance_of_rain.png'], //t6
['R', 'showers.png'], //t7
['S', 'chance_of_storm.png'], //t8
['U', 'chance_of_snow.png'], //t9
['V', 'rainsnow.png'], //t10
['W', 'snow.png'], //t11
['L', 'haze.png'], //t12 (Dunst)
['L', 'haze.png'], //t13
['R', 'rain.png'], //t14
['C', 'sunny_night.png'], //n1
['I', 'partlycloudy_night.png'], //n2
['I', 'partlycloudy_night.png'], //n3
['N', 'mostlycloudy_night.png'], //n4
['Y', 'overcast.png'], //n5 (Bedeckt)
['Q', 'chance_of_rain_night.png'], //n6
['R', 'showers_night.png'], //n7
['S', 'chance_of_storm_night.png'], //n8
['U', 'sleet.png'], //n9 (Graupel)
['V', 'rainsnow.png'], //n10
['W', 'snow.png'], //n11
['L', 'haze_night.png'], //n12
['L', 'haze_night.png'], //n13
['R', 'rain.png'], //n14
];

function toStr2(integer) {
return String("00" + integer).slice(-2);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Convert filename of proplanta icon to our loacal pictures filename
// Picture path must be added by caller
// (Proplanta filenames: t1.gif ... t14.gif and n1.gif ... n14.gif)
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getImgFilename(iconFilename, usePNG) {
var start = iconFilename.lastIndexOf("/") + 1; // end of filename-path
var stop = iconFilename.length - 4; // ".png"
var daytime = iconFilename.substring(start, start + 1);
var iconNr = (parseInt(iconFilename.substring(start + 1, stop)) - 1) >>> 0; // ">>>0" makes iconNr unsigned
if (daytime == 'n') {
iconNr += 14;
}
if (iconNr >= 28) {
return "na.png";
}
return (usePNG ? iconArray[iconNr][1] : iconArray[iconNr][0])
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// If we want to see the weather icons, we must add the .css file
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function depends_weatherdetail() {
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/weather-icons.min.css" type="text/css" />');
}

var Modul_weatherdetail = function() {
function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
// We can can more then one widget_uwz, so init all of them
me.elements.each(function(index) {
var elem = $(this);
elem.initData('device', "noWFineDeviceDefined");
elem.initData('detail', ["clock", "chOfRain", "rain", "temp", "weather"]);
elem.initData('lastConnection', 'lastConnection');
me.addReading(elem, "lastConnection"); // if this value changes, update() is called.
});
// build a string with all keywords we want to receive from the fhem weather device
for (var day = 0; day < 4; day++) { // forecast: 4 days
strDaten += "fc" + day + "_date ";
strDaten += "fc" + day + "_weatherDayIcon ";
strDaten += "fc" + day + "_tempMin ";
strDaten += "fc" + day + "_tempMax ";
for (var hour = 0; hour < 24; hour += 3) { // resolution: 3h
strDaten += "fc" + day + "_weather" + toStr2(hour) + "Icon ";
strDaten += "fc" + day + "_temp" + toStr2(hour) + " ";
strDaten += "fc" + day + "_rain" + toStr2(hour) + " ";
strDaten += "fc" + day + "_wind" + toStr2(hour) + " ";
strDaten += "fc" + day + "_chOfRain" + toStr2(hour) + " ";
}
}
}

function addTab(tabDay, res, pathImage) {
var datum = res.Readings['fc' + tabDay + '_date'].Value
var myHtml = "<button id='tabId" + tabDay + "' class='cell-25 white tablinks' onclick=\"wtabClicked('" + tabDay + "')\">"
myHtml += "<div class='big compressed'>" + datum + "</div>"
myHtml += "<div class='large gray'>" + (!tabDay ? 'Heute' : datum.toDate().ee()) + "</div>"
var imgFile = getImgFilename(res.Readings['fc' + tabDay + '_weatherDayIcon'].Value, true);
myHtml += "<img style='width:100%' src='" + pathImage + imgFile + "'/>"
myHtml += "<div class='bigger inline blue weatherValue'>" + res.Readings['fc' + tabDay + '_tempMin'].Value + "</div>"
myHtml += "<div class='normal inline blue weatherUnit'>°C</div>"
myHtml += "<div class='bigger inline orange weatherValue'>" + res.Readings['fc' + tabDay + '_tempMax'].Value + "</div>"
myHtml += "<div class='normal inline orange weatherUnit'>°C</div>"
myHtml += "<div class='tiny'><br></div></button>"
return myHtml;
}

function addWeatherRow(elem, res, token, name, icon, unit) {
const colsPerDay = 8;
if (!elem.data('detail').includes(name)) return "";
var myHtml = "<div class='row'><div class='cell large gray " + icon + "'></div>"
for (var i = 0; i < colsPerDay; i++) {
myHtml += "<div class='cell-12'>"
if (name == 'weather') {
if (elem.data('detail').includes('icons')) {
var icon = getImgFilename(res.Readings['fc' + token + '_weather' + toStr2(i * 3) + 'Icon'].Value, false);
myHtml+= "<div class='weather'><div class='weather-icon meteocons' data-icon='" + icon + "'></div></div>"
} else {
const pathImage = ftui.config.fhemDir + "images/default/weather/";
var imgFile = pathImage + getImgFilename(res.Readings['fc' + token + '_weather' + toStr2(i * 3) + 'Icon'].Value, true);
myHtml+= "<img style='width:100%' src='" + imgFile + "'/>"
}
} else {
var val = (token == '' ? toStr2(i * 3) : res.Readings[token + toStr2(i * 3)].Value);
myHtml += "<div class='inline " + (val.length > 4 ? 'normal' : 'big') + " weatherValue'>" + val;
myHtml += "</div><div class='inline small weatherValue'>" + unit + "</div>";
}
myHtml += "</div>"
}
myHtml += "</div>"
return myHtml;
}

function update(device, reading) {
// we need only updates for our device, so filter out all other widgets
me.elements.filter('div[data-device="' + device + '"]').each(function(index) {
const pathImage = ftui.config.fhemDir + "images/default/weather/";
var elem = $(this);
var myHtml = "<div class='tab'>";
var fhemJSON = ftui.sendFhemCommand("jsonlist2 WEB," + device + strDaten).done(function(fhemJSON) {
var res = fhemJSON.Results[1]; // 0 = Arg, 1 =Results
for (var i = 0; i < 4; i++) myHtml += addTab(i, res, pathImage);
myHtml += "</div><class='weather-icon'></div><br>";
for (var day = 0; day < 4; day++) {
myHtml += "<div id='conId" + day + "' class='sheet tabContent' style='display:none;'>";
myHtml += addWeatherRow(elem, res, '', 'clock', 'wi wi-time-4', 'Uhr');
myHtml += addWeatherRow(elem, res, day, 'weather', 'wi wi-cloud');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_temp', 'temp', 'wi wi-thermometer', '&deg;C');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_chOfRain', 'chOfRain', 'wi wi-umbrella', '%');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_rain', 'rain', 'wi wi-raindrops', 'mm');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_wind', 'wind', 'wi wi-small-craft-advisory', 'mm');
myHtml += "</div>"
}
myHtml += "<script>"
myHtml += "function wtabClicked(actTab){"
myHtml += "var tabs = document.getElementsByClassName('tablinks');"
myHtml += "var cont = document.getElementsByClassName('tabContent');"
myHtml += "for (var i=0; i< tabs.length; i++){ "
myHtml += "  tabs[i].className = tabs[i].className.replace(' active','');"
myHtml += "  cont[i].style.display='none';   };"
myHtml += "document.getElementById('tabId'+actTab).className+= ' active';"
myHtml += "document.getElementById('conId'+actTab).style.display='block';"
myHtml += "};"
myHtml += "document.getElementById('tabId0').click();" // default: weather of today is selected
myHtml += "</script>"
elem.html(myHtml);
});
//extra reading for hide
me.update_hide(device, reading);
});
};
// public
// inherit all public members from base class
var me = $.extend(new Modul_widget(), {
//override or own public members
widgetname: 'weatherdetail',
init: init,
update: update,
});
return me;
};

Offline Bruchbude

  • New Member
  • *
  • Beiträge: 24
Antw:widget_weatherdetail.js
« Antwort #4 am: 03 August 2018, 18:06:54 »
alle funktionen die ich brauch sind drin:

(https://image.ibb.co/bTGT0e/Unbenannt1.png)

/* FTUI Plugin
 * Copyright (c) 2018 by Bruchbude
 * Under MIT License (http://www.opensource.org/licenses/mit.license.php)
 */
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// widget_weatherdetail.js
// shows a 4 days detailed weather forcast based on proplanta data.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// [choose your table details (case sensitive)]
// clock:    shows the time
// chOfRain: shows the chance of rain in %
// rain:     shows the rain in mm
// temp:     shows the temperature in °C
// weather:  shows png pictures of the weather
// icons:    shows icons of the weather (replacing the png pictures)
// wind:     shows the speed of wind in km/h
// windDir:  shows the winddirection and speed (without unit)
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// [Example html]
// <div class="cell" data-type="weatherdetail" data-device="Proplanta" data-detail='["clock","chOfRain","rain","temp","weather","wind","windDir","icons"]'</div>
// [Example fhem-tablet-ui-user.css]
// <todo>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 2018-08-03 updgrade from pre alpha to alpha

"use strict";
var strDaten = " STATE longpoll lastConnection ";
var windArray = ["wi-from-n","wi-from-nne","wi-from-ne","wi-from-ene","wi-from-e","wi-from-ese","wi-from-se","wi-from-sse",
"wi-from-s","wi-from-ssw","wi-from-sw","wi-from-wsw","wi-from-w","wi-from-wnw","wi-from-nw","wi-from-nnw"];
var iconArray = [ // [meteocons, kleinklima]
['B', 'sunny.png'], //t1
['H', 'partly_cloudy.png'], //t2
['H', 'partly_cloudy.png'], //t3
['N', 'mostlycloudy.png'], //t4
['Y', 'cloudy.png'], //t5
['Q', 'chance_of_rain.png'], //t6
['R', 'showers.png'], //t7
['S', 'chance_of_storm.png'], //t8
['U', 'chance_of_snow.png'], //t9
['V', 'rainsnow.png'], //t10
['W', 'snow.png'], //t11
['L', 'haze.png'], //t12 (Dunst)
['L', 'haze.png'], //t13
['R', 'rain.png'], //t14
['C', 'sunny_night.png'], //n1
['I', 'partlycloudy_night.png'], //n2
['I', 'partlycloudy_night.png'], //n3
['N', 'mostlycloudy_night.png'], //n4
['Y', 'overcast.png'], //n5 (Bedeckt)
['Q', 'chance_of_rain_night.png'], //n6
['R', 'showers_night.png'], //n7
['S', 'chance_of_storm_night.png'], //n8
['U', 'sleet.png'], //n9 (Graupel)
['V', 'rainsnow.png'], //n10
['W', 'snow.png'], //n11
['L', 'haze_night.png'], //n12
['L', 'haze_night.png'], //n13
['R', 'rain.png'], //n14
];

function toStr2(integer) {
return String("00" + integer).slice(-2);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Convert filename of proplanta icon to our loacal pictures filename
// Picture path must be added by caller
// (Proplanta filenames: t1.gif ... t14.gif and n1.gif ... n14.gif)
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getImgFilename(iconFilename, usePNG) {
var start = iconFilename.lastIndexOf("/") + 1; // end of filename-path
var stop = iconFilename.length - 4; // ".png"
var daytime = iconFilename.substring(start, start + 1);
var iconNr = (parseInt(iconFilename.substring(start + 1, stop)) - 1) >>> 0; // ">>>0" makes iconNr unsigned
if (daytime == 'n') {
iconNr += 14;
}
if (iconNr >= 28) {
return "na.png";
}
return (usePNG ? iconArray[iconNr][1] : iconArray[iconNr][0])
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// If we want to see the weather icons, we must add the .css file
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function depends_weatherdetail() {
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/weather-icons.min.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/weather-icons-wind.min.css" type="text/css" />');
}

var Modul_weatherdetail = function() {
function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
// We can can more then one widget, so init all of them
me.elements.each(function(index) {
var elem = $(this);
elem.initData('device', "noWFineDeviceDefined");
elem.initData('detail', ["clock", "chOfRain", "rain", "wind", "windDir", "temp", "weather"]);
elem.initData('lastConnection', 'lastConnection');
me.addReading(elem, "lastConnection"); // if this value changes, update() is called.
// build a string with all keywords we want to receive from the fhem weather device
for (var day = 0; day < 4; day++) { // forecast: 4 days
strDaten += "fc" + day + "_date ";
strDaten += "fc" + day + "_weatherDayIcon ";
strDaten += "fc" + day + "_tempMin ";
strDaten += "fc" + day + "_tempMax ";
for (var hour = 0; hour < 24; hour += 3) { // resolution: 3h
strDaten += "fc" + day + "_weather" + toStr2(hour) + "Icon ";
if (elem.data('detail').includes('temp')) strDaten += "fc" + day + "_temp" + toStr2(hour) + " ";
if (elem.data('detail').includes('rain')) strDaten += "fc" + day + "_rain" + toStr2(hour) + " ";
if (elem.data('detail').includes('wind') || (elem.data('detail').includes('windDir'))) strDaten += "fc" + day + "_wind" + toStr2(hour) + " ";
if (elem.data('detail').includes('windDir')) strDaten += "fc" + day + "_windDir" + toStr2(hour) + " ";
if (elem.data('detail').includes('chOfRain')) strDaten += "fc" + day + "_chOfRain" + toStr2(hour) + " ";
}
}
});
}

function addTab(tabDay, res, pathImage) {
var datum = res.Readings['fc' + tabDay + '_date'].Value
var myHtml = "<button id='tabId" + tabDay + "' class='cell-25 white tablinks' onclick=\"wtabClicked('" + tabDay + "')\">"
myHtml += "<div class='big compressed'>" + datum + "</div>"
myHtml += "<div class='large gray'>" + (!tabDay ? 'Heute' : datum.toDate().ee()) + "</div>"
var imgFile = getImgFilename(res.Readings['fc' + tabDay + '_weatherDayIcon'].Value, true);
myHtml += "<img style='width:100%' src='" + pathImage + imgFile + "'/>"
myHtml += "<div class='bigger inline blue weatherValue'>" + res.Readings['fc' + tabDay + '_tempMin'].Value + "</div>"
myHtml += "<div class='normal inline blue weatherUnit'>°C</div>"
myHtml += "<div class='bigger inline orange weatherValue'>" + res.Readings['fc' + tabDay + '_tempMax'].Value + "</div>"
myHtml += "<div class='normal inline orange weatherUnit'>°C</div>"
myHtml += "<div class='tiny'><br></div></button>"
return myHtml;
}

function addWeatherRow(elem, res, token, name, icon, unit) {
const colsPerDay = 8;
if (!elem.data('detail').includes(name)) return "";
var myHtml = "<div class='row'><div class='cell large gray " + icon + "'></div>"
for (var i = 0; i < colsPerDay; i++) {
myHtml += "<div class='cell-12'>"
if (name == 'weather') {
if (elem.data('detail').includes('icons')) {
var icon = getImgFilename(res.Readings['fc' + token + '_weather' + toStr2(i * 3) + 'Icon'].Value, false);
myHtml += "<div class='weather'><div class='weather-icon meteocons' data-icon='" + icon + "'></div></div>"
} else {
const pathImage = ftui.config.fhemDir + "images/default/weather/";
var imgFile = pathImage + getImgFilename(res.Readings['fc' + token + '_weather' + toStr2(i * 3) + 'Icon'].Value, true);
myHtml += "<img style='width:100%' src='" + imgFile + "'/>"
}
} else if (name=='windDir') {
var deg = res.Readings[token + toStr2(i * 3)].Value;
myHtml += "<div class='inline large wi wi-wind " + windArray[Math.floor(deg / 22.5)] + "'></div>" ;
var val = res.Readings[unit + toStr2(i * 3)].Value;
myHtml += "<div class='inline "  + (val.length > 4 ? 'normal' : 'big') + "'>" + val+ "</div>" ;
} else {
var val = (token == '' ? toStr2(i * 3) : res.Readings[token + toStr2(i * 3)].Value);
myHtml += "<div class='inline " + (val.length > 4 ? 'normal' : 'big') + " weatherValue'>" + val;
myHtml += "</div><div class='inline small weatherValue'>" + unit + "</div>";
}
myHtml += "</div>"
}
myHtml += "</div>"
return myHtml;
}

function update(device, reading) {
// we need only updates for our device, so filter out all other widgets
me.elements.filter('div[data-device="' + device + '"]').each(function(index) {
const pathImage = ftui.config.fhemDir + "images/default/weather/";
var elem = $(this);
var myHtml = "<div class='tab'>";
var fhemJSON = ftui.sendFhemCommand("jsonlist2 WEB," + device + strDaten).done(function(fhemJSON) {
var res = fhemJSON.Results[1]; // 0 = Arg, 1 =Results
for (var i = 0; i < 4; i++) myHtml += addTab(i, res, pathImage);
myHtml += "</div><class='weather-icon' style='cursor:default'></div><br>";
for (var day = 0; day < 4; day++) {
myHtml += "<div id='conId" + day + "' class='sheet tabContent' style='display:none;'>";
myHtml += addWeatherRow(elem, res, '', 'clock', 'wi wi-time-4', 'Uhr');
myHtml += addWeatherRow(elem, res, day, 'weather', 'wi wi-cloud');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_temp', 'temp', 'wi wi-thermometer', '&deg;C');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_chOfRain', 'chOfRain', 'wi wi-umbrella', '%');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_rain', 'rain', 'wi wi-raindrops', 'mm');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_wind', 'wind', 'wi wi-small-craft-advisory', 'km/h');
myHtml += addWeatherRow(elem, res, 'fc' + day + '_windDir', 'windDir', 'wi wi-small-craft-advisory', 'fc' + day +'_wind');
myHtml += "</div>"
}
myHtml += "<script>"
myHtml += "function wtabClicked(actTab){"
myHtml += "var tabs = document.getElementsByClassName('tablinks');"
myHtml += "var cont = document.getElementsByClassName('tabContent');"
myHtml += "for (var i=0; i< tabs.length; i++){ "
myHtml += "  tabs[i].className = tabs[i].className.replace(' active','');"
myHtml += "  cont[i].style.display='none';   };"
myHtml += "document.getElementById('tabId'+actTab).className+= ' active';"
myHtml += "document.getElementById('conId'+actTab).style.display='block';"
myHtml += "};"
myHtml += "document.getElementById('tabId0').click();" // default: weather of today is selected
myHtml += "</script>"
elem.html(myHtml);
});
//extra reading for hide
me.update_hide(device, reading);
});
};
// public
// inherit all public members from base class
var me = $.extend(new Modul_widget(), {
//override or own public members
widgetname: 'weatherdetail',
init: init,
update: update,
});
return me;
};

beispiel css:
.tab {
    overflow: hidden;
}

.tab button {
    float: left;
    border: none;
    cursor: pointer;
    background-color: #2a2a2a;
    border-color: #eee;
    border-width: 1px;
    border-style: none none solid none;
}

/* Maus über dem Tab */
.tab button:hover {
    background-color: #444;
}

/* Aktiver Tab */
.tab button.active {
    border-width: 1px;
    border-style: solid solid none solid;
    border-radius: 15px 15px 0px 0px;
    border-color: #eee;
}

/* Inhalt des Tabulators */
.tabcontent {
    display: none;
}

.weatherValue{
    margin-right: 3px  !important;
}

.weatherUnit{
}
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline stenny

  • Jr. Member
  • **
  • Beiträge: 77
Antw:widget_weatherdetail.js
« Antwort #5 am: 10 August 2018, 15:27:45 »
Hallo

Habe es gerade ausprobiert per HTML in einem FUIP zu nutzen....
Klappt nicht sauber
<div data-type="weatherdetail"
data-device="AgroWeather">
</div>
Welche Parameter sind möglich/vorhanden?

Gruß
Carsten

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #6 am: 10 August 2018, 16:09:28 »
Habe es gerade ausprobiert per HTML in einem FUIP zu nutzen....
Klappt nicht sauber
Hast Du mal ausprobiert, wie es aussieht, wenn Du das Attribut locked auf 1 setzt? Möglicherweise stört da irgendwas...
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline stenny

  • Jr. Member
  • **
  • Beiträge: 77
Antw:widget_weatherdetail.js
« Antwort #7 am: 10 August 2018, 16:11:32 »
Hast Du mal ausprobiert, wie es aussieht, wenn Du das Attribut locked auf 1 setzt? Möglicherweise stört da irgendwas...
Gruß,
   Thorsten

Hallo Thorsten

Hatte ich natürlich NICHT ausprobiert - jedoch hat es keine Auswirkung

Gruß Carsten

Offline Bruchbude

  • New Member
  • *
  • Beiträge: 24
Antw:widget_weatherdetail.js
« Antwort #8 am: 11 August 2018, 21:46:02 »
hiho,
wollte eigentlich schon lange im wiki alles erklärt haben, aber mein arbeitgeber war der meinung es gibt wichtigeres für mich zu tun :(
probier mal diese testseite...
das css zeugs habe ich nur mal für den test reingetan, ist mei mir in fhem-tablet-ui-user.css

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.tab {
    overflow: hidden;
}

.tab button {
    float: left;
    border: none;
    cursor: pointer;
    background-color: #2a2a2a;
    border-color: #eee;
    border-width: 1px;
    border-style: none none solid none;
}

.tab button:hover {
    background-color: #444;
}

.tab button.active {
    border-width: 1px;
    border-style: solid solid none solid;
    border-radius: 15px 15px 0px 0px;
    border-color: #eee;
}

.tabcontent {
    display: none;
}

.weatherValue{
    margin-right: 3px  !important;
}

.weatherUnit{
}

</style>
</head>
<body>
<div class="gridster">
<meta content="1" name="widget_margin">
<ul>
<li data-col="2" data-row="1" data-sizex="5" data-sizey="4">
<div class="cell big">Wettervorschau</div>
<div class="cell" data-type="weatherdetail" data-device="Proplanta" data-detail='["clock","chOfRain","rain","temp","weather","wind"]'</div>
</li>
</ul>
</body>
</html>

Offline stenny

  • Jr. Member
  • **
  • Beiträge: 77
Antw:widget_weatherdetail.js
« Antwort #9 am: 12 August 2018, 11:32:15 »
hiho,
wollte eigentlich schon lange im wiki alles erklärt haben, aber mein arbeitgeber war der meinung es gibt wichtigeres für mich zu tun :(
probier mal diese testseite...
das css zeugs habe ich nur mal für den test reingetan, ist mei mir in fhem-tablet-ui-user.css

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.tab {
    overflow: hidden;
}

.tab button {
    float: left;
    border: none;
    cursor: pointer;
    background-color: #2a2a2a;
    border-color: #eee;
    border-width: 1px;
    border-style: none none solid none;
}

.tab button:hover {
    background-color: #444;
}

.tab button.active {
    border-width: 1px;
    border-style: solid solid none solid;
    border-radius: 15px 15px 0px 0px;
    border-color: #eee;
}

.tabcontent {
    display: none;
}

.weatherValue{
    margin-right: 3px  !important;
}

.weatherUnit{
}

</style>
</head>
<body>
<div class="gridster">
<meta content="1" name="widget_margin">
<ul>
<li data-col="2" data-row="1" data-sizex="5" data-sizey="4">
<div class="cell big">Wettervorschau</div>
<div class="cell" data-type="weatherdetail" data-device="Proplanta" data-detail='["clock","chOfRain","rain","temp","weather","wind"]'</div>
</li>
</ul>
</body>
</html>

Hallo

Danke für deine Antwort und Vorlage.
Habe Sie für meine Bedürfnisse leicht aufgekürzt.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.tab {
    overflow: hidden;
}

.tab button {
    float: left;
    border: none;
    cursor: pointer;
    background-color: #2a2a2a;
    border-color: #eee;
    border-width: 1px;
    border-style: none none solid none;
}

.tab button:hover {
    background-color: #444;
}

.tab button.active {
    border-width: 1px;
    border-style: solid solid none solid;
    border-radius: 15px 15px 0px 0px;
    border-color: #eee;
}

.tabcontent {
    display: none;
}

.weatherValue{
    margin-right: 3px  !important;
}

.weatherUnit{
}

</style>
</head>
<body>
<meta content="1" name="widget_margin">
<ul>
<li data-col="1" data-row="1" data-sizex="4" data-sizey="4">
<div class="cell" data-type="weatherdetail" data-device="AgroWeather" data-detail='["clock","chOfRain","rain","temp","weather","wind"]'</div>
</li>
</ul>
</body>
</html>

Gruß
Carsten

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #10 am: 16 September 2018, 22:09:28 »
Hi,
ich habe das jetzt mal in FUIP eingebaut. Da es bisher keine "richtige" Auslieferung für widget_weatherdetail.js (etc.) gibt, habe ich es in das FUIP-Repo mit reingepackt. Die Dateien liegen im FUIP-Verzeichnis und sind daher vom "normalen" FTUI wahrscheinlich nicht erreichbar.
Außerdem habe ich ein paar Kleinigkeiten geändert, wie z.B. das css ein bisschen angepasst, so dass die Tabs jetzt etwas besser aussehen (meiner Meinung nach, siehe Anhang).
Ich habe da selbst noch ein paar "Änderungswünsche", aber vielleicht will es jemand ja mal ausprobieren.
Feedback wie immer erwünscht.
Gruß,
   Thorsten
 
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline stenny

  • Jr. Member
  • **
  • Beiträge: 77
Antw:widget_weatherdetail.js
« Antwort #11 am: 16 September 2018, 22:53:15 »
Hallo Thorsten

Gerade mal ausprobiert......
Funktioniert gut

Vielleicht kannst es noch in der Größe anpassbar machen (data-sizex/Data-sizey)


Gruß
Carsten


Gesendet von iPad mit Tapatalk

Offline TNT0068

  • Full Member
  • ***
  • Beiträge: 120
Antw:widget_weatherdetail.js
« Antwort #12 am: 17 September 2018, 12:38:09 »
Man du kannst gedanken lesen. Ich hatte schon angefangen über HTML(FTUI) einzubinden. Hat sich somit erledigt.

Ich würde das gerne ohne den unteren Teil Uhrzeiten haben. Ist das möglich ? Leider bin ich gerade unterwegs und kann es nicht testen


Danke für die Erweiterung
Homematic HMLAN HMUSB Heizung, Strom und Licht , Vuduo2, Kodi, Hue, Logitech Harmony Hub, Alexa

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #13 am: 17 September 2018, 14:43:04 »
Vielleicht kannst es noch in der Größe anpassbar machen (data-sizex/Data-sizey)
Das widget_weatherdetail.js hat sowas meiner Meinung nach nicht. Allerdings scheint es sich an den Container anzupassen, in dem es liegt. Bei FUIP heißt das momentan, dass es eine fixe Größe hat. Ich hatte eine Weile damit herumgespielt und ich denke mal, dass es kleiner nicht wirklich geht und größer auch nicht so sinnvoll ist.
Was würdest Du Dir denn genau davon erwarten?

Ich würde das gerne ohne den unteren Teil Uhrzeiten haben. Ist das möglich ? Leider bin ich gerade unterwegs und kann es nicht testen
Man kann den unteren Teil konfigurieren. Probier's einfach mal aus und melde Dich dann wieder...

Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #14 am: 17 September 2018, 15:53:03 »
Hi,
ich habe jetzt doch noch was zur Größe des Views gemacht. Im Config-Popup kann man das Feld "width" auf "auto" stellen. Dann nimmt das Ding automatisch die maximal mögliche Breite ein. D.h. wenn man die Größe der Zelle ändert, dann geht das WeatherDetail mit. Das geht auch auf Popups.

Btw.: Das widget_weatherdetail ist nicht so richtig Instanzen-fähig. D.h. man sollte auf einer Seite (inklusive Popups) momentan immer nur maximal eins davon haben.

Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline Esjay

  • Sr. Member
  • ****
  • Beiträge: 810
Antw:widget_weatherdetail.js
« Antwort #15 am: 17 September 2018, 16:55:03 »
Moin Thorsten,
bei mir funktioniert die Einbindung nicht. Screenshot im Anhang!
Update wurde korrekt durchgeführt.

Was mir ebenfalls aufgefallen ist,dass das Bild von FUIP::View::WeatherDetail in den View Types nicht angezeigt wird.
Wird ein bestimmtes Device benötigt um die Anzeige zu gewehrleisten?

List vom Weather Device

Internals:
   API        YahooWeatherAPI
   APIOPTIONS transport:https,cachemaxage:600
   DEF        20xxxxx00 de
   INTERVAL   600
   LANG       de
   LOCATION   20xxxx0
   NAME       Wetter_WWW
   NOTIFYDEV  global
   NR         81
   NTFY_ORDER 50-Wetter_WWW
   STATE      T: 22  H: 50  W: 14  P: 1018
   TYPE       Weather
   UNITS      c
   READINGS:
     2018-09-17 16:49:28   city            xxxx
     2018-09-17 16:49:28   code            26
     2018-09-17 16:49:28   condition       wolkig
     2018-09-17 16:49:28   country         Germany
     2018-09-17 16:49:28   current_date_time Mon, 17 Sep 2018 04:00 PM CEST
     2018-09-17 16:49:28   day_of_week     Mo
     2018-09-17 16:49:28   description     Yahoo! Weather for xxxxxx, NI, DE
     2018-09-17 16:49:28   fc10_code       30
     2018-09-17 16:49:28   fc10_condition  teilweise wolkig
     2018-09-17 16:49:28   fc10_date       26 Sep 2018
     2018-09-17 16:49:28   fc10_day_of_week Mi
     2018-09-17 16:49:28   fc10_high_c     15
     2018-09-17 16:49:28   fc10_icon       partly_cloudy
     2018-09-17 16:49:28   fc10_low_c      8
     2018-09-17 16:49:28   fc1_code        28
     2018-09-17 16:49:28   fc1_condition   überwiegend wolkig
     2018-09-17 16:49:28   fc1_date        17 Sep 2018
     2018-09-17 16:49:28   fc1_day_of_week Mo
     2018-09-17 16:49:28   fc1_high_c      22
     2018-09-17 16:49:28   fc1_icon        mostlycloudy
     2018-09-17 16:49:28   fc1_low_c       10
     2018-09-17 16:49:28   fc2_code        30
     2018-09-17 16:49:28   fc2_condition   teilweise wolkig
     2018-09-17 16:49:28   fc2_date        18 Sep 2018
     2018-09-17 16:49:28   fc2_day_of_week Di
     2018-09-17 16:49:28   fc2_high_c      26
     2018-09-17 16:49:28   fc2_icon        partly_cloudy
     2018-09-17 16:49:28   fc2_low_c       11
     2018-09-17 16:49:28   fc3_code        30
     2018-09-17 16:49:28   fc3_condition   teilweise wolkig
     2018-09-17 16:49:28   fc3_date        19 Sep 2018
     2018-09-17 16:49:28   fc3_day_of_week Mi
     2018-09-17 16:49:28   fc3_high_c      25
     2018-09-17 16:49:28   fc3_icon        partly_cloudy
     2018-09-17 16:49:28   fc3_low_c       12
     2018-09-17 16:49:28   fc4_code        30
     2018-09-17 16:49:28   fc4_condition   teilweise wolkig
     2018-09-17 16:49:28   fc4_date        20 Sep 2018
     2018-09-17 16:49:28   fc4_day_of_week Do
     2018-09-17 16:49:28   fc4_high_c      23
     2018-09-17 16:49:28   fc4_icon        partly_cloudy
     2018-09-17 16:49:28   fc4_low_c       15
     2018-09-17 16:49:28   fc5_code        39
     2018-09-17 16:49:28   fc5_condition   vereinzelt Gewitter
     2018-09-17 16:49:28   fc5_date        21 Sep 2018
     2018-09-17 16:49:28   fc5_day_of_week Fr
     2018-09-17 16:49:28   fc5_high_c      17
     2018-09-17 16:49:28   fc5_icon        scatteredthunderstorms
     2018-09-17 16:49:28   fc5_low_c       11
     2018-09-17 16:49:28   fc6_code        47
     2018-09-17 16:49:28   fc6_condition   vereinzelt Gewitter
     2018-09-17 16:49:28   fc6_date        22 Sep 2018
     2018-09-17 16:49:28   fc6_day_of_week Sa
     2018-09-17 16:49:28   fc6_high_c      15
     2018-09-17 16:49:28   fc6_icon        scatteredshowers
     2018-09-17 16:49:28   fc6_low_c       10
     2018-09-17 16:49:28   fc7_code        30
     2018-09-17 16:49:28   fc7_condition   teilweise wolkig
     2018-09-17 16:49:28   fc7_date        23 Sep 2018
     2018-09-17 16:49:28   fc7_day_of_week So
     2018-09-17 16:49:28   fc7_high_c      15
     2018-09-17 16:49:28   fc7_icon        partly_cloudy
     2018-09-17 16:49:28   fc7_low_c       8
     2018-09-17 16:49:28   fc8_code        30
     2018-09-17 16:49:28   fc8_condition   teilweise wolkig
     2018-09-17 16:49:28   fc8_date        24 Sep 2018
     2018-09-17 16:49:28   fc8_day_of_week Mo
     2018-09-17 16:49:28   fc8_high_c      13
     2018-09-17 16:49:28   fc8_icon        partly_cloudy
     2018-09-17 16:49:28   fc8_low_c       10
     2018-09-17 16:49:28   fc9_code        30
     2018-09-17 16:49:28   fc9_condition   teilweise wolkig
     2018-09-17 16:49:28   fc9_date        25 Sep 2018
     2018-09-17 16:49:28   fc9_day_of_week Di
     2018-09-17 16:49:28   fc9_high_c      16
     2018-09-17 16:49:28   fc9_icon        partly_cloudy
     2018-09-17 16:49:28   fc9_low_c       9
     2018-09-17 16:49:28   humidity        50
     2018-09-17 16:49:28   icon            cloudy
     2018-09-17 16:49:28   isConverted     0
     2018-09-17 16:49:28   lastError       
     2018-09-17 16:49:28   lat             5xxxxx
     2018-09-17 16:49:28   long            xxxxx
     2018-09-17 16:49:28   pressure        1018
     2018-09-17 16:49:28   pressure_trend  0
     2018-09-17 16:49:28   pressure_trend_sym =
     2018-09-17 16:49:28   pressure_trend_txt gleichbleibend
     2018-09-17 16:49:28   pubDate         Mon, 17 Sep 2018 04:00 PM CEST
     2018-09-17 16:49:28   pubDateComment  okay
     2018-09-17 16:49:28   pubDateRemote   Mon, 17 Sep 2018 04:00 PM CEST
     2018-09-17 16:49:28   pubDateTs       15xxxx00
     2018-09-17 16:49:28   region           NI
     2018-09-17 16:49:28   state           T: 22  H: 50  W: 14  P: 1018
     2018-09-17 16:49:28   temp_c          22
     2018-09-17 16:49:28   temperature     22
     2018-09-17 16:49:28   validity        up-to-date
     2018-09-17 16:49:28   visibility      16
     2018-09-17 16:49:28   wind            14
     2018-09-17 16:49:28   wind_chill      22
     2018-09-17 16:49:28   wind_condition  Wind: WSW 14 km/h
     2018-09-17 16:49:28   wind_direction  255
     2018-09-17 16:49:28   wind_speed      14
   fhem:
     allowCache 1
     interfaces temperature;humidity;wind
Attributes:
   event-on-update-reading temperature,humidity,pressure,wind_speed,wind_chill,day_of_week,wind_direction
   room       Wetter
   verbose    0

Grüße
« Letzte Änderung: 17 September 2018, 16:57:22 von Esjay »

Offline stenny

  • Jr. Member
  • **
  • Beiträge: 77
Antw:widget_weatherdetail.js
« Antwort #16 am: 17 September 2018, 18:33:00 »

Wie immer Top


Gesendet von iPhone mit Tapatalk

Offline TNT0068

  • Full Member
  • ***
  • Beiträge: 120
Antw:widget_weatherdetail.js
« Antwort #17 am: 17 September 2018, 19:09:04 »

Man kann den unteren Teil konfigurieren. Probier's einfach mal aus und melde Dich dann wieder...

Gruß,
   Thorsten
Hallo Thorsten,
leider für meine Zwecke zu groß. Mit den Datum Icons Temp  ist richtig genial. Ich habe einen Screenshot angefügt wie es zur Zeit bei mir aussieht. Die View ist auf allen Seiten als "Header" drin. Unter Detail ist nur Weather ausgewählt.
Homematic HMLAN HMUSB Heizung, Strom und Licht , Vuduo2, Kodi, Hue, Logitech Harmony Hub, Alexa

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #18 am: 17 September 2018, 21:15:16 »
leider für meine Zwecke zu groß. Mit den Datum Icons Temp  ist richtig genial. Ich habe einen Screenshot angefügt wie es zur Zeit bei mir aussieht. Die View ist auf allen Seiten als "Header" drin. Unter Detail ist nur Weather ausgewählt.
So ganz verstehe ich Deine Antwort nicht. Einserseits sagst Du, es ist zu groß, andererseits "genial". Hmmm...
Das Ding heißt ja "weatherdetail", also muss es ja ein bisschen größer sein, um die Information unterzubringen. Wenn Du mir erklärst, was Du brauchst, dann mach ich vielleicht sowas.
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #19 am: 17 September 2018, 21:20:09 »
bei mir funktioniert die Einbindung nicht. Screenshot im Anhang!
Das Ding geht nur mit Proplanta, siehe Anfang des Threads. Das Yahoo-Wetter scheint auch die angezeigten Details gar nicht zu liefern, also selbst, wenn man das widget anpassen wollen würde...

Zitat
Was mir ebenfalls aufgefallen ist,dass das Bild von FUIP::View::WeatherDetail in den View Types nicht angezeigt wird.
Ja, das habe ich noch nicht gemacht.

Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline Esjay

  • Sr. Member
  • ****
  • Beiträge: 810
Antw:widget_weatherdetail.js
« Antwort #20 am: 17 September 2018, 21:22:27 »
Das Ding geht nur mit Proplanta, siehe Anfang des Threads. Das Yahoo-Wetter scheint auch die angezeigten Details gar nicht zu liefern, also selbst, wenn man das widget anpassen wollen würde...
Ja, das habe ich noch nicht gemacht.

Gruß,
   Thorsten

Überlesen, danke!

Offline TNT0068

  • Full Member
  • ***
  • Beiträge: 120
Antw:widget_weatherdetail.js
« Antwort #21 am: 19 September 2018, 08:08:30 »
So ganz verstehe ich Deine Antwort nicht. Einserseits sagst Du, es ist zu groß, andererseits "genial". Hmmm...
Das Ding heißt ja "weatherdetail", also muss es ja ein bisschen größer sein, um die Information unterzubringen. Wenn Du mir erklärst, was Du brauchst, dann mach ich vielleicht sowas.
Gruß,
   Thorsten

Ich finde es genial wie du noch die Sachen vereinfachst und für andere Wahrscheinlich besser zu gebrauchen. Habe deine Arbeit gelobt.

Ich brauche nur die Icons mit Temp und Tage kleiner das es wie in mein Screenshot in die Celle passt. Die Details zum Tag brauche ich nicht. Was mir gerade einfällt die Details als Popup wenn man auf den Tag klickt. 
Ich habe nochmal ein Bild meiner obersten Leiste eingefügt. Die ist auf allen Seiten gleich. Neben der Uhr sind noch die nächsten Termine.
Homematic HMLAN HMUSB Heizung, Strom und Licht , Vuduo2, Kodi, Hue, Logitech Harmony Hub, Alexa

Offline Octopus180

  • Full Member
  • ***
  • Beiträge: 132
Antw:widget_weatherdetail.js
« Antwort #22 am: 19 September 2018, 12:43:08 »
Moin Thorsten,

erstmal muss ich dir ein großes Lob aussprechen für die Sachen die du uns hier anbietest. Ich hatte schon versucht meine eigene Wetterseite aufzubauen, aber mit deiner Methode ist das viel einfacher geworden.  :D

Wäre es möglich noch ein paar Daten mehr in die Ansicht zu bekommen?

Ich hätte gerne noch die Angabe des Wetters in Wort, also unter den Wettericon´s das Wort aus "weather und fc(x)_weather(xx)".
Genauso gerne hätte ich noch die Angabe der relativen Sonnenschendauer in % "fc(x)_sun"
                                                             der UV-Belastung                              "fc(x)_uv"
und                                                        Bodenfrost                                       "fc(x)_frost"

Außerdem wäre es schön wenn man die Vorhersage auf 7 Tage erhöhen könnte.

Ich weiß ja nicht ob es möglich wäre diese Möglichkeiten als Auswahlschalter einzubauen, weil ja nicht jeder alle Angaben haben möchte.


Gruß Peter

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #23 am: 19 September 2018, 20:26:50 »
Ich finde es genial wie du noch die Sachen vereinfachst und für andere Wahrscheinlich besser zu gebrauchen. Habe deine Arbeit gelobt.
Danke!

Zitat
Ich brauche nur die Icons mit Temp und Tage kleiner das es wie in mein Screenshot in die Celle passt. Die Details zum Tag brauche ich nicht. Was mir gerade einfällt die Details als Popup wenn man auf den Tag klickt. 
Ich bin gerade dabei, so was in der Art zu machen. Allerdings ist der Platz dann schon ziemlich knapp, wenn man was mit bunten Bildchen haben will. Gib mir mal noch zwei, drei Tage.
Das mit dem Popup ist gar nicht so einfach, da man das Ding dann implizit zweimal auf derselben Seite hat. Momentan reagiert es z.T. darauf etwas seltsam.

erstmal muss ich dir ein großes Lob aussprechen für die Sachen die du uns hier anbietest.
Danke!

Zitat
Wäre es möglich noch ein paar Daten mehr in die Ansicht zu bekommen?
Ich hätte gerne noch die Angabe des Wetters in Wort, also unter den Wettericon´s das Wort aus "weather und fc(x)_weather(xx)".
Genauso gerne hätte ich noch die Angabe der relativen Sonnenschendauer in % "fc(x)_sun"
                                                             der UV-Belastung                              "fc(x)_uv"
und                                                        Bodenfrost                                       "fc(x)_frost"
Ich schau mir's mal an. Wenn Proplanta das kann, dann ist das nicht soooo schwierig.
Hast Du dazu ein paar hübsche Icons für den Anfang der Zeile?

Zitat
Außerdem wäre es schön wenn man die Vorhersage auf 7 Tage erhöhen könnte.
Meine interne Version kann das momentan schon, aber ich habe gerade was anderes kaputt gemacht. Kommt also sehr wahrscheinlich in den nächsten Tagen.

Zitat
Ich weiß ja nicht ob es möglich wäre diese Möglichkeiten als Auswahlschalter einzubauen, weil ja nicht jeder alle Angaben haben möchte.
Klar, welche Details man will kann man ja jetzt schon wählen und für die Tage wird man 4,5,6 oder 7 wählen können.

Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline Octopus180

  • Full Member
  • ***
  • Beiträge: 132
Antw:widget_weatherdetail.js
« Antwort #24 am: 19 September 2018, 21:05:09 »
Hallo Thorsten,

Für Bodenfrost würde ich „wi-snowflake-cold“ vorschlagen.
Für die UV-Belastung habe bis jetzt noch kein Icon gefunden.

Gruß Peter

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #25 am: 20 September 2018, 21:01:35 »
Hi,
ich habe mal wieder ein bisschen gebastelt...
leider für meine Zwecke zu groß.
Es gibt jetzt einen View "WetterOverview". Wenn Du da "layout" auf "small" setzt, dann könnte das in die Richtung gehen.

Was mir gerade einfällt die Details als Popup wenn man auf den Tag klickt. 
Das geht jetzt auch. WetterOverview kann ein Popup und dort kann mann dann WetterDetail einfügen. (Bei WetterOverview sieht der Cursor allerdings nicht "anklickbar" aus, aber es geht trotzdem.)

Außerdem wäre es schön wenn man die Vorhersage auf 7 Tage erhöhen könnte.
Das geht jetzt.

Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline TNT0068

  • Full Member
  • ***
  • Beiträge: 120
Antw:widget_weatherdetail.js
« Antwort #26 am: 21 September 2018, 09:35:04 »
Hi,
ich habe mal wieder ein bisschen gebastelt... Es gibt jetzt einen View "WetterOverview". Wenn Du da "layout" auf "small" setzt, dann könnte das in die Richtung gehen.
Das geht jetzt auch. WetterOverview kann ein Popup und dort kann mann dann WetterDetail einfügen. (Bei WetterOverview sieht der Cursor allerdings nicht "anklickbar" aus, aber es geht trotzdem.)
Das geht jetzt.

Gruß,
   Thorsten

Ich bin wiedermal begeistert. Das ist genau die größe und am kann alles konfigurieren wie man möchte. Sehr cool
Homematic HMLAN HMUSB Heizung, Strom und Licht , Vuduo2, Kodi, Hue, Logitech Harmony Hub, Alexa

Offline Octopus180

  • Full Member
  • ***
  • Beiträge: 132
Antw:widget_weatherdetail.js
« Antwort #27 am: 21 September 2018, 18:18:21 »
Hallo Thorsten,

erstmal Super dass das mit den Tagen jetzt geht. Bekommt du die anderen Sachen auch noch hin?

Gruß Peter

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3824
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:widget_weatherdetail.js
« Antwort #28 am: 21 September 2018, 20:18:32 »
wo finde ich das aktuelle widget_weatherdetail.js File?

Offline Esjay

  • Sr. Member
  • ****
  • Beiträge: 810
Antw:widget_weatherdetail.js
« Antwort #29 am: 21 September 2018, 20:29:22 »
/opt/fhem/FHEM/lib/FUIP/js

Hier liegt sie bei mir!

Grüße

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3824
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:widget_weatherdetail.js
« Antwort #30 am: 21 September 2018, 20:58:32 »
ich meinte, wo kann ich das Widget downloaden

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #31 am: 21 September 2018, 20:59:10 »
Hi,

Bekommt du die anderen Sachen auch noch hin?
Bin dran, aber das ist ein bisschen frickelig. Ich dachte, dass die gewünschten Daten auch zum 3-Stunden-Detail gehören, aber das ist nicht so. D.h. es ist halt nicht einfach eine neue Zeile. ...aber ich habe einen Ansatz, der zumindest nicht ganz bescheuert aussieht.

wo finde ich das aktuelle widget_weatherdetail.js File?
Ich habe das ursprüngliche widget_weatherdetail.js ziemlich angepasst. Daher und auch weil der ursprüngliche Autor (Bruchbude) das Teil nicht "hosten" will, habe ich es in die FUIP-Auslieferung gepackt. Direkt im Git findest Du das Teil hier:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/js/widget_weatherdetail.js
Ich bin aber momentan noch heftig am Ändern...
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #32 am: 23 September 2018, 21:11:09 »
Hi,
ich habe mal wieder was hochgeladen...

Was mir ebenfalls aufgefallen ist,dass das Bild von FUIP::View::WeatherDetail in den View Types nicht angezeigt wird.
Das sollte jetzt gehen.

Ich hätte gerne noch die Angabe des Wetters in Wort, also unter den Wettericon´s das Wort aus "weather und fc(x)_weather(xx)".
Genauso gerne hätte ich noch die Angabe der relativen Sonnenschendauer in % "fc(x)_sun"
                                                             der UV-Belastung                              "fc(x)_uv"
und                                                        Bodenfrost                                       "fc(x)_frost"
Das geht jetzt alles (sowohl in WeatherDetail als auch in WeatherOverview). Bei "weather" ist es allerdings nicht wirklich das Reading "weather", sondern "fx(x)_weatherDay", damit es zum Icon passt.
Es war ein bisschen frickelig, das in die "small" Ansicht des WeatherOverview reinzubekommen.

Zitat
Außerdem wäre es schön wenn man die Vorhersage auf 7 Tage erhöhen könnte.
...ging sowieso schon.

Zitat
Ich weiß ja nicht ob es möglich wäre diese Möglichkeiten als Auswahlschalter einzubauen, weil ja nicht jeder alle Angaben haben möchte.
Ja, alles konfigurierbar. ...spiel mal damit rum, bei Erklärungsbedarf bitte nachfragen.

Gruß,
  Thorsten

RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline erotikbaer

  • Full Member
  • ***
  • Beiträge: 146
Antw:widget_weatherdetail.js
« Antwort #33 am: 08 Oktober 2018, 23:30:19 »
hi,
bei mir bekomme ich auf dem ipad 2 immer "widget_weatherdetail.js:244" und somit das widget auch nicht angezeigt auf der seite.
kann mir jemand sagen was ich da falsch mache? rufe ich die fpui seite über den PC auf, wird das Wetter korrekt angezeigt.

Gruß Christian

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #34 am: 09 Oktober 2018, 14:57:46 »
Hi,
da kann ich nur raten. Möglicherweise kann der Apple-Kram (sowas hab ich nicht...) kein "modernes" JavaScript.
Könntest Du mal versuchen, in der Datei /opt/fhem/FHEM/lib/FUIP/js/widget_weatherdetail.js in der Zeile 244 das "const" durch "var" zu ersetzen.
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline erotikbaer

  • Full Member
  • ***
  • Beiträge: 146
Antw:widget_weatherdetail.js
« Antwort #35 am: 09 Oktober 2018, 19:17:16 »
Perfekt! Dass nenne ich mal raten :-)
Hab noch an zwei weiteren stellen const durch var ersetzt und jetzt funktioniert es! Hab vielen Dank!

Könntest du das übernehmen, oder hat das Nachteile für andere User?
Vielen Dank,
Gruß
Christian

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #36 am: 10 Oktober 2018, 20:39:19 »
Hi,
ja, werde ich demnächst übernehmen. Ich denke nicht, dass das irgendwo Probleme macht.
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline Octopus180

  • Full Member
  • ***
  • Beiträge: 132
Antw:widget_weatherdetail.js
« Antwort #37 am: 14 Oktober 2018, 16:48:56 »
Hallo Thorsten,

endlich mal wieder Zeit vor dem PC zu sitzen und deshalb wollte ich mich noch bei dir bedanken für die Umsetzung des Wettersmodul. Wie immer eine sehr gut Leistung.

Benutzt du eigendlich FUIP auch im Vollsystem oder nur im Probeeinsatz? Mich würde mal Interessieren wie deine Seiten aussehen.

Gruß Peter

Offline curt

  • Full Member
  • ***
  • Beiträge: 353
Antw:widget_weatherdetail.js
« Antwort #38 am: 15 Oktober 2018, 23:03:33 »
@Thorsten Pferdekaemper
Kann man das Widget eigentlich auch mit (dem neuen Modul) DWD_OpenData nutzen?
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #39 am: 16 Oktober 2018, 08:44:48 »
Benutzt du eigendlich FUIP auch im Vollsystem oder nur im Probeeinsatz? Mich würde mal Interessieren wie deine Seiten aussehen.
Ehrlich gesagt benutze ich es momentan nicht "produktiv". Mein FHEM-Server ist momentan nur ein RasPi 1 und der hat schon genug zu tun. Demnächst habe ich aber vor, das ganze auf etwas "kräftigeres" umzubauen, da kommt dann auch FUIP drauf.
Ich benutze zum Testen aber mein Original-FHEM als Backend.
Ich mache mal für "FUIP-Beispiele" einen neuen Thread auf, da das hier irgendwie nicht richtig hinpasst.

EDIT: Hier ist er: https://forum.fhem.de/index.php/topic,92122.0.html

@Thorsten Pferdekaemper
Kann man das Widget eigentlich auch mit (dem neuen Modul) DWD_OpenData nutzen?
Ich glaube nicht. Ich habe nur mal ganz kurz reingeschaut, aber ich denke, dass die Readings anders heißen. Das könnte man hinbekommen, aber momentan bin ich an etwas ganz anderem. Ich habe auch den Eindruck, dass die Einrichtung von DWD_OpenData etwas komplizierter als Proplanta ist.
Brauchst Du das unbedingt oder kannst Du mit Proplanta leben? Was wäre denn besser an DWD_OpenData?

Gruß,
   Thorsten
« Letzte Änderung: 16 Oktober 2018, 08:50:48 von Thorsten Pferdekaemper »
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline curt

  • Full Member
  • ***
  • Beiträge: 353
Antw:widget_weatherdetail.js
« Antwort #40 am: 16 Oktober 2018, 11:52:02 »
Ich glaube nicht. Ich habe nur mal ganz kurz reingeschaut, aber ich denke, dass die Readings anders heißen. Das könnte man hinbekommen, aber momentan bin ich an etwas ganz anderem.

Das ist schade.

Ich habe auch den Eindruck, dass die Einrichtung von DWD_OpenData etwas komplizierter als Proplanta ist.

Da fehlt mir der Vergleich.

Brauchst Du das unbedingt oder kannst Du mit Proplanta leben?

Es wäre schon schön.

Was wäre denn besser an DWD_OpenData?

Der Deutsche Wetterdienst ist halt mit Abstand die Nummer 1. Ihr Vorhersagemodell basiert auf 1x1 km statt auf 10 x 10 km - wenn ich das richtig verstand. Und über deren Schnittstelle kommen Unmengen an möglichen Informationen.

Der Macher von DWD_OpenData ist @jensb - er klemmt sich da sehr rein.
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

Online Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4898
  • Finger weg von der fhem.cfg
Antw:widget_weatherdetail.js
« Antwort #41 am: 16 Oktober 2018, 15:56:18 »
Hab noch an zwei weiteren stellen const durch var ersetzt und jetzt funktioniert es! Hab vielen Dank!
Könntest du das übernehmen, oder hat das Nachteile für andere User?
Jetzt ist es in der aktuellen Version drin.
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)