Hi all
I’m new in OH3 and want to create a widget to show a grid with 2 or 3 columns and several rows to display text. The row must be able to display the text with a line break
The data are coming from the weather company forecast
Screenshot is from OH2.5 in the habpanel with html and I want to transfer this to OH3
Any help to start with a widget are welcome and I know it is a long way for me
There are several different possibilities here depending on the original form of this data and how determined you are to make it look exactly like it did previously.
What does the original information look like? Are you getting this via the Weather Company binding into different items, or do you get the fully formatted html table from some website?
Does it have to be a table? I know that it used to be a table in your habpanel setup, but MainUI is a different system with different strengths and weaknesses. Have you looked into some of the already existing weather widgets on the forum? There are quite a few with different styles and levels of detail. I built myself a weather widget that only focuses on the forecast for today and tomorrow (of course I live in arizona where the weather choices are only warm and sunny or HOT and sunny so I don’t need a ton of detail in my forecasts):
Does it have to be a table? I know that it used to be a table in your habpanel setup, but MainUI is a different system with different strengths and weaknesses. Now’s the time to think about whether there is some other way to display these data. Maybe you want something that’s more interactive than just a static table (for example, swiping through the different daily forecasts). Maybe you’d like to incorporate some basic weather icons and make it more visually appealing. Maybe only the first three lines need to be immediately visible and the other’s can be initially hidden until clicked on. All of these are possible with the new MainUI.
There’s no built-in “table” widget or component, but lists are very easy to make and very versatile. On the other hand, it is possible to fully construct an html table from UI components, it’s just laborious and probably, in the end, not worth the effort given the many other more visually appealing options.
Hi Justin
My weather company binding deliver a ton of channels and also several channels for each day
Each value in one of this cells are from a channel and I feel thas this table give you a quick overview about the next days.
Swiping is in this case not neccessary,
This is a good option, But my problem is how to start
I have tried with f7-card, f7-row and f7-col
But no luck.
The section with the items (props) is not the problem.
But how I have to proceed below f7-card?
All I have is the editor within OH.
Is there a better editor what I can use with syntax support?
BR Uwe
Nope. There is no better editor. The UI editor is actually pretty awesome. It has both auto-completion ( ctrl+space ) and the live preview.
It’s true there’s a bit of a learning curve on the widgets. At this point my recommendation is is two parts:
f7-card there which may be something like what you’re looking for.As I said, if this were me building this widget I might first try and f7-card with an oh-list on it and oh-list-items for each of your days’ forecasts. Or simplify those first two components and just start with an oh-list-card.
Another option, which gets you closer to the original table form, would be a combination of f7-row and f7-col items with simple Label components. Start with an f7-row and add a f7-col to that. For each row of the table add another f7-row with two Label components, one for the day and one for the forecast.
Hi Justin
sorry for my late responce. The work catched too much time.
And thanks for the link and guidance.
I will try to create a widget and will come back.BR Uwe
I tried (unsuccesfully!) to build a Data Table | Framework7 Documentation from a tree of f7-row components which allow to specify the HTML tag and therefore theorically build what you want in the DOM, including those data tables.
A dedicated widget would probably be more appopriate, and I would like to have one.
Apart from that, you can probably expect better ways to build low-level HTML still with reactive properties in the next releases.
Hi
I have build (on a simple way) a widget to display the forecast for the next 5 days
It is just a first guess
But I have a problem to show the icons from weather company forecast
There are delivered as raw type (image/png)
Have somebody an idea how to show this icons?
Second question, how can I modify the alignment to left?
Here the YAML
uid: Wetterstation_forecast
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Feb 17, 2022, 4:39:11 PM
component: f7-card
config: {}
slots:
content:
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay0Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay0Day_DaypartName.state + " " + items.WeatherCompanyForecast_ForecastDay0Day_Narrative.state
footer: = items.WeatherCompanyForecast_ForecastDay0Night_DaypartName.state + " " + items.WeatherCompanyForecast_ForecastDay0Night_Narrative.state
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay1Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay1_DayOfWeek.state + " " + items.WeatherCompanyForecast_ForecastDay1_Narrative.state
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay2Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay2_DayOfWeek.state + " " + items.WeatherCompanyForecast_ForecastDay2_Narrative.state
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay3Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay3_DayOfWeek.state + " " + items.WeatherCompanyForecast_ForecastDay3_Narrative.state
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay4Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay4_DayOfWeek.state + " " + items.WeatherCompanyForecast_ForecastDay4_Narrative.state
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay5Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay5_DayOfWeek.state + " " + items.WeatherCompanyForecast_ForecastDay5_Narrative.state
BR Uwe
If the image is in an Image Item then you need to use an oh-image component or an oh-image-card and set the item property to the name of the image item.
It’s not clear which alignment you are referring to. Can you post a image of what you’re referring to?
Hi Justin
below a screenshot of the widget
I marked the places where I expect the icon, but I understand that I cannot use the itemvalue as a icon
So, lets focus on the label:
At the moment the text alignment is centered, do I have a possibility per style to set the text to alignment-left?
The oh card family of widgets already have many default styles applied and aren’t really meant for significant restyling. From a more technical standpoint, because they are compound elements it is not always possible to access the appropriate element directly through the style property. Even worse, the text in the label is not actually centered, the element holding the text is centered so you have to change how the parent element is placing the text.
Altogether, in order to change the location of the label in an oh-label-card you need to resort to a direct injection of css into the card using the stylesheet property.
- component: oh-label-card
config:
icon: = items.WeatherCompanyForecast_ForecastDay0Night_IconImage.state
fontSize: 1.3em
label: = items.WeatherCompanyForecast_ForecastDay0Day_DaypartName.state + " " + items.WeatherCompanyForecast_ForecastDay0Day_Narrative.state
footer: = items.WeatherCompanyForecast_ForecastDay0Night_DaypartName.state + " " + items.WeatherCompanyForecast_ForecastDay0Night_Narrative.state
stylesheet: >
.item-inner {
justify-content: flex-start !important;
}
At this point, because you need to incorporate an image component and you would prefer different styling than is easily possible, it sounds like you might want to move away from the oh-label-card and start looking at mother more appropriate components your desired results.