2026年4月4日 星期六

[水井USR] 在Pythonanaywhere上用Django實作玉米籜作品網站

 


網站：https://seniorartlab.pythonanywhere.com/

1.seniorartlab/gallery/models.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# gallery/models.py
from django.db import models

class Artwork(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField(blank=True)

    # 圖片改成可選，這樣可以做純影片作品
    image = models.ImageField(upload_to='artworks/', blank=True, null=True)

    # 新增 mp4 影片欄位
    video = models.FileField(upload_to='videos/', blank=True, null=True)

    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

2.seniorartlab/gallery/admin.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# gallery/admin.py
from django.contrib import admin
from .models import Artwork

@admin.register(Artwork)
class ArtworkAdmin(admin.ModelAdmin):
    list_display = ('title', 'created_at', 'has_image', 'has_video')

    def has_image(self, obj):
        return bool(obj.image)
    has_image.short_description = '有圖片'

    def has_video(self, obj):
        return bool(obj.video)
    has_video.short_description = '有影片'

3.seniorartlab/gallery/views.py

1
2
3
4
5
6
7
# gallery/views.py
from django.shortcuts import render
from .models import Artwork

def home(request):
    artworks = Artwork.objects.all().order_by('-created_at')
    return render(request, 'gallery/home.html', {'artworks': artworks})

4.seniorartlab/gallery/urls.py

1
2
3
4
5
6
7
# gallery/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

5.seniorartlab/seniorartlab/urls.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
# seniorartlab/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('gallery.urls')),  # 前台首頁與作品
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

6.seniorartlab/seniorartlab/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
136
"""
Django settings for seniorartlab 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-&6icjhr7uh0dw!5i^5*w0=vn1*4%va_lr14@12b3spl%i=t=vn"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['seniorartlab.pythonanywhere.com']


# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    'gallery',
]

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 = "seniorartlab.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 = "seniorartlab.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/seniorartlab/seniorartlab/media'
MEDIA_URL = '/media/'
STATIC_ROOT = '/home/seniorartlab/seniorartlab/static'
STATIC_URL = '/static/'
# 媒體檔案設定
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

STATIC_URL = '/static/'

7.seniorartlab/templates/gallery/home.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
 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!-- gallery/templates/gallery/home.html -->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SeniorArtLab 作品展示</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Microsoft JhengHei", sans-serif;
            background: #f5f7fb;
            color: #333;
        }

        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .page-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 10px;
            color: #222;
        }

        .page-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 36px;
            font-size: 16px;
        }

        .artwork-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
            align-items: start;
        }

        .artwork-card {
            background: #fff;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .artwork-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        }

        .artwork-media {
            width: 100%;
            height: auto;
            display: block;
            background: #e9ecef;
        }

        .artwork-content {
            padding: 18px;
        }

        .artwork-title {
            font-size: 20px;
            margin: 0 0 10px;
            color: #1f2937;
            line-height: 1.4;
        }

        .artwork-description {
            font-size: 14px;
            line-height: 1.7;
            color: #555;
            margin-bottom: 14px;
            white-space: pre-line;
        }

        .artwork-meta {
            font-size: 12px;
            color: #888;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .empty-box {
            text-align: center;
            background: #fff;
            padding: 50px 20px;
            border-radius: 16px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
            color: #777;
        }

        @media (max-width: 576px) {
            .page-title {
                font-size: 26px;
            }

            .artwork-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="page-container">
        <h1 class="page-title">SeniorArtLab 作品展示</h1>
        <p class="page-subtitle">圖片與影片作品展示牆</p>

        {% if artworks %}
            <div class="artwork-grid">
                {% for artwork in artworks %}
                    <div class="artwork-card">

                        {% if artwork.video %}
                            <video class="artwork-media" controls preload="metadata">
                                <source src="{{ artwork.video.url }}" type="video/mp4">
                                您的瀏覽器不支援影片播放。
                            </video>
                        {% elif artwork.image %}
                            <img src="{{ artwork.image.url }}" alt="{{ artwork.title }}" class="artwork-media">
                        {% endif %}

                        <div class="artwork-content">
                            <h2 class="artwork-title">{{ artwork.title }}</h2>

                            <div class="artwork-description">
                                {% if artwork.description %}
                                    {{ artwork.description }}
                                {% else %}
                                    暫無作品說明
                                {% endif %}
                            </div>

                            <div class="artwork-meta">
                                上傳時間：{{ artwork.created_at|date:"Y-m-d H:i" }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-box">
                <p>目前沒有作品</p>
            </div>
        {% endif %}
    </div>
</body>
</html>


張貼者： 於 沒有留言:
標籤： , , ,

2026年3月30日 星期一

[水井USR] 在Pythonanaywhere上用Django實作標籤AR來播放影片

 


成果網站：https://interactivear.pythonanywhere.com/

標籤：


1.mysite/templates/marker_list.html
 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>


</html>

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'


張貼者： 於 沒有留言:
標籤： , , , ,

2026年3月29日 星期日

[水井USR] 在Pythonanaywhere上用Django網站顯示3D模型，加上資料庫

 




前一篇文章：在Pythonanaywhere上用Django網站顯示3D模型
本篇文章成果網站：
 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
"""
URL configuration for ARmodelViewer 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 myapp import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path('', views.model_viewer, name='ar_model_viewer'),
    path('ar-model-viewer/', views.model_viewer, name='ar_model_viewer'),
    path('ar-model-viewer/<int:model_id>/', views.model_viewer, name='ar_model_viewer'),
]

