The Human Body Map is an interactive web component that allows users to view and interact with different systems of the human body. The component offers the following features:
- Interactive human body visualization
- Selection of various anatomical systems
- Identification and selection of specific organs
- Display of medical findings when a CPF is provided
- Real-time visual feedback for user interactions
<script type="module" src="https://d2343lbggy2b29.cloudfront.net/human-body-map-illustration-[version].js"></script>Important Note: When implemented in a web view, ensure JavaScript is enabled for the component to function properly.
Add the component to your HTML:
<human-body-map
cpf="12345678900"
access-key="your-access-key">
</human-body-map>Note: The CPF parameter is optional. Without it, the component will function normally but will not display any associated medical findings.
| Property | Type | Description | Required |
|---|---|---|---|
| cpf | String | Patient's CPF for displaying findings | No |
| access-key | String | Authentication key for API access | Yes |
| selected-system | String | Currently selected body system | No |
| selected-organ | String | Currently selected organ | No |
The component supports various interactions:
-
Hover over organs:
- When hovering over an organ, it gets highlighted and its name is displayed.
- Immediate visual feedback to aid identification.
-
System selection:
- Click on system buttons to toggle between different views.
- The background image dynamically changes to display the selected system.
-
Organ selection:
- Click on specific organs to select them.
- The selected organ is highlighted in blue.
- Displays detailed information when findings are associated with the CPF.
The component emits the following custom events:
Triggered when an organ is clicked.
bodyMap.addEventListener('organ-click', (e) => {
console.log('Selected:', e.detail);
// e.detail = { system: "Nervous System", organ: "Brain" }
});Triggered when filters are reset.
bodyMap.addEventListener('reset-filter', () => {
console.log('Filters have been reset');
});You can view a working example of the component on JSFiddle:
Human Body Map Demo
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://d2343lbggy2b29.cloudfront.net/human-body-map-illustration-1.0.0.js"></script>
</head>
<body>
<human-body-map
id="bodyMap"
cpf="12345678900"
access-key="demo-key">
</human-body-map>
</body>
</html><div class="system-buttons">
<button class="system-button" data-system="default">Overview</button>
<button class="system-button" data-system="Nervous System">Nervous System</button>
<!-- Add other system buttons as needed -->
</div>
<human-body-map id="bodyMap"></human-body-map>
<script>
const bodyMap = document.getElementById('bodyMap');
const buttons = document.querySelectorAll('.system-button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const system = button.dataset.system;
if (system === 'default') {
bodyMap.resetOrganFilter();
} else {
bodyMap.selectedSystem = system;
}
});
});
</script>You can style the component using CSS:
human-body-map {
width: 100%;
height: 500px;
display: block;
}-
Component does not load:
- Verify if the script is loaded correctly.
- Ensure JavaScript is enabled.
- Check if the access key is valid.
-
Images do not appear:
- Check the internet connection.
- Verify access to the CDN.
- Confirm the CORS configuration.
-
Events are not working:
- Check the implementation of event listeners.
- Review the browser console for errors.
- Ensure the component is properly mounted.
| Error | Cause | Solution |
|---|---|---|
| "Invalid access key" | Invalid or expired access key | Verify the key's validity |
| "Invalid system" | Invalid system selection | Check the system's name |
| "Error fetching data" | Network or API error | Check the connection and API |