Add dashboard
This commit is contained in:
parent
fa90af7e63
commit
f06576acc7
73
Dashboard.html
Normal file
73
Dashboard.html
Normal file
@ -0,0 +1,73 @@
|
||||
<div class="post-2-1">
|
||||
<div>
|
||||
<p>Hello again! Its been a while, so I figured I would write about a project I
|
||||
did this past winter break; my dashboard!</p>
|
||||
|
||||
<p>This dashboard is a single TV with Pi that is showing some basic info about
|
||||
my network and some of the services I run for myself. It really is just a
|
||||
frontend for a bunch of json API endpoints both inside and outside my
|
||||
network.</p>
|
||||
|
||||
<p>This guy is all written by yours truly using C++ and SDL2. Its quite fast
|
||||
while running on a Pi3 A. Really the only delays are network delays when it
|
||||
fetches information.</p>
|
||||
|
||||
<p>By far the selling point in my opinion is just how easy it is to create your
|
||||
own panels if you know some C++, SDL2, and rapidjson (I know thats alot, but
|
||||
its great for those three people who also know these few libraries). The
|
||||
general gist is you create a class that inherets from the base panel class,
|
||||
then add it to an array in config.cpp, and thats it! From then on it will call
|
||||
a few functions you define (namely update() and draw()) and these will update
|
||||
the internal state of the object and then update an SDL2 texture which is then
|
||||
applied to the renderer.</p>
|
||||
|
||||
<p>This system is a great example of the tradeoff between customization and
|
||||
complexity. This system is more complex than an html front end for example,
|
||||
however it is much more customizable. It allows for anything from custom OpenGL
|
||||
shaders to determining exatly how your memory of your graphics are managed.</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<figure>
|
||||
<img src="../img/dashboard-1.jpg" class="fig-img"></img>
|
||||
<figcaption>The Dashboard on my wall showing weather</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-sm-12">
|
||||
|
||||
<p>Speaking of graphics thats another part of this I'm very proud of! I wrote a
|
||||
<a href="https://git.clortox.com/?p=LRUCache.git;a=summary">custom LRU Cache</a>
|
||||
just for this application that calls the constructor of the mapped type with
|
||||
the key as an argument whenever an element is accessed in the cache but it does
|
||||
not exist. This with a few wrapper classes makes a near no cost abstraction for
|
||||
memory management of run time generated string textures displayed on screen!
|
||||
I'm really proud of the performance numbers I got with it.</p>
|
||||
|
||||
<p><a href="https://git.clortox.com/?p=dashboard.git;a=summary">Here</a> is a
|
||||
the git repo on my server and
|
||||
<a href="https://github.com/Clortox/dashboard">here</a> is a mirror of it on
|
||||
github. Feel free to try it out and message me with any questions you may have
|
||||
setting it up! This really feels like the first "complete" project I've done in
|
||||
terms of lots of planning, design, and a medium amount of complexity and
|
||||
scale. For this reason, I would like some feedback if you have any!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-1-1">
|
||||
<div class="col-md">
|
||||
<figure>
|
||||
<img src="../img/dashboard-2.jpg" class="fig-img"></img>
|
||||
<figcaption>Wifi page</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<figure>
|
||||
<img src="../img/dashboard-3.jpg" class="fig-img"></img>
|
||||
<figcaption>Home assistant presence page (WIP)</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
Reference in New Issue
Block a user