2.ARmodelViewer/ARmodelViewer/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 ARmodelViewer 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-*bq*cvi-kt)h@l4yi2mto%h($^_n5rl^6q4udiyu==j###sgaz"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['ARmodelViewer.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 = "ARmodelViewer.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 = "ARmodelViewer.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/ARmodelViewer/ARmodelViewer/media'
MEDIA_URL = '/media/'
STATIC_ROOT = '/home/ARmodelViewer/ARmodelViewer/static'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
STATIC_ROOT = BASE_DIR / 'staticfiles'

3.ARmodelViewer/myapp/views.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
from django.shortcuts import render, get_object_or_404
from .models import ARModel

def model_viewer(request, model_id=None):
    if model_id:
        ar_model = get_object_or_404(ARModel, id=model_id, is_active=True)
    else:
        # 預設取第一個啟用的模型，或根據需求調整
        ar_model = ARModel.objects.filter(is_active=True).first()
        if not ar_model:
            # 可處理無模型的情況
            return render(request, 'ar_no_model.html')

    context = {
        'ar_model': ar_model,
    }
    return render(request, 'ar_model_viewer.html', context)

4.ARmodelViewer/myapp/models.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
from django.db import models

class ARModel(models.Model):
    title = models.CharField(max_length=200, verbose_name="模型標題")
    gltf_url = models.URLField(verbose_name="GLTF 模型 URL", help_text="例如：https://cdn.aframe.io/.../scene.gltf")
    asset_id = models.SlugField(max_length=100, default="model", verbose_name="Asset ID")
    description = models.TextField(blank=True, verbose_name="模型描述")
    shadow_image = models.ImageField(upload_to='ar_shadows/', blank=True, null=True, verbose_name="陰影圖片")
    is_active = models.BooleanField(default=True, verbose_name="啟用")

    def __str__(self):
        return self.title

    class Meta:
        verbose_name = "AR/VR 模型"
        verbose_name_plural = "AR/VR 模型"

5.ARmodelViewer/myapp/admin.py

1
2
3
4
from django.contrib import admin
from .models import ARModel

admin.site.register(ARModel)

6.ARmodelViewer/templates/ar_model_viewer.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
{% load static %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Model Viewer AR - VR</title>
  <meta name="description" content="Model Viewer (VR / AR) • A-Frame">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <!-- A-Frame 主程式庫 -->
  <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>

  <!-- 自訂 components -->
  <script src="{% static 'js/animation-mixer.js' %}"></script>
  <script src="{% static 'js/ar-shadows.js' %}"></script>
  <script src="{% static 'js/model-viewer.js' %}"></script>
  <script src="{% static 'js/background-gradient.js' %}"></script>
</head>
<body>
  <a-scene
    renderer="colorManagement: true;"
    info-message="htmlSrc: #messageText"
    model-viewer="gltfModel: #{{ ar_model.asset_id }}; title: {{ ar_model.title|escapejs }}"
    xr-mode-ui="XRMode: xr">

    <a-assets timeout="10000">
      <!-- 由後台指定的模型 -->
      <a-asset-item id="{{ ar_model.asset_id }}"
        src="{{ ar_model.gltf_url }}"
        response-type="arraybuffer"></a-asset-item>

      {% if ar_model.shadow_image %}
        <img id="shadow" src="{{ ar_model.shadow_image.url }}">
      {% else %}
        <img id="shadow" src="{% static 'images/shadow.png' %}">
      {% endif %}

    </a-assets>

  </a-scene>

  <!-- 可選：顯示模型描述 -->
  {% if ar_model.description %}
  <div style="position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6); color: white; padding: 10px; border-radius: 5px;">
    {{ ar_model.description }}
  </div>
  {% endif %}
</body>
</html>

7.ARmodelViewer/templates/ar_no_model.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>沒有可顯示的模型</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 100px; background: #f8f9fa; }
    h1 { color: #dc3545; }
  </style>
</head>
<body>
  <h1>目前沒有可顯示的 AR/VR 模型</h1>
  <p>請先登入 Django Admin 後台，新增至少一個 ARModel 並勾選「啟用」。</p>
  <p><a href="/admin/">前往後台管理</a></p>
</body>
</html>
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 意見 (Atom)