成果網站：https://interactivear.pythonanywhere.com/
標籤：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>AR 標籤列表</title>
</head>
<body>
<h1>AR 標籤列表</h1>
{% for marker in markers %}
<div style="margin-bottom:24px;border:1px solid #ccc;padding:16px;">
<h3>{{ marker.title }}</h3>
{% if marker.preview_image %}
<img src="{{ marker.preview_image.url }}" style="max-width:240px;">
{% endif %}
<p>{{ marker.description }}</p>
<a href="{% url 'ar_player' marker.slug %}">開啟 AR 頁面</a>
</div>
{% empty %}
<p>目前沒有可用的 AR 標籤。</p>
{% endfor %}
</body> |
2.mysite/templates/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>{{ marker.title }}</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
<style>
html, body {
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<a-scene
mindar-image="imageTargetSrc: {{ marker.target_file.url }}; autoStart: true;"
embedded
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
>
<a-assets>
<video
id="video"
src="{{ marker.video_file.url }}"
preload="metadata"
loop
playsinline
webkit-playsinline
crossorigin="anonymous"
></video>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity id="target" mindar-image-target="targetIndex: 0">
<a-video
id="video-plane"
src="#video"
position="0 0 0"
></a-video>
</a-entity>
</a-scene>
<script>
const target = document.querySelector("#target");
const video = document.querySelector("#video");
const videoPlane = document.querySelector("#video-plane");
// 依標籤比例設定尺寸，而不是依影片比例
const targetWidth = {{ marker.target_width }};
const targetHeight = {{ marker.target_height }};
const width = 1;
const height = targetHeight / targetWidth;
videoPlane.setAttribute("width", width);
videoPlane.setAttribute("height", height);
target.addEventListener("targetFound", async () => {
try {
video.currentTime = 0;
await video.play();
} catch (err) {
console.log("播放失敗", err);
}
});
target.addEventListener("targetLost", () => {
video.pause();
});
document.body.addEventListener("click", async () => {
try {
await video.play();
video.pause();
} catch (err) {
console.log("初始化影片失敗", err);
}
}, { once: true });
</script>
</body>
</html>
|
3.mysite/myapp/views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 | # myapp/views.py
from django.shortcuts import render, get_object_or_404
from .models import ARMarker
def ar_marker_list(request):
markers = ARMarker.objects.filter(is_active=True).order_by("-created_at")
return render(request, "marker_list.html", {"markers": markers})
def ar_player(request, slug):
marker = get_object_or_404(ARMarker, slug=slug, is_active=True)
return render(request, "index.html", {"marker": marker})
|
4.mysite/myapp/models.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 | # myapp/models.py
from django.db import models
class ARMarker(models.Model):
title = models.CharField("標題", max_length=100)
slug = models.SlugField("代稱", unique=True)
preview_image = models.ImageField(
"辨識圖片預覽",
upload_to="ar/preview/",
help_text="這張是給管理者看的預覽圖，不是直接給 MindAR 辨識用。"
)
target_file = models.FileField(
"MindAR target 檔",
upload_to="ar/targets/",
help_text="請上傳 .mind 檔案"
)
video_file = models.FileField(
"AR 影片",
upload_to="ar/videos/"
)
target_width = models.PositiveIntegerField(
"標籤寬度基準",
default=1,
help_text="請填入辨識圖的原始寬度，例如 1080"
)
target_height = models.PositiveIntegerField(
"標籤高度基準",
default=1,
help_text="請填入辨識圖的原始高度，例如 1920"
)
description = models.TextField("說明", blank=True)
is_active = models.BooleanField("啟用", default=True)
created_at = models.DateTimeField("建立時間", auto_now_add=True)
updated_at = models.DateTimeField("更新時間", auto_now=True)
class Meta:
verbose_name = "AR標籤"
verbose_name_plural = "AR標籤"
def __str__(self):
return self.title
|
5.mysite/myapp/admin.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | from django.contrib import admin
from django.utils.html import format_html
from .models import ARMarker
@admin.register(ARMarker)
class ARMarkerAdmin(admin.ModelAdmin):
list_display = (
"id",
"title",
"slug",
"is_active",
"target_ratio",
"preview_thumb",
"created_at",
)
list_filter = ("is_active", "created_at")
search_fields = ("title", "slug", "description")
prepopulated_fields = {"slug": ("title",)}
readonly_fields = (
"preview_thumb_large",
"created_at",
"updated_at",
)
ordering = ("-created_at",)
list_per_page = 20
fieldsets = (
("基本資料", {
"fields": ("title", "slug", "description", "is_active")
}),
("AR 檔案", {
"fields": (
"preview_image",
"preview_thumb_large",
"target_file",
"video_file",
)
}),
("標籤尺寸設定", {
"description": "請填入辨識圖的原始寬高，用來讓 AR 影片比例與標籤一致。",
"fields": ("target_width", "target_height"),
}),
("系統資訊", {
"fields": ("created_at", "updated_at")
}),
)
def preview_thumb(self, obj):
if obj.preview_image:
return format_html(
'<img src="{}" style="height:50px;width:auto;border-radius:4px;object-fit:contain;" />',
obj.preview_image.url
)
return "-"
preview_thumb.short_description = "預覽"
def preview_thumb_large(self, obj):
if obj and obj.preview_image:
return format_html(
'<img src="{}" style="max-height:240px;max-width:100%;border-radius:8px;object-fit:contain;" />',
obj.preview_image.url
)
return "尚未上傳圖片"
preview_thumb_large.short_description = "圖片預覽"
def target_ratio(self, obj):
if obj.target_width and obj.target_height:
return f"{obj.target_width} × {obj.target_height}"
return "-"
target_ratio.short_description = "標籤尺寸"
|
6.mysite/mysite/urls.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | """ URL configuration for mysite project. The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/5.1/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path from django.conf import settings from django.conf.urls.static import static from myapp.views import ar_player, ar_marker_list urlpatterns = [ path("admin/", admin.site.urls), path("", ar_marker_list, name="ar_marker_list"), path("<slug:slug>/", ar_player, name="ar_player"), ]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) |
7.mysite/mysite/settings.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | """ Django settings for mysite project. Generated by 'django-admin startproject' using Django 5.1.3. For more information on this file, see https://docs.djangoproject.com/en/5.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/5.1/ref/settings/ """ from pathlib import Path # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = "django-insecure-me+v(tu349%8@$hwf=^6z0de%u!0%yha1fi6z7&31(_1-lgl72" # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = ['InteractiveAR.pythonanywhere.com'] # Application definition INSTALLED_APPS = [ "django.contrib.admin", "django.contrib.auth", "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", "django.contrib.staticfiles", "myapp", ] MIDDLEWARE = [ "django.middleware.security.SecurityMiddleware", "django.contrib.sessions.middleware.SessionMiddleware", "django.middleware.common.CommonMiddleware", "django.middleware.csrf.CsrfViewMiddleware", "django.contrib.auth.middleware.AuthenticationMiddleware", "django.contrib.messages.middleware.MessageMiddleware", "django.middleware.clickjacking.XFrameOptionsMiddleware", ] ROOT_URLCONF = "mysite.urls" TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / 'templates'], "APP_DIRS": True, "OPTIONS": { "context_processors": [ "django.template.context_processors.debug", "django.template.context_processors.request", "django.contrib.auth.context_processors.auth", "django.contrib.messages.context_processors.messages", ], }, }, ] WSGI_APPLICATION = "mysite.wsgi.application" # Database # https://docs.djangoproject.com/en/5.1/ref/settings/#databases DATABASES = { "default": { "ENGINE": "django.db.backends.sqlite3", "NAME": BASE_DIR / "db.sqlite3", } } # Password validation # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ { "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator", }, { "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator", }, { "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator", }, { "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator", }, ] # Internationalization # https://docs.djangoproject.com/en/5.1/topics/i18n/ LANGUAGE_CODE = "en-us" TIME_ZONE = "UTC" USE_I18N = True USE_TZ = True # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/5.1/howto/static-files/ STATIC_URL = "static/" # Default primary key field type # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField" # default static files settings for PythonAnywhere. # see https://help.pythonanywhere.com/pages/DjangoStaticFiles for more info MEDIA_ROOT = '/home/InteractiveAR/mysite/media' MEDIA_URL = '/media/' STATIC_ROOT = '/home/InteractiveAR/mysite/static' STATIC_URL = '/static/' STATICFILES_DIRS = [ BASE_DIR / "static", ] STATIC_ROOT = BASE_DIR / 'staticfiles' |
