Welcome to the Lounge

8hrs 9mins ago

So I must implement a UI for creating and editing rules in my new ad blocker application.

I imagine it being like the rules editor in Outlook, if you're familiar with that one.
You're able to manipulate events, actions and conditions in a generic way to build complete rules that determine what Outlook does with your mail.

Sorta like firewall rules.

I've been thinking a lot about design, and I must conclude that this will be fairly challenging for me. It's the most complex UI that I've had to build to this point.

I was wondering if anyone else has composed such an interface, recently, or a hundred years ago?

The difficult we do right away...
...the impossible takes slightly longer.

PIEBALDconsult8hrs ago

PIEBALDconsult

8hrs ago

Nope. Beyond my abilities.
A similar thingy is the SQL Agent Job editor, which is very similar to your ~~vaporators~~ needs in most respects, so it could provide some insight into some options.

Richard Andrew x647hrs 53mins ago

7hrs 53mins ago

Yeah I suppose one way to solve it is to use a wizard approach. The SQL Agent Job Editor is sorta like a wizard, except it doesn't enforce any particular sequence.

The difficult we do right away...
...the impossible takes slightly longer.

RickZeeland7hrs 55mins ago

RickZeeland

7hrs 55mins ago

Maybe this one: Wexflow - Open Source .NET Workflow Engine[^]

Richard Andrew x647hrs 50mins ago

7hrs 50mins ago

That's a real piece of master craft that one.

My rules engine isn't nearly that sophisticated. I've got it working, so the next logical step is to create the UI for it.
I'll look for hints in that article. Thanks.

The difficult we do right away...
...the impossible takes slightly longer.

honey the codewitch7hrs 42mins ago

7hrs 42mins ago

I have designed interfaces like this (with arbitrary composable conditions) before.

So has Microsoft.

They are universally horrible. No matter how much work you put into it it is easier for a user to allow them to type and then parse the string in a smart, contextful way such that the user doesn't have to be perfect. <-- which is where the effort should go.

Think how Google does it.

One thing you can do is offer feedback. When they type a query that is malformed, you spit out the well formed interpretation of it so they know what they typed.

Check out my IoT graphics library here:
https://honeythecodewitch.com/gfx
And my IoT UI/User Experience library here:
https://honeythecodewitch.com/uix

Richard Andrew x647hrs 39mins ago

7hrs 39mins ago

Oh, now that's something I hadn't thought of.

Thanks! That's potentially a winner. I had put all my effort into duplicating the MS Outlook design.

The difficult we do right away...
...the impossible takes slightly longer.

honey the codewitch6hrs 56mins ago

6hrs 56mins ago

add some autocomplete in to be fancy.

I used to do this for data entry programs I'd write for small local businesses.

Check out my IoT graphics library here:
https://honeythecodewitch.com/gfx
And my IoT UI/User Experience library here:
https://honeythecodewitch.com/uix

Greg Utas6hrs 54mins ago

Greg Utas

6hrs 54mins ago

The only experience I have with a UI is with one that's CLI-based. I wrote an article[^] about that CLI framework but don't know if you'd find it useful.

Robust Services Core | Software Techniques for Lemmings | Articles
The fox knows many things, but the hedgehog knows one big thing.

Woohoo! My vector canvas is performing better than my old one

Steve Raw3hrs 17mins ago

Steve Raw

3hrs 17mins ago

Richard Andrew x64 wrote:
So I must implement a UI for creating and editing rules in my new ad blocker application.
I imagine it being like the rules editor in Outlook, if you're familiar with that one.
You're able to manipulate events, actions and conditions in a generic way to build complete rules that determine what Outlook does with your mail.

A while back, I was studying AI, and stumbled across Baysian Theory - Google Search[^]. From what I understand, Bayesian Theory is the primary means by which spam email is identified and filtered out from legit email. I know that both Google's Gmail and Microsoft's Outlook use Bayesian Theory. Based on what emails I see in my inbox versus the spam folder, I'm convinced that it works very well. You can use both rules, and Bayesian Theory together to get the best results.

