Skip to content

Tag: Canvas

Canvas: How to Create Custom UI Controls

Xojo includes a good amount of UI controls available from the Library for Desktop, Web, iOS and Raspberry Pi targets. These are the pieces that allow you to layout the user interface of your apps: properties, methods and events that, when combined, define the specific behavior of the project at hand.

Sometimes, subclassing the available controls is the answer to add specific behaviors you need. But what happen when none of the controls offer what you need, whether visually or functionally? The answer is the Canvas class (for Desktop projects), WebCanvas class (for Web projects) and iOSCanvas class for iPhone and iPad devices. But how do you create your own UI controls from scratch? Read on to learn…

Comments closed

Updating Code That Used The Graphics Property

Prior to Xojo 2018r3 Window and Canvas both had a Graphics property that you could access and draw to. This was deprecated in 2011 because it had significant performance issues on all platforms. The preferred way to draw your graphics since 2011 has been to use the Window.Paint or Canvas.Paint event handlers and the supplied parameter g As Graphics.

Starting with Xojo 2018r3, this Graphics property was removed from Window and Canvas so if you had code that was still relying on it, that code will no longer compile. Here are some tips on how you can migrate your code to use the Paint event handlers and tell the Canvas to update with a call to Invalidate.

Comments closed

Drawing Objects in a Canvas with the Paint Event

The Canvas control is a great way to draw pretty much anything to a window. With a Canvas, do all your drawing in its Paint event handler for the best quality and performance.

I’ve had many people ask for an example for how to create a Canvas that allows you to:

  • Draw pictures within it (as objects)
  • Move these objects
  • Remove them
  • Add labels to them
  • Programmatically select one

This example demonstrates how to do all these things. It has a large Canvas on the window with several buttons that let you add and manage the objects on the Canvas.

Comments closed

Tutorial: Saving WebCanvas Images to Disk

The WebCanvas control is used for drawing graphics in web apps. It takes advantage of the HTML5 Canvas making it fast and powerful. Sometimes is can be useful to be able to save the graphics drawn in the WebCanvas to an image file, but unfortunately there is no built-in Xojo method to do this.

However, by using a little JavaScript you can easily add this capability to Xojo.

Comments closed

#JustCode Challenge Week 8 – JumpStart App Launcher

A long, long time ago (1989) one of the first apps I ever made was an app launcher for the Atari ST. I called it JumpSTART. I originally wrote it in GFA BASIC and then later re-implemented it in Pascal (OSS Personal Pascal, technically).

When I got my first modem I went online with Genie and Delphi and uploaded JumpSTART as freeware. Even though it was freeware, I got a few checks in the mail from people that liked it.

I was reminded of JumpSTART when I saw my dock getting crowed. I thought replicating JumpSTART in Xojo would be a good project for week 8 of #JustCode. Though let’s just call it JumpStart this time around.

Comments closed

#JustCode Challenge Week 6 – Bubble Popper

For this week’s app, I created a simple iOS app where you tap on “bubbles” to pop them. This was actually suggested to me by Dana Brown some time ago as something that would make a great diversion for her son. I have found it helpful with some of my younger nieces and nephews.

This iOS app demonstrates the use of a Canvas and the detection of taps. When all the bubbles have been popped, more are added. It never ends!

Comments closed

#JustCode Challenge Week 1 – Color Picker

It’s the first week of the Just Code challenge so I’m starting with something pretty simple. This app lets you choose a color using the system color picker and then shows you the color values in hexadecimal (useful for programming, HTML and CSS), RGB (red, green, blue), HSV (hue, saturation,value) and CMY (cyan, magenta, yellow).

Comments closed

Create Your Own ImageWell Based on Canvas

Whether you are using Xojo to create your very first application or if you are coming from other languages, like C# or VisualBasic, customized UI controls are probably one of those things you have in your to-do list. For multiplatform Desktop apps, you will find that the Canvas class offers everything you need. In order to show you how easy it can be, follow this tutorial to recreate the ImageWell UI class control, provided by default in the Xojo framework. Our customized ImageWell will be able to proportionally display any JPEG file dropped by the user on the control, centering it on the available surface.

Comments closed