ATVO by Appgineering
Download
Read-only

Dropdown to Select a Color

7 posts 4,245 views Started 11 Aug 2020, 16:04
Showing 1–7 of 7 posts
Josh L.
Original poster

Is there a way to have a dropdown where I can select a color and it changes a color on the overlay? Would be helpful for different branding based on different series.

Nick Thissen Appgineering
Reply #1
· edited

Not directly, but you can run a script when you select an item in the dropdown. In the script you can get the selected item in the dropdown (from which you derive your color somehow), and then apply it to your Widgets like this:

using System;
using System.Windows.Media;
using ATVO.ThemesSDK;
using ATVO.ThemeEditor.ThemeModels;
using ATVO.ThemeEditor.Scripting.DotNET;

namespace Scripts
{
	public class ChangeColor : IScript
	{
		public object Execute(ThemeContentItem item, object value, string parameter, ISimulation sim)
		{	
			var colorValue = "#FF0000"; 
			var color = (Color)ColorConverter.ConvertFromString(colorValue);
		
			var widget = item.Theme.Widgets.Find("Widget1");
			widget.Background.BackgroundColor = color;

			return null;
		}
	}
}
Josh L.
Reply #2

Okay so I'm revisiting this now.

I'm confused on how to get the script to find a dropdown and what color to apply when a selection is made from the dropdown. I also want this to apply to multiple widgets at once, not just one. How would I go about doing that?

Nick Thissen Appgineering
Reply #3

For multiple widgets: you can just loop over them. Define a list of widget names you want to change and loop over that, example below.

For integrating the dropdown: you can check which item is selected in the dropdown and get the text on that item. You can then use a kind of translation table to translate between that text and your desired color hex code. This color table is also defined in the script, but keep in mind the values in there should match to the text you put in each of the dropdown items.

In the example below I am assuming 3 items with text "Red", "Blue" and "Something else", and they map to corresponding hex codes.

using System;
using ATVO.ThemesSDK;
using ATVO.ThemeEditor.ThemeModels;
using ATVO.ThemeEditor.Scripting.DotNET;
using System.Windows.Media;
using System.Collections.Generic;

namespace Scripts
{
	public class ChangeColor : IScript
	{
		// Define the names of the widgets you want to change
		private string[] _widgetNames = new string[]{
			"Widget1", "Widget2", "Widget3"
		};

		// Define a color table that translates your dropdown item text to a color hex code
		private Dictionary<string, string> _colorTable = new Dictionary<string, string>() {
			{"Red", "FF0000"},
			{"Blue", "0000FF"},
			{"Something else", "FF00AA"},
		};

		public object Execute(ThemeContentItem item, object value, string parameter, ISimulation sim)
		{	
			// Find the dropdown
			var dd = (Dropdown) item.Theme.Dropdowns.Find("Dropdown1");
			if (dd.SelectedItem == null)
				return null;

			// Find the text of its selected item
			var selectedText = dd.SelectedItem.Text;

			// See if there is a corresponding entry in the color table
			if (!_colorTable.ContainsKey(selectedText))
			{
				Console.WriteLine("Missing entry in color table: " + selectedText);
				return null;
			}

			// Get the color value from the table and convert it to a color
			var colorValue = _colorTable[selectedText];
			var color = (Color)ColorConverter.ConvertFromString(colorValue);
		
			// Loop over all widgets and change their background
			foreach (var name in _widgetNames)
			{
				var widget = item.Theme.Widgets.Find(name);
				if (widget != null)
				{
					widget.Background.BackgroundColor = color;
				}
			}

			return null;
		}
	}
}
Josh L.
Reply #4

Ok, all of this looks great but I need these on label backgrounds, not widgets. Tried to change it myself but I could only add variables, not define label names.

Sorry I forgot to mention that.

Nick Thissen Appgineering
Reply #5

You can easily loop through all items in a theme instead of all Widgets. Items encompass everything from widgets to subwidgets to labels, but also buttons, inputs and everything else. Just replace this line:

var widget = item.Theme.Widgets.Find(name);

with this:

var widget = item.Theme.Items.Find(name);

Unfortunately, it will probably not work correctly for labels in a Ticker widget. For that, it is more complicated and probably requires you to change the TemplateSubwidget instead, and then reset the ticker.

Nick Thissen Appgineering
Reply #6

Sorry, I was wrong, you cannot use 'Find' like that on the Items collection. Instead, you can use this line:

var widget = item.Theme.WidgetBases.FirstOrDefault(i => i.Name == name);

You'll also need to add this at the top near all the other "using" lines:

using System.Linq;
Archive · Read-only

New replies have moved to Discord.