marc1310
April 6, 2021, 9:08pm
21
okay you mean when the vItem received command ON the popup opens, i must put the code for the ON command of the vItem in the Button where i call the popup and set the name of the actor.
Item_jsonsearch_name
but this dont works because the button has two commands see
action: command
actionCommand: =items.Item_actor1_name.state
actionItem: Item_jsonsearch_name
popupOpen: .somePopup
or missunderstand i you?
when i add it so
- component: f7-popup
config:
animate: true
opened: '=(items.vItem.state == "ON") ? true : false'
and trigger over my rule the vItem the poup opens automatic, but this is not what i need.
Oliver2
April 6, 2021, 11:32pm
22
if I understand you correctly you want the following:
if yes, then
trigger rule when pressing button vItem1 or button which is linked to an item which refreshes your json data, like this:
when
item vItem1 received update
then
code to update json data
createTimer(now.plusSeconds(3), [ |
vItem2.sendCommand("OFF")
//note that this is a different item (vItem2)
])
end
after 3 seconds vItem2 is triggered
change f7-popup accordingly:opened: '=(items.vItem2.state == "ON") ? true : false'
marc1310
April 7, 2021, 2:54am
23
Oliver2:
])
it works. i dont know why?
its because the
opened: '=(items.vItem2.state == "ON") ? true : false'
says that the code in the popup only is loaded when vItem2 is changed to OFF?
marc1310
April 7, 2021, 3:26am
24
@RGroll
is it possible to have a scrollbar?
or that he scrolls the popup when the entries are longer than the page?
now i see the last icon not because its to long:
Oliver2
April 7, 2021, 6:39am
25
correct. popup pops up when vItem2 is ON. If you tap on the popup, the invisible button inside the popup sets vItem to OFF, thus popup is closing
1 Like
Oliver2
April 7, 2021, 6:50am
26
marc1310:
scrollbar
they should appear automatically, if you swipe up content. but this requires to delete the button inside the popup code. remeber to set tabletFullscreen: false
1 Like
marc1310
April 7, 2021, 9:09am
27
i have the tabletFullscreen:false in my popup, but i had no scrollbar and the last cover is still cut off like in my picture above.
here is my code perhaps you find a problem ?!
- component: f7-popup
config:
tabletFullscreen: false
animate: true
opened: '=(items.vItem2.state == "ON") ? true : false'
style:
background-color: rgba(37, 44, 40, 1)
class:
- somePopup
slots:
default:
- component: f7-navbar
slots:
default:
- component: f7-nav-right
slots:
default:
- component: oh-link
config:
text: Schliessen
popupClose: true
- component: f7-block
config:
style:
class:
- no padding
- no margin
slots:
default:
- component: f7-row
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
style:
width: auto
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: Label
config:
style:
position: relative
left: 10px
top: -30px
strong: true
font-size: 24px
width: auto
class:
- padding
text: =items.Item_jsonsearch_name.state
- component: f7-row
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
style:
width: 500px
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
slots:
default:
- component: oh-image
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
item: Item_actor1_movie1_poster
style:
margin: 0 0.4em
width: 70px
height: 110px
- component: Label
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
text: =items.Item_actor1_movie1_title.state
style:
strong: true
font-size: 16px
position: absolute
top: 0px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
text: =items.Item_actor1_movie1_genre.state
style:
color: gray
font-size: 16px
position: absolute
top: 25px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
text: =Math.round(items.Item_actor1_movie1_runtime.state / 60) + " min"
style:
color: gray
font-size: 16px
position: absolute
top: 50px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie1_title.state != "UNDEF"
text: =items.Item_actor1_movie1_year.state
style:
color: gray
font-size: 16px
position: absolute
top: 90px
width: 385px
left: 90px
- component: f7-row
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
style:
width: 500px
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
slots:
default:
- component: oh-image
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
item: Item_actor1_movie2_poster
style:
margin: 0 0.4em
width: 70px
height: 110px
- component: Label
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
text: =items.Item_actor1_movie2_title.state
style:
strong: true
font-size: 16px
position: absolute
top: 0px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
text: =items.Item_actor1_movie2_genre.state
style:
color: gray
font-size: 16px
position: absolute
top: 25px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
text: =Math.round(items.Item_actor1_movie3_runtime.state / 60) + " min"
style:
color: gray
font-size: 16px
position: absolute
top: 50px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie2_title.state != "UNDEF"
text: =items.Item_actor1_movie2_year.state
style:
color: gray
font-size: 16px
position: absolute
top: 90px
width: 385px
left: 90px
- component: f7-row
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
style:
width: 500px
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
slots:
default:
- component: oh-image
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
item: Item_actor1_movie3_poster
style:
margin: 0 0.4em
width: 70px
height: 110px
- component: Label
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
text: =items.Item_actor1_movie3_title.state
style:
strong: true
font-size: 16px
position: absolute
top: 0px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
text: =items.Item_actor1_movie3_genre.state
style:
color: gray
font-size: 16px
position: absolute
top: 25px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
text: =Math.round(items.Item_actor1_movie3_runtime.state / 60) + " min"
style:
color: gray
font-size: 16px
position: absolute
top: 50px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie3_title.state != "UNDEF"
text: =items.Item_actor1_movie3_year.state
style:
color: gray
font-size: 16px
position: absolute
top: 90px
width: 385px
left: 90px
- component: f7-row
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
style:
width: 500px
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
slots:
default:
- component: oh-image
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
item: Item_actor1_movie4_poster
style:
margin: 0 0.4em
width: 70px
height: 110px
- component: Label
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
text: =items.Item_actor1_movie4_title.state
style:
strong: true
font-size: 16px
position: absolute
top: 0px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
text: =items.Item_actor1_movie4_genre.state
style:
color: gray
font-size: 16px
position: absolute
top: 25px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
text: =Math.round(items.Item_actor1_movie4_runtime.state / 60) + " min"
style:
color: gray
font-size: 16px
position: absolute
top: 50px
width: 385px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie4_title.state != "UNDEF"
text: =items.Item_actor1_movie4_year.state
style:
color: gray
font-size: 16px
position: absolute
top: 90px
width: 385px
left: 90px
i tested it with a new widget with a popup with only labels inside, and make 6 labels with a height: 200px and the popup dont has a scrollbar. and dont scrolls
marc1310
April 7, 2021, 10:47am
28
okay i found it.
i must declare after the popup a f7-page
- component: f7-popup
config:
tabletFullscreen: false
animate: true
opened: '=(items.vItem2.state == "ON") ? true : false'
style:
background-color: rgba(37, 44, 40, 1)
class:
- somePopup
slots:
default:
- component: f7-navbar
slots:
default:
- component: f7-nav-right
slots:
default:
- component: oh-link
config:
text: Schliessen
popupClose: true
- component: f7-page
config:
style:
background-color: rgba(37, 44, 40, 1)
class:
- no padding
- no margin
marc1310
April 8, 2021, 9:05am
29
is it possible to count the number items in a group or ( individual items) if the status is not âUNDEFâ?
okay here the solution
val sr1 = foundtvshows.members.filter[ i | i.state != UNDEF ].size
marc1310
April 8, 2021, 7:13pm
30
Here you can See what i made with the help from you All.
Thank you
1 Like
RGroll
April 8, 2021, 7:54pm
31
It would be nice if you can share this work with others in the UI category of this forum.
marc1310
April 9, 2021, 7:26am
32
Its still under tweaking, but when its done, i Do this of course.
@Oliver2
Can i write you a pm?
And are you german?
Oliver2
April 9, 2021, 8:27am
33
yes, german. sure, write a pm
