[I Made This] api.pi4j.com

frank.63 · May 2, 2024, 8:53am

Another small public Vaadin website: https://api.pi4j.com/

It “exposes/visualizes” the data known in the Pi4J library about the different Raspberry Pi Boards.

Vaadin project: GitHub - Pi4J/pi4j-board-info-service: API service providing Raspberry Pi info
Pi4J data: pi4j-v2/pi4j-core/src/main/java/com/pi4j/boardinfo/definition/BoardModel.java at develop · Pi4J/pi4j-v2 · GitHub

czuczor · May 2, 2024, 4:04pm

Wow, very nice project. You are on fire :) (drums media and now this).

I like the use case and the site as well.

The only thing I spotted here is there are two broken links for these pages:

Open API,
Swagger UI-API
Maybe just now or not long ago, but would be nice to make them work again if you could.

Keep up the good work and projects!

frank.63 · May 2, 2024, 4:36pm

Strange thing with the broken links: if you do refresh they work… I guess it’s a routing problem from Vaadin menu? I have an open github ticket to be able to have a menu link to open in _blank but not available yet I think. And I hope it will solve this problem.

Peter.190 · May 2, 2024, 4:39pm

Indeed, confirming it works if you reload the page, but still kinda feels weird, that you need to reload.

Let’s hope your open ticket solve the issue!

knoobie · May 2, 2024, 7:23pm

It’s a missing feature / bug - to be fixed in 24.4 see SideNav doesn't work with HTTP links to pages in the same application. · Issue #5189 · vaadin/flow-components · GitHub

Matti · May 3, 2024, 5:15am

I think the default of the router to catch all links by default is the bug I’m facing a similar issues with pretty much every larger Vaadin projects (or small that are some kind of mashups) and they are always hard/nasty to override. Instead of having that “router-ignore” we should have “routerlink” that various navigation components could apply automatically.

frank.63 · May 3, 2024, 5:32am

Correct @knoobie, I couldn’t find back that link. Thanks for digging it up :-)

I need a better way to define the link in these SideNavItems:

github.com

Pi4J/pi4j-board-info-service/blob/main/src/main/java/com/pi4j/boardinfoservice/views/BaseLayout.java#L61


      
              section.addClassNames("drawer-section");
              return section;
          }
          
          private SideNav createNavigation() {
              SideNav nav = new SideNav();
          
              nav.addItem(
                      new SideNavItem("Board Information", BoardInfoView.class, VaadinIcon.DATABASE.create()),
                      new SideNavItem("System Information", SystemInfoView.class, VaadinIcon.INFO.create()),
                      new SideNavItem("Open API", "https://api.pi4j.com/api/docs/pi4j", VaadinIcon.GLOBE.create()),
                      new SideNavItem("Swagger UI - API", "https://api.pi4j.com/swagger-ui/index.html", VaadinIcon.GLOBE.create()),
                      new SideNavItem("Pi4J Docs", "https://pi4j.com", VaadinIcon.GLOBE.create())
              );
          
              return nav;
          }
          
          private Footer createFooter() {
              Footer layout = new Footer();
              layout.addClassNames("app-nav-footer");

knoobie · May 3, 2024, 5:59am

Yeah using full links is a workaround (those are already excluded by the router) but it comes with the downside to remember it once you have multiple staging areas with different base URLs (I know, won’t effect your Hobby Project as much)

frank.63 · May 7, 2024, 7:26am

Seems I could fix the link problem with another implementation with an Anchor:

github.com

Pi4J/pi4j-board-info-service/blob/main/src/main/java/com/pi4j/boardinfoservice/views/BaseLayout.java#L135


      
                  link.add(text);
                  add(link);
              }
          
              public Class<?> getView() {
                  return view;
              }
          }
          
          public static class MenuItemExternalLink extends ListItem {
              public MenuItemExternalLink(String menuTitle, Component icon, String url) {
                  Anchor link = new Anchor(url, "", AnchorTarget.BLANK);
                  link.addClassNames(LumoUtility.Display.FLEX,
                          LumoUtility.Gap.XSMALL,
                          LumoUtility.Height.MEDIUM,
                          LumoUtility.AlignItems.CENTER,
                          LumoUtility.Padding.Horizontal.SMALL,
                          LumoUtility.TextColor.BODY);
          
                  if (icon != null) {
                      link.add(icon);

Peter.190 · May 9, 2024, 10:57am

Nice job! I’ve tested and in my opinion your website works better with this fix :)!