Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

I've been working on a brand new layout engine for jPhotoFrame over the past few weeks and it's finally complete. This engine replaces the old clunky, hard to configure engine with a widget based layout that can be layered and bound to various parts of the run-time data model. What does that mean? Well, now configuration is easy (though more verbose) and you have greater control of how the interface looks and what it displays.

In addition there were other changes like having all image loading, resampling and background fill generation done in a background thread and only drawn to screen when fully completed. This avoids some of the image tearing that was happening in earlier versions on slower hardware. Likewise, weather fetches and even date/time updates are done in their own threads. Each of these threads write new data to the run-time data model and then request for the screen to be updated. This gives a much smoother operation when multiple threads try to update the data model simultaneously. It also allows for the data model to be exposed to the layout engine.

Lets see some screenshots...
v0.4_with_weather.jpg

v0.4_no_weather.jpg


The interface is way more customisable now. Each of the widgets can be anchored to a corner, translated or even rotated.



The configuration for the widget layout is typically stored in layout.json, but can be configured to use any other file name, as long as it uses the expected JSON format. This is what the simple layout for the second screenshot looks like...
 layout_simple.json
{
"widgets": [
{
"type": "anchor",
"anchor": [0, 1],
"children": [
{
"type": "text",
"transform": {
"origin": [0, 1],
"offset": [10, -10],
"showBounds": "false"
},
"text" : {
"data": "$time",
"size": 120,
"outlineWidth": 12
}
},
{
"type": "text",
"transform": {
"origin": [0, 0],
"offset": [10, -120],
"rotate": 270,
"showBounds": "false"
},
"text" : {
"data": "$date",
"size": 50,
"outlineWidth": 12
}
}
]
},
{
"type": "anchor",
"anchor": [1, 1],
"children": [
{
"type": "text",
"transform": {
"origin": [1, 1],
"offset": [-10, -10],
"showBounds": "false"
},
"text" : {
"data": "JPhotoFrame 0.4",
"format": "%s",
"size": 20,
"outlineWidth": 6
}
}
]
}
]
}


The format is straight forward and is described in more detail in the README.md file. However the gist of the above layout is there are two anchors set up, one for the bottom left corner and one for the bottom right corner. The bottom right anchor has one child node to display application branding. The other anchor has two text nodes, one is bound to the $time variable from the data model and the other is bound to the $date variable. Various transformations are applied to all of the text widgets (translation and rotation). All of the transformations are done relative to the widget origin, which is specified in the same way as an anchor - this allows easier positioning/snapping of a widget.

The main configuration file (config.properties) is now reduced in complexity and contains much fewer configuration parameters than it did before since the layout file takes over now.

The compiled version can be downloaded here: 0.4 Release Bundle.

To see a more comprehensive article on how the new layout engine features can be used that covers anchors, origins, translation and rotation see this article - jPhotoFrame new layout engine explained with examples.

-i

Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

How to fix Google Cloud SDK dev server error - No module named ipaddr

Adorable but totally metal - Metal Earth 3D Guardians of the Galaxy Groot model kit

Riverside Expressway Cam shut down permanently

Inserting Google DFP ads with Backbone, Underscore and jQuery

How to resolve the domain is already mapped to a project error in Google App Engine

A quick look at the Nyko Super MiniBoss wireless controllers for the SNES mini

Loading and displaying a collection from bootstrapped data in Backbone.js

Add this handy function to your Bash profile file to display the compiled JDK version for a .class file

How does PCBWay stack up as a low budget PCB fab

Resolving the Cannot reference X before supertype constructor is called compiler error in Java

Recent Galleries

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Tiny Arcade revision 6 kit assembly and decal application

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity