FTUI version 3

SirMarco · 22 März 2021, 21:47:25

Moin Moin

Helfen dir die Browser Entwicklertools nicht weiter?

https://blog.kulturbanause.de/2018/03/die-chrome-entwicklertools-devtools-fuer-designer-und-einsteiger/

Grüsse

yersinia · 23 März 2021, 08:52:13

Oder für diejenigen mit dem Fuchsbrowser:
https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode

Für grid-handling im CSS3 hat mir dies ganz gut geholfen:
https://css-tricks.com/snippets/css/complete-guide-grid

Sailor · 23 März 2021, 08:56:57

Hallo yersinia

Zitat von: yersinia am 23 März 2021, 08:52:13
Oder für diejenigen mit dem Fuchsbrowser:
https://developer.mozilla.org/de/docs/Tools/Responsive_Design_Mode

Wieder was gelernt!
Danke!

Gruß
Sailor

Sailor · 23 März 2021, 15:51:49

Moin zusammen

Mal wieder eine Frage...

Um zu verhindern, dass ich 76 mal den gleichen Popup mit unterschiedlichen Parameter im Code kopieren muss meine Frage:

Ist es möglich den Popup mit einem Satz Parameter aufzurufen?

Also so etwas wie

Code Auswählen


<ftui-image  [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px"
      popup-target = "frontdoorcam"
      [popup-parameter] = 'Parameter1: Value1, Parameter2: Value2, Parameter3; Value3'>
</ftui-image>

Code Auswählen


<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
	<header>{{Parameter1}}</header>
	<ftui-image [src] ="{{Parameter2}}" height="810px" width="1080px"</ftui-image>
	<ftui-label [text]="{{Parameter3}}"></ftui-label
	<ftui-button color="danger" popup-close>Close</ftui-button> 
</ftui-popup>

Kennt da Jemand die Lösung?

Gruß
Sailor

yersinia · 23 März 2021, 16:01:15

Müsste das nicht so funktionieren:

Code Auswählen

<ftui-image  [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px"
      popup-target = "frontdoorcam"
      parameter1="Value1"
      parameter2="Value2"
      parameter3="Value3">
</ftui-image>

<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
	<header>{{parameter1}}</header>
	<ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image>
	<ftui-label [text]="{{parameter3}}"></ftui-label
	<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>

Sailor · 23 März 2021, 20:26:09

Hi Yersinia

Zitat von: yersinia am 23 März 2021, 16:01:15
Müsste das nicht so funktionieren:
Code Auswählen Erweitern
<ftui-image [src] = "OS_DoorBird:HistoryFilePath_doorbell_Image_00" width="180px" popup-target = "frontdoorcam" parameter1="Value1" parameter2="Value2" parameter3="Value3"> </ftui-image> <ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px"> <header>{{parameter1}}</header> <ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image> <ftui-label [text]="{{parameter3}}"></ftui-label <ftui-button color="danger" popup-close>Close</ftui-button> </ftui-popup>

Nein, leider werden die Parameter nicht übergeben.
Was sagt den setstate dazu?

Gruß
Sailor

Sailor · 23 März 2021, 20:39:03

Und schon mal eine Frage im voraus, wenn sich das Problem um die Parameter - Übergabe auf die ein oder andere Weise erledigt hat:

Hat schon Jemand Erfahrung mit maps?
Da schon bei ftui v2.x dies ein externes Modul vom user eki ist, vermute ich, dass nur dieser ein entsprechendes ftui3 - Modul bereitstellen kann?

Gruß
Sailor

yersinia · 24 März 2021, 08:41:15

Zitat von: Sailor am 23 März 2021, 20:26:09Hi Yersinia
Nein, leider werden die Parameter nicht übergeben.
Was sagt den setstate dazu?

Möglicherweise funktioniert das auch aus einem ftui-image in ein ftui-popup nicht. Ich nutze es nur um ftui-content einzubinden.

Code Auswählen

<ftui-content file="cam.html"
      parameter0="OS_DoorBird:HistoryFilePath_doorbell_Image_00"
      parameter1="Value1"
      parameter2="Value2"
      parameter3="Value3">
</ftui-content>

und cam.html könnte ich mir so vorstellen:

Code Auswählen

<ftui-image  [src] = "{{parameter0}}" width="180px"
      popup-target = "frontdoorcam">
</ftui-image>

<ftui-popup shape="round" id="frontdoorcam" height="870px" width="1080px">
	<header>{{parameter1}}</header>
	<ftui-image [src] ="{{parameter2}}" height="810px" width="1080px"</ftui-image>
	<ftui-label [text]="{{parameter3}}"></ftui-label
	<ftui-button color="danger" popup-close>Close</ftui-button>
</ftui-popup>

Sailor · 24 März 2021, 11:35:49

Hallo Yersinia

Zitat von: yersinia am 24 März 2021, 08:41:15
Möglicherweise funktioniert das auch aus einem ftui-image in ein ftui-popup nicht. Ich nutze es nur um ftui-content einzubinden.

Du bist Spitze!

Dein Code klappt am Anfang gut, aber wenn man dann ein Popup aufmache, dann öffnen sich alle 60 weil alle den gleichen Popup-Namen tragen...

Aber dieser Code klappt:

Code Auswählen


<table>
	<tr>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_doorbell_Image_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_doorbell_Video_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_motionsensor_Image_00"> </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_motionsensor_Video_00"> </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_snapshot_Image_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "OS_DoorBird:HistoryFilePath_manual_Video_00">       </ftui-content></td>
	</tr>
</table>

content/home/content_home_historyevent.html:

Code Auswählen

<ftui-image  [src] = "{{DbImageUrl}}" width="110px"
      popup-target = "{{DbImageUrl}}">
</ftui-image>

<ftui-popup shape="round" id="{{DbImageUrl}}" height="900px" width="1000px">
	<header>Timestamp of historical event: <ftui-label [text]="{{DbImageUrl}}_Timestamp"></ftui-label></header>
	<ftui-image [src] ="{{DbImageUrl}}" width="990px"></ftui-image>
</ftui-popup>

Der Trick: Man muss die ID auch individuell gestalten. In diesem Fall ist der Übergabeparameter für die Datei gleichzeitig die ID für das Popup!

Nur die Videos werden nicht mit <ftui-Images> angezeigt... Daran arbeite ich noch (mit eurer Hilfe?)
Der html- tag <video> funktioniert nicht mit {{DbImageUrl}}, Der auskommentierte Link darüber schon wie gewuencht

Code Auswählen

<video width="110" controls>
	<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
	<source src="{{DbImageUrl}}">
	Your browser does not support the video tag.
</video>

Gruß
Sailor

yersinia · 24 März 2021, 12:12:58

Ja, die id sollte eindeutig sein.

Anstatt die ganze Url mitzugeben, könntest du dies auch kürzen weil der prefix/device:reading immer gleich (OS_DoorBird:HistoryFilePath_) zu sein scheint.

Code Auswählen

<table>
	<tr>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "doorbell_Image_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "doorbell_Video_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "motionsensor_Image_00"> </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "motionsensor_Video_00"> </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "snapshot_Image_00">     </ftui-content></td>
		<td align="center"><ftui-content file     = "content/home/content_home_historyevent.html" DbImageUrl = "manual_Video_00">       </ftui-content></td>
	</tr>
</table>

Die HTML dann entsprechend:

Code Auswählen

<ftui-image  [src] = "OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="110px"
      popup-target = "{{DbImageUrl}}">
</ftui-image>

<ftui-popup shape="round" id="{{DbImageUrl}}" height="900px" width="1000px">
	<header>Timestamp of historical event: <ftui-label [text]="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}_Timestamp"></ftui-label></header>
	<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px"></ftui-image>
</ftui-popup>

Zitat von: Sailor am 24 März 2021, 11:35:49Nur die Videos werden nicht mit <ftui-Images> angezeigt... Daran arbeite ich noch (mit eurer Hilfe?)

Welches format liefert die Kamera? Ein jpg?
Ob ftui-image für einen stream geeignet ist, kann ich dir nicht beantworten (@setstate?). Aber es gibt die Option das Bild automatisch zu refreshen:

Code Auswählen

<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px" interval="300" nocache></ftui-image>
https://knowthelist.github.io/ftui/www/ftui/examples/image.html

Sailor · 24 März 2021, 12:17:03

Hallo Yersinia

Zitat von: yersinia am 24 März 2021, 12:12:58
Ja, die id sollte eindeutig sein.
Anstatt die ganze Url mitzugeben, könntest du dies auch kürzen weil der prefix/device:reading immer gleich (OS_DoorBird:HistoryFilePath_) zu sein scheint.

Das könnte man in der Tat vereinfachen...

Zitat von: yersinia am 24 März 2021, 12:12:58
Welches format liefert die Kamera? Ein jpg?
Ob ftui-image für einen stream geeignet ist, kann ich dir nicht beantworten (@setstate?). Aber es gibt die Option das Bild automatisch zu refreshen:
Code Auswählen Erweitern
<ftui-image [src] ="OS_DoorBird:HistoryFilePath_{{DbImageUrl}}" width="990px" interval="300" nocache></ftui-image>
https://knowthelist.github.io/ftui/www/ftui/examples/image.html

Das habe ich so versucht und es kommt nur ein "Image not available" angezeigt.

Und wie ich oben schon nachgetragen habe (nachdem du geschrieben hast) funktioniert das <video>-tag nicht mit den {{DbImageUrl}} - Parameter zusammen.

Gruß
Sailor

yersinia · 24 März 2021, 12:21:23

Möglicherweise lädt dann ftui-image auch keine mp4 streams, ist ja auch kein Bild.

Zitat von: Sailor am 24 März 2021, 12:17:03Und wie ich oben schon nachgetragen habe (nachdem du geschrieben hast) funktioniert das <video>-tag nicht mit den {{DbImageUrl}} - Parameter zusammen.

Eventuell hilft dir ftui-binding wieder

Code Auswählen

<video width="110" controls>
	<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
	<source ftui-binding="src" [src]="{{DbImageUrl}}">
	Your browser does not support the video tag.
</video>

Dazu müsstest du aber DbImageUrl auch entsprechend korrigieren, wenn die URL entsprechend gekürzt ist.

Sailor · 24 März 2021, 12:40:51

Hallo Yersinia

Zitat von: yersinia am 24 März 2021, 12:21:23
Eventuell hilft dir ftui-binding wieder
Code Auswählen Erweitern
<video width="110" controls>  <source ftui-binding="src" [src]="{{DbImageUrl}}"> Your browser does not support the video tag. </video>

Jau, das hat immerhin geklappt, dass jetzt keine Fehlermeldung mehr kommt und der Verwies auf die richtige Datei da ist.
Jetzt muss der Player nur noch die blöde Datei abspielen... $:-\$
Aber das ist was fürs html - Forum... Ich berichte
Aber irgendwas ist immer!

(Woher weisst du das bloss alles?

)

Gruß
Sailor

yersinia · 24 März 2021, 12:44:25

Zitat von: Sailor am 24 März 2021, 12:40:51Jetzt muss der Player nur noch die blöde Datei abspielen... $:-\$
Aber das ist was fürs html - Forum... Ich berichte

https://www.w3schools.com/tags/att_video_autoplay.asp

Code Auswählen

<video width="110" controls autoplay>
	<!-- <source src="../doorbird/20210324-102602_motionsensor.mp4"> -->
	<source ftui-binding="src" [src]="{{DbImageUrl}}">
	Your browser does not support the video tag.
</video>

Eisix · 24 März 2021, 13:21:12

video.js schon probiert?

So geht es bei mir mit Netatmo

Code Auswählen


        <video id="my-video1" class="video-js" controls preload="auto" style="width: 100%; height: 100%"
                poster="http://192.168.X.Xlive/snapshot_720.jpg" data-setup="{}">
                <source src="http://192.168.X.X/live/files/medium/index.m3u8" type='application/x-mpegURL'>
        </video>

Du müßtest den mime type ändern.

Gruß
Eisix