This page is a closer look at an early version of the yoClock! application.


Schoolroom Zoom

Default Look for yoClock!This demo application creates Glass Paned or Transparent container controls for complex loose or compiled Xaml scenes and Wpf user controls.
Currently, only Analog Clock gadgets are enabled. You've never seen analog clocks like these though.

Notes and workflow suggestions for the yoClock! Demo (Some items do not apply to the publicly available yoClock! demo)

  • Everything Resizes. This is the coolest feature of Wpf, hands down, and I'll mention it again, but resize the windows and margins to examine the behavior
  • You can launch the application from anywhere,
  • The download contains loose Xaml clock gadget skins and demonstration Personalization Images--Copy them to the work directory then browse there using the custom explorer panel
  • All Window & Panel locations, contents, and user preferences are persisted between executions in AppData--no installation involved
  • Message alerts are new Wpf Task Dialogs (on capable systems)
  • Select an Active Panel from the live thumbnail list of open panels, on the left
  • Large panel is a custom view File System directory and file explorer
    • Use Single-Clicks to navigate
    • Valid Xaml files and Image files shown as thumbnails
    • Slider to adjust thumbnail size
    • Click on Directory names to browse
    • Click on Xaml files to render the scene in the active panel
    • Click on thumbnail of an image to make that image the Personalization Image for the active panel
  • Click the Capture button to save a png image capture of the active panel to the file system
  • Click the New button to add a new panel to the desktop
  • Click the Close button to close the active panel
  • Minimizing the options window sends it to the Notification Tray
  • Panels remain open and visible
  • Double-Click the notification icon to restore the options window

Personalize your clock with any image or photo.

Schoolroom_Clock.png Schoolroom_with_Tulips.png

The yoClock! panels have either Window Glass (Aero Blur) backgrounds, or Transparent (Invisible) backgrounds

  • All panel options can also be set or viewed in the main Control Center window
  • Drag panels by the border that appears when the mouse hovers
  • Resize visible panels from any edge, invisible panels with the Resize Grip--You must resize the panels to have the full experience.
  • Click the X button in upper right, which appears on mouse hover, to close the panel
  • Click on a panel to expose the Panel Options
  • Click near top of Options Panel to return to scene view
  • Two states of the panel, showing options or not, each store their own corresponding sizes, and panels animate between them (Animating a Window is non-trivial)
  • Browse for a Xaml scene file to display, or reset to default
  • Browse for a Personalization Image to use, or clear the option
  • Panels accept Drag & Drop for all operations.
  • Drop a yoClock skin xaml file or a Personalization Image graphic file on a panel.

The yoClock! panels in the demo application only show Analog Clock yoClock skins, definied as loose xaml files. yoClock skins can use images as part of their composition, but none of the default skins use any images at all--they are all pure xaml.

You must resize the clocks to have the full experience.

Try Them

  • Huge
  • Tiny
  • Squished Wide
  • Squished Tall
  • With transparent background
  • With visible background
  • With different skins
  • With different Personalization Images

The default skins include replicas in xaml many of the default skins, bitmap based, from the Windows Desktop Gadgets default clock gadget. Right-Click your desktop to add a clock gadget to your desktop.

Modern Compare

Compare the equivalent skin from yoClock! to the Desktop Gadgets clock.

  • Desktop Sidebar Gadgets' analog clock does not resize.
  • It has no option for a visible background, nor transparency in the gadget.
  • The desktop gadget clock has only 8 skins, and no means for Personalization
  • Adding skins to the sidebar gadget is difficult, for someone who knows what they're doing

About the clocks and GUI design with Wpf

Xaml can be created from or by most vector-image editing applications and formats. The default clock skins were drawn using Fireworks, exported as xaml, edited in Blend, and then used as clock skins.

But creating a skin can be as easy as drawing it, literally. With behavior somewhat similar to a Xion skin, yoClock skins need only be drawn, labeled, and exported. Fireworks has an export add-on available. Blend imports Photoshop PSDs now, as a standard feature.

Creating clocks from the loose xaml involves a number of very cool sleights under the hood. Inquire if curious.

yoClock! Skin Sample

yoClock! Skins are Created Using Your Favorite Image Editor

  • Examine each clock skin, browsing with the explorer control in the main Control Panel wndow.
  • Resize the panels.
  • Check out how the Personalization Image interacts with the clock skin!! Pretty cool.
  • Look how small they can get.
  • Look how more and more detail, instead of more and more blur, is shown the larger they get.

Thank you for your interest, and understanding that this is an early stage work-in-progress being demonstrated.

    • yoClock Alpha Snag
      yoClock Alpha Snag

      yoClock! is nearly functionality complete, then will need polish to the GUI--inquire for early demo.

      Right now this is a much cooler replacement for the default analog clock gadget from Windows Sidebar Gadgets. Many of the skins from that gadget are replicated by yoClock!--but all yoClock! skins are pure Xaml vector art that resize and scales and animates.

      This application is feature-rich in small things. Task Dialogs instead of Message Boxes, file system browser that displays thumbnails of images and xaml in sizable buttons. Any number of clocks can be created, with visible glass pane backgrounds, or invisible, transparent background. All settings are preserved between executions automatically, with no installation required. yoClock! skins, naturally, recognize alpha transparency throughout the scene; the Windows Gadget platform does not support this at all. The skinning system is as simple as drawing a clock in one's favorite graphics application, and exporting it. You can Minimize the Options window to the Notification Tray, while keeping the clock panels visible.

    • Modern Compare
      Modern Compare

      A replica of the distinctive orange Modern skin from the Windows Sidebar default analog clock gadget demonstrates the vector resizing next to the bitmap resizing the sidebar would experience if it supported resizing at all.

Check XHTML « cv.xanderlih.com Copyright © Xander Lih 2000-2012  » Check CSS