FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Bruchbude am 01 August 2018, 23:57:25

Titel: widget_weatherdetail.js
Beitrag von: Bruchbude 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?





Titel: Antw:widget_weatherdetail.js
Beitrag von: gloob 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.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Bruchbude am 02 August 2018, 13:50:45
proplanta muss so gepatched werden: https://forum.fhem.de/index.php/topic,89499.0.html (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

Titel: Antw:widget_weatherdetail.js
Beitrag von: Bruchbude 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;
};
Titel: Antw:widget_weatherdetail.js
Beitrag von: Bruchbude am 03 August 2018, 18:06:54
alle funktionen die ich brauch sind drin:

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

/* 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{
}
Titel: Antw:widget_weatherdetail.js
Beitrag von: stenny 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 10 August 2018, 16:09:28
Zitat von: stenny am 10 August 2018, 15:27:45
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: stenny am 10 August 2018, 16:11:32
Zitat von: Thorsten Pferdekaemper am 10 August 2018, 16:09:28
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Bruchbude 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>
Titel: Antw:widget_weatherdetail.js
Beitrag von: stenny am 12 August 2018, 11:32:15
Zitat von: Bruchbude 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>


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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: stenny 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: TNT0068 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 17 September 2018, 14:43:04
Zitat von: stenny am 16 September 2018, 22:53:15
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?

Zitat von: TNT0068 am 17 September 2018, 12:38:09
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Esjay 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: stenny am 17 September 2018, 18:33:00
[emoji106]
Wie immer Top


Gesendet von iPhone mit Tapatalk
Titel: Antw:widget_weatherdetail.js
Beitrag von: TNT0068 am 17 September 2018, 19:09:04
Zitat von: Thorsten Pferdekaemper am 17 September 2018, 14:43: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.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 17 September 2018, 21:15:16
Zitat von: TNT0068 am 17 September 2018, 19:09:04leider 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 17 September 2018, 21:20:09
Zitat von: Esjay am 17 September 2018, 16:55:03bei 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...

ZitatWas 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Esjay am 17 September 2018, 21:22:27
Zitat von: Thorsten Pferdekaemper am 17 September 2018, 21:20:09
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!
Titel: Antw:widget_weatherdetail.js
Beitrag von: TNT0068 am 19 September 2018, 08:08:30
Zitat von: Thorsten Pferdekaemper am 17 September 2018, 21:15:16
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.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 19 September 2018, 20:26:50
Zitat von: TNT0068 am 19 September 2018, 08:08:30
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.

Zitat von: Octopus180 am 19 September 2018, 12:43:08
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 20 September 2018, 21:01:35
Hi,
ich habe mal wieder ein bisschen gebastelt...
Zitat von: TNT0068 am 17 September 2018, 19:09:04
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.

Zitat von: TNT0068 am 19 September 2018, 08:08:30
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.)

Zitat von: Octopus180 am 19 September 2018, 12:43:08
Außerdem wäre es schön wenn man die Vorhersage auf 7 Tage erhöhen könnte.
Das geht jetzt.

Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: TNT0068 am 21 September 2018, 09:35:04
Zitat von: Thorsten Pferdekaemper am 20 September 2018, 21:01:35
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: setstate am 21 September 2018, 20:18:32
wo finde ich das aktuelle widget_weatherdetail.js File?
Titel: Antw:widget_weatherdetail.js
Beitrag von: Esjay am 21 September 2018, 20:29:22
/opt/fhem/FHEM/lib/FUIP/js

Hier liegt sie bei mir!

Grüße
Titel: Antw:widget_weatherdetail.js
Beitrag von: setstate am 21 September 2018, 20:58:32
ich meinte, wo kann ich das Widget downloaden
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 21 September 2018, 20:59:10
Hi,

Zitat von: Octopus180 am 21 September 2018, 18:18:21Bekommt 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.

Zitat von: setstate am 21 September 2018, 20:18:32
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 23 September 2018, 21:11:09
Hi,
ich habe mal wieder was hochgeladen...

Zitat von: Esjay am 17 September 2018, 16:55:03Was mir ebenfalls aufgefallen ist,dass das Bild von FUIP::View::WeatherDetail in den View Types nicht angezeigt wird.
Das sollte jetzt gehen.

Zitat von: Octopus180 am 19 September 2018, 12:43:08
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

Titel: Antw:widget_weatherdetail.js
Beitrag von: erotikbaer 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: erotikbaer 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 10 Oktober 2018, 20:39:19
Hi,
ja, werde ich demnächst übernehmen. Ich denke nicht, dass das irgendwo Probleme macht.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 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
Titel: Antw:widget_weatherdetail.js
Beitrag von: curt am 15 Oktober 2018, 23:03:33
@Thorsten Pferdekaemper
Kann man das Widget eigentlich auch mit (dem neuen Modul) DWD_OpenData nutzen?
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 16 Oktober 2018, 08:44:48
Zitat von: Octopus180 am 14 Oktober 2018, 16:48:56Benutzt 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

Zitat von: curt am 15 Oktober 2018, 23:03:33
@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
Titel: Antw:widget_weatherdetail.js
Beitrag von: curt am 16 Oktober 2018, 11:52:02
Zitat von: Thorsten Pferdekaemper am 16 Oktober 2018, 08:44:48
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.

Zitat von: Thorsten Pferdekaemper am 16 Oktober 2018, 08:44:48
Ich habe auch den Eindruck, dass die Einrichtung von DWD_OpenData etwas komplizierter als Proplanta ist.

Da fehlt mir der Vergleich.

Zitat von: Thorsten Pferdekaemper am 16 Oktober 2018, 08:44:48
Brauchst Du das unbedingt oder kannst Du mit Proplanta leben?

Es wäre schon schön.

Zitat von: Thorsten Pferdekaemper am 16 Oktober 2018, 08:44:48
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.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 16 Oktober 2018, 15:56:18
Zitat von: erotikbaer am 09 Oktober 2018, 19:17:16
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
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 24 Januar 2019, 12:14:38
Tolles Widget, klasse Job... !
Gehe ich recht in der Annahme, dass es nur in FUIP läuft, nicht aber in FTUI?
Gruß Ulf
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 24 Januar 2019, 12:56:44
Zitat von: ulobo60 am 24 Januar 2019, 12:14:38
Tolles Widget, klasse Job... !
Danke!
Zitat
Gehe ich recht in der Annahme, dass es nur in FUIP läuft, nicht aber in FTUI?
Ich habe es nicht mit "FTUI only" ausprobiert. Es könnte sein, dass es geht. wiget_weatherdetail.js und widget_weatherdetail.css müssen halt an die richtigen Stellen kopiert werden.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 24 Januar 2019, 17:38:36
@Thorsten Pferdekaemper:
Danke für Deine schnelle Antwort.
Da schöpfe ich doch sofort Mut, um es "FTUI-only" auszuprobieren!
Bin zwar noch ein ziemlicher FHEM-newbie und vom Perl- etc.-Programmieren habe ich so gut wie keine Ahnung, kann aber wohl ganz gut Vorlagen adaptieren und leichte Modifikationen anbringen. Schau'n mer mal, was die nächsten 2 Wochen so bringen. Ich werde hier auf jeden Fall über das Ergebnis meines "FTUI-only"-Versuchs reporten.

Gruß,
Ulf
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 24 Januar 2019, 23:41:06
@Thorsten Pferdekaemper:
...nix mit "in den nächsten 2 Wochen"...
Habe mich heute Abend mal rangesetzt und mich am Thema "FTUI-only" versucht.
Erstes Ergebnis: Donnerwetter, sieht schon richtig gut aus + funktioniert von der Technik her !!!
- siehe Anhang: screenshot1.jpg -

Was ich gemacht habe:
(FHEM und FTUI laufen auf raspberry3)

1) Download der Datei 'widget_weatherdetail.js' von Deinem GitHub und Kopieren der Datei nach /opt/fhem/www/tablet_prod/js
(der FTUI-Ordner heißt bei mir nicht 'tablet' sondern 'tablet_prod')
Anschließend Rechte und Besitzer/Gruppe der Datei angepaßt.

2) Die hier im Forumsbeitrag aufgeführten CSS-Facts ans Ende meiner persönlichen CSS-Datei 'lobo60.css' eingefügt.

3) HTML-Datei erstellt gemäß Vorgaben hier im Thread.

Das Ergebnis finde ich schon mal richtig klasse! Ein Klick auf die obigen Tage wechselt auch sauber die Detail-Infos zum jeweiligen Tag.
Es sind also nur noch CSS-Optimierungen zu erledigen.
Für meine anderen 7 FHEM-Seiten hatte ich schon ordentlich die Standard-CSSs geändert.
Habe aber für die bereits existierenden CSS-Tags neue Namen gebildet und diese in den HTMLs verwendet.

Folgende Darstellungs-Änderungen fände ich noch gut:
a) Die 4 Tagesfelder oben dunkel unterlegt
b) Den angeklickten Tages-Tab umranden wie von Dir vorgesehen
c) Die unteren Zahlenwerte (und die Wettersybole unten links, senkrecht) ca. doppelt so groß.

Ich habe keinen blassen Schimmer, wo ich da bzgl. der Optimierung ansetzen kann.
Es wäre toll, wenn Du nen Tipp zu meinen obigen CSS-Optimierungswünschen für mich hättest.

Auf jeden Fall: ich ziehe den Hut vor Deiner Arbeit.
Gruß Ulf
Titel: Antw:widget_weatherdetail.js
Beitrag von: curt am 24 Januar 2019, 23:45:55
OT
Zitat von: ulobo60 am 24 Januar 2019, 23:41:06
Erstes Ergebnis: Donnerwetter, sieht schon richtig gut aus

Finde ich ganz und gar nicht. Das sieht recht übel aus.
.
.
... also das Wetter bei Dir. :D
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 25 Januar 2019, 08:34:21
@curt:
;D ;D ;D 8)
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 25 Januar 2019, 10:05:51
Zitat von: ulobo60 am 24 Januar 2019, 23:41:06
Ich habe keinen blassen Schimmer, wo ich da bzgl. der Optimierung ansetzen kann.
Es wäre toll, wenn Du nen Tipp zu meinen obigen CSS-Optimierungswünschen für mich hättest.
Ja, wie ich schon in meiner ersten Antwort zu Deiner Frage geschrieben habe: Es gibt noch eine widget_weatherdetail.css.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 25 Januar 2019, 13:29:21
@Thorsten:
Äheeeem, Yepp... - Du hast ja so Recht  ???
Das alte Spiel: Wer lesen kann, ist echt im Vorteil !
Habe nun Deine 'widget_weatherdetail.css' eingearbeitet und mit den CSS-Tags etwas rumgespielt (siehe screenshot1.jpg).
Ergebnis: Boooaaahhh eeeyyyy ...

Thorsten, nochmal thx a lot für Deine professionelle Arbeit.
curt: es sieht leider immer noch übel aus - das Wetter.
Bruchbude: danke vielmals für Deinen kreativen Ansatz und den Einstieg in dieses Thema

Grüße
Ulf
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 am 25 Januar 2019, 16:57:28
Hallo ulobo60,

Sieht echt gut aus was du dort hinbekommen hast. Wäre es möglich es ein wenig genauer zu erklären wie du es hinbekommen hast?
Als Anfänger verstehe ich leider nicht genau, was du wie und wo gemacht hast.

Gruß Peter
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 25 Januar 2019, 17:20:34
Zitat von: Octopus180 am 25 Januar 2019, 16:57:28
Sieht echt gut aus was du dort hinbekommen hast. Wäre es möglich es ein wenig genauer zu erklären wie du es hinbekommen hast?
Als Anfänger verstehe ich leider nicht genau, was du wie und wo gemacht hast.
Hast Du schonmal FUIP ausprobiert? Da geht das mit ein paar Mausklicks.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: Octopus180 am 25 Januar 2019, 17:40:01
Hallo Thorsten,

Ja habe ich, doch dort gibt es noch ein paar Sachen die mir nicht so gefallen. Ich bin nur noch nicht dazu gekommen sie mal aufzugliedern und dich zu fragen ob man es ändern kann. Ich glaube es wären auch zu viele Änderungen die ich mir wünschen würde. Wobei ich sagen muss das du damit wirklich eine tolle Leistung rüber bringst und es , so glaube ich , es eine Unverschämtheit von mir wäre so viele Änderungswünsche anzubringen.

Gruß Peter
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 25 Januar 2019, 18:49:56
@Octopus180:
Mir ist hier in den FHEM-Foren schon so viel geholfen worden - es ist mal an der Zeit, dass ich etwas zurück gebe.
Ich werde also versuchen, Dir hier eine schrittweise Anleitung mit Datei-Beispielen (.html, .css) zu geben, die Dir meine Erstellung der Proplanta-Wettervorhersage fürs FTUI erklären soll.
Ich brauche dafür allerdings so 1 - 2 Stunden um die einzelnen Steps nachzuvollziehen. Ich versuche mal, die Anleitung heute Abend/Nacht noch fertig zu stellen.
Bis später,
Ulf
Titel: Antw:widget_weatherdetail.js
Beitrag von: ulobo60 am 25 Januar 2019, 22:52:26
@Octopus180:

ANLEITUNG PROPLANTA-WETTERVORHERSAGE

Du benötigst folgende Dateien in den aufgeführten Dateipfaden:

a) /opt/fhem/FHEM/59_PROPLANTA.pm
Wenn Dein FHEM auf dem aktuellen Update-Stand ist, brauchst Du hier nichts zu machen.

b) /opt/fhem/www/tablet/wetter.html
Meine 'wetter.html' fürs FTUI:

<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * Proplanta-Wettervorhersage
     * -->

</head>
<body>
<div class="page" id="content_proplaview">
<div class="gridster">
<ul>
<!-- ======================================================================================== -->
<!-- Wettervorschau -->
<!-- ======================================================================================== -->
<li data-col="1" data-row="1" data-sizex="13" data-sizey="10">
<div class="cell" data-type="weatherdetail" data-device="proplanta60" data-detail='["clock","chOfRain","rain","temp","weather","wind"]'></div>
</li>

</ul>
</div>
</div>
</body>
</html>


Anmerkung:
Ich nutze im FTUI ein Menüsystem mit derzeit 8 Darstellungsseiten. Diese 'wetter.html' wird bei mir von der 'index.html' aus durch Klick auf den 2. Menübutton aufgerufen (siehe auch die hier angehängte Datei 'proplanta_wettervorhersage_ftui.jpg')
Wenn Du nur testen möchtest (= FTUI mit nur 1 Seite), dann kopiere alles aus der 'wetter.html', das zwischen <body> und </body> steht in Deine 'index.html' an dieselbe Stelle.
Hinweis: Du hast sicher schon ein Proplanta-Device im FHEM eingerichtet. Bei mir heißt der Proplanta-Device 'proplanta60'. Setzte also Deinen Device-Namen für proplanta60 ein.

c) /opt/fhem/www/tablet/js/widget_weatherdetail.js
Diese Datei bekommst Du über das Github von Thorsten Pferdekaemper.
Der Link darauf steht in diesem Forenthread auf Seite-3, 2. Beitrag von oben:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/js/widget_weatherdetail.js
Lade diese Datei in den obigen 'js'-Ordner hoch (Achtung: auf korrekte Rechte-Zuordnung und Besitzer/Gruppe achten)
Ich selbst habe in Thorstens GitHub den Dateiinhalt mit STRG+C kopiert und in eine leere Textdatei eingefügt. Die Textdatei wurde mit dem Namen 'widget_weatherdetail.js' auf meinem Windows-PC gespeichert. Dann hochgeladen in mein (raspberry-) Verzeichnis 'backup'. Dann von dort mit dem Programm 'Putty' und mit sudo... nach /opt/fhem/www/tablet/js/ kopiert. Zuletzt noch mit Putty und den entsprechenden Befehlen die korrekten Rechte sowie Besitzer/Gruppe gesetzt.

d) widget_weatherdetail.css
Diese Datei bekommst Du ebenfalls über das Github von Thorsten Pferdekaemper:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/css/widget_weatherdetail.css
Da ich eine spezielle CSS-Datei verwende mit meinen persönlichen CSS-Tags, habe ich die Inhalte von Thorstens CSS-Datei einfach kopiert und am Ende meiner CSS eingefügt. Letztlich habe ich noch einpaar kleine Änderungen hinsichtlich Schriftgrößen und Padding gemacht.
Die CSS-Dateien fürs FTUI liegen im Ordner '/opt/fhem/www/tablet/css/'.
Wenn Du nur testest mit nur 1 FTUI-Seite, stelle Dir eine Datei (wie unter c) beschrieben) her, gib ihr den Namen 'widget_weatherdetail.css' und kopiere diese Datei in den css-Ordner. Anschließend füge im Kopfbereich zwischen <head> und </head> Deiner index.html - Seite folgendes ein:
<link rel="stylesheet" href="widget_weatherdetail.css" />

So, das müsste es gewesen sein! Hoffe ich! Viel Erfolg.
Wenn Du Fragen hast, melde Dich bitte hier im Forum.
Gut's Nächtle,
Ulf

Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 26 Januar 2019, 14:52:43
Zitat von: Octopus180 am 25 Januar 2019, 17:40:01
Ja habe ich, doch dort gibt es noch ein paar Sachen die mir nicht so gefallen. Ich bin nur noch nicht dazu gekommen sie mal aufzugliedern und dich zu fragen ob man es ändern kann. Ich glaube es wären auch zu viele Änderungen die ich mir wünschen würde. Wobei ich sagen muss das du damit wirklich eine tolle Leistung rüber bringst und es , so glaube ich , es eine Unverschämtheit von mir wäre so viele Änderungswünsche anzubringen.
Vielleicht sind ja ein paar gute Ideen dabei, die vielleicht gar nicht so schwierig umzusetzen sind. Möglicherweise geht auch einiges davon jetzt schon. ...und solange Du nicht erwartest, dass ich auch wirklich alles mache, kannst Du Deine Unverschämtheiten ruhig aufschreiben. (Das sollte man jetzt besser nicht aus dem Kontext reißen.) Also ruhig her damit, aber bitte in einem eigenen Thread.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: no_Legend am 24 Mai 2019, 21:17:47
Hi,

mal ne frage ist das widget nun offizieller Bestandteil von FTUI?

Im Wiki steht es unter integrierte Widgets aber im JS order ist bei mir auf den ersten blick nicht drin


Gruß Robert
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 24 Mai 2019, 21:43:54
Zitat von: no_Legend am 24 Mai 2019, 21:17:47
mal ne frage ist das widget nun offizieller Bestandteil von FTUI?
Meiner Meinung nach nicht. Ich habe es daher in FUIP übernommen und ein bisschen "hochgepäppelt". 
Wenn Du kein FUIP verwendest, dann siehe den Beitrag von ulobo60 vom 25 Januar 2019.
...oder Du versuchst es mal mit FUIP, dann sind es nur ein paar Klicks.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: no_Legend am 24 Mai 2019, 21:46:08
Zitat von: Thorsten Pferdekaemper am 24 Mai 2019, 21:43:54
Meiner Meinung nach nicht. Ich habe es daher in FUIP übernommen und ein bisschen "hochgepäppelt". 
Wenn Du kein FUIP verwendest, dann siehe den Beitrag von ulobo60 vom 25 Januar 2019.
...oder Du versuchst es mal mit FUIP, dann sind es nur ein paar Klicks.
Gruß,
   Thorsten


Hallo Thorsten,

ich hab es nun auch auf diese weise eingebunden.

Nur wie gesagt es steht so im wiki unter:
Integrierte Widgets
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
Im wiki steht dann ACHTUNG: gebt mir ein paar tage um die seite zu erstellen. habe die übliche ausrede: real life job


Gruß Robert
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 24 Mai 2019, 21:56:20
Hi,
ich weiß, aber da sehe ich mich nicht in der Pflicht. Wenn es Dich stört, dann kannst Du es ja ändern. Es ist ein Wiki...
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: no_Legend am 24 Mai 2019, 22:14:06
Zitat von: Thorsten Pferdekaemper am 24 Mai 2019, 21:56:20
Hi,
ich weiß, aber da sehe ich mich nicht in der Pflicht. Wenn es Dich stört, dann kannst Du es ja ändern. Es ist ein Wiki...
Gruß,
   Thorsten


Ist dass denn von dir?
Ändern kann ich es schon. Hab auch Wiki rechte.
Nur wenn das Widget ja bald offiziell werden würde sehe ich hier keine Handlungsbedarf.
Wenn aber nicht dann würde ich es doch eher löschen.


Gesendet von iPhone mit Tapatalk Pro
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 24 Mai 2019, 22:19:04
Zitat von: no_Legend am 24 Mai 2019, 22:14:06
Ist dass denn von dir?
Das im Wiki? Nein. ...sonst würde ich den Handlungsbedarf da schon bei mir sehen.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: SirBen am 05 Juni 2019, 13:54:13
Moin,
ich wollte kurz mitteilen, dass ich das Widget bei mir eingerichtet habe. Ein kleiner Fehler ist Ulf da unterlaufen:
Zitat von: ulobo60 am 25 Januar 2019, 22:52:26
<link rel="stylesheet" href="widget_weatherdetail.css" />
Es müsste heißen:
<link rel="stylesheet" href="css/widget_weatherdetail.css" />
weil ja die css Datei im Ordner css liegt und die index.html nicht.

Ansonsten eine sehr gute Anleitung. Gerade für Anfänger gut geeignet.

Das Widget gefällt mir auch sehr gut. Sieht super aus! Großes Lob!

Gruß Ben
Titel: Antw:widget_weatherdetail.js
Beitrag von: no_Legend am 16 Juni 2019, 16:47:29
Zitat von: SirBen am 05 Juni 2019, 13:54:13
Moin,
ich wollte kurz mitteilen, dass ich das Widget bei mir eingerichtet habe. Ein kleiner Fehler ist Ulf da unterlaufen:Es müsste heißen:
<link rel="stylesheet" href="css/widget_weatherdetail.css" />
weil ja die css Datei im Ordner css liegt und die index.html nicht.

Ansonsten eine sehr gute Anleitung. Gerade für Anfänger gut geeignet.

Das Widget gefällt mir auch sehr gut. Sieht super aus! Großes Lob!

Gruß Ben

Hi Ben,

bei mir hat weder das eine noch das andere eine Auswirkung in fully.

Keine Ahnung warum.

Jemand ne Idee?

Gruß Robert
Titel: Antw:widget_weatherdetail.js
Beitrag von: SirBen am 16 Juni 2019, 19:06:51
Hi Robert,
was genau funktioniert denn nicht?
Hast du das Widget eingebunden und es zeigt irgendwas an? Oder gibt es Probleme mit dem Design/css?
Gruß Ben
Titel: Antw:widget_weatherdetail.js
Beitrag von: no_Legend am 16 Juni 2019, 20:14:07
Zitat von: SirBen am 16 Juni 2019, 19:06:51
Hi Robert,
was genau funktioniert denn nicht?
Hast du das Widget eingebunden und es zeigt irgendwas an? Oder gibt es Probleme mit dem Design/css?
Gruß Ben

Hi Ben,

habe den Fehler gefunden. Manchmal sieht man den Wald vor lauter Bäumen nicht.
Ich hatte das CSS einfach in der flachen Datei eingetragen.
Nun geht es.

Trotzdem Danke

Gruß Robert
Titel: Antw:widget_weatherdetail.js
Beitrag von: Kornelius777 am 17 August 2019, 16:45:21
Bin das nur ich?

Ich bekomme dauernd

Error
widget_weatherdetail.js:99
TypeError: elem.uniqueId is not a function


Wenn ich Zeile 99 auskommentiere, bekomme ich zumindest vier Bilder angezeigt.

Aber... keine Stunden, keine erweiterte Vorhersage...

Was mache ich falsch?

Grüße!

Kornelius
Titel: Antw:widget_weatherdetail.js
Beitrag von: Kornelius777 am 18 August 2019, 19:10:35
Ich präzisiere mal meine Frage:

Meine Hauptseite sieht so aus:

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<link rel="stylesheet" href="css/widget_weatherdetail.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>WETTER</title>
</head>

<body>

    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="hss/menu.html"></li>
            <li data-row="1" data-col="2" data-sizex="8" data-sizey="6" data-template="hss/wetter/widget_weatherdetail.html"></li>
        </ul>
    </div>
</body>

</html>


und meine widget_weatherdetail.html so:

<div class="sheet">
    <div class="row">
        <div
            class="cell"
            data-type="weatherdetail"
            data-device="OUT.Wetter_Proplanta"
            data-detail='["clock","chOfRain","rain","temp","weather","wind"]'>
        </div>
    </div>
</div>


Die widget_weatherdetail.js liegt unter /opt/fhem/www/tablet/js/
Die widget_weatherdetail.css liegt unter /opt/fhem/www/tablet/css/

Allerdings bekomme ich kein vernünftiges Bild...
Ausschließlich den Fehler:

Error
widget_weatherdetail.js:99
TypeError: elem.uniqueId is not a function


Was kann ich denn jetzt noch tun?

Danke Euch!

Grüße!

Kornelius
Titel: Antw:widget_weatherdetail.js
Beitrag von: SirBen am 20 Oktober 2019, 08:25:32
Moin,
ich Weiß nicht ob mittlerweile dein Problem gelöst ist, aber es sieht vielleicht nach einem Problem mit der jquery Version aus:
https://stackoverflow.com/questions/11229617/error-this-element-uniqueid-is-not-a-function-jquery-ui-anyone-seen-this-befo (https://stackoverflow.com/questions/11229617/error-this-element-uniqueid-is-not-a-function-jquery-ui-anyone-seen-this-befo)
Ist dein FHEM aktuell? Bzw. das Betriebssystem?
Gruß
Ben
Titel: Antw:widget_weatherdetail.js
Beitrag von: FosCo am 18 November 2019, 16:14:47
Identisches Problem im Firefox 66.0b7, da ich nur ein widget verwenden will stört es mich erstmal nicht weiter, die zeile auszukommentieren.
Titel: Antw:widget_weatherdetail.js
Beitrag von: cRaZyT am 07 Mai 2020, 00:53:42
Hallo die Runde,

ich bin absolut neu im Fhem Umfeld und bekomme es nicht gebacken, das PROPLANTA Modul im FTUI so einzubinden wie im Artikel https://wiki.fhem.de/wiki/PROPLANTA (https://wiki.fhem.de/wiki/PROPLANTA) im ersten Anwendungsbeispiel angezeit wird. Im Fhem Backend habe ich die Ansicht wie abgebildet aber ich habe es bisher nicht geschafft, das im FTUI genauso darzustellen.
Vielleicht hat ja einer von Euch einen Tipp wie ich das bewerkstelligt bekomme.

Danke im voraus für Eure Tips und Hilfestellungen,

Gruß
Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: joschre am 26 September 2020, 22:16:56
Hallo,

ich finde das Widget richtig super, danke dafür!! Aber ich bekomme es in FTUI nicht ganz richtig angezeigt. Die Icons von Kleinklima sind viel zu klein.
Wenn ich die "Einstellungen" auf "icons" ändere werden mir die meteoicons etwas größer angezeigt, allerdings sind dann oben in der Übersicht immer noch die kleinen kleinklimaicons zu sehen.

Ich habe mir schon die widget_weatherdetail.js angeschaut und die Vorschau auf 7 Tage erweitert und gesehen, dass nun auch das Attribut "text" verwendet werden kann. Aber das Größenproblem konnte ich leider nicht lösen :-(

Vielleicht kann mir jemand helfen, das wäre super.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 27 September 2020, 14:20:04
Zitat von: joschre am 26 September 2020, 22:16:56
ich finde das Widget richtig super, danke dafür!! Aber ich bekomme es in FTUI nicht ganz richtig angezeigt. Die Icons von Kleinklima sind viel zu klein.
Die werden dynamisch an den verfügbaren Platz angepasst. Gib dem ganzen Widget mal in der Höhe mehr Platz. Z.B. dem umgebenden DIV (oder was auch immer da ist) eine fixe Höhe geben.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: joschre am 03 Oktober 2020, 23:03:43
Danke für die Antwort!!
Leider habe ich hier schon verschiedene Dinge ausprobiert. Aktuell ist es folgende Einstellung, aber auch das ändert nichts:
index.html:

<meta name="widget_base_width" content="11">
    <meta name="widget_base_height" content="11">


wetter.html:


<li data-row="1" data-col="4" data-sizex="100" data-sizey="30">  <!-- Wetter Detail -->
<div data-type="weatherdetail" data-device="WetterProplanta" data-detail='["clock","text","chOfRain","temp","weather","kleinklima"]'></div>
</li>



Ich hab die widget_weatherdetail.css und natürlich die widget_weatherdetail.js in den entsprechenden Ordnern. Änderungen an der css-datei haben auch Auswirkungen auf die Anzeige. In der fhem-tablet-ui-user.css ist aktuell kein Inhalt.
Vielleicht habe ich auch etwas ganz grundlegendes vergessen oder übersehen. Nach mehreren Tagen verliert man manchmal den Überblick und den roten Faden  ::)
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 03 Oktober 2020, 23:42:00
Hi,
versuch mal, in das div noch

style="width:100%;height:100%;"

mit reinzupacken. Wenn das nicht klappt, dann auch mal eine absolute Angabe versuchen, also sowas wie

style="width:100%;height:500px"

Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: joschre am 05 Oktober 2020, 21:01:34
Hallo Torsten,

danke für deine schnelle und unkomplizierte Antworten. Auch wenn Foren dafür da sind, dass Menschen sich gegenseitig helfen finde ich das immer noch nicht selbstverständlich - DANKE dafür.
leider klappte es immer noch nicht. Ich habe sowohl einige absolute (px) als auch relative (%) Werte getestet. die Höhenangabe hat gar keine Auswirkung!! Ob ich style="width:100%;height:500px" oder style="width:100%;height:5px" nutze ändert in der Höhe absolut nichts. Wenn ich die Breite vergrößere wird lediglich der untere Teil mit den Infos breiter und der Abstand zwischen den Uhrzeiten wird größer. Der Teil oben mit den Tagen bleibt unverändert.
Im Gegensatz zu den Screenshots die ich von anderen gesehen habe ist bei mir das Datum auch extrem gequetscht. 

Ich brauche lediglich die weatherdetail.CSS und die weatherdetail.JS von FUIP? Ich hab keine Lust deine/eure Zeit zu beanspruchen und so ein "dulli" Fehler zu machen.
Titel: Antw:widget_weatherdetail.js
Beitrag von: Thorsten Pferdekaemper am 17 Oktober 2020, 20:30:01
Hi,
vielleicht probierst Du es einfach mal mit FUIP aus. Möglicherweise funktioniert es da auch nicht...
Wenn es da aber funktioniert, dann können wir anfangen, die Unterschiede zu analysieren.
Gruß,
   Thorsten
Titel: Antw:widget_weatherdetail.js
Beitrag von: wicky am 18 Oktober 2020, 20:22:20
Hallo joschre,

hatte das gleiche Problem, habe dann in der widget.weatherdetail.js
den Wert geändert. Bei mir Zeile 185

var picWidth = Math.round(picHeight * [color=red]190[/color] / 120);


Gruß Hans
Titel: Antw:widget_weatherdetail.js
Beitrag von: Tutti_Bomovski am 05 November 2020, 16:18:54
Hallo,
ganz großen Dank an dieses coole Widget.
Ich habe es gerade relativ easy in mein FTUI eingebunden.
Sieht gut aus...

Danke
Tutti...