FHEM Tablet UI LED Matrix auf Tablett + Smartphone Darstellung + Lauflicht

Begonnen von harway2007, 25 Oktober 2015, 15:10:33

Vorheriges Thema - Nächstes Thema

harway2007

Hallo - heute folgendes Projekt gestartet:

Ziel: Ersatz für sonstige LED Matrix Hardware da Tabletts, Smartphone, TV mit Browser vorhanden,
Darstellung von Symbolen und Zahlen per "Software LED Matrix"
Anwendungen: Zahlendarstellung / grosse Symbole / Lauflicht / Warnlicht / Etagenzustände u.v.m   
Je nach Anzahl der "LED Punkte" wären Anzeigen bis hin zum Bild möglich ...

Erste Probs:
longpoll und aussehen der Punkte - besser wäre ein Button der einer LED gleicht und Farbe wechseln kann

Angefangen mit
dummys - die Reihe und Spalte reprensetieren:

define d12 dummy
attr d12 room dummys
attr d12 setList red green blue orange white
attr d12 webCmd red:green:blue:orange:white

define d13 dummy
attr d13 room dummys
attr d13 setList red green blue orange white
attr d13 webCmd red:green:blue:orange:white

z.B. mit set d13 red - wird der entsprechende Matrix Punkt "rot"
u.s.w.

in der UI Seite html:

<li data-row="1" data-col="2" data-sizex="1" data-sizey="4">
        <header>2</header>
<div data-type="label" class="cell" >Info 1</div>
<div data-type="multistatebutton"
       data-device="d11"
       data-get-on='["red","green","blue","orange"]'
       data-icons='["light-led","fa-circle","fa-circle","fa-circle"]'
       data-background-colors='["red", "green", "blue", "orange"]'
       data-colors='["red", "green", "blue", "orange"]'
></div>
<br>
<div data-type="label" class="cell" >Info 2</div>
<div data-type="multistatebutton"
       data-device="d12"
       data-get-on='["red","green","blue","orange"]'
       data-icons='["light-led","fa-circle","fa-circle","fa-circle"]'
       data-background-colors='["red", "green", "blue", "orange"]'
       data-colors='["red", "green", "blue", "orange"]'

></div>
<br>



da ich nicht der "Programmierprofi" bin frag ich jetzt:
a. wie kann man die Matrix am besten abilden - ohne komplett jede Soft LED als Dummy in Fhem anzulegen
b. wie optimiert man die html - damit nicht für jede Soft LED ein Block erzeugt werden muss
c. wie setzt man "d13" zusammen - ensteht ja durch Buchstabe d und Reihe und Spalte - sodaß man
Schleifen programmieren kann - z.B. für Lauflicht

d. hat schon jemand soetwas versucht ??

MFG Harway


harway2007

noch Handgemacht .. aber aus 18 Metern auf einem 7 Zoll Tablett noch zu lesen ..
siehe Bild ...

setstate

Hallo Harway,

interessantes Forschungsprojekt - Retrolook, aber ist das nicht zu langsam, jeden Punkt einzeln von FHEM zu beziehen? Da kann es doch bis zu 2 Sekunden Verzögerung kommen.
Besser wäre doch, den Text einmalig zu holen und dann als Label auf dem Tablet groß dazustellen (> 72px) und mit CSS3 Klassen als Laufschrift zu animieren.

harway2007

Habe jetzt 139 Dummys angelegt und in der HTML 139 Buttons als
z.B. den letzten Punkt als:
<div data-type="multistatebutton"
       data-device="A139"
       data-get-on='["red","green","blue","orange","black","yellow","#222222"]'
       data-icons='["fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle"]'
       data-background-colors='["red","green","blue","orange","black","yellow","#222222"]'
       data-colors='["red","green","blue","orange","black","yellow","#222222"]'

setze alle Punkte als statisches Bild durch anklicken des Dummys ...

da ich nicht wirklich Programmieren kann - habe ich Echtzeit nicht geplant - scheitere schon
hierdran:

#################################################
# $Id: 99_myUtilsAlleGelb.pm hr
package main;

use strict;
use warnings;
use POSIX;

sub myUtilsAlleGelb_Initialize($$) {
    my ($hash) = @_;

    #...

}

# Enter you functions below _this_ line.

sub ag($) {

my $i;
my $Punkt;
my $bofarbe = "orange";
my ($Sonst) = @_;

for ($i = 10 ; $i <=139 ; $i++ ) fhem "set A13 $bofarbe" ;

}

