CPI - Custom Property Inspector- Black Friday Sale

A few years back I wrote a Property Inspector control… that worked quite well, and was used by a number of other developers from this forum…
However it did have a few rough edges, wasn’t Retina/HDPI compatible, and to be honest was a bit dated in the way it looked…

I have recently decided to revamp another large project that I had also started a while back, as a matter of fact THAT project was the reason I designed the original PropInsp, and also why I decided to create a brand new from the ground up version.

CPI, the “Custom Property Inspector” control is 100% Retina/HDPI compatible, written in Xojo2016r4.3, and uses no platform specific declares.
it supports the following Property Types

  • Boolean (as “switches” instead of “checkbox”
  • Color
  • Date (and/or) Time
  • Double (the original also had Single, but I didn’t see the need)
  • Path (folderitem of ANY filetype)
  • Image (folderItem of only PNG or JPG filetypes)
  • Integer
  • String (as in TextField)
  • Text (as in TextArea)
  • Dropdown List (values are handled as Strings)
  • “Special”… this will fire an event to allow the developer to manage any other type of data they need

It supports Expand/Collapse Sections (the old version did not)
It uses a in-memory SQLite database instead of custom classes and arrays
Set up is super simple

  • AddSection() // sections must be unique name
  • AddProperty( , ) // property “type” is based on the datatype of
  • AddProperty( , , paramarray of Strings) // add a dropdown list type

Control Methods

  • put( , , ) // update a single property
  • get( , , byref ) // retrieve a single property
  • CollapseAll and ExpandAll
  • readonly( , , True | False) // a padlock will be display next to readonly properties

Any comments on features I did not mention, visual aspects etc…??

I still have more work to do with Put/Get , and so far I only have about 10 hours into this…

I didn’t do this (yet) for one reason.
There isn’t a “native” date picker, and I didn’t want to “force” the user to accept what I chose to be “best”

[quote=357251:@Jean-Paul Devulder]
For a color, put a combobox to left position with default used color (red,black,white,…)

For distinguish text field and double field, use different backcolor[/quote]
Note sure what you are describiing… have a link or pic that describes?
I used the same basic format that Xojo does in its own Property Inspector

Hi Dave

I love this and will be buying a copy when you put it out for sale.

A few things that would be nice to have:

  1. Masked input
  2. IPv4
  3. IPv6
  4. Disabled / read only prompt colour
  5. Disabled / read only section heading colour
  6. Disabled / read only control heading colour
  7. Text string (not text area) to have pencil icon that opens a popup (which can be tweaked) to allow greater space for text input)
  8. Listbox
  9. Date format display eg dd/mm/yyyy mm/dd/yyyy etc
  10. URL
  11. Email
  12. Slider for range selection with min / max
  13. Icon choice (ability to display X small images / icons to select one of them for example happy face, neutral face, sad face etc)
  14. Percentage input
  15. Sub Section (puts a line between two property parts with / without text)
  16. Icon (small image) dropdown
  17. Tri state property
  18. Audio file selection with Play/Stop button
  19. The ability to add own icons buttons (maybe limit to 5) to the right of the input field which fires event when pressed so we can make it do own thing, for example on the dropdown I could but a copy icon that would copy the text from the selected dropdown to the clipboard etc.
  20. HTML / RTF text area

Just some thoughts :wink:


LOL… didn’t have much thought eh?

#1,#2,#3 - will look into those… I didn’t think of them as I had a use case for this control already in mind, but that is why I asked for ideas :slight_smile:

in regards to #4,#5,#6
not sure what you mean… sections are not disabled, just individual properties (ie. readonly), and these are designated by a padlock [see above image). What do you mean by “control heading”… there are basically 3 areas, SECTION HEADING, PROPERTY DESCRIPTION, PROPERTY VALUE

#7 - I was following the methodology that Xojo exhibits… a “pencil” for TextArea… TextFields scroll left/right

#8 - this I “may” consider for a future version… I can see it being useful… the implementation is an issue… right now this control consists of a container, a listbox and a single textfield (I found it way easier than messing with “ActiveCell”

#9 - since I originally mentioned this, I have expanded to DATETIME, DATEONLY and TIMEONLY… with all 3 types stored as SQLDATETIME string… the display format is taken from the users system settings so you can control what you “see”. Hopefully I will be able to add a feature to all the user to “connect” a Date/Time picker of their own choosing… I didn’t want to add one that the user would be stuck with, especially if it didn’t match other parts of their project.

