Sam_Horvath
January 7, 2025, 2:46am
1
Tomorrow, we will be having our next weekly hangout at 11:00 AM ET until 12:00 PM ET, AFTER
Anyone is welcome to join at this link: Launch Meeting - Zoom
Agenda:
Please post to this thread to put a topic on the agenda! We will try to prioritize agenda items during the meeting.
Thanks
wenples
January 7, 2025, 2:48pm
2
Hi friends, I believe I’ve finished the list of core icons and covered the set of PNG files used as icons in slicer’s codebase… may have missed a few basic UI messaging concepts like ‘OK’ , ‘Done’, etc. --So if there’s time today I’d like to ask you for a list of what Slicer users are used to seeing as confirming or alerting messages so I can add them in.
I think design guidelines are all set, and basic workflow steps for designing new icons are sketched in too. Last step for me is to strip out Inkscape crud from the svg files, which I’m doing now.
If there’s time today, two big-blob html pages (one for each theme) are in github, can be downloaded and viewed locally for your comments and tweak suggestions. The links are:
<!DOCTYPE html>
<html>
<head>
<title> Light Theme Slicer Icons </title>
<style>
table, th, td { background-color: white; color: black; border: None; padding: 10px; font-size: 12px;}
.CellWithTooltip { position:relative; }
.CellTooltip { display: None; z-index: 100; position: absolute; border: None; font-size: 10pt; color: black; top: 60px; background-color:white; padding: 3px; }
.CellWithTooltip:hover span.CellTooltip { display:block; }
</style>
</head>
<body style="margin-left: 200px; margin-top: 100px; font-family: sans-serif; align: left; color: black; background-color: white">
<font face="verdana">
<h2 style= "color:black;"> 3D Slicer Icon Design Guidelines & Light Theme Icons Preview </h2>
<p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
1. Design 3D Slicer icons as vector images on a transparent background. Reuse existing Slicer symbols for data and concepts, symbolic colors and other UI patterns where appropriate.
</p><p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
2. At 24x24 pixel resolution, stroke width should be 1dp = 1px for pixel-perfect rendering at resolution multiples of 24. Most of 3D Slicer's icons are designed at 200% scale, at 48x48 pixel resolution, with 1dp=2px.
</p><p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
3. Use simple stroked elements without fill where possible. Stroke caps and corners can be sharp or rounded with r = dp/2.
show original
and
<!DOCTYPE html>
<html>
<head>
<title> Dark Theme Slicer Icons </title>
<style>
table, th, td { background-color: #121212; color: #e5e5f6; border: None; padding: 10px; font-size: 12px;}
.CellWithTooltip { position:relative; }
.CellTooltip { display: None; z-index: 100; position: absolute; border: None; font-size: 10pt; color: #e5e5f6; top: 60px; background-color:#121212; padding: 3px; }
.CellWithTooltip:hover span.CellTooltip{ display:block; }
</style>
</head>
<body style="margin-left: 200px; margin-top: 100px; font-family: sans-serif; align: left; color: #e5e5f6; background-color: #121212"> <font face="verdana">
<h2 style= "color: #e5e5f6;"> 3D Slicer Icon Design Guidelines & Dark Theme Icons Preview </h2>
<p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
1. Design 3D Slicer icons as vector images on a transparent background. Reuse existing Slicer symbols for data and concepts, symbolic colors and other UI patterns where appropriate.
</p><p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
2. At 24x24 pixel resolution, stroke width should be 1dp = 1px for pixel-perfect rendering at resolution multiples of 24. Most of 3D Slicer's icons are designed at 200% scale, at 48x48 pixel resolution, with 1dp=2px.
</p><p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
3. Use simple stroked elements without fill where possible. Stroke caps and corners can be sharp or rounded with r = dp/2.
</p><p style="margin-bottom: 40px; margin-top: 40px; margin-left: 30px; width: 80%; font-size:10pt;">
show original
Cheers!
1 Like
mau_igna_06
January 7, 2025, 3:11pm
3
Hi
I would like to show the Revolve tool for DynamicModeler and I also have a new module for BoneReconstructionPlanner I’d like to show
BerDom.Ing
January 7, 2025, 3:48pm
4
I would like to present the advancements made on the web front end of the Slicer Telemetry.
