Category: GUI

Lean Code and Sticky Fields

Quite some time ago I created a backend interface to serialize and record data for labels printed through Crystal Reports as generated from our ERP system.  Unfortunately, the ERP system makes no provision to enter or update all of the key information required to support traceability of the labels after they are printed.

To solve this problem, I used Excel VBA to create a front end label manager to edit or update labels with the relevant information.  The window appears modally when the “Manage Labels” button is clicked on the ASN E2 Data worksheet (pictured below), allowing us to continue working with our workbook as required.

EDI-LabelManager

I could have written the front end as an independently managed application, however, it is a natural extension of other features and capabilities supported by the workbook in which the VBA code resides.  No code is presented in this post, however, some familiarity with Excel VBA and User Forms is assumed.

LabelDetailsWindow

When the “Manage Labels” button on the worksheet is clicked, a “Label Details” window appears as pictured above.  After confirming or selecting the Server Location and clicking Connect, a Customer Code is selected from the ComboBox.  We then click the “Get Labels” button to load the labels for that Customer accordingly.  More granular search capabilities are also provided.

The core functionality supported by the front end is the ability to edit the data associated with any given label.  Text boxes are used to edit data for the fields indicated.  A check box next to each field is used to make the field “sticky”.

EditBarCodeLabelsPage

Note that although each field can be set independently, all “sticky” checkboxes can be set or cleared by pressing the “Set Sticky” or “Clear Sticky” button respectively.StickyFieldsCheckBoxReset

Sticky Fields

Normally, text boxes are updated when moving from one record to the next.  However, there may be times when we want our data to persist or carry over from one record to the next so we only have to enter it once.

For example, at the time of printing and when parts are being produced, we can’t possibly know the Packing Slip number in advance.  StickyFieldsCheckBoxTrueIf multiple containers (each having a uniquely serialized label) are shipped, we can simply make the Packing Slip “sticky” and update the records without having to re-enter the packing slip for each individual label.  Similar logic applies to the remaining fields.

TextBoxProperties-TagThe “Reset” button is used to overwrite the TextBox with data from the original record.  To do this, we take advantage of the “Tag” property of the TextBox.  When the data is read from the database, a  copy of the data for each field from the original record is stored in the “Tag” for each TextBox.  The “Tag” can store up to 2048 characters and is more than sufficient for our purposes.

Functionality is also provided to Swap the data between the current field value and the original data value of the field by using the up/down arrow button immediately to the left of the “Reset” button.

Note that all fields can either be reset to the original data contained in the record or cleared entirely by pressing the “Reset Fields” or “Clear Fields” buttons on the Edit page respectively.

Carry On

This type of functionality is not typical for most applications though it is not necessarily unique.  I recall seeing a “record level” Carry ON type of functionality years ago where the data from the previous record would carry over to the next record and edited as required.  However, this only applied to new records as they were being entered.

Risks

If the user “forgets” that a sticky field is set, it is possible that some data may be changed unintentionally.  By default, all of the check boxes for the sticky fields are clear (off) when the edit page is presented and must be turned on intentionally by the user.

On the other hand, consider the risks associated with data entry where the user would have to enter the same data multiple times for a larger number of records.

Editing Multiple Records (Global Update)

Though not presented as part of this post, it is also possible to select multiple records from the main “label display area” and globally apply changes to “common fields”.  Of course, “global” edits to multiple records presents it’s own challenges and risks and is the topic worthy of it’s own post.

Final Thoughts

You may already be using Sticky fields or perhaps considered making this capability available to your users.  There are certainly times where this type of functionality may not be desirable and certainly where the risks of “contaminating” your database may be high.  You will note that we did not provide the ability to edit all of the fields for a given record for this very reason.

The efficiency and effectiveness of an application extends from the underlying code to the actual person using the application and is one of the reasons why this was included as part of our ongoing Lean Code series.  Saving the user from having to re-enter duplicate data into multiple fields across large record sets can save a significant amount of time and effort and minimizes the risk of error where “exact” duplication of data is a necessity.

Until Next Time – STAY lean!
Versalytics

Related Articles and Resources

 

No action

Mouse Gestures

Back

Forward

Scroll up

Scroll down

Switch to previous tab

Switch to next tab

Close all tabs except current

Close current tab

Open new tab

Close all tabs

Refresh current tab

Stop loading

Scroll to bottom

Scroll to top

Reopen closed tab

Go to home page

Advertisements

What? Rats WebGL Hit a Snag?