Richard Andrew x64 wrote:
I've been thinking a lot about design, and I must conclude that this will be fairly challenging for me. It's the most complex UI that I've had to build to this point.

My knowledge of Baseyain Theory is quite limited, but I get the feeling that implementing it into your system will be more complex than designing the complex UI that you're speaking of. I wish you the best of luck in this challenge. Keep me posted on how things go, as this subject matter is of interest to me as well. Thumbs Up | :thumbsup:

honey the codewitch12hrs 58mins ago

Re: Woohoo! My vector canvas is performing better than my old one

12hrs 58mins ago

gfx 2.0 vector canvas performance test - YouTube[^]

22 frames per second on an ESP32 WROVER based M5 Stack Core2 @ 320x240 (clock is 128x128)
mem usage: 34.66KB

code (forgive the lengthy paste, but I wanted to give a good idea of how much it was doing per frame, and what that looks like)

C++

tbmp.fill(tbmp.bounds(),color_t::white);

pointf offset(0, 0);
pointf center(0, 0);
time_t time = current_time;
float rotation(0);
float ctheta, stheta;
ssize16 size = (ssize16)clock_canvas.dimensions();
rectf b = gfx::sizef(size.width, size.height).bounds();
b.inflate_inplace(-face_border_width - 1, -face_border_width - 1);
float w = b.width();
float h = b.height();
if(w>h) w= h;
rectf sr(0, w / 30, w / 30, w / 5);
sr.center_horizontal_inplace(b);
center = gfx::pointf(w * 0.5f + face_border_width + 1, w * 0.5f + face_border_width + 1);
clock_canvas.fill_color(face_color);
clock_canvas.stroke_color(face_border_color);
clock_canvas.stroke_width(face_border_width);

clock_canvas.ellipse(center, {center.x - 1, center.x - 1});
clock_canvas.render();

bool toggle = false;
clock_canvas.stroke_color(tick_border_color);
clock_canvas.fill_color(tick_color);
clock_canvas.stroke_width(tick_border_width);

for (float rot = 0; rot < 360.0f; rot += rot_step) {
    rotation = rot;
    update_transform(rotation, ctheta, stheta);
    toggle = !toggle;
    if (toggle) {
        clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y1));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y1));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
        
    } else {
        clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y1));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y1));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2 - sr.height() * 0.5f));
        clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2 - sr.height() * 0.5f));
    }
    clock_canvas.render();
}
sr = gfx::rectf(0, w / 40, w / 16, w / 2);
sr.center_horizontal_inplace(b);
rotation = (fmodf(time / 60.0f, 60) / 60.0f) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(minute_color);
clock_canvas.stroke_color(minute_border_color);
clock_canvas.stroke_width(minute_border_width);
clock_canvas.render();

sr.y1 += w / 8;
rotation = (fmodf(time / (3600.0f), 12.0f) / (12.0f)) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(hour_color);
clock_canvas.stroke_color(hour_border_color);
clock_canvas.stroke_width(hour_border_width);
clock_canvas.render();

sr.y1 -= w / 8;
rotation = ((time % 60) / 60.0f) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(second_color);
clock_canvas.stroke_color(second_border_color);
clock_canvas.stroke_width(second_border_width);
clock_canvas.render();

draw::bitmap(tbmp2,tbmp2.bounds(),tbmp,tbmp.bounds());
lcd_begin_draw();
lcd_flush_bitmap(trect.x1,trect.y1,trect.x2,trect.y2,tbmp2.begin());

Check out my IoT graphics library here:
https://honeythecodewitch.com/gfx
And my IoT UI/User Experience library here:
https://honeythecodewitch.com/uix

megaadam5hrs 29mins ago

megaadam

5hrs 29mins ago

Stunning performance on such hardware! Very nice.

why ((time % 60) / 60.0f) * 360.0f though?
I daresay (59 / 60.0f) * 360.0f == 59 * 60.0f == 354.0f Most compilers will of course see this...

"If we don't change direction, we'll end up where we're going"

Re: Woohoo! My vector canvas is performing better than my old one

honey the codewitch5hrs ago