Hello,
My widget is getting bigger and bigger.
I now have over 3000 lines of code, and you can tell that the ui widget editor is reaching its limits.
I can no longer scroll or when I edit something it takes 3-4 seconds in places until it recognizes the input. I use the Chrome browser, are there any solutions for?
I testet IT on my Laptop and PC.
Everything has it’s limits - even the most powerful machine. Some recommendations how you could avoid the performance problems:
oh-repeater for components that repeats multiple times in your code - but avoid unnecessary loops.Yes, of course, but the Problem is the limitation in my use-case.
I would love to Split my widget in More than one, but Perhaps you remember in my thread i need two actions to perform this.
Set a item and open a widget in a button or a input-card.
By the way its Not possible to perform a Action on a input card?
In my input card i Set a string item, and now i need a second call, a Action to open a other widget.
Then my Problems were gone.
I dont make a “eierlegendevollmilchsau” davon bin ich noch weit entfernt.
I assume that you’re talking about this thread?
I can go no specific advice, as theres no code available in this thread but my guess would be that you don’t need 3k lines of code for the things I see in the YouTube video.
And to the topic of linking other widget components - it seems that for example the keypad remote part of the widget could be linked, as this doesnt need a mandatory connection to the rest of the elements:
The problem with my widget is that, for example, I view the films of the actors, there I can display a maximum of 15 films. Each film has a title, rating, viewed status, ID (to start the film) and an icon. That alone is 5 items per film, the x 15 is 75 items and then each label has 8 lines, for example. A lot comes together. The one with the keypad is an input card. There I pass the entered name to an item, that triggers the rule. But I can’t give an input card any action. Otherwise I could call up the new widget there instead of the popup. But unfortunately that is not possible. If I had 2 actions then I could outsource it to a second widget, so the entire code is in the popup and it is in the widget.
I can post the entire Code.
This sound like the ideal usecase to use the oh-repeater component instead of repeating thse informations 15 times.
You should, if you would like to get specific help.
here is my code, i cant post it here its too long
I just had a quick look at your code and you can reduce the code by ~1500 lines just by using the oh-repeater - you should definitely take a look at that component.
Everything from line 491 to line 2304 seems to follow the same pattern (except for the content, of course) and can be minimized to ~140 lines + the repeater-component.
And there also seem to be some room for improvements on the CSS side.
Could you also provide a full example of the JSON that you grab the contents from?
Okay, thats nice.
Can give me a example with for example a Label to use the oh-repeater?
From my json call i make or the generell json Docu?
The JSON itself that you receive and which fills the items like e.g. items.Item_actor1_movie3_title_search.state
Have a look here to learn more about the usage of the repeater component:
If I see what exactly the source looks like, from which you extract these informations, I might be able to provide you a simple example.
okay, in the widget i posted, i use 2 jason calls, first for the basic infos, how plot,title…
then when i enter a actor name and a popup comes with the infos. you found the right item.
“Item_actor1_movie1_title_search”, there are 15 movies for example. the last item is the “Item_actor1_movie15_title_search”.
here is the json call:
{ "jsonrpc": "2.0", "method": "VideoLibrary.GetMovies", "params": { "properties": ["title","art","year","genre","runtime","rating"], "filter": { "or": [ { "field": "actor", "operator": "contains", "value": ["ben affleck"] } ] } }, "id": 1 }
my result
{
"id": 1,
"jsonrpc": "2.0",
"result": {
"limits": {
"end": 4,
"start": 0,
"total": 4
},
"movies": [
{
"art": {
"banner": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fbanner.jpg/",
"clearart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fclearart.png/",
"clearlogo": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)-clearlogo.png/",
"discart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)-discart.png/",
"fanart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209112%2fmoviebackground%2fbatman-v-superman-dawn-of-justice-56e713b878f2f.jpg/",
"icon": "image://DefaultVideo.png/",
"landscape": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)-landscape.jpg/",
"logo": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2flogo.png/",
"poster": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)-poster.jpg/",
"set.banner": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviebanner%2fman-of-steel-collection-5f0ad7f63e855.jpg/",
"set.clearart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fhdmovieclearart%2fman-of-steel-collection-58557d3c57765.png/",
"set.clearlogo": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fhdmovielogo%2fman-of-steel-collection-56f89f22b00bc.png/",
"set.discart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviedisc%2fman-of-steel-collection-5f73a3370cfa6.png/",
"set.fanart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviebackground%2fman-of-steel-collection-5f0ad81cbab51.jpg/",
"set.landscape": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviethumb%2fman-of-steel-collection-5f0ad80579c01.jpg/",
"set.poster": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmovieposter%2fman-of-steel-collection-5f0ad82af3a69.jpg/",
"thumb": "image://video@smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016).mkv/"
},
"genre": [
"Action",
"Abenteuer",
"Fantasy"
],
"label": "Batman v Superman: Dawn of Justice",
"movieid": 106,
"rating": 5.900000095367432,
"runtime": 10953,
"title": "Batman v Superman: Dawn of Justice",
"year": 2016
},
{
"art": {
"banner": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fbanner.jpg/",
"clearart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fclearart.png/",
"clearlogo": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fSuicide%20Squad%20(2016)-clearlogo.png/",
"discart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fSuicide%20Squad%20(2016)-discart.png/",
"fanart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f297761%2fmoviebackground%2fsuicide-squad-56d4c22f0a7c4.jpg/",
"icon": "image://DefaultVideo.png/",
"landscape": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fSuicide%20Squad%20(2016)-landscape.jpg/",
"logo": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2flogo.png/",
"poster": "image://smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fSuicide%20Squad%20(2016)-poster.jpg/",
"set.fanart": "image://https%3a%2f%2fimage.tmdb.org%2ft%2fp%2foriginal%2faOQhajGvWesR386ISKwuxCUtzZJ.jpg/",
"set.poster": "image://https%3a%2f%2fimage.tmdb.org%2ft%2fp%2foriginal%2fbdgaCpdDh0J0H7ZRpDP2NJ8zxJE.jpg/",
"thumb": "image://video@smb%3a%2f%2f192.168.0.199%3a445%2f8TB_WHite%2fSuicide%20Squad%20(2016)%2fSuicide%20Squad%20(2016).mkv/"
},
"genre": [
"Action",
"Abenteuer",
"Krimi",
"Fantasy",
"Science Fiction"
],
"label": "Suicide Squad",
"movieid": 202,
"rating": 5.900000095367432,
"runtime": 7373,
"title": "Suicide Squad",
"year": 2016
},
{
"art": {
"clearlogo": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f791373%2fhdmovielogo%2fzack-snyders-justice-league-5ed3f2d1a1547.png/",
"fanart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f791373%2fmoviebackground%2fzack-snyders-justice-league-5f51a473a8b6e.jpg/",
"icon": "image://DefaultVideo.png/",
"landscape": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fZack%20Snyders%20Justice%20League%20(2021)%20%5b4K%5d%20%5bHDR%5d%2fZack%20Snyders%20Justice%20League%20(2021)%20%5b4K%5d%20%5bHDR%5d-landscape.jpg/",
"poster": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f791373%2fmovieposter%2fzack-snyders-justice-league-603fdb3eab40b.jpg/",
"thumb": "image://video@smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fZack%20Snyders%20Justice%20League%20(2021)%20%5b4K%5d%20%5bHDR%5d%2fZack%20Snyders%20Justice%20League%20(2021)%20%5b4K%5d%20%5bHDR%5d.mkv/"
},
"genre": [
"Action",
"Abenteuer",
"Fantasy",
"Science Fiction"
],
"label": "Zack Snyder's Justice League",
"movieid": 477,
"rating": 8.699999809265137,
"runtime": 14549,
"title": "Zack Snyder's Justice League",
"year": 2021
},
{
"art": {
"banner": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d-banner.jpg/",
"clearart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fclearart.png/",
"disc": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fdisc.png/",
"fanart": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d-fanart.jpg/",
"icon": "image://DefaultVideo.png/",
"landscape": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d-landscape.jpg/",
"logo": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2flogo.png/",
"poster": "image://smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d-poster.jpg/",
"set.banner": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviebanner%2fman-of-steel-collection-5f0ad7f63e855.jpg/",
"set.clearart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fhdmovieclearart%2fman-of-steel-collection-58557d3c57765.png/",
"set.clearlogo": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fhdmovielogo%2fman-of-steel-collection-56f89f22b00bc.png/",
"set.discart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviedisc%2fman-of-steel-collection-5f73a3370cfa6.png/",
"set.fanart": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviebackground%2fman-of-steel-collection-5f0ad81cbab51.jpg/",
"set.landscape": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmoviethumb%2fman-of-steel-collection-5f0ad80579c01.jpg/",
"set.poster": "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f209131%2fmovieposter%2fman-of-steel-collection-5f0ad82af3a69.jpg/",
"thumb": "image://video@smb%3a%2f%2f192.168.0.199%3a445%2f12TB%2fFilme%204K%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d%2fBatman%20v%20Superman%20Dawn%20of%20Justice%20(2016)%20%5b4K%5d%20%5bHDR%5d%20%5bULTIMATE%20CUT%5d.mkv/"
},
"genre": [
"Action",
"Abenteuer",
"Fantasy"
],
"label": "Batman v Superman: Dawn of Justice ULTIMATE CUT",
"movieid": 740,
"rating": 5.900001049041748,
"runtime": 10920,
"title": "Batman v Superman: Dawn of Justice ULTIMATE CUT",
"year": 2016
}
],
}
}
uid: widget_d09f66329e
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 18, 2021, 5:53:13 PM
component: f7-card
config:
title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
footer: =props.prop1
slots:
content:
- component: f7-row
config:
visible: =items.Item_actor1_movie1_title_search.state != "UNDEF"
style:
width: 100%
position: relative
left: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
action: command
actionCommand: =items.Item_actor1_movie1_movieid_search.state
actionItem: Item_playactors_movieid_search
style:
top: 0px
width: auto
height: auto
background-color: rgba(31, 31, 29, 0.5)
class:
- no-padding
- no-margin
slots:
default:
- component: oh-repeater
config:
for: fish
fragment: true
sourceType: array
in:
- name: Film1
icon: Item_actor1_movie1_poster_search
label: Item_actor1_movie1_title_search
genre: Item_actor1_movie1_genre_search
rating: Item_actor1_movie1_rating_search
year: Item_actor1_movie1_year_search
- name: Film2
icon: Item_actor1_movie2_poster_search
label: Item_actor1_movie2_title_search
genre: Item_actor1_movie2_genre_search
rating: Item_actor1_movie2_rating_search
year: Item_actor1_movie2_year_search
- name: Film3
icon: Item_actor1_movie3_poster_search
label: Item_actor1_movie3_title_search
genre: Item_actor1_movie3_genre_search
rating: Item_actor1_movie3_rating_search
year: Item_actor1_movie3_year_search
- name: Film4
icon: Item_actor1_movie4_poster_search
label: Item_actor1_movie4_title_search
genre: Item_actor1_movie4_genre_search
rating: Item_actor1_movie4_rating_search
year: Item_actor1_movie4_year_search
slots:
default:
- component: oh-image
config:
item: =loop.fish.icon
style:
margin: 0 0.4em
width: 65px
height: 98px
- component: Label
config:
text: =items[loop.fish.label].state
class:
text-overflow: ellipsis
style:
white-space: nowrap
overflow: hidden
fontWeight: bold
font-size: 14px
position: relative
top: -100px
width: 350px
left: 90px
- component: Label
config:
visible: =items.Item_actor1_movie1_title_search.state != "UNDEF"
text: =items[loop.fish.genre].state
style:
color: gray
font-size: 12px
position: relative
top: -95px
width: 385px
left: 90px
- component: oh-image
config:
visible: =items.Item_actor1_movie1_title_search.state != "UNDEF"
item: =loop.fish.rating
style:
position: relative
top: -60px
width: 80px
height: 18px
left: 105px
- component: Label
config:
visible: =items.Item_actor1_movie1_title_search.state != "UNDEF"
text: =items[loop.fish.year].state
style:
color: auto
font-size: 13px
position: relative
top: -80px
width: 385px
left: 335px
gives me this, how can i remove the space between the covers?
In your case if you have a predictable pattern for your item names you should rather use:
- component: oh-repeater
config:
for: i
fragment: true
sourceType: range
rangeStart: 1
rangeStop: 15
(I realize there’s some bug in the “sourceType” options in the oh-repeater docs)
then your expressions can become something like:
=items[props.items_prefix + loop.i.toString() + '_title_search'].state
with a TEXT prop named items_prefix that you would define and set to Item_actor1_movie.
hello,
okay i tried it. it works really well. thats really a good option with the oh-repeater
how can i check if the title is not UNDEF?
i not always get 15 actor movies, sometimes only 2 or 5 movies.
EDIT
here the visible tag.
visible: =items[props.prefix + loop.fish.toString() + '_title_search'].state != "UNDEF"
anybody a idea how to add the second image on every first image?
i dont get it to work, with my code he puts the second image 30 times on the same position on the first image.
- component: f7-row
config:
style:
width: 400px
position: relative
top: 0px
class:
- padding-top
- padding-bottom
- justify-content-left
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
slots:
default:
- component: oh-repeater
config:
for: actorsmovies
fragment: true
sourceType: range
rangeStart: 1
rangeStop: 30
slots:
default:
- component: oh-image
config:
action: command
actionCommand: =items[props.prefix + loop.actorsmovies.toString() + '_name'].state
actionItem: Item_jsonsearch_name
visible: =items[props.prefix + loop.actorsmovies.toString() + '_name'].state != "UNDEF"
item: =props.prefix + loop.actorsmovies.toString() + '_thumbnail'
style:
margin: 0 0.2em
width: 107px
height: 145px
- component: oh-image
config:
visible: =items.Item_actor2_name.state != "UNDEF"
url: /static/actors_name_back.png
style:
position: absolute
left: 0px
top: 125px
margin: 0 0.4em
width: 107px
height: 20px
i no works.
wow, i had now 800 lines instead of 3000. thats really amazing. Thank you to all