When your code hits a snag, there has to be a solution.  If you’ve discovered the “Rats WebGL Hit a Snag” notification, here are some articles we’ve discovered to both enlighten you and provide potential fixes.

It’s important to be aware of the potential problems your application may encounter, especially those that are beyond your control.  In this same respect, it is important to consider the tools and/or API’s you choose to use in your application.

Simply an FYI …

 

Until Next Time, STAY lean!

Versalytics

Lean Code – Web Graphics

Graphics and Animation

MultipleMachines

Over the past few weeks, I’ve been working on an application to simulate multiple production processes working in tandem and decided to re-introduce myself to the world of animation.  In its present state, the application is working quite well using just the core HTML5, CSS3, and JavaScript web languages.

The HTML5 canvas makes it easy to render graphics where CSS3 and JavaScript are used to manage and manipulate various animation effects.  Aside from the canvas element, OpenGL, WebGL / WebGL 2.0, SVG (Scalable Vector Graphics) and SMIL (Synchronized Multimedia Integration Language) or VML (Vector Markup Language) are also options to render graphics to your web page.

While HTML canvas is relatively easy to understand, working with SVG can be a little more complicated.  Fortunately, a number of packages exist that can be used to create our shapes and several JavaScript libraries are available to work with the generated SVG files.

Creating Vector Graphics

Adobe Illustrator is a great product but also demands a monthly subscription fee which, unless you’re a professional web developer, isn’t something too many of us want to add to our monthly budget.

An SVG Editor (by henoc) is available for Microsoft’s Visual Studio Code that can simplify the task of working with SVG.  You may also wish to consider using:

  • Vectr, a free cross-platform vector graphics editor, that allows you to create scalable vector graphics in 2D.   You can use the online version or download a copy of the application for your operating system (Windows, Mac, Linux, or Chromebook).
  • Inkscape a professional vector graphics editor for Windows, Mac OSx and Linux.  Free and open source.
  • Gravit Designer is a very capable and powerful design tool.  You can use the online version or download a copy of the application for your platform (Mac OSx, Windows, Linux, and Chrome OS).
  • There are also a number of online SVG editors – easily found with a simple Google search –  where you can create simple 2D SVG files online and save them locally to your machine.
  • It is also worth noting that the WebStorm IDE by JetBrains, our IDE of choice for web-based applications, also provides a level of support for working with SVG files.

JavaScript Libraries for SVG

While we can manipulate and work with SVG data directly using CSS and native JavaScript, a number of libraries are available that provide significantly enhanced functionality and effects.  Some commonly used libraries for working with SVG data include:

JavaScript libraries will save you a tremendous amount of time and effort so you can focus on your application.  It is also possible to render 3D models using SVG with more highly capable JavaScript libraries.

Browser Support and Local Files

Browsers provide varying degrees of support for today’s web technologies and knowing what is or is not supported will determine whether your application will run as intended.  IE (Internet Explorer) is one browser that is typically lacking in support for capabilities such as CSS transforms on SVG elements.

Remember:  Browsers are NOT created equal.

FailedtoLoad-CrossOriginRequests

Some browsers like Chrome do not permit access to files or data on your local drive and you may receive an error similar to the one pictured above if you make the attempt.  Fortunately, I’m using the WebStorm IDE by JetBrains and have the option to run code either as a local file or using the built-in server.

Use a local server if you are using Chrome or another browser that does not provide access to data files that are local to your machine.

Responsive Websites

A responsive website is one of the more significant and noteworthy advantages of using SVG for your graphic elements.  Scaling your site to accommodate devices of all shapes and sizes is less of a challenge with SVG.   Images retain their original quality regardless of scale, can be created or edited with any text editor, and can be manipulated or enhanced using CSS and JavaScript.  These reasons alone make learning SVG that much more rewarding for you and your visitors.

The options for animating your website are many and limited only by your imagination.  As I’ve said many times before, “There’s always a better way and more one solution.”  Working with SVG’s and the number of API’s available to animate them proves this statement to be true yet again.

Until Next Time – STAY lean!

Versalytics

Related Articles and Resources:

 

 

GUI’s, wxPack, and wxWidgets

The official wxPython logo
The official wxPython logo (Photo credit: Wikipedia)

wxWidgets and GUI’s

In our post “Where’s the Graphics? Learning from our Roots (Tcl / Tk)” we focused on Tcl/Tk as a primary GUI development language.  We also mentioned QT as a viable alternative.  QT provides a more powerful GUI development API when compared to Tcl/Tk, however, the licensing schema for QT is also more complex.

To paraphrase the description from the wxWidgets website, wxWidgets is a C++ library that includes bindings for C++, Python and other languages to create cross-platform applications for Windows, Mac OS X, Linux, and more.

wxWidgets is available free of charge and offers a comprehensive collection of widgets that make it ideally suited for advanced GUI intensive applications. By using the native platform API, wxWidgets provides a native look and feel to your applications.

The latest version of wxWidgets is 3.0.2 as announced in the latest news release dated October 6, 2014.

wxPack

Thanks to wxPack, we’ve expanded our list of cross-platform GUI’s to include wxWidgets.  wxPack greatly simplifies the task of installing and setting up wxWidgets on your machine.  wxPack is a full wxWidgets Development Kit, complete with wxWidgets source and binaries, wxFormBuilder (RAD Tool), and more.  Without wxPack, installing wxWidgets is a task best left to more seasoned developers.

wxFormBuilder

From a development perspective, wxFormBuilder is the tool that ultimately caught our attention.  More specifically, wxFormBuilder offers the following features that are ideally suited to our language base and development environments:

  • Visual design of wxWidgets dialogs, frames, panels, toolbars and menubars
  • Source code generation for C++, Python, PHP, Lua and XRC
  • Support for wxWidgets 3.0 widgets (wxRibbonBar, wxPropertyGrid, wxDataViewCtrl, …)
Python and Qt
Python and Qt (Photo credit: Wikipedia)

Selecting Your GUI Tool Kit

The wealth of information available to learn and implement Qt suggests it is one of the better supported GUI tool kits in general. TKinter (Tcl/Tk) is also well supported due to it’s inclusion with the standard Python distribution.  Regardless of the tool kit chosen, the initial learning curve can be rather steep for more complex applications.  The number of widgets and options available with each package only add to the challenge of which package to choose.

Keeping it Lean

Too many options can make for more complicated interfaces than are necessary to meet the needs of the application and it’s end users.  For Python, TKinter provides a minimal widget set that serves the majority of our requirements.  That it’s already included with the standard Python distribution makes TKinter an even more convenient and attractive option.

There are times where a higher level of complexity and sophistication is necessary.  Of course, to learn every GUI kit available isn’t an option available to everyone.  The wealth of information and code samples available for QT make it a highly regarded option.

wxWidgets may just be the Goldilocks solution, falling somewhere between simplicity and sophistication where the tools available make it “just right” to get the job done.  A quick review of the wxWidgets Class List suggests there are more than enough features to develop a robust GUI for your application.

Ultimately, the right choice is the tool kit that is both effective and efficient for the given application.  Simplicity serves the purpose best especially during rapid development cycles and iterations.

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at feedback@leanexecution.ca or feedback@versalytics.com.  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

[twitter-follow screen_name=’Versalytics’ show_count=’yes’]

Vergence Analytics

ActiveState Tcl 8.6.2.0

Tkinter demo: many widgets
Tkinter demo: many widgets (Photo Leancredit: Wikipedia)

It’s hard to believe that one day after we published “Where’s the Graphics?” ActiveState released Tcl 8.6.2.0.  Though the link to the download page remains the same, we updated the context of our post to reflect the latest version number.

Visit the ActiveState Tcl 8.6 page for more detailed information.  ActiveState’s ActiveTcl Community Edition is a free, ready-to-install distribution for Windows, Linux, and Max OSx.

Though other GUI options exist, Tcl/Tk is a proven technology that has persisted for more than 25 years.  The latest release offers features that continue to keep Tcl/Tk relevant and at the top of our GUI toolkit.

In addition to the numerous resources listed in our “Where’s the Graphics” post, a wealth of information can also be found at wiki.tcl.tk.

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at feedback@leanexecution.ca or feedback@versalytics.com.  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

[twitter-follow screen_name=’Versalytics’ show_count=’yes’]

Vergence Analytics

Where’s the Graphics? Learning from our Roots (Tcl / Tk)

Tkinter demo: many widgets
Tkinter demo: many widgets (Photo Leancredit: Wikipedia)

One of our “side bar” challenges is developing software solutions (applications) for our clients.  Simple or complex, they all have one element in common, a Graphical User Interface or GUI.

Imagine the surprise and disappointment on the faces of many beginning programmers and developers when they discover that powerful languages like Assembler, C, C++, and even Python start by teaching you how to write software from the command prompt!

