Are there any open source scripts that will allow you to enter a website url and it will generate a color palette based on your site? I would prefer something that ran on a typical LAMP stack. I've been able to find many websites that offer the functionality as a service but no downloadable scripts...
Update: I'm looking for the palette to contain the hex color values
Presumably easiest would be to render the page and count the pixels of different colors from a screenshot, because otherwise you can't tell which colors from the CSS file actually cover large areas. It's unlikely you could script this easily from command line but if you have a windowing environment, writing such a program wouldn't be too complicated. If you use QT, you can load the page into a QWebView, use QPixmap.grabWindow to get the pixels, convert it to QImage and then loop through the pixels counting them.
When converting the web page to an image, a big point to have in mind is that a user could send it to a malicious website to take advantage of a security problem in whatever rendering engine you are using, and even take over the server. Make sure to at least disable JavaScript and Flash, even though that will make some websites look different from normal. Otherwise it's far too easy to get the program stuck in an infinite loop even if nothing else.
Related
I had a scaling issue on printing an SVG file that is exported from Inkscape. It turns out that the issue is caused by wrong/incompatible printer settings.
Is there a way to propose the printer settings from within an SVG file where the application must take in consideration upon printing that file?
In short: No, it's not possible.
First of all, an SVG file is not intended for print. It's a simple vector file format used for web graphics. It can't even have a color profile or multiple pages.
Even if we were talking about a PDF (which is intended for print) it's not possible to force printer settings like paper format, orientation, fit to printer margins/actual size, grayscale/color, resolution etc.
In this case, it might sound like a good idea to be able to do that, but seen from the user's point of view it would be very annoying if documents didn't behave in the same way and constantly tried to override the user's preferred printer settings.
Furthermore, different printers could have different settings available. I'm not sure, but I don't think there is a global standard for this. There could be manufacturers who uses their own standard.
I do understand why you want this. I often send designs for approval to my clients and they tell me everything looks kinda small - they are unaware of the fit to printer margins/actual size issue, but I can't control their printer, so I have to instruct them to print at actual size/100%.
I just started at a new company and have been asked to do what I believe impossible, but I need confirmation on this. The website that my company has allows users to view images in extremely high resolution using SVGs. We've built a custom viewer for these images that allow you to zoom and scroll around the image and it works well. Because of this, the image format "needs" to remain SVG. However, we need to include a watermark to this image. The way we're doing this right now is passing the SVG and PNG watermark to the client, inserting the watermark into the SVG, and displaying it to the user. This is very obviously easily hacked as anyone with client-side experience knows (The dev team here is mostly older developers and don't have much web experience). Even if the raw SVG isn't intercepted, they can still just delete the watermark from the source. I've convinced my boss to make the watermark be injected on the server-side, so this leaves just the problem that SVGs are editable by the end-client.
What I want to know is if one of these two things are possible:
1) Is there another image format akin to SVG that could be used to keep this highly scalable image without loosing resolution, and without it being directly editable by an end-client? The only options that people seem to discuss for the web is JPG, GIF, PNG, and SVG. I've looked at Adobe Illustrator ".ai" files and EPS (Encapsulated PostScript) as other vector options, but I can't find anywhere if I can modify these images in PHP, which is key if I want to overlay a watermark in server-side code.
2) Is there a way to obfuscate the raw SVGs content so that the use can't go and manipulate it? I've seen SVGs that have <image ...> tags inside them with PNGs represented as long and complex strings before. Something like xlink:href="data:image/png;base64...". I was wondering if there's a way to display an SVG as this string, so that the data can't be directly manipulated. I'm sure there's an algorithm to reverse these, but so long as we're sticking with SVGs, I need to make this as secure as possible with as many hoops to jump through as possible if someone wants to steal the data.
Either way would be acceptable, as long as removing this watermark is more complex than just hitting F12 and removing the element inside the dev tools.
Is there another image format akin to SVG that could be used to keep this highly scalable image without loosing resolution, and without it being directly editable by an end-client?
SVG is a vector format, and to maintain extreme scalability, you need to stick with vectors, be it any format. However, in that case it will always be possible to remove the vectors that belong to your watermark. There are of course vector formats that are stored as binary, which would make it somewhat harder for an enduser to parse and edit, but those are not editable in PHP either, and are much less compatible. So you probably don't want to do this.
Is there a way to obfuscate the raw SVGs content so that the user can't go and manipulate it?
First, it will never be "secure" in the sense that as said above, it will always be possible to remove the watermark from a vector image. (Btw the only difference to bitmap formats like JPG is that content below the watermark in bitmap is actually missing, while in SVG it's still there.)
However, depending on how "good" you want this to be, you can do a few things. I think the "goodness" here means the effort needed to remove the watermark, and you can raise the bar relatively easily. You don't have to (and you probably can't reasonably) obfuscate the whole SVG.
One thing that comes to mind is that SVG is basically just XML, it consists of tags like <rect>, <line>, <circle> etc. The order of these tags doesn't matter much (mostly, with exceptions of course). So you could entwine the tags that draw your watermark pretty much randomly among existing tags. I mean really randomly, so different downloads would produce different results. If you do this well (eg. you find line tags to "hide" your watermark line tags, and so on), it will be hard to automatically remove the watermark, because it's all over relevant data that is your actual image. Of course, the watermark could still be visually in a corner, and this is already a weakness, anything drawn to a corner could possibly be removed automatically. And it will be easy to remove by hand with any decent editor I suppose. So it depends on what the purpose is.
But I still think this sort of thing could make it hard enough in many scenarios (and would be totally inadequate in others).
I am looking for the best approach for generating images of text on the server side (preferably Node.js). It will need to accommodate things like paging (so generating multiple images of text for one text input if it is too long to fit on one page). I am looking for something that is fairly precise and allows for a good deal of type configuration.
I have looked at a few options:
Use Canvas. This approach would work for most of the use cases. I could use a text engine like textjs for the layout. However, this is somewhat limiting as Canvas doesn't have specific text metrics (for things like text height used for exact positioning). This could make paging difficult.
Use normal HTML with something like PhantomJS to generate and them capture an image of the text. While this approach will work for some use cases, it makes it hard to handle things like paging.
Use some other text engine. I've looked around and found some options - but it would need to be something that I could call from Nodejs (as I'll likely use this on AWS Lambda).
What would you recommend?
I lately did something very similar - also with node.js on Lambda. In my opinion the best approach is using PhantomJS and maybe taking the detour of generating a PDF.
With HTML and CSS you can conveniently style the output exactly how you want it, which is a great advantage about the way more complicated Canvas approach. You only have to take care of adding some horizontal space wherever you expect the pagebreak (of course this depends on your usecase and may not be necessary). Having the rendered HTML page you now have two options:
You could generate a PDF - which will take care of generating multiple pages - and then rasterize that to images
Or you directly generate an image with Screen Capture (example Code) and then splitt that image horizontally
Both approaches worked fine for me.
I'm running in a bit of OC situation here. I'm developing an application using LWUIT 1.5. So I'm almost done with the application, I've already added transitions in fact. But I noticed that the application is lagging on the phone(My current test phone is a Nokia C3-00). The transitions are starting halfway.
Do you guys have any advise on how do i optimize my application? I know I could use the Next Form properties of the Form, but I wouldn't want to always show a "splash screen" every time the user will go to another screen.
Nokia's are often very slow with translucent images, any image that contains a translucent image would be pretty slow which includes image borders. Another culprit is overly narrowly cut image borders, there is a workaround for this in Codename One though.
Remove the theme and create a blank or theme that only uses colors. See if speed improves.
Assuming it does then slowly remove suspect elements from your theme. If it doesn't then see if you load large images etc.
Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree ยป Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.