Archive for the 'How to' Category

Improving Tinymce interface for Drupal

Published
by
Ish
on August 5, 2008
in Drupal, How to and Web Development
. 3 Comments

A recent Drupal setup required a WYSIWYG editor, and so the TinyMCE module was called upon yet again. After everything was set up, I was reminded how ugly the TinyMCE toolbar is. It added functionality, but made things look unfinished. Something needed to be done, and I was glad to find, that someone else had already done it.

A fellow designer did some work re-styling the buttons and toolbar to resemble the WordPress editor. You can check out his article here. I found that his stylesheets didn’t work for me (he probably used a different Drupal/TinyMCE version), but a little bit of tweaking led to some fixes, as well as some improvements. The final product should look like this:

The instructions for doing this are pretty simple, and don’t require any changes to core or the module files. You should, however, set up the module before attempting these steps.

  1. Append the contents of the style.css file to the end of your active theme’s stylesheet (copy/paste).
  2. Place the tinymcebutton.png file in your active theme’s directory.
  3. Place the tinymce.css file in your active theme directory.
  4. In Drupal, navigate to Administer > Site Configuration > TinyMCE
  5. Click “edit” next to your profile.
  6. In the CSS section, set “Editor CSS” to “define css”, and “CSS path” to “%ttinymce.css”.

I am using Drupal 5.7, TinyMCE module 5.x-1.9, and TinyMCE 3.1.0.1.

The stylesheets aren’t very large, so with a little bit of CSS knowledge, it should be easy to modify how the buttons look. If you make changes or have suggestions about this, let me know by leaving a comment.

Attachments:

style.css 1.81 KB
tinymce.css 699 bytes
tinymcebutton.png 545 bytes

Simple Double Buffering in Java

Published
by
Ish
on April 28, 2008
in How to and Programming
. 0 Comments

I recently wrote a simple program that had a background image, with smaller, draggable images over top of it. It worked fine when both the images and background were in the same JPanel, but when I tried to paint them in a JApplet, the dragged objects started to flicker with each call to repaint().

What I found that I needed to do was have all of the objects painted offscreen, added to a temporary image, and then that image painted into the JApplet (double buffering). That is where using an auxiliary Graphics component comes in.

import java.awt.*;
import javax.swing.*;

public class SomeApplet extends JApplet {
  // ...
  private Graphics bufferGraphics; // graphics buffer
  private Image bufferImage; // temporary offscreen image

public void init() {
    // ...
    bufferImage = createImage(*WIDTH*, *HEIGHT*);
    bufferGraphics = bufferImage.getGraphics();
  }

public void paint(Graphics g) {
    bufferGraphics.drawImage(*IMAGE 1*, x, y, null);
    bufferGraphics.drawImage(*IMAGE 2*, x, y, null);
    // ...
    g.drawImage(bufferImage,0,0,null);
  }
}

The key is to paint all of your images using the extra Graphics component, and then paint the temporary image associated with that component using the paint() method’s Graphics component. This way, the whole image is drawn to the canvas only once for each repaint() called.

I’m no Java guru, but I had to do a bit of searching around before figuring out a simple way to do this. A lot of tutorials included extra code which made understanding it difficult. If you find this helpful, let me know by leaving a comment.