Arcade Database

In the last time, i spent some time working on my virtual pinball cabinet and also on my retropie software version for an upcomming hardware bartop cabinet (hopefully).

Playing around with my database, i thought it would be nice to have a nice ui to view game logo, marquees and intro videos directly in the browser. There a a lot of great retro arcade databases out there but most of them lack in a nice ui combining this info.

Arcade Database

Currently, i ran into a lack of time so this piece of code is not fully coded into the last detail. It is also addressed for browser usage, because i need more time to figure out a nice way of adapting video player responsively with outer cabinet image to resize aspect correct on all levels. Therefore this version hardly forces a fixed outer frame, but you will get the idea.

Highlights

• app using local json model
• dynamically loading of game logos
• favorite filter toggle
• dynamically loading arcade marquee and youtube demo video of selected games
• inline extension of dark belize theme

License

Released under the Apache license. Have at it.

The sources for this project can be found in my GitHub YouTube repository.

YouTube Player

During my development for the upcomming "Arcade Player", i was initially using a core:html control with an iframe pointing to the video source. This solution was a little bit inadequate, because changing the videoId always reloaded the YouTube wrapping api script.

So i decided to write a custom UI5 control to be more flexible.

Currently, not every function and event is propagated to UI5, but i think you will get the point and be able to extend it concerning your additional needs.

YouTube Player API

Highlights

• app showing usage of UI5 YouTube Player API Reference for iframe Embeds.
• response grid layout to fit all device types
• css hack to allow responsive defined aspect ratio of video (eg. 16/9 or 4/3)
• wrapper methods and events to control video from UI5

Remarks

Currently there are some restrictions on playing videos on mobile devices. For security reasons, iOS does not allow to autoplay videos. A user interaction is therefore needed. Concerning this, the player itself will behave a little bit different on different devices, but the major api features should work accross. I also figured out, that setting volume is not working on my iOS devices, but there was no such comment in the google api description. I left the slider in (maybe a current bug). This is working on desktop and you can decide to hide the volume slider control by using the device model.

License

Released under the Apache license. Have at it.

The sources for this project can be found in my GitHub YouTube repository.

CacheBuster on SCP

Hooray! Two years ago, i requested the CacheBuster feature for the SAP Cloud Plattform (SCP) to be able to control users cache for UI5 apps and and on 2018-04-12 my wishes has been heard (or implemented). The SAP WebIDE Full Stack update news told me, that the grunt-sapui5-bestpractice-build plugin has been updated to version 1.3.50 with a new task for generation of the CacheBusterInfo.json file.

I tried out the new feature, but it took more time than expected. One issue has been, that the sap grunt script does not run correctly on linux and therefore our automated CI build process was not able to deliver everything as expected. The issue is reported here and confirmed by SAP.

Finally i thought it would be good, to have a working example and i started to create an example app. Doing this i realized, that maybe my whole developing workflow should be part of this project and the example started to grow.

CacheBuster on SCP

Ready Developer One: develop, build, deploy!

Click "here" to read the full blog!

OData Visualizer

While writing my former blog OData Explorer, i always had in mind to be able to visualize the OData Model and be able to export it for including into customer documentations.

And now, i found a first solution, that fits my needs.

OData Explorer - Visualizer

The new Visualizer is integrated into the OData Explorer.

For the impatient, launch the explorer and get your hands on the visualizer.





It is based on the sapui5 Network Graph, so it is not really an OpenUI5 widget because it needs SAPUI5. But as always, borders are fluid ;-)

The network graph is available since 1.50 and still has some layout issues, but is currently useable to render graphs as inline SVG images. After investigating this control, i figured out, that it will fit my needs to render a parent/child graph of odata dependencies.

I copied all the options from the sample to be able to play around with the options of the control. This is not only for fun, because all the options will be rendered into the exported graph also.

Sadly, the control currently does not support out-of-the-box export options, so after some research i figured out a working solution by myself.

In short, the solution clones the SVG while including all referenced external styles as inline styles and serializes it for download.

