Revisiting an old friend... aka overlapping graphics
Posted: Tue Dec 06, 2022 4:43 am
Hi all,
I've been revisiting an 'old friend' and am happy I've improved on it dramatically - I thought I'd share my progress in case anyone found this useful - its a small element that fits into a number of my other projects and probably won't mean much to you if you're not working in cardiology...
The problem to tackle was creating a bullseye display, which is common in cardiology for assigning functional values to the 16/17 segments of the left ventricle, but required overlapping graphics. After several stuttering attempts including importing each segment as a PNG, SVG and so on I initially settled on creating a 'skeleton' with vector graphics under which were some hand drawn closed polygons that could take colouring etc. The data was stored internally in a table field (usually hidden). The problem is that this didn't scale well and re-sizeing was an issue because of the hand-drawn closed polygons - so the vector skeleton had to be much thicker to hide deficineies. That always grated. The previous thread is here: https://forums.livecode.com/viewtopic.p ... 30#p201854
I've redesigned this using exclusively oval graphics with their arcAngles and startAngles set and layered in such a way that the 'segments' can be coloured independently but still faced the same issue of overlapping graphics, as the 'hidden' parts of the ovals still intercepted mouse clicks to the deeper layers, so only the topmost in each group could actually be clicked.
This is a circle and as I've re-learned geometry I never knew I'd forgotten in a different project, it was now much easier to calculate which segment was clicked on using proper trigonometry functions to get the distance from the centre and the angle, so even though the invisible bits of some graphics cover all others, it's possible to get this react correctly to mouse clicks on the 'buried' graphics.
The added bonus is this is infinitely more scalable as it's purely ovals set at the same loc; and data management has been sampled dramatically to a comma separate list containing all values and this as well as calculations are all stored internally as custom properties. In fact I wrote a stack that will generate a bullseye of any size:
Feel free to download it from my GitHub : https://github.com/stam66/bullseyeFactory (shared under MIT licence).
Maybe someone might find bits of it useful - any feedback welcome as always...
S.
I've been revisiting an 'old friend' and am happy I've improved on it dramatically - I thought I'd share my progress in case anyone found this useful - its a small element that fits into a number of my other projects and probably won't mean much to you if you're not working in cardiology...
The problem to tackle was creating a bullseye display, which is common in cardiology for assigning functional values to the 16/17 segments of the left ventricle, but required overlapping graphics. After several stuttering attempts including importing each segment as a PNG, SVG and so on I initially settled on creating a 'skeleton' with vector graphics under which were some hand drawn closed polygons that could take colouring etc. The data was stored internally in a table field (usually hidden). The problem is that this didn't scale well and re-sizeing was an issue because of the hand-drawn closed polygons - so the vector skeleton had to be much thicker to hide deficineies. That always grated. The previous thread is here: https://forums.livecode.com/viewtopic.p ... 30#p201854
I've redesigned this using exclusively oval graphics with their arcAngles and startAngles set and layered in such a way that the 'segments' can be coloured independently but still faced the same issue of overlapping graphics, as the 'hidden' parts of the ovals still intercepted mouse clicks to the deeper layers, so only the topmost in each group could actually be clicked.
This is a circle and as I've re-learned geometry I never knew I'd forgotten in a different project, it was now much easier to calculate which segment was clicked on using proper trigonometry functions to get the distance from the centre and the angle, so even though the invisible bits of some graphics cover all others, it's possible to get this react correctly to mouse clicks on the 'buried' graphics.
The added bonus is this is infinitely more scalable as it's purely ovals set at the same loc; and data management has been sampled dramatically to a comma separate list containing all values and this as well as calculations are all stored internally as custom properties. In fact I wrote a stack that will generate a bullseye of any size:
Feel free to download it from my GitHub : https://github.com/stam66/bullseyeFactory (shared under MIT licence).
Maybe someone might find bits of it useful - any feedback welcome as always...
S.