I want to make a circular donut widget out of a 3x3, with the middle empty. How can I make this? Would i have to make a custom widget? Thanks!
You will definitely have to make a custom widget for that. What are you trying to do here? I don’t know if a custom widget would even work for what you’re trying to do. I’m pretty sure widgets have a x, y, width and height parameters, I don’t think (with the current implementation), they can have a hole in the middle.
You’ll probably have to give us more information for us to be able to tell you if it’s possible. There’s probably an easier way to accomplish whatever your goal is than trying to create a widget with a hole in the middle.
2 Likes
We want to make a donut widget so we can put another widget inside it. Basically its supposed to be 2 boolean boxes, one for outer goal ready and for inner goal ready.
If you didn’t want to create a custom widget, you could do this by having between 4 and 8 boolean boxes on the outside that all switch on and off at the same time. For instance, it could be like this:
OOO
OIO
OOO
AAB
DIB
DCC
That’s the simplest way to do it, but of course, you could make it look nicer by using a custom widget.
If you took the custom widget route, you should make it a 3x3 widget and have its input be called something like outer and inner, which could both be booleans. I’ve never made a custom widget before so I don’t know how hard it is.
Thanks for the suggestion to use multiple boxes. Our team originally thought this and ran into multiple Duplicate Widget creation errors, however we were using oblog and not the shuffleboard widgets so something else could’ve also been off. I’ve never made a custom widget but that’ll definitely be a cool summer project.
If you’d still like to go the multiple widget route, I’m sure I’d be able to help you out with the duplicate widget creation errors. That was probably caused by creating a widget with the same name as previous widgets. For instance, if you called each outer widget “Outer”, it would cause errors because only one widget can have the name “Outer”. You could do something like “Outer1”, “Outer2”, etc.
Got it, I’ll probably do multiple widgets but the thing is I need 3 different “stages”. First stage would display white, 2nd stage for if we are in range would be yellow, and 3rd stage if we are aimed would be green. I’m thinking we would probably need custom color widgets for that much.
Yep, that’s correct. Boolean Boxes can only display either Red (false) or Green (true).
@Sumifairy this is actually pretty straightforward if you’re willing to give a web based dashboard a try:
This was made using the boolean box component from the FRC Web Components project. It depends on:
- pynetworktables2js
- A script you can download from the releases page
OR
- FRCDashboard which now includes FRC Web Components in the project.
Here’s the HTML for this particular component:
<html>
<body>
<frc-dashboard>
<style>
.target::part(box) {
border-radius: 50%;
border: 1px solid black;
box-sizing: border-box;
}
.outer {
width: 150px;
height: 150px;
}
.inner {
width: 75px;
height: 75px;
}
</style>
<nt-string key="/inner/trueColor" value="white"></nt-string>
<nt-string key="/outer/trueColor" value="white"></nt-string>
<frc-boolean-box class="target outer" source-key="/outer" value>
<frc-boolean-box class="target inner" source-key="/inner" value></frc-boolean-box>
</frc-boolean-box>
</frc-dashboard>
<script src="./frc-web-components.js"></script>
</body>
</html>
Just like shuffleboard’s boolean box widget, this also has properties you can set to change what color it displays when it’s true. But unlike shuffleboard, you can assign NetworkTable values to all components’ properties. By taking advantage of that, you can change the true color to any color you want through NetworkTables. It’s also a lot easier to customize the look using CSS, and lets you have components inside components. You can even have a boolean-box inside a boolean-box inside a boolean-box inside a boolean-box if you want to go crazy:
<style>
.target::part(box) {
border-radius: 50%;
border: 3px solid white;
box-sizing: border-box;
}
.target > .target {
width: 50%;
height: 50%;
}
</style>
<frc-boolean-box class="target">
<frc-boolean-box class="target">
<frc-boolean-box class="target">
<frc-boolean-box class="target"></frc-boolean-box>
</frc-boolean-box>
</frc-boolean-box>
</frc-boolean-box>
I accidentally forgot to add height: 50%; to the css and it came out even crazier:
1 Like
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.