Autor Thema: widget_weatherdetail.js  (Gelesen 1266 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?






Offline gloob

  • Hero Member
  • *****
  • Beiträge: 1951
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: 70
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: 4758
  • 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: 70
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: 70
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: 4758
  • 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: 70
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: 103
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: 4758
  • 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: 4758
  • 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)

 

decade-submarginal