Forum

GUI Development Questions

vvvv beta question
#1

Hi vvvvers,

I’m planing to make a nice GUI for my vvvv-cuesystem. Before I start I would like to find out which possibilites suit best for the purpose. I’m no programmer, but I like learning new stuff…

The Gui

  • Needs to display lots of text in a table, which is a performance-problem with vvvv’s text-node.

  • Needs editable number- and textboxes, which ideally link directly to io-boxes

  • needs to integrate a dx11 renderer (where actually the graphic output of the cuesystems patches will be displayed as a controlling monitor)

  • should have a windows-like design, so the user can keep his habits and doen’t need a long introduction to the ui

What do you think is the best way to do that? Is it possible to do this with windows.forms as a plugin for vvvv? can this be done in visual studio and later integrated in vvvv? Does that cost a lot of performance? If so, can it be done as a standalone GUI or should it be a plugin with a different instance of v4?

Sorry for the many question, and thanks again for all the help in advance.

#2

Hi,

vvvv UI is really painful so is making UI with vvvv… (try VL if you want to suffer even more).

Anyway, in case you “must” render in dx11 renderer you will need to use the sprite text contribution and patch everything else, catweasel did some great stuff, it might be a start.

For editable number, you have to patch it (not too hard), for textboxes there is a typewriter contrib somewhere. Thinking of 2 instances would be a good idea as it gives more flexibility later on. Also I highly recommend using “message” contrib from Velcrome for anything GUI related, otherwise you will end-up with a mess of nodes and wires…

If it’s only a controlling monitor you don’t have to absolutely output it as DX11 renderer so if you are a little patient I have WPF node library fully stylable with XAML in coming with :
Bitmap, Textbox, ListBox, ComboBox, Lavel, Slider, Press Button, Toggle Button, Radio Button, Color Picker, Group and WPF Renderer.

https://vvvv.org/sites/default/files/imagecache/large/images/QQ%20Photo20151019215509.jpg

#3

Hey lecloneur,

This would be great. Maybe your stuff can help me understand how it works. Meanwhile I had a look at the Template (GUI). All I tried, was to set the background-color of the window. It doesn’t work. Neither background-color nor the window size are being accepted… I just copied the code from VisualStudio into the dynamic plugin interface. Is that wrong already, or is there a block from vvvv-side?

- region usings
using System;
using System.ComponentModel.Composition;
using System.Windows.Forms;
using System.Collections.Generic;
using System.Drawing;

using VVVV.PluginInterfaces.V1;
using VVVV.PluginInterfaces.V2;
using VVVV.Utils.VColor;
using VVVV.Utils.VMath;

using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel;
//using System.Data; not found...
using System.Text;



using VVVV.Core.Logging;
- endregion usings

namespace VVVV.Nodes
{
	#region PluginInfo
	[PluginInfo(Name = "_test005", Category = "GUI", Help = "Template with some gui elements", Tags = "", AutoEvaluate = true)](PluginInfo(Name = "_test005", Category = "GUI", Help = "Template with some gui elements", Tags = "", AutoEvaluate = true))
	#endregion PluginInfo
	public class GUI_test005Node : UserControl, IPluginEvaluate
	{
		#region fields & pins

		#endregion fields & pins

		#region constructor and init

		#region copied from Visual Studio no Idea what that's good for
		private System.ComponentModel.IContainer components = null;
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }
		#endregion
		
		public GUI_test005Node()
		{
			
					
			//setup the gui
			InitializeComponent();
		}

		void InitializeComponent()
		{
            this.SuspendLayout();
            // 
            // GUI_test005Node
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
			//BackColor doesn't work
			this.BackColor = System.Drawing.Color.Red;
            //ClientSize doesn't work
			this.ClientSize = new System.Drawing.Size(746, 261);
            this.Name = "GUI_test005Node";
            this.Text = "GUI_test005Node";
            this.ResumeLayout(false);
		}



		#endregion constructor and init

		//called when data for any output pin is requested
		public void Evaluate(int SpreadMax)
		{

		}
	}
}
#4

hey lecloneur, your wpf project sounds very interesting. this https://github.com/Microsoft/win2d could be a nice addition later on…

good luck with your lib

#5

@drehwurm your evaluate function is empty, and it is the most important one. You should fill it with the content of “initialize” instead.

@u7angel, thanks still a lot to learn and a lot to do but I’m getting there. Anyway patching complex UI is not a good idea, better to code everything as patch is limited.

#6

@lecloneur

Thank you, that helped! Sorry for the newbie questions. Can’t await to see your cool wpf plugins.

© vvvv group