The export to PNG option uses the same approach, but internaly creates a canvas to render/draw the SVG and then using canvas.toDataURL to convert it into PNG while converting the Base64 into Blob.

Both approaches uses sap.ui.core.util.File to allow locally saving of file data.

Here is an example of the generated model for the used Northwind demo service.

Northwind OData v2 service

Have fun...

OData Explorer

If you are working with UI5 and OData in general, you will quickly figure out the benefits of the OData v2 Model, especially if you have an existing OData service in the backend, UI5 makes it quite easy to bind a widget directly against the data including sorting, limiting, filtering, etc.

SAP itself is heavily focusing on OData as the prefered service layer, to offer services with the possibility to use metadata driven, autogenerated user interfaces.

The nice thing about an odata service is, that it describes himself with the containing metadata information, if you add $metadata as a parameter to the service url.

To make this information more readable, i created the OData Explorer to visualize the content of the odata metadata information.

OData Explorer

Highlights

• app to explorer a given OData v2 service
• demo HCP destination pointing out to northwind example service
• included coding to add service browser for SAP Gateways using /sap/opu/odata/iwfnd/catalogservice/
• some css fixes for token (avoid clipping in Tablet, float)

This app is quite useful, if you are working with Fiori Elements like SmartFields, etc. that extremely makes use of semantic annotations like labels. Therefore i deploy this app on the HCP of most of my customers to easily discover existing SAP Gateway services even without the need to logon to the SAP system itself.

If you have a destination from your HCP pointing out to /sap/opu/iwfnd/catalogservice and also activated the catalog service, the OData Explorer allows to select any of the services and dynamically load the corresponding metadata.

Since i negotiated the visualisation, expecting that most properties are generally allowed and the app only show icons, if a feature is not allowed, this makes it visually quicker understandable than to watch the $metadata sap:createable:true/false for example.

SAP Service Browser

If you will use the app to explorer services on an SAP Gateway, you can enable the service catalog to discover and search for all existing services. The selected service will be loaded automatically. To enable this feature you have to

• inside the manifest.json copy the xmodel/catalog model to the existing model section and delete xmodel (preload: false currently does not work, maybe a bug)
• inside the Metadata.controller.js set property "_bUseCatalogService: true" to true to show service selector instead of using demo service

Source is located in the github repository.

SAP Fiori Client (Part II)

Some years ago i wrote a blog SAP Fiori Client pointing out the possibilities of running an UI5 app inside the SAP Fiori Client application.

In the meantime, there is an update on the documentation available here!

I have created a playground to make it easier to see the benefits in real life.
The following demo is hosted on my trial hcp account.

Fiori Client Demo

To be able too see all the goodies, link you SAP Fiori Client to the following URI:

https://fioriclient-p1940953245trial.dispatcher.hanatrial.ondemand.com/index.html

You can easily use a QR code to configure the Fiori URL (new with version 1.8) .

Demo App URL

Maybe this makes it easier for you to start using the SAP Fiori Client.

Highlights

• demo how to use native device features inside the SAP Fiori Client
• detection of client inside bootstrap
• custom QRCode control to render FioriURL for easy setup
• Plugin examples for:
• Attachment Viewer
• Barcode Scanner
• Calendar
• Camera
• Contacts
• Geolocation
• InAppBrowser
• Printer
• Voice Recording

Source is located in the github repository.

New UI5 Logo Experience

Last week i have been visiting the first UI5con offered by SAP.

Besides socializing and all the great news one aspect has been, that some renovations on the way to evolution has taken place by changing the UI5 logo.

New UI5 Logo

We learned to know, that the original library was internally called phoenix and that is the reason, why they used a phoenix as the logo.

Now since everything is growing up and there is maybe the time for some renovation by Teodora Angelova

UI5 Logo UX Redesign Process

The final result can be seen in the upcomming OpenUI5 SDK, which is public available in the nightly build SDK.

OpenUI5 Nightly Build SDK

Personally i love this kind of UX especially if there is a story behind it.