Wire up a lot of types and colors for our avatar creator

This commit is contained in:
Oliver Falk
2022-12-29 17:05:52 +01:00
parent 7f748cf8bf
commit 28ff2d16eb
2 changed files with 111 additions and 10 deletions

View File

@@ -16,31 +16,95 @@
}
</style>
<script>
var skin_color = 0;
var hair_color = 0;
var facial_hair_type = 0;
var facial_hair_color = 0;
var top_type = -1;
var hat_color = 0;
var mouth_type = 0;
function update_image() {
var url = "{% url 'avataaar' %}?skin_color=" + skin_color + "&hair_color=" + hair_color +
"&facial_hair_type=" + facial_hair_type + "&facial_hair_color=" + facial_hair_color +
"&top_type=" + top_type + "&hat_color=" + hat_color + "&mouth_type=" + mouth_type;
$("#avatar_image").attr('src', url);
}
</script>
<h3>{% trans 'Adjust your avatar:' %}</h3>
<div>
<div style="width:172px;margin-left:20px;float:left">
<img id="avatar_image" width="172px">
<script>
var skin = "{{ SkinColor.0.main_value }}";
var url = "{% url 'avataaar' %}?skin=" + skin
var ai = document.getElementById("avatar_image");
ai.src = url;
update_image();
</script>
</div>
<div>
<div class="btn-group form-group" role="group" style="float:none;">
<h3>{% trans 'Skin color' %}</h3>
{% for color in SkinColor %}
<a class="button achoose" style="background:{{ color.main_value }};">&nbsp;</a>
<a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Hair color' %}</h3>
{% for color in HairColor %}
<a class="button achoose" style="background:{{ color.main_value }};">&nbsp;</a>
<a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Facial hair type' %}</h3>
{% for type in FacialHairType %}
<a class="button" onclick='facial_hair_type="{{ type.value }}"; update_image();'>
{% if type.name == 'BEARD_MEDIUM' %}
Medium
{% elif type.name == 'BEARD_LIGHT' %}
Light
{% elif type.name == 'BEARD_MAJESTIC' %}
Majestic
{% elif type.name == 'MOUSTACHE_FANCY' %}
Moustache fancy
{% elif type.name == 'MOUSTACHE_MAGNUM' %}
Moustache magnum
{% else %}
Default
{% endif %}
</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Facial hair color' %}</h3>
{% for color in HairColor %}
<a class="button achoose" style="background:{{ color.main_value }};" onclick='facial_hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Top Type' %}</h3>
{% for type in TopType %}
<a class="button" onclick='top_type="{{ type.value }}"; update_image();'>{{ type.name }}</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Hat color' %}</h3>
{% for color in HatColor %}
<a class="button achoose" style="background:{{ color.main_value }};" onclick='hat_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
<br/>
<div>
<h3>{% trans 'Mouth type' %}</h3>
{% for type in MouthType %}
<a class="button" onclick='mouth_type="{{ type.value }}"; update_image();'>{{ type.name }}</a>
{% endfor %}
</div>
</div>
</div>
<div style="height:40px"></div>

View File

@@ -40,7 +40,7 @@ from ipware import get_client_ip
from email_validator import validate_email
from py_avataaars import PyAvataaar
import py_avataaars as pa
from libravatar import libravatar_url
from ivatar.settings import (
@@ -1275,8 +1275,12 @@ class AvatarCreatorView(TemplateView):
Provide additional context data
"""
context = super().get_context_data(**kwargs)
context["SkinColor"] = list(PyAvataaar.SkinColor)
context["HairColor"] = list(PyAvataaar.HairColor)
context["SkinColor"] = list(pa.SkinColor)
context["HairColor"] = list(pa.HairColor)
context["FacialHairType"] = list(pa.FacialHairType)
context["TopType"] = list(pa.TopType)
context["HatColor"] = list(pa.Color)
context["MouthType"] = list(pa.MouthType)
return context
@@ -1290,5 +1294,38 @@ class AvatarView(View):
"""
Handle get for create view
"""
avatar = PyAvataaar.PyAvataaar()
skin_color = list(pa.SkinColor)[0]
hair_color = list(pa.HairColor)[0]
facial_hair_type = list(pa.FacialHairType)[0]
top_type = pa.TopType.SHORT_HAIR_SHORT_FLAT
hat_color = list(pa.Color)[0]
mouth_type = list(pa.MouthType)[0]
if "skin_color" in request.GET:
skin_color = list(pa.SkinColor)[int(request.GET["skin_color"])]
if "hair_color" in request.GET:
hair_color = list(pa.HairColor)[int(request.GET["hair_color"])]
if "facial_hair_type" in request.GET:
facial_hair_type = list(pa.FacialHairType)[
int(request.GET["facial_hair_type"])
]
if "facial_hair_color" in request.GET:
facial_hair_color = list(pa.HairColor)[
int(request.GET["facial_hair_color"])
]
if "top_type" in request.GET:
top_type = list(pa.TopType)[int(request.GET["top_type"])]
if "hat_color" in request.GET:
hat_color = list(pa.Color)[int(request.GET["hat_color"])]
if "mouth_type" in request.GET:
mouth_type = list(pa.MouthType)[int(request.GET["mouth_type"])]
avatar = pa.PyAvataaar(
skin_color=skin_color,
hair_color=hair_color,
facial_hair_type=facial_hair_type,
facial_hair_color=facial_hair_color,
top_type=top_type,
hat_color=hat_color,
mouth_type=mouth_type,
)
return HttpResponse(avatar.render_png(), content_type="image/png")