1;
an dieser Stelle brauch ich den Buchstaben A und den Wert von $i als String und Aufruf
des hochgezählten Button ..
schicke gleich noch zwei Bilder hinterher ...


harway2007

Retro .. haha  :)
es geht um die Sichtbarkeit auch auf Entfernung .. Symbole für Behinderte die auf Symbole reagieren und nicht auf Töne oder Buchstaben .. als nächstes mach ich die Symbole ...
hier die Screenshots ..

hätte es natürlich gern etwas einfacher .. ist ne mühsame Arbeit ..

werde die Matrix noch nach rechts erweitern .. von 13 auf evt.. 26 ..

evt. hat ja jemand ne Idee ..

setstate

In Perl und PHP verbindet man strings per . (Punkt)

for ($i = 10 ; $i <=139 ; $i++ ) fhem "set A".$i." ".$bofarbe ;

harway2007

verstanden .. leider kommt
syntax error at ./FHEM/99_myUtilsag.pm line 26, near ") fhem "
#################################################
# $Id: 99_myUtilsag.pm hr
package main;

use strict;
use warnings;
use POSIX;

sub myUtilsag_Initialize($$) {
    my ($hash) = @_;

    #...

}

# Enter you functions below _this_ line.

sub ag($) {

my $i;
my $Punkt;
my $repeatStr = "";
my $bofarbe = "orange";
my ($Sonst) = @_;

for ($i = 10 ; $i <=139 ; $i++) fhem "set A".$i." ".$bofarbe ;

}

1;

setstate

Die geschweiften Klammern fehlen

for ($i = 10 ; $i <=139 ; $i++) {fhem "set A".$i." ".$bofarbe ;}

harway2007

das wars - Danke !!
rufe jetzt mit {ag("red")} routine auf
dies übergibt die gewünschte Farbe jetzt direkt an die sub..

my ($Sonst) = @_;
for ($i = 10 ; $i <=139 ; $i++) {fhem "set A".$i." ".$Sonst ;}

jetzt mach ich mir Gedanken wie noch etwas einfacher weiter geht ...

harway2007

benötige noch ein weitere kleine Hilfe: möchte Spalten und Reihen per sub ansprechen :
also eine verschachtelte "for" Schleife ...
z.B.  soll Zählen von 10 bis 14 dann auf 20 wechseln und dort von 20 bis 24
nächste Schleife 30er bis 190er um unterschiedliche Bereiche schnell zu füllen.. 

for ($i = 106 ; $i <=136 ; $i + 10) {fhem "set A".$i." "."red" ;     
if ( $za <= 4 ) { {fhem "set A".$i+$za." "."red" ;} $za = $za + 1;}}
}
dieses Konstrukt von mir läuft leider in einer Endlosschleife ...
die Übergabe der Farben und Werte mache ich später über {ag6("red","106","136","4","1")}
erste Wert Startzeile / zweite Wert Endzeile / dritte Wert ist Anzahl Spalten nach unten / vierte Wert Schrittweite nach unten
siehe hier das rote Rechteck im Bild ...


setstate

wieder nur ein ungetesteter Vorschlag:

for ($row = 10; $row < 13; $row++) {
   for ($col = 4; $col  < 8; $col++) {
      fhem "set A".$row.$col." red" ;     
   }
}


harway2007

jetzt liefert der Tuer1 Sensor seinen Zustand ...
siehe Bild ..
leider kann ich nicht so gut programmieren das die Matrix mit einem SVG oder
einem Font gefüllt werden kann ..
zur Zeit setze ich die Punkte manuell mit  "set A13 red"; "set A14 red" u.s.w
in ein Notify das dann per Dummy aufgerufen wird ..

.. Ergebnis ist gut man kann es aus x Metern perfekt sehen ..

setstate

Großen Font nutzen geht ganz easy.
Denn, alles was nicht als vordefinierte Klasse vom FTUI Framework angeboten wird, kann man einfach im HTML Syntax per Style-Tag angeben:


<li data-row="4" data-col="1" data-sizex="10" data-sizey="10">
  <header>EXAMPLE2</header>
  <div data-type="label"
       data-device="MyNotify"
       class="red"
       style="font-size:400px">SOS</div>
</li>

setstate

Man kann das auch mit einem Symbol-Widget machen und dann mit der "multi state notation" auf verschiedene Status reagieren, um das Icon zu ändern und einzufärben

harway2007


harway2007

 ;D habs gerade mal direkt probiert ..
mit
<div data-type="label" style="font-size:180px; color:rgb(255, 255, 0);"  class="narrow darker">Test</div>