Equivalent of CSS grid-template-columns using Qt or GTK to produce a tiled png

I am doing basic layout in HTML/CSS that I would like to migrate to doing without a web component, using a proper GUI library to simply render PNGs of the entire layout I am rendering currently in the browser.

I have images I am tiling in CSS using the grid-template-columns function for displaying, in this case, 2 rows of 5 images:

#wrapper 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr


<div>
 <div id="wrapper">
 <img src="mypng1.png">
 <img src="mypng2.png">
 ...
 <img src="mypng9.png">
 <img src="mypng10.png">
 </div>
</div>

I'm looking to translate this out of web/html/css and into a GUI layout that can render pngs natively on my (linux) machine. How would I script this in either Qt or GTK, or any similar library?

Specifically, I'm looking to control:

Number of rows and columns

An ordered input list of which images

Space between images, potential resizing

Output dimensions/resolution

My example has 10 images, but I'm imagining this expanding to thousands of PNGs tiled together, so solutions like imagemagick montage fail under RAM load before CSS does.

Update

Thanks, very helpful comments below; I guess what I'm looking for is something ideally like:

$ application whatever.xml.template #or
$ application whatever.xml.template -ncol=5 myfolder/mypng* -order 1,2,3,5,4 -dim 90x90 -output master.png

Where whatever.xml.template might store possibly everything but the order and filename, but maybe everything I added as command line arguments. Currently, I use my web backend to do this kind of logic and populate an HTML template. It would be great if I could do similar templating in a non-browser-based tool to produce master.png.

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

1

QPainter is your friend. That is all you need, plus first grade level math skills ;)

– dtech
Nov 14 '18 at 19:23

1

there is Qt Qml GridView or other Qml layouts

– Redanium
Nov 14 '18 at 20:33

Could you explain a bit on the end use? A photo viewer? Or a single .png generator from multiple .png files?

– theGtknerd
Nov 15 '18 at 3:42

Thank you @theGtknerd More of the latter, actually. I would like to make a single .png that is a collage of input pngs. That said, I would like the ability to permute the order and structure a bit, and the number of items forming the collage could be very large.

– Mittenchops
Nov 15 '18 at 3:46

add a comment |

I have images I am tiling in CSS using the grid-template-columns function for displaying, in this case, 2 rows of 5 images:

#wrapper 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr


<div>
 <div id="wrapper">
 <img src="mypng1.png">
 <img src="mypng2.png">
 ...
 <img src="mypng9.png">
 <img src="mypng10.png">
 </div>
</div>

I'm looking to translate this out of web/html/css and into a GUI layout that can render pngs natively on my (linux) machine. How would I script this in either Qt or GTK, or any similar library?

Specifically, I'm looking to control:

Number of rows and columns

An ordered input list of which images

Space between images, potential resizing

Output dimensions/resolution

My example has 10 images, but I'm imagining this expanding to thousands of PNGs tiled together, so solutions like imagemagick montage fail under RAM load before CSS does.

Update

Thanks, very helpful comments below; I guess what I'm looking for is something ideally like:

$ application whatever.xml.template #or
$ application whatever.xml.template -ncol=5 myfolder/mypng* -order 1,2,3,5,4 -dim 90x90 -output master.png

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

1

QPainter is your friend. That is all you need, plus first grade level math skills ;)

– dtech
Nov 14 '18 at 19:23

1

there is Qt Qml GridView or other Qml layouts

– Redanium
Nov 14 '18 at 20:33

Could you explain a bit on the end use? A photo viewer? Or a single .png generator from multiple .png files?

– theGtknerd
Nov 15 '18 at 3:42

Thank you @theGtknerd More of the latter, actually. I would like to make a single .png that is a collage of input pngs. That said, I would like the ability to permute the order and structure a bit, and the number of items forming the collage could be very large.

– Mittenchops
Nov 15 '18 at 3:46

add a comment |

I have images I am tiling in CSS using the grid-template-columns function for displaying, in this case, 2 rows of 5 images:

#wrapper 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr


<div>
 <div id="wrapper">
 <img src="mypng1.png">
 <img src="mypng2.png">
 ...
 <img src="mypng9.png">
 <img src="mypng10.png">
 </div>
</div>

I'm looking to translate this out of web/html/css and into a GUI layout that can render pngs natively on my (linux) machine. How would I script this in either Qt or GTK, or any similar library?

Specifically, I'm looking to control:

Number of rows and columns

An ordered input list of which images

Space between images, potential resizing

Output dimensions/resolution

