Jap-style digits on an interface

[Abidos]

Hi there!

I’ve been inspired by some modern design of some Japanese watches so I wanted to develop a Blender interface component that works like this - visually represents a figure. After setting-up the figure (number) can be used as it may fit. While in processing mode, the number is integer but if a float is needed => it can easily be converted into a float number So far this feature is a way static and works (represents) with a 4-digit numbers, i.e. in range (0-9999). There is a special function (all graphically implemented) to represent 10000 which is the ceiling so far. I call it Jap-visual component or Jap-style digits (ref. the Jap watches design). This component-look new interface object is put into a module for purposes of re-use. It is unfinished, so pls just check it out how it work and say if you like the approach

It looks like this:

How it works?

First off it is activated by clicking on the second toggle button. It starts with a value which is written to the right. Clicking with the mouse on the digit-bars will change the value. The use is rather intuitive, I think, sooo just try it The bigger the corresponding digit is the longer blue is shown in corresponding digit-bar, while red is background for ensuring a good contrast. Clicking on the green area at left side of each digit-bar means 10 at that position so the digit-bar clicked is cleared and its adjacent to the left is increased by 1. The “0” (zero) at certain digit-bar is achieved when clicking closely outside to it, to the right. The overall “0” (zero) value is achievable by nullifying each digit-bar. The ceiling, 10000, is achievable by clicking once on the left-most green stripe or a lot of clicking on other green strips I have the idea to visually mark representation of ceiling (in contrast with overall “0”) by changing the color of green stripes to orange or white, for example… So far it is not implemented… At present, digit-bars are implemented in a way to take a whole strip with height = their height.

Also, I’ve been working lately on developing the idea to pack away procs needed for dealing with script’s interface. Usually, for a nice interface, these take some several hundreds row of code. I did this for the interface I am now showing you --> everything else needed for its work is put into the “Inferface” module. I know that this creates even more trouble for the developers, including myself, but the pay-off is more scripts since a lot of rows of code are actually OUTSIDE the main script + there is a simple re-use possibility of almost 2/3 of interface related procedure in the same Interface module.

How to use it (the Interface module)?

Like any other module, just download it from here and place it into your Scripts directory, for example. Then it will be accessible like any other module such as Blender, bpy, etc… So far I havent made an interface (a list of procs in the module) to enable others use what they want cause it is in a very early development stage. Pls just test it work… So far - for dealing with just THIS interface - there are 400 rows of code in that module. Should the idea prove to be a GOOD one, it will be developed.

Here is the code of the main script and here is a testing .blend file incl. the script.

Pls note that some issues are not perfect in THAT script and there may be some remaining commands from my previous testing…

C & C welcome…

[Uncle_Entity]

You do realize that ‘Jap’ is a derogatory racial slur, don’t you?

[Agent_AL]

You do realize that ‘Jap’ is a derogatory racial slur, don’t you?

Do you realize that ‘Jap’ is obligatory shortening for thread topic?
Your comment makes no sense.

Emil, any particular areas your compenent might be used in?
I guess you could make progressbar-style value edit. Component has min and max value determined. When user clicks on some space between left and right corner of the progressbar, it calculates new value based on mouse click position and writes it in the component. Component displays accordingly the value (just like yours, red and blue).
For example, with min and max set to 0 and 100, click in the middle of the component would set it’s value to 50.
And I would recommend using grayscale gamma, though.

[Abidos]

Hi, this component is different one, NOT a progress bar. The progress bar should be linked to a process and should graphically show what is its progress in % meaning total length of component is = 100% = process completed. By definition, there is NO user related actions except watching the progress What I found useful my type of components is for quickly choosing a value without the need to write it.

Of course, I perfectly know the procedure Number(name, event, x, y, width, height, initial, min, max, tooltip=None, callback=None) from Draw module which produces something like this:

It is compact and intuitive but I’d say it is rather compact for some applications. For example, if you have the above ranging 0-100, it would be difficult by simple sliding the slider to set-up different values such as 36, 68, 12, etc. which means you need to write them in there. For purposes of my developement work and research what is happening during a simple walk cycle, I needed to deal with angle like 7.36 degrees, 18.92 degrees, 18.94 degrees, 18.63 degrees. I used a number slider linked to an object and EVEN with a length twice as big as shown above, it was extremely difficult to set-up the value I want without explicitly writing it. And I found it a way boring to enter 18.92, 18.94, 18.63, etc while with the digit-bars component it is a matter of 1-2 clicks then you need to divide you 4-digit number by 100, of course

Another applications - I havent use it like this so far though - is like a menu. Suppose, it is only 1-digit component => you will easily have access to 9 choices, right? May be the sub-divisions need to be a bit wider in that case but it is a matter of adjustment…

As per the colors - it is also a matter of adjustment… Perhaps, I can develop tools for the user to choose the colors. I use THAT colors due to my specific environment (monitor and its color scheme). I found currectly implemented color scheme as being a rather contrast one, which helps user’s eyes… I think…

Regards,