I am a newbie in openhab. This is a real fantastic platform with a unbelievable fantastic work done.
I would like to have a page providing car informations and location of it with a map. Additional perfect information would be to have the way the car used when moving on the same map.
May I kindly ask a question?
Does this type of widget exist? Is yes may I kindly ask for a link or if it doesn’t exist, is it possible to build one? If yes may I have some help? if not why?
I tried to build a page but map is not an option. Maybe I have to use yaml, but I don’t know this language at all.
The position of the “marker” will change on the map when ever the Item’s state changes. So ho well it follows the car as it moves will depend on how often the Item updates with the car’s position.
Thanks a lot for your kind answer and your help. I already did it and it seems to work perfectly. Sorry if I explained my need in a bad way. What I would like to have is a page with the image of the car for example, some status like if the doors are opened or closed, the windows as well and also the mileage that I can make with the remaining volume of gas.
I already build a page (see the image)
Not easily no. The map feature is built-in to the map page type and not one of the modular components that can be added to pages.
The simplest solution here is probably to use the tabbed page template. That’s a quick and easy way to organize multiple pages. You crate one map page and one general info page and then put them both on the tabbed page.
Thanks Justin. I already did it, but it doesn’t meet graphically my expectations. I was asking for a widget because you can add a widget in page layout, but I don’t know how you build a widget. Where can I find a good and simple tuto?
You can construct a new widget using the built in components but a map is not among those components. So you’ll have to get on GitHub and figure out how to create an “oh-map” component using the F7 and Vue underlying framework. Then you’ll need to submit that as a PR so it becomes a part of OH.
This gets rid of the default OH navbar at the top of the page.
On your car information page add an oh-webframe-card and set the Source URL property to /page/ID-of-your-map-page. Make sure this is the unique ID (something like page_c8ea3e137a if you haven’t changed it from the autogenerated value) and not the human readable page label.
This is less than ideal because it double loads an OH page, but the overhead isn’t too bad even on mobile devices. And you can get a result like this:
Sorry for this late answer. I followed your instructions and it works except for the menu. I don’t know exactly where to put the line you provided. Please find a photo of the result and the code I have for the map page. The menu is still on the top
In yaml the indentation is a critical part of the format. With just the regular paste, the indentation is not preserved. Can you please post your code using code fences (that will render the formatted code blocks like you see in other posts).
No worries. That now makes it much easier to spot the mistake. Somewhere along the way, in our various moving code back and forth something auto-formatted the -- into one long em-dash – in front of the f7 style variables. In css, variables like these are preceded by 2 regular dashes, not just one. My original post:
Your current code:
Note how your code has just one dash and it is longer than either of the dashes in my code. I think if you just replace the em-dash in front of each of variables with the double regular dash, this will start working for you.
In fact when I turn the page in run mode, it seems that the part with the map starts without the menu and in one instant it comes back to the map with the menu. This is less than one second.
Thanks again and again for your help.
I checked the zoom menu of a map view. It must be a text. What is that text?