#10,#11 (see #1,#2,#3)

#12 (see #8)

#13 - this is also something I had considered (but for “alignment” [Left|Center|Right]), but that requires SegCtrl

#14 - (see #1,#2,#3)

#15 - are you suggesting just “a line”, or another level in the listbox?

#16 - how would this be different than the dropdown icon I have already (see “testlist” in the image above)

#17 - never been a “fan” of “tri-state”, but I do see their use… I opted for a “switch” instead of checkbox, so Tristate is more difficult

#18 - This can (or will) be able to be implemented using the “Special” property type… this fires an event and the developer can handle the collection, validation and updating of the data with controls of their own choosing. This is something that I will be doing for the master project that this control is being designed for, as there are a few things that are unique and 99.999% of develpers would never need/use them

#19 - perhaps in version 2.0… having a hard time finding a real world use case here.

#20 - good idea! :slight_smile: this can easily be an extension of the current TextArea property

The problem with some of these is the fact that right now, the control bases the datatype of the property from the datatype of the default value used when initializing the control… and “STRING” is a common datatype with some of the changes you mentioned

#4,#5,#6 What I was trying to say was two things (badly!). The ability to set a disabled / read-only at the section as well as control level which would disable all properties it contains so rather than disabling each property you could disable all the properties in the section as well as the control and the control / section would also have the padlock to tell the user everything below is disabled / read-only. The second part is that if the property is disabled you can specific the colour of the prompt for disabled properties, the same for the disabled section and disabled control titles.

#7 The problem is with the single line input string in the property is that it is a very small space which is fine if the user is only entering a very small amount of text but as soon as they have to enter a longer string eg a product title which could be 70 characters long then it becomes difficult to use the small space so on another system I have seen a pencil icon next to the input (like the textarea) which opens up a window with an input dialog box where you have more space to see the input field. It also has a Ok and Cancel button to close the dialog.

#15 yes just a line to break up parts within a section to make is more pleasing for the end user.

#16 If you can include images (the actual image not the name) then that is what I am suggesting.

You will be pleased to know that I cant think of anything else to add to the list at this stage :wink:

I have taken some of your ideas to heart… and I have already implemented the ability to include an OPTIONAL mask for STRING input (if the intent is to input Integer or Double with a mask, it will be up to the developer to cast them once they are extracted from the CPI, although the GET function might automagically do it for “some” mask types)

I don’t want to get caught in too much Scope Creep from my original intent for version 1.

#4,#5,#6 - not sure about adding the ReadOnly attribute to the Section (but I might)… however what I think I will do. is in addition to the padlock… I will display readonly properties in the same manner as the caption (ie. it will look like a label instead of an input area)

#7 - I think the best thing would be to select TEXTAREA input, instead of TEXTFIELD … TextField property already calls an input control similar to what you describe.

Sounds great :wink:

that is something all of us try not to do but Scope Creep is a killer.

I may have a need for something like this.


I hope to have a demo project posted in the next few days…
as well as a webpage showing all the properties, methods and events

I think I have all the kinks worked out… and have added a few more whistles and bells
here is what it looks like now…

The color and date fields can either use internal controls (SelectColor or Text Input)
or can raise a special event to allow the developer to override and supply their own Color or DatePicker
the “button” allows the developer to manage any kind of data that could be stored in a “string”, and would be up to them to encode/decode

@Dave S – Excellent looking UI. So this is a way to dynamically (and easily) generate a property window/dialog? Would it be possible to allow for Apply / OK / Cancel for the entire set of properties? Sometimes properties can have risk associated with changing them, and in that case it’s always nice to force the user to confirm any changes.

This control manages the UX for entereing and editing properties, they are stored in an “in-memory” SQLlite database during that time. Each property can be manipulated by the developer/app with GET and PUT statements (after the initial series of AddProperty to initialize the control). So this gives the developer control at what ever level he/she sees fit.
Everytime a property value is changed, the developer has access to an Event indicating a change was made.

Remember this isn’t designed to be a MODAL control that pops up gathers data and vanishes…

Note : The Xojo Property Inspector in the IDE doesn’t have this feature either :slight_smile:

Pet Peeve : S … no “Z” … thanks

Couple of comments which I hope dont raise hackles… :slight_smile:

Why do the items look sharp but the Section titles are blurred?
Why are buttons and the color selector right-shifted by a few points compared to the .LEFT of a text field.? Feels … misplaced… to me.

Can we get something to test so that the “usual embarrassing bugs” can be ironed out? And yes, the section titles aren’t retina.

[quote=358267:@Jeff Tullin]Couple of comments which I hope dont raise hackles… :slight_smile:

Why do the items look sharp but the Section titles are blurred?
Why are buttons and the color selector right-shifted by a few points compared to the .LEFT of a text field.? Feels … misplaced… to me.[/quote]

  1. Don’t know actually… it may be due to the fact it is text drawn over a gradient. In order to allow section headings to span columns, it actually produces a picture, and draws 1/2 over the first column and the rest over the 2nd. So maybe I did something incorrect in the HDPI world and its a @1x image when in fact it should be a @2x one

EDIT : thats exactly what it is… wonder what I’m not doing then :frowning:

  1. I will look at that… I’d thought I’d used the same offset, but perhaps I didn’t

EDIT: Fixed

// in cellpaintbackground
Dim p     As New picture(Me.Width,g.height)

		If zIsSECTION(row) Then // section heading must span TWO columns
				Dim gg    As graphics=p.Graphics
				Dim arrow As String
				If zIsSECTION(row) Then
				End If
				gg.drawstring arrow+s,5,y // s is caption
				gg.drawstring arrow,5,y
		End If

		If column=0 Then 
				If zIsSECTION(row) Then
						g.drawpicture p,0,0,g.Width,g.height
				Elseif isSepLine Then 
						g.drawpicture zSepLine,0,0,g.Width,g.height
						g.drawstring s,g.width-g.stringWidth(s)-midMargin,y
				End If
				Return True
		End If
		// Draw the RIGHT HAND side of Section Heading
		If zIsSECTION(row) Then
				Dim xx As Integer=Me.column(0).WidthActual
				g.drawpicture p,0,0,g.Width,g.height, xx,0,g.width,g.height
				If zHasPadLock(row)>0 Then g.DrawPicture padlock,g.width-padlock.width-rightMargin,4 // readonly padlock
				Return True
		End If

Once I figure out what is wrong with the above code, the yes I plan on releasing a demo program with an encrypted version of the control … (it will be available in full source code mode later)

Does this help?

// in cellpaintbackground

//this code assumes both columns are the same width , so width * 4 on next line
dim sectiontitle as new picture(g.width *4,g.height * 4,32)
dim x as integer
dim startcolor as color = &c808080 //or whatever
dim endcolor as color = &ce0e0e0
//Dim x As Integer
For x = 0 to sectiontitle.height
sectiontitle.graphics.forecolor = rgb( endcolor.red - (endcolor.red-startcolor.red) *x/sectiontitle.height, _
endcolor.green - (endcolor.green-startcolor.green) *x/sectiontitle.height, _
endcolor.blue - (endcolor.blue-startcolor.blue) *x/sectiontitle.height)
sectiontitle.graphics.DrawLine 0,x,sectiontitle.width,x

sectiontitle.graphics.forecolor = &c000000
sectiontitle.graphics.TextFont = “Arial Italic”
sectiontitle.graphics.TextSize = sectiontitle.height * 0.7

sectiontitle.graphics.DrawString “Some text” , 6,sectiontitle.height * 0.7

//section heading has been created.

if row = 0 then //just testing … this is the first row
if column = 0 then
g.drawpicture sectiontitle,0,0,g.width,g.height,0,0,sectiontitle.width/2,sectiontitle.height
end if
if column = 1 then
//the remainder
g.drawpicture sectiontitle,0,0,g.width,g.height,sectiontitle.width/2,0,sectiontitle.width/2,sectiontitle.height
end if

end if[/code]

  • why x4? Retina is only @2x
  • this seems to create an image of the same large size even it not a retina machine

On my system (for everything but this section header)… If I display on my Retina screen it draws this @2x (text etc)… but moving to my non-retina screen (same computer) it redraws at @1x (the section heading look BETTER on non-retina screen), but if you take a screen shot and compare… .they are not the same