I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay.
If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these images into a single sprite at runtime. Luckily image size is constant and the same for all, which should make this much easier.
Any suggestions?
You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically.
You may arrange bundles for switching css file(s) for changing skin(s).
Plus side: You can also manage and arrange your .js files too!
You can append images with the free ImageMagick library, via a call to the system command line, so you have a lot less to code in Java and it is faster.
For appending horizontally, use this command:
convert image1.gif image2.gif image3.gif +append result.gif
For appending vertically, use this command:
convert image1.gif image2.gif image3.gif -append result.gif
For more informations: http://www.imagemagick.org/Usage/layers/#append
So, with CSS you can display the sprites using a single image with a simple offset (you can use the CSS "background" propriety for load the image and set the offset of the single sprite that you want to display). No JavaScript is required if you do only simple things.
Is the processing overhead on the server worth it?
I'm thinking about this now for C#, trading of the added complexity creating the dynamic images and sending them to the client, with the reduction in individual image accesses.
A trade off worthy of a bit of analysis.
Related
I am new in automation and want to automate a site whose back-end in HTML5 and containing canvas element.
I want to compare canvas images with my stored image.
For image comparison I need to use robot framework.
I had tried with "robotframework-imagehorizonlibrary" library but still testcases were failed.
Can any one please help me.
Thanks.
I would suggest the RobotAppEyes Library, which is basically an extended version of Selenium2 library, and it actually has a keyword named Compare Images.
Use it as the following:
Compare Image <path, imagename=None, ignore_mismatch=False, includeEyesLog=False, httpDebugLog=False>
see details here: http://navinet.github.io/Robot-AppEyes/RobotAppEyes-KeywordDocumentation.html
I am having a webApplication which showe user records in tabular formate (200 row at a time). Problem is these rows contains multiple images and they are served based on the request URL.this results in a request being generated per image, which leads to performance decay.
Question:
Is it possible to create spriteImage for dynamic images? I'm looking for something that I can use in order to aggregate these images into a single sprite at runtime without storing it into disk.
One possibility is to generate the images as Data URIs. This would include all the image data in the response, ready to be displayed by the browser without making additional requests.
I.e. instead of a normal HTML page where you'd have
<img src="http://myserver.com/img/123.png"/> which would create a request to the server, you would include the data directly in the page as
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
If you're not satisfied even with that, the last option would be to bunch up all the images to a single huge image, load that offscreen and use CSS trickery to grab parts of the big image to be displayed.
If all else fails, get a beefier server, they're not that expensive.
Either with a headless browser, google filesytem API, or some other way.
This question says you can, but not how.
Converting d3.js SVG code to a standalone program -- any suggestions?
google groups has more hints, but no examples.
I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway.
My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js.
Help, please.
This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12.
Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like.
Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded.
The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.
There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it.
https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc
The easiest solution I've found so far is FileSaver.js demo here:
http://eligrey.com/demos/FileSaver.js/
It uses the HTML5 filesaver interface.
I came across this today, I've not tried it but perhaps someone will find it useful:
https://github.com/d3-node/d3-node
const D3Node = require('d3-node')
const d3n = new D3Node() // initializes D3 with container element
d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>
#myThemeBackground = #ddd;
div#box1 { background: #myThemeBackground; }
I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.
So say if the user chooses a custom color for the background I'd like the entire skin to change.
Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)
You can modify Less variables on the fly using the modifyVars method:
less.modifyVars({ myThemeBackground : '#000' });
I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.
To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...
I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.
The only solution I can think of is to change the text you render with less.js, with:
less.refreshStyles()
Change the text in the file or in the less snippet of styling.
Read more about it here:
Load less.js rules dynamically
Does anyone know of a utility for ****ahem**** stringing together static pages.
For instance:
Say I wrote a header and a footer of a page, and I only wanted to change the content without ****sigh**** dynamically generating the content of the page. (I.E. the page is dynamically generated, but the end result is just a static page to be dumped into an FTP directory.)
I don't normally endorse doing this
sort of thing without something like
Tiles or serverside includes on a webserver, but unfortunately my
employer __does...__they have use
static pages and there's nothing I can
do to change their minds. (C++
Programmers)
The closest thing to what I am describing here that I have found would be a utility called cook that's used to build tiddlywiki.
Right, so a utility that can take a directory of:
Static Page Parts
Header.htm
Footer.htm
Parts that Change
about.htm
info.htm
products.htm
etc.htm
And change it into:
Site Build
about.htm (with header and footer as well as content of /Parts that Change/about.htm) in between
info.htm (same bit...)
products.htm (same bit...)
etc.htm (same bit...)
Sounds like a job for Webby.
Sounds like what you want the end result is something that will take N files and stitch the content into a static HTML page that gets uploaded to what I'm assuming is a webserver. Does that sound about right?
I think Dreamweaver has that functionality, but if you want something a little more low level, use this algorithm:
load config file that you use for build parameters
open stream to output file
for each file in source folder
load to stream
write to output stream
close output stream
post file to remote site
Once your pages have been edited, just have your client run this processor. Please let me know if I've totally mis-interpreted what your trying to accomplish.
EDIT: You can also try putting some kind of token in your "dynamic" pages (%HEADER%, %FOOTER%, etc..) and when ever your processor encounters that token replace it with the actual static content.