Everything these days seems to have a technology stack these days, sometimes a deep or expansive one.
The Stack behind Pass Shoot Score (for now…)
C# is my language of choice for Pass Shoot Score, but I haven’t been happy with the GUI options available. So, naturally, I think about what are the best options. Those lie with HTML/JS/CSS. So how do we combine the two? There have been some attempts such as Awesomium, but last time I tried it I was not satisfied. How about the Chromium Embedded Framework? That has great traction, powered by a large team. On their Bitbucket page are a few options for C# wrappers. I ended up picking CefSharp, which has worked well for me.
Now that we’ve chosen an HTML/JS/CSS renderer, how do we display it? CefSharp provides three renderers: WinForms, WPF, and Offscreen. Since ideally I would prefer Pass Shoot Score to be cross-platform, Offscreen seems like the obvious choice. Offscreen provides a bitmap–which library should I use for window management and rendering? How about the trusty SFML (shoutout to Github user graphnode for his updated SFML 2.3 .NET wrapper on nuget!)? Works well enough for me at the moment, just one giant sprite with a ever-changing texture. If I ever decide to deploy to a SFML-unsupported platform, it’ll be easy enough to change to another library that can render bitmaps and pass mouse/keyboard events.
Performance is not great, obviously, since I need to create a new texture every time the CEF engine produces one. In terms of HTML/JS/CSS design, minimal animations are best. If I ever need complex animations, I could consider rendering them in SFML directly. Alternatively, I could split the HTML/CSS/JS into separate pages, such that I could essentially render 4 pages instead of one, but with them independently redrawing. This may reduce the amount of large redraws in CEF. But we will come to that once rendering performance becomes an issue.
So, lets wrap up. I now have an SFML powered program rendering an HTML/JS/CSS webpage with CefSharp with communication powered by a Grapevine HTTP/REST engine in JSON messages. Well, here’s what happens when I create my own stack.
HTML/JS/CSS? What about Node/Angular/React?
I’ve gotten the GUI setup done, but what’s the GUI powered by? Sorry web developers for skipping that! Well, the truth is I don’t know. I spent a bit of time learning Node/Vue, but I think it’s too much for me at the moment. There’s a wonderful template called AdminLTE from Almsaeed Studio that’s free and based on Bootstrap 3. I will be giving that a shot.
Here’s a quick screenshot of the SFML program rendering the AdminLTE page. It’s hard to demonstrate the REST server and the rest of the stack, but trust me, it’s there!
Next steps, start modifying the template to display Pass Shoot Score data! Maybe the Player profile page first? Check back soon to see more updates.