My example has 10 images, but I'm imagining this expanding to thousands of PNGs tiled together, so solutions like imagemagick montage fail under RAM load before CSS does.

Update

Thanks, very helpful comments below; I guess what I'm looking for is something ideally like:

$ application whatever.xml.template #or
$ application whatever.xml.template -ncol=5 myfolder/mypng* -order 1,2,3,5,4 -dim 90x90 -output master.png

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

I have images I am tiling in CSS using the grid-template-columns function for displaying, in this case, 2 rows of 5 images:

#wrapper 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr


<div>
 <div id="wrapper">
 <img src="mypng1.png">
 <img src="mypng2.png">
 ...
 <img src="mypng9.png">
 <img src="mypng10.png">
 </div>
</div>

I'm looking to translate this out of web/html/css and into a GUI layout that can render pngs natively on my (linux) machine. How would I script this in either Qt or GTK, or any similar library?

Specifically, I'm looking to control:

Number of rows and columns

An ordered input list of which images

Space between images, potential resizing

Output dimensions/resolution

My example has 10 images, but I'm imagining this expanding to thousands of PNGs tiled together, so solutions like imagemagick montage fail under RAM load before CSS does.

Update

Thanks, very helpful comments below; I guess what I'm looking for is something ideally like:

$ application whatever.xml.template #or
$ application whatever.xml.template -ncol=5 myfolder/mypng* -order 1,2,3,5,4 -dim 90x90 -output master.png

css qt layout gtk png

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

edited Nov 14 '18 at 20:41

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

asked Nov 14 '18 at 18:18

Mittenchops

6,4952266138

1

QPainter is your friend. That is all you need, plus first grade level math skills ;)

– dtech
Nov 14 '18 at 19:23

1

there is Qt Qml GridView or other Qml layouts

– Redanium
Nov 14 '18 at 20:33

Could you explain a bit on the end use? A photo viewer? Or a single .png generator from multiple .png files?

– theGtknerd
Nov 15 '18 at 3:42

Thank you @theGtknerd More of the latter, actually. I would like to make a single .png that is a collage of input pngs. That said, I would like the ability to permute the order and structure a bit, and the number of items forming the collage could be very large.

– Mittenchops
Nov 15 '18 at 3:46

add a comment |

1

QPainter is your friend. That is all you need, plus first grade level math skills ;)

– dtech
Nov 14 '18 at 19:23

1

there is Qt Qml GridView or other Qml layouts

– Redanium
Nov 14 '18 at 20:33

Could you explain a bit on the end use? A photo viewer? Or a single .png generator from multiple .png files?

– theGtknerd
Nov 15 '18 at 3:42

Thank you @theGtknerd More of the latter, actually. I would like to make a single .png that is a collage of input pngs. That said, I would like the ability to permute the order and structure a bit, and the number of items forming the collage could be very large.

– Mittenchops
Nov 15 '18 at 3:46

QPainter is your friend. That is all you need, plus first grade level math skills ;)

– dtech
Nov 14 '18 at 19:23

there is Qt Qml GridView or other Qml layouts

– Redanium
Nov 14 '18 at 20:33

Could you explain a bit on the end use? A photo viewer? Or a single .png generator from multiple .png files?

– theGtknerd
Nov 15 '18 at 3:42

Thank you @theGtknerd More of the latter, actually. I would like to make a single .png that is a collage of input pngs. That said, I would like the ability to permute the order and structure a bit, and the number of items forming the collage could be very large.

– Mittenchops
Nov 15 '18 at 3:46

add a comment |

1 Answer
1

active

oldest

votes

you can tile images in qt : http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

if you want them in specific columns and rows then check Column and Row.

it should be simple to implement.

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306493%2fequivalent-of-css-grid-template-columns-using-qt-or-gtk-to-produce-a-tiled-png%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

you can tile images in qt : http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

if you want them in specific columns and rows then check Column and Row.

it should be simple to implement.

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

add a comment |

you can tile images in qt : http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

if you want them in specific columns and rows then check Column and Row.

it should be simple to implement.

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

add a comment |

you can tile images in qt : http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

if you want them in specific columns and rows then check Column and Row.

it should be simple to implement.

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

you can tile images in qt : http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

if you want them in specific columns and rows then check Column and Row.

it should be simple to implement.

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

answered Nov 15 '18 at 9:53

Mahdi Khalili

11411

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

add a comment |

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

doc.qt.io/qt-5.11/qml-qtquick-repeater.html you may want to see this too

– Mahdi Khalili
Nov 20 '18 at 6:10

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj