From Idea to Implementation: How Engineers Use ChatGPT for Graphic Coding

In this blog, we’ll explore how ChatGPT can be utilized to generate code, specifically XMAL and VB code needed to create dynamic, user-friendly graphics. Dive into the world of AI to learn new skills and complete tasks faster.

Build Real-Time Dashboards & Displays for Effective Process Monitoring with dataPARC

ChatGPT and Graphics Coding

In manufacturing, engineers are being relied on more and more to generate code to optimize their process. However, in many cases engineers have not been formally trained in coding, or they are using software with unfamiliar types of code.

This is where a tool like ChatGPT can come in handy. ChatGPT has been harnessed to drive the evolution of learning and techniques that empower us to better our systems.

With the convergence of cutting-edge language models and advanced data visualization, a new realm of possibilities emerges, promising to revolutionize how we create and interact with graphics. By leveraging the power of language and AI, we can expedite how we approach coding, formula development, and graphics creation.

The journey ahead holds the promise of illuminating use cases, tangible examples, and a demonstration of ChatGPT’s practical application in the context of coding with uses cases in dataPARC Graphics.

Understanding ChatGPT and Large Language Models

Before generating any code with ChatGPT, let’s lay the foundation by understanding the key concepts behind ChatGPT and large language models. A basic grasp of these tools will equip us to explore their applications in coding assistance.

What is ChatGPT?

At its core, ChatGPT is an AI tool that capitalizes on large language models (LLMs) to generate text responses based on the input provided. This AI tool is publicly available through OpenAI, serving as a bridge between language understanding and generation. Although the inner workings of LLM’s can be intricate, our focus lies on how this technology can enhance our coding experience.  

Main screen of ChatGPT before any prompts are asked.

LLMs, like ChatGPT, are fueled by neural networks, which are designed to predict the most likely next word in a sequence of words. This predictive mechanism forms the basis of language generation.

As we embark on the journey of using ChatGPT, it’s important to remember that it’s not pondering our thoughts or ideas but rather using statistical probabilities to determine what comes next in each context.

Horizon of Prediction

Traditionally, language models had a limited horizon for prediction, considering only a set number of preceding words. However, the advent of models like ChatGPT has revolutionized this aspect.

ChatGPT is particularly adept at extended conversations and interactions. It uses the entire conversation history for predictions, resulting in more contextually accurate responses. A note on accuracy later.

Exploring Graphical Coding Use Cases

As we navigate through the capabilities of ChatGPT in the context of coding, it’s essential to grasp the various use cases that this dynamic AI tool brings to the table. By harnessing the power of ChatGPT, engineers and designers can unlock new dimensions in graphics coding and application development. For more graphic coding use cases, check out this webinar.

1. Elevating User Experience in Graphics Coding

Graphics are not mere static visuals; they can be transformed into dynamic applications with the infusion of code. ChatGPT assists in this transformation by suggesting code snippets that enhance user experience.

By tapping into ChatGPT’s coding capabilities, designers can make graphics more intuitive, interactive, and user-friendly. Elements can appear and disappear, information can be displayed contextually, and animations can be integrated, all contributing to an elevated user experience.

Build Real-Time Dashboards & Displays for Effective Process Monitoring with dataPARC

2. Simplifying Data Grid Integration

Even for non-programmers or developers, ChatGPT can be an asset. Integrating complex elements like data grids, often requiring intricate coding, becomes more accessible with ChatGPT’s guidance.

Whether it’s filling a data grid with an SQL query record set or handling data-driven displays, ChatGPT provides actionable coding suggestions, simplifying the integration process.

3. Empowering Storyboard Creations

Storyboarding, a powerful tool for creating animations and dynamic visual sequences, becomes more manageable with ChatGPT’s assistance. Designers can craft animations by combining various elements like size changes, opacity adjustments, and movement.

By suggesting animations, ChatGPT lends its expertise, enabling the creation of captivating and visually engaging graphics.

4. Streamlining SQL Interface

Interfacing with SQL databases can be a daunting task, particularly for those less familiar with SQL queries. ChatGPT bridges this knowledge gap by offering SQL-related code suggestions and solutions.

This data was imported via a linked Server for operators to pick and set the Grade, Product and other necessary information to create tags.

Those newer to SQL can consult ChatGPT for SQL-related queries, reducing their reliance on colleagues and accelerating the development process.

5. Dynamic WPF Binding and Advanced Formula Coding

For graphics built around Windows Presentation Foundation (WPF), ChatGPT can offer insights into dynamic WPF binding. Designers can manipulate controls and elements dynamically by altering their bindings.

Additionally, ChatGPT can contribute to advanced formula coding, particularly in the Visual Basic side, opening possibilities for intricate calculations and data manipulations.

Steps for Utilizing ChatGPT for VB.NET Code

As an example, let’s walk through the steps of using ChatGPT to generate VB.NET code. After the, we touch on troubleshooting and tips. dataPARC Graphics Designer is the program we will be putting the code into. For more detailed steps, check out our webinar.

Creating Clear Prompts:

Before engaging with ChatGPT, frame your prompts clearly. Include key details such as the type of application (WPF), the programming language (VB.NET), and specific functionalities you’re aiming to achieve. Be detailed yet concise to receive accurate and relevant code suggestions.

Describe the specific functionality you want to achieve in your graphic, whether it’s animating objects, interfacing with databases, or implementing dynamic bindings.

Engaging with ChatGPT:

Enter your prompts into the ChatGPT interface. For PARCview Graphics coding, start prompts with:

 “I am creating a WPF application with VB.NET code behind…”

ChatGPT window with the starting prompt added. Code behind is the key phrase here.

This helps guide the AI towards generating relevant code snippets for your DataPARC graphic. Code behind, the code behind portion is very useful and gives the VB.NET and XMAL code required for the use case.

Reviewing Generated Code:

Once ChatGPT provides code suggestions, carefully review the generated code. Pay attention to import statements, variable names, and other specifics. Copy the relevant portions that align with your graphic’s requirements.

Integrating Code in DataPARC Graphics:

Within the DataPARC graphics editor, access the code section where you’ll implement the generated code. Ensure you’re pasting the code in the correct event handlers, such as button clicks or animations.

Customizing Code:

Adjust the generated code as needed to match your graphic’s components and layout. This can include modify variable names if they were not provided in the prompt. Dimensions, and other attributes may also need to be altered to integrate the code with your existing design.

The object is a rectangle, but the name is called InfoScreen. With this information, ChatGPT re-wrote the code rather than adjusting manually.

Troubleshooting and Tips:

There may be some bumps along the way, here are a few troubleshooting tips if the code ChatGPT provides is not working out of the gate:

Verify Variable Names:

Ensure that the variable names mentioned in the generated code align with the names of objects in your DataPARC graphic. Inconsistencies can lead to errors.

Ask for a Rewrite:

At times, ChatGPT may not write correct code the first time. Let it know the code did not work, and prompt it to find and correct the errors.

Check Import Statements:

Confirm that the necessary import statements are included in the generated code. If not, manually add the required imports to ensure the code functions properly.

Adaptation for dataPARC Controls:

Keep in mind that ChatGPT might not be aware of specific DataPARC controls or classes. Adapt the generated code from similar controls or classes that DataPARC offers.

Incremental Testing:

After integrating the generated code, test your graphic incrementally. This approach helps identify any issues early on and ensures that the code behaves as expected.

By following these steps, creating effective prompts, and utilizing ChatGPT in a structured manner, you can integrate AI assistance into your graphics coding. With a careful approach to implementation and customization, you’ll unlock new dimensions of functionality and engagement within your graphical applications.


Here are some questions that were asked during a recent webinar on the topic:

What ChatGPT version does this work for?

This post is focused on the free version of ChatGPT, specifically GPT-3.5. While there are paid versions with advanced features, the free version sufficed for the demonstrated use cases.

Can you add variables names into the prompt? Will it remember?

ChatGPT does indeed remember variable names for the duration of the conversation. While it sometimes requires refreshing the page to reload the conversation, it consistently generates new variable names, even within the same class. However, it starts anew when the conversation shifts to a different topic.

Does ChatGPT recommends non-native libraries or open-source references?

ChatGPT’s knowledge is limited to information available on the internet before September 2021. Anything within the last three years is not part of its base knowledge. Users can’t expect ChatGPT to provide insights into proprietary or recent developments.

Does ChatGPT’s knowledge expand based on user interaction?

Any learning happening within a conversation is ephemeral and confined to that specific context. The model itself doesn’t learn or evolve from individual conversations. Each interaction contributes to refining responses in that conversation alone. However, be aware of your companies privacy policy and do not give ChatGPT any information that is not already accessible to everyone.

What about Hallucinations?

The term “hallucination” refers to instances when ChatGPT provides confidently incorrect information. Hallucinations occur due to the probabilistic nature of the model. Users should verify generated information, especially if it seems too specific or assertive, to ensure accurate results.

Best Practices for Interaction?

Engage with ChatGPT in a controlled manner. Incremental testing and validating generated code are crucial steps to ensure functionality. Copy-pasting error messages and iterating the conversation help in troubleshooting and refining code suggestions.

Embracing the Power of ChatGPT for Coding

The fusion of artificial intelligence and programming tools continues to redefine how we approach coding tasks and allow engineers to develop custom solutions. This post serves as a testament to the immense potential of leveraging AI for enhancing coding efficiency and productivity.

While ChatGPT can alleviate some coding challenges, it’s not a replacement for fundamental programming knowledge and critical thinking. The intersection of human expertise and AI innovation is where the true potential lies, enabling us to navigate complex coding tasks with greater efficiency and creativity.

In conclusion, the fusion of ChatGPT with graphics coding offers a glimpse into the boundless possibilities that emerge when AI and coding converge. By understanding ChatGPT’s strengths, limitations, and the best practices for engagement, we can harness its power to streamline our coding endeavors.  

Mastering Manufacturing Metrics: The ultimate guide to establishing, measuring, & reporting KPIs for peak plant performance.

Mastering Manufacturing Metrics

The Ultimate guide to establishing, measuring, & reporting KPIs for peak plant performance.