We’ve been there too!  When we decided to learn Python – a powerful, high-level, dynamic interpreted scripting language that is quickly becoming the language of choice for new developers – we were just as surprised to be writing and running programs from the command line (C:\).  Even Python’s Interactive Development Environment (IDLE) uses a “prompt” driven interface.

Basic Fundamentals

Our journey with Python originated with our interest in learning C++.  When we discovered that Python is written in C++, we were curious to see how C++ could be used to create an even more powerful dynamic language.

Learning a language and creating a GUI are related but they are not necessarily the same.  Developing an application requires a solid understanding of the core language itself including its capabilities and constraints.  A GUI “simply” serves as a means of interacting with the core application without concern for how the program actually functions or performs internally.

By way of analogy, driving a car does not require us to understand the intricate functions of the engine and powertrain.  As drivers, we use a key to turn the engine on or off, a gear selector, the accelerator and brake pedals, and the  instrument panel – all of which are the equivalent of a GUI in terms of function – to control and monitor the vehicle.  As developers, however, we are more concerned with ensuring that the engine and powertrain function as expected.  In other words, the GUI can wait but it should still be a consideration during the development process.

Where’s the Graphics?

The result
The result (Photo credit: Wikipedia)

Is writing applications with a nice, clean, graphical interface a mystery that only professional programmers can master?  This answer may surprise you.  Anyone can create a GUI and there is yet another language for doing just that:  Tcl/Tkinter. Tcl is a general purpose scripting language developed by John Ousterhout in 1988 and was designed to enable communication between applications.   Tkinter is a cross platform toolkit that provides a variety of widgets for building GUI’s in many languages.

Most introductory books on Python are concerned with teaching the core fundamentals of the Python language itself, though some may provide a brief introduction to Tkinter.  It is significant that Tkinter is included as part of the Python distributions that are freely available for download from the Python.org website.  Including Tkinter in the Python distribution enables the development of simple to complex GUI’s for your application.

Back to the Beginning

Although other packages such as wxWidgets and PyQt are available, that Tkinter is included in the standard Python distribution makes it much easier to integrate and explore.

To fully understand the Tcl/Tk programming language, we decided to search for more information.  We discovered an excellent Tcl/Tk Tutorial at TutorialsPoint.com where we are served with a wealth of information for both Tcl and Tk.  This is certainly enough to whet your appetite for more.

The TutorialsPoint Tcl/Tk  Tutorial describes several features of Tcl and this is one that caught our attention:

 “You can easily extend existing applications with Tcl. Also, it is possible to include Tcl in C, C++ or Java to Tcl or vice versa.”

What seems like an overly extended tangent from our original pursuit of C++ has become a worthwhile journey.  One of our greatest frustrations while learning C (and C++) was the lack of information for developing a graphical interface for our applications.  It looks like we may have discovered something that will help us along the way for a variety of languages.

Tcl/Tkinter Resources:

If you are using an Apple computer, Tk and Python are already installed on your system as part of the OSx.  The versions installed depend on the version of OSx you are running on your computer.

We recommend visiting SourceForge.net and searching for the term “Tcl/Tk”, without the quotes, using the site’s search box.  You will be presented with the latest version of Tcl (8.6.2) and variety of other related tools including several Tcl extension packages and IDE’s.

To get the latest copy of ActiveState‘s version (8.6.2.0) of Tcl/Tk for your system (Windows, Linux, Mac OSx) visit the ActiveState.com download page.  The community version is free and will be more than sufficient to get you started.  Click here to see some interesting code snippets or “recipes” on the ActiveState site that demonstrate some of the key features of Tcl/Tk.

We already suggested that TutorialsPoint offers an excellent introduction to Tcl/Tk Programming, however, we have also discovered several books that are worth mentioning to get you started:

Python and Tkinter GUI:

Python and Other GUI’s:

C++ and Qt:

English: Screenshot Qt Designer Русский: Скрин...
English: Screenshot Qt Designer Русский: Скриншот Qt Designer (Photo credit: Wikipedia)

While some are comfortable to accept the tools at face value, we found it helpful to delve into the core of Tkinter and Tcl to fully appreciate and understand the underlying language and tools that are available to us.

Finally

As Operating Systems continue to compete for market share, it is good to know that we have cross platform GUI options that will allow us to write applications that will work on all of them.  To this end, we’re less concerned about “who wins” and more concerned about writing efficient and effective applications for our clients.

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at feedback@leanexecution.ca or feedback@versalytics.com.  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

[twitter-follow screen_name=’Versalytics’ show_count=’yes’]

Vergence Analytics