Как правильно заставить гаджет windows отображать информацию?

@Dimofey · Регистрация: 16.12.2013

Студворк — интернет-сервис помощи студентам

Решил создать гаджет для windows для отображения круговой диаграммы. Гаджет "в принципе" работает, то есть он есть в списке, и простую текстовую информацию я смог заставить его отобразить. Но вот диаграмма отображаться никак не хочет, хотя в браузерах она прекрасно работает.
Создал 2 варианта разных диаграмм:

PHP/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
<html>
 
<head>
<title>My First Gadget</title>
<style>body{width:320;height:360}
@property --p{
  inherits: true;
  initial-value: 0;
}
 
.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}
 
body {
  background:#ddd;
}
</style>
</head>
 
<body>
<div class="pie no-round" style="--p:60;--c:purple;--b:40px"> 60%</div>
</body>
 
</html>

и такую

PHP/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
<html>
 
<head>
<title>My First Gadget</title>
 
<style>
body{width:320;height:360}</style>
 
<script src="https://www.google.com/jsapi"></script>
  <script>
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['Газ', 'Объём'],
     ['Азот',     78.09],
     ['Кислород', 20.95],
     ['Аргон',    0.93],
     ['Углекислый газ', 0.03]
    ]);
    var options = {
     title: 'Состав воздуха',
     is3D: true,
     pieResidueSliceLabel: 'Остальное'
    };
    var chart = new google.visualization.PieChart(document.getElementById('air'));
     chart.draw(data, options);
   }
  </script>
</head>
 
<body><div id="air" style="width: 500px; height: 400px;"></div></body>
 
</html>

В первом случае показывает только число, во втором пустой экран. Вопрос в том, в какую сторону копать, чтоб хоть что-то заработало?

@DimaxDe · 13.06.2022, 13:10

Сообщение от Dimofey

Вопрос в том, в какую сторону копать, чтоб хоть что-то заработало?

В броузерах есть инструменты разработчика.Необходимо открыть ваш сайт в броузере и потом открыть инструменты разработчика.После чего в консоли посмотреть ошибки и попробывать их исправить.

@Dimofey · 13.06.2022, 13:22 **[ТС]**

DimaxDe, в браузерах всё корректно работает, в гаджетах не работает

@DimaxDe · 13.06.2022, 14:13

Сообщение от Dimofey

в браузерах всё корректно работает

в каких браузерах?

Сообщение от Dimofey

@property

вообще в фоксах и сафарях не работает
вполне может быть одной из причин
в гаджетах может быть деактивирован яваскрипт.
пропишите в боди где-нибудь

HTML5
1
2
3
<noscript>
ЯВАСКРИПТ ОТКЛЮЧЕН НА ЭТОМ ГАДЖЕТЕ
</noscript>

@Dimofey · 13.06.2022, 14:56 **[ТС]**

DimaxDe,

в каких браузерах?

Запускал в огнелисе, там работало. Скрин приложил

в гаджетах может быть деактивирован яваскрипт.
пропишите в боди где-нибудь

Прописал, пустой экран у гаджета

@DimaxDe · 13.06.2022, 15:50

Сообщение от Dimofey

Прописал, пустой экран у гаджета

как вы открываете этот сайт на мобилах? вы задеплоили его на сервак и открываете по адресу ?

@Dimofey · 13.06.2022, 16:53 **[ТС]**

DimaxDe, а зачем мобилки? Мне гаджет на рабочем столе нужен, такой как эти:

@Dimofey · 13.06.2022, 17:13 **[ТС]**

DimaxDe, для первого варианта гаджет выглядит вот как на скрине, второй вариант это пустой белый экран. Работоспособность гаджета на мобилках совершенно не интересует.

@DimaxDe · 14.06.2022, 09:49

Сообщение от Dimofey

гаджета

1.почему вы называете этот сайт гаджетом? 2.На экране вы открыли хтмл файл явно не в браузере, а где?

@DrType · 14.06.2022, 11:36

Речь о гаджетах Windows. Старый функционал, который больше не поддерживается.

@DimaxDe · 14.06.2022, 11:57

Сообщение от DrType

Речь о гаджетах Windows

Я тоже подозревал ,что этот сайт часть программы.т.е Виджет.Скорее всего проблема в коде бэка ..подозреваю ,что это ява.Кусок эклипса на фотке.

Сообщение от Dimofey

в браузерах всё корректно работает

.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Dimofey 1 / 1 / 1 Регистрация: 16.12.2013 Сообщений: 118
	13.06.2022, 13:22 [ТС]
	DimaxDe, в браузерах всё корректно работает, в гаджетах не работает 0

@Dimofey 1 / 1 / 1 Регистрация: 16.12.2013 Сообщений: 118
	13.06.2022, 16:53 [ТС]
	DimaxDe, а зачем мобилки? Мне гаджет на рабочем столе нужен, такой как эти: Миниатюры 0

@Dimofey 1 / 1 / 1 Регистрация: 16.12.2013 Сообщений: 118
	13.06.2022, 17:13 [ТС]
	DimaxDe, для первого варианта гаджет выглядит вот как на скрине, второй вариант это пустой белый экран. Работоспособность гаджета на мобилках совершенно не интересует. Миниатюры 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	14.06.2022, 11:36
	Речь о гаджетах Windows. Старый функционал, который больше не поддерживается. 1