CPI - Custom Property Inspector

  1. 2 weeks ago

    Dave S

    Nov 2 San Diego, California USA

    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(<sectionname>) // sections must be unique name
    • AddProperty(<propertyname> , <defaultvalue>) // property "type" is based on the datatype of <defaultvalue>
    • AddProperty(<propertyname> , <listindex> , paramarray of Strings) // add a dropdown list type

    Control Methods

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

    -image-

    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.....

  2. Jean-Paul D

    Nov 3 Pre-Release Testers

    @Dave S Any comments on features I did not mention, visual aspects etc....??

    Nice UI,

    Some suggestions:

    For a enter date, add a button for use a picker more usual.

    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

  3. Dave S

    Nov 3 San Diego, California USA

    @Jean-PaulDevulder For a enter date, add a button for use a picker more usual.

    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"

    @Jean-PaulDevulder 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

    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

  4. Nathan W

    Nov 3 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)

    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 ;)

    Nathan

  5. Dave S

    Nov 3 San Diego, California USA

    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 :)

    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! :) 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

  6. Nathan W

    Nov 5 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)

    #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 ;)

  7. Dave S

    Nov 5 San Diego, California USA
    Edited 2 weeks ago

    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.

  8. Nathan W

    Nov 5 Pre-Release Testers, Xojo Pro Europe (UK, Jersey)

    Sounds great ;)

  9. scott b

    Nov 5 Pre-Release Testers, Xojo Pro local coffee shop

    @Dave S I don't want to get caught in too much Scope Creep

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

  10. I may have a need for something like this.

    Phil

  11. Dave S

    Nov 6 San Diego, California USA

    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

  12. last week

    Dave S

    Nov 8 San Diego, California USA
    Edited last week

    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

    -image-

  13. Stephen G

    Nov 8 Pre-Release Testers, Xojo Pro Glendale, California

    @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.

  14. Dave S

    Nov 9 San Diego, California USA
    Edited last week

    @StephenGreenfield @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 :)

    Pet Peeve : SISEMORE ... no "Z" ... thanks

  15. Jeff T

    Nov 9 Midlands of England, Europe

    Couple of comments which I hope dont raise hackles.. :)

    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.

  16. Beatrix W

    Nov 9 Pre-Release Testers Europe (Germany)

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

  17. Dave S

    Nov 9 San Diego, California USA
    Edited last week

    @Jeff T Couple of comments which I hope dont raise hackles.. :)

    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.

    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 :(

    2) I will look at that.. I'd thought I'd used the same offset, but perhaps I didn't

    EDIT: Fixed

  18. Dave S

    Nov 9 San Diego, California USA
    // 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
    				s=Me.cell(row,0)
    				zGradient(gg)
    				gg.TextFont=g.TextFont
    				gg.TextSize=g.TextSize
    				gg.bold=True
    				gg.Italic=True
    				gg.foreColor=g.ForeColor
    				If zIsSECTION(row) Then
    						arrow=Chr(&h25bc)
    				Else
    						arrow=Chr(&h25b6)
    				End If
    				gg.drawstring arrow+s,5,y // s is caption
    				gg.ForeColor=zColorArrow
    				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
    				Else
    						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
  19. Dave S

    Nov 9 San Diego, California USA

    @Beatrix W Can we get something to test so that the "usual embarrassing bugs" can be ironed out? And yes, the section titles aren't retina.

    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)

  20. Jeff T

    Nov 9 Midlands of England, Europe
    Edited last week

    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
      //gradient
      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
      next
      
      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
  21. Newer ›

or Sign Up to reply!