From time to time I like to make small projects that are good for nothing. This weekend I have created a small project that I call “HTML image maker”.
Description
- It’s purpose is to take existing images and to generate HTML table where each pixel is replaced by a table cell.
- It is also possible to insert text inside the cells where the color of the cell is at the background of the text or in the foreground.
- If you won’t insert input image than the program will simply create a screen shot image instead.
Used technologies
- The image manipulation is done using java’s ImageIO object.
- The user interface was built using Apache Pivot.
Screen shots
Click to enlarge.
|
|
|
|
|
|
|
Downloads
Download the sources (eclipse project)
Instructions
- No need to install.
- To start the program execute Html image maker.bat.
- Optional – Insert input image path. If you won’t insert input image than the image will be generated from the screen shot.
- Insert an output path for the Html file.
- Optional – You can enter text to be inserted inside the image. Select foreground if you would like to color the text itself instead of the background.
- Press ‘Generate HTML image’.
Warning
- This software consumes a lot of memory. You should use it on not so big images.
I just got to know to Pivot and I have to say, I love it.
Pivot is a technology to create Java applets for RIA or desktop applications with the use of XML and/or code.
When I write applications at home I don’t want waste time writing swing or applets myself. Pivot helps me designing the GUI with use of XML. It is that simple and the cool thing is that you can run it as a web page and a desktop application.
An example of a Pivot XML (WTKX):
<Window title="Hello" maximized="true"
xmlns:wtkx="http://pivot.apache.org/wtkx"
xmlns="org.apache.pivot.wtk">
<content>
<BoxPane styles="{padding:4, horizontalAlignment:'center', verticalAlignment:'center'}">
<Label wtkx:id="label1" text="Please enter your name"
styles="{font:'Arial 20', color:'#ff0000',
horizontalAlignment:'center', verticalAlignment:'center'}"/>
<TextInput wtkx:id="text1" />
<PushButton wtkx:id="button1" buttonData="Enter"/>
</BoxPane>
</content>
</Window>
After creating the XML, you can refer to the GUI components from the code.
import org.apache.pivot.collections.Map;
import org.apache.pivot.wtk.Alert;
import org.apache.pivot.wtk.Application;
import org.apache.pivot.wtk.Button;
import org.apache.pivot.wtk.ButtonPressListener;
import org.apache.pivot.wtk.DesktopApplicationContext;
import org.apache.pivot.wtk.Display;
import org.apache.pivot.wtk.Label;
import org.apache.pivot.wtk.MessageType;
import org.apache.pivot.wtk.PushButton;
import org.apache.pivot.wtk.TextInput;
import org.apache.pivot.wtk.Window;
import org.apache.pivot.wtkx.WTKXSerializer;
public class HelloWTKX implements Application {
private Window window = null;
private Label label;
private PushButton button1;
private TextInput text1;
@Override
public void startup(Display display, Map<String, String> properties)
throws Exception {
WTKXSerializer wtkxSerializer = new WTKXSerializer();
window = (Window)wtkxSerializer.readObject(this, "hello.wtkx");
label = (Label)wtkxSerializer.get("label1");
button1 = (PushButton)wtkxSerializer.get("button1");
text1 = (TextInput)wtkxSerializer.get("text1");
button1.getButtonPressListeners().add(new ButtonPressListener() {
@Override
public void buttonPressed(Button button) {
Alert.alert(MessageType.INFO, "Hello " + text1.getText(),
window);
}
});
window.open(display);
}
@Override
public boolean shutdown(boolean optional) {
if (window != null) {
window.close();
}
return false;
}
@Override
public void suspend() {
}
@Override
public void resume() {
}
public static void main(String[] args) {
DesktopApplicationContext.main(HelloWTKX.class, args);
}
}
Actually the entire GUI can be built just from the code, but I like the XML way better.
The application can be run from the IDE or can be referred from a web page as an applet.
All you have to do is refer to the Pivot jars + your jar and give the full name of your application class you have created.
<applet code="org.apache.pivot.wtk.BrowserApplicationContext$HostApplet"
archive="lib/test.jar,lib/pivot-core-1.4.jar,lib/pivot-wtk-1.4.jar,lib/pivot-wtk-terra-1.4.jar,lib/pivot-tutorials-1.4.jar"
width="500" height="400">
<param name="application_class_name" value="HelloWTKX"> <!-- your application class package -->
</applet>
The result:

The Pivot web site contains loads of examples with the use of their components.
download sample project for Eclipse but don’t forget also to download Pivot jars.
See also


Recent Comments
dante on Weekend project: Bluetooth multisender
how i send image to the devices from java using bluecove?????, this is part of may final proyect please give...Karol on Android – Multithreading in a UI environment
Hi All the examples I see so far implement the Runnable object as inner class of the main...faisal on Memory Game – Android Application
Hi, You have done excellent job. Very nice. Though I tried to build it but it did not build. Could you please...Avi on How to use fiddler+firefox to download files from streaming sites.
Try searching "Mpeg layer-3" instead.ashi on How to use fiddler+firefox to download files from streaming sites.
hi, i tried above i downloaded fiddler2 and also the script editor... also pasted the code but but i have problem in step...Rui Pedrosa on Android – Multithreading in a UI environment
A simple but very useful explanation! thanks!Hui Sunray on Using Hibernate Validator to cover your validation needs
I like your examplesSridhar on Weekend project: Bluetooth multisender
Excellent work and it is sending to many bluetooth devicesjetti on Android Development – Preferences
Hi, How can I add Icon/Image to each item in ListPreference? Is it possible to add our own icons...Eric on Android – Multithreading in a UI environment
Thx, helped alot :)