Customizing the Web Interface

Anthias
1

Using Screenly-OSE, I was able to create an extra Menu item that displays a screenshot of what is currently ‘showing’. I’m not proficient at all using docker: After installing the latest Screenly-OSE (now Antheas) is see to that Antheas is now in docker containers.

How do I go about customizing the Web portal ? Any help would be greatly appreciated.

1 Like
2

Hello, interesting question indeed !
Unfortunately, I don’t know ; but I would be very much interested to learn how you managed to do it on Screenly-OSE ??? :+1:

1 Like
3

image
image1905×1069 221 KB

4

Part 1 of 5
Hi,
I’ll try to keep it short, but still give enough info to give you an idea. Basically, a snapshot is made when you click the ‘Now Showing’ menu item, and the page is shown.

Still TODO: Get Google Chrome to refresh itself. Sometimes you have to press F5+Reload to get the latest snapshot

I installed Screenly-OSE/Anthias on Raspbian Lite.
I tweaked the CSS files a bit to make things look pretty (background images, colors, sizing, drop shadows etc.) I modified the server.py so that it can serve the ‘Now Showing’ page up. I modified the top menu and added the item ‘Now Showing’ next to Home.

I installed raspi2png on the pi. (Google search it - it’s in Git hub )

I wrote a script (rc.snap) that, when executed creates a snapshot of the display-memory (screenshot) and save it in a specific location with a fixed filename. The binary in my case is in /usr/bin and the resulting image file in /usr/src/app/static/img/active_asset.png

#---------------- rc.snap -------------
/usr/bin/raspi2png -p home/screenly/static/img/active_asset.png
#---------------- End ------------------

5

Part 2 of 5

Added the following below /system-info section in server.py

---- server.py --------------

@app.route(‘/onscreen’)
@authorized
def onscreen():
os.system(‘/usr/src/app/bin/rc.snap’)
return template(
‘onscreen.html’,
mac_address=get_node_mac_address(),
)

#----------------- End -------------

6

Part 3 of 5
Create onscreen.html in the screenly/templates folder to display the snapshot image.

----- onscreen.html --------------

{% extends “base.html” %}

{% block content %}





Now Showing



<div class="container">
    <div class="row content">
        <div class="col-12">
            <div style="margin: 0 15px; width:30px">
            <table>
                <tbody>
                <tr>
                    <img src="/static/img/active_asset.png" alt="Now Showing" style="width:1050px; height:750px;">
                </tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>

{% endblock %}

----------- End ----------------

7

Part 4 of 5

Modify the header.html in templates folder to have the menu item ‘Now Showing’

---- header.html ----

…

Home Now Showing ...

------ End ----

8

Part 5 of 5

This forum formats stuff wack. Sorry … Hope it helps.

9

WOW ! That’s really a work of Art ! and a beautiful one ! I’m impressed. :+1:
Thank you very much for sharing this. This makes me all the more sorry not to have the answer to your question …

But maybe I’ve hot a hint to share on the “get Chrome to refresh itself” aspect : why not insert a javascript bit of code into the page using the “reload” JavaScript function, with a little time delay (in milliseconds, I believe) ? Just like there : https://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript

Thanks again and see you later !

10

Thanks cor the hint. I will definately have a look. BTW: I managed to figure it out. I’m no docker expert, far from it, :frowning: I figured out how to customise Anthias web server by going ‘into’ the docker container.
1st do docker -ps to get list of running docker containers. Then docker exec -it /bin/bash

This lands you inside the docker spesified container filesystem. Now you can install/add/remove binaries, edit CSS files etc. The trick is getting stuff (background images etc.) from the rasPI fs to the docker fs. Luckely they mounted /home/screenly/static in the container under /data …

Was a mission but is got it working. The down-side is that you cannot re-download the containers because it will overwrite all your work…

11

You’re welcome ! :blush:

And thank YOU for the additional information : you even managed to find the answer to your own question and you’re generous enough to share it with us all here !
You really are a Screenly AND Anthias Wizard. :magic_wand:
Thanks again for the magic and have a nice week-end !

12

Hi Karl, any chance you can share the steps, there seem to be a lot of people wanting to make styling changes and no real reliable way of doing it.
Thanks,

13

Thanks, @Karl. It looks like most people wanted a way to modify the web interface with ease. I’ll let you know when I’ve come up with a way to customize the web interface without needing to do too much work.

That’s great work. Feel free to create a pull request for your changes (especially the now showing section).

1 Like