i was waiting for the new topic to post widgets based on @Dimitris style, but i’ll post them here.
90% are complete, i’m not a skilled programmer, so i ask to who believe in this project to take these widgets and improve and complete them. please forgive me if in the code there are big mistakes or stupid things, i would like to learn from anyone has better knowns.
both are missing the function “expandable” and the “hours bars” details of when the item have been modified.
width and weight are perfect for iphone layout.
hope someone can help me/us adding functions and better screen adapt.
Hey Master J.
Do we have some info re how the OH render/recolor mechanism works? SVG contains colored vectors . If ,for example OH can recolor only Black and White or Grey scale vectors, then the SVG must designed in that Color Space to be capable of recoloring.
Can someone try to re-color attached svg’s and post the results?
I do not believe that OH recolors svgs at any point. The included “classic” icons are in svg format, but do not ever get recolored. The f7 icons are included in the page as a font, if I recall, so recoloring those is as simple as changing the appropriate css color property. I have never looked into the material icons, so I don’t know how those work, but my guess would be that they are similar to the f7 icons.
I think the first option (with an array) is a good starting point.
Is there a part in the docu of how to use arrays (how to iterate over the elements, how to read which position the pointer has, etc.) for widget development?
And is there also a part where looping / repeat is explained / documented? In my mind I think I have found an approach to integrate the “forward” and “back” buttons - but I need to get deeper in the technical things…
Within widgets, the only available option for looping is the oh-repeater.
My gut feeling is that to allow the most configurable widget, you want users to be able to choose which locations appear or don’t appear. To do that I would recommend that you come up with an item tag that’s distinct to your widget configuration and apply that tag to any locations that are going to be in the widget, then you can use the itemsWithTags source for the repeater to fetch those locations.
To restrict the repeater’s output to only 3 of those at a time, you’ll need to use the fitler property of the repeater and the index variable that gets created. I don’t think the index variable is documented yet, but if you search the forums for “repeater idx”, you should see some good examples of the index variable in use.
I was correct. The svgs loaded as resources will not be included in the scope of the page’s css (learn something new every day).
There is, however, a fun workaround using svg sprites. It’ll be instructive and interesting for more people than just the readers of this thread, so I’ll post it as new thread in the next couple of days when I get a chance.
You need to add fragment: true to the repeater. In it’s normal setting, the repeater wraps all of the elements it produces in a div element container. So your f7-segmented is flex spacing correctly, it’s just spacing one div element (which just happens to contains lots of buttons that the segmented doesn’t care about at all). When you add the fragment property to the repeater it strips that extra container from around the repeated elements and makes them direct children of the repeater’s parent element.
… Oh my dear… I still have a lot to learn - but to be honest it’s a cool thing to learn all this stuff.
Just another question (please tell me when to stop asking questions to you…):
How could I determine where the oh-repeater should start and where it should end - or in other words could I use an index for iterating over the elements?.
let me say it in words:
I have for example 8 Rooms in an array.
The oh-repeater should only show me the first 3 Rooms (index 1 to 3)
I click on “>” and the oh-repeater now should show me show 3 Rooms with the index 2 to 4.
How could I tell the repeater where to start, where to end and how could I know where the index stands?
I hope I described it well.
here my first attempt in code - simplified to just decrease the variable of the Range:
Hey Pal. Is there any chance to create a “Dynamic Index”? In the original design the displayed rooms may vary from 1 to 3 (or more if they can fit!) depending on the width of the text -see attachment. I don’t want to add more complexity, but i think this is decision time for the navbar!
No worries, just be sure, as you learn more and more, to pass on what you know to others.
The repeater not only gives you a single element of its array at a time (loop.whatever) it also creates two other variables you can use in the scope of the repeater: loop.whatever_idx and loop.whatever_source. Whereas the regular variable is just the current element of the overall array, the _idx variable is the index of that current element and the _source variable is the entire array that the repeater is working form.
The filter property filters the entire array down to a subset based on whatever expression (without the = in front) that you give it. So here you want the subset of the original array where the index is equal to some position variable or that position plus 1 or 2. Your filter statement would look something like this:
As far as I know, there is really only one reliable way to do this with css (I’d be interested to hear if other’s know of a different way). You have to keep the container from expanding vertically (i.e., set a fixed height), let it use block spacing for the child elements and set it to hide overflow elements. Then you have to set the child elements to float: left. Here’s a quick example. If you put this in your editor and adjust the window width you should see the right-hand buttons disappear as they run out of room.
- component: f7-row
- component: oh-button
text: Very very very long button here
- component: oh-button
text: Short button
- component: oh-button
text: Regular button here
There’s actually an advantage to this setup: the filter property for the repeater becomes easier because you just have to rule out buttons before the position variable and then let the css do the rest of figuring out how many buttons are visible.
in an OH Page, the OH draws a Navbar. Maybe it thinks that i’m just another Mac User and reacts accordingly
My thought is, -if this works and you can configure it- maybe it’s an alternative for what we are trying to do. PLS don’t spend more than of 2-5 minutes on this, I just wanted to show to @JustinG that I’m reading (…not studying) code!!!
Overflow is the general property. There are also specific versions to separately control the different directions: overflow-x, and overflow-y.
loop.rooms_source.length does, indeed, give you the length of the array that the repeater is using. However, that variable is only scoped for the repeater and it’s children; it can’t be accessed by any elements at the same level as or higher than the repeater.