Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вольтметр. С чего начать??? (https://javascript.ru/forum/dom-window/1070-voltmetr-s-chego-nachat.html)

Гость 06.03.2008 15:04

Вольтметр. С чего начать???
 
Здравствуйте!!!

Мне необходимо создать обычный вольтметр или ампреметр с реостатом. Т.е. есть какаято ручка реостата которую можно вращать с помощью "мыши" и при этом должна откланятся стрелка на вольтметре.
Т.к мои познания в javascript весьма ограничены, то прошу Вас подсказать на основе чего можно создать данные элементы. И про какие финкции нужно прочитать?

Dmitry A. Soshnikov 09.03.2008 17:42

Не уверен, что JavaScript наилучший способ реализации подобной задачи. Лучше бы подошел flash (например). Вообщем можно что-то сделать div'ами, по определенным событиям ("поворот ручки") менять координаты div'a ("имитировать движение стрелки "). Можно было бы попытаться использовать canvas, но он (вроде) не кроссбраузерный. Поэтому - склоняйтесь в сторону флеша.

Гость 10.03.2008 04:49

А про ДИВы можно поподробнне?

Dmitry A. Soshnikov 10.03.2008 13:20

див'ами - если стрелку сделать из нескольких дивов, то, можно, меняя положения дивов в "стрелке" (т.е. нижние дивы (нижний край стрелки) практически не движется, верхние - движутся активней). Но это не рационально и многокодно =). Если б стрелка была индикатором - то лекго - один див, которому увеличивать / уменьшать ширину. Но вообще - опять же - лучше подойдет флеш.

Андрей Параничев 10.03.2008 14:43

Можно сделать стрелку движующуюся строго горизонтально, т.е шкала делений вольтметра будет не дугой, а тоже горизонтальной. Тогда можно просто менять координаты дива со стрелкой. Реостат тоже реально сделать "ползунком", а не вращающейся головкой.

Просто повернуть элемент на странице на какой-либо угол, без использования тогоже canvas не возможно, на сколько я знаю. А сделать дивами с фиксированным перемещением вполне реально, правда для этого тоже нужна неплохая сноровка в javascript.

Questioner 08.09.2011 20:03

можно картинку с линией, она растягивается до положения показания. или так:
картинки выглядят так:
0.PNG:
,___
.|__|
.|__|
1.PNG:
, ___
.|__|
.|__|
2.PNG:
, ___
.|__|
.|__|
3.PNG:
, ___
.|__|
.|__|
4.PNG:
,___
.|__|
.|__|
5.PNG:
,___
.|__|
.|__|
6.PNG:
,___
.|__|
.|__|
7.PNG:
,___
.|__|
.|__|
8.PNG:
,___
.|__|
.|__|
9.PNG:
,___
.|__|
.|__|
..PNG:
,___
.|__|
.|__|
'.PNG:
,___
.|__|
.|__|
[SPASE_BAR].PNG:
,___
.|__|
.|__|
например, показатели хранятся в массиве volt(в volt[0] хранятся вольты, в volt[1] хранятся амперы и т. д.)
что именно надо отобразить хранится в целой переменной voltType(номер эл-та массива)
выводим в <div id="screen">
значит
var onV;
function toImgs(str) {
  var res='';
  for(var i=0; i<str.length; i++) {
    res+='<img src="'+str[i]+'.PNG"/>';
  }
  return res;
}
function on() {
  onV=setInterval(function() {document.getElementById("screen").innerHTML=toImgs(volt[voltType].toString)},1000/30)
}
function off() {
  clearInterval(onV);
}


Часовой пояс GMT +3, время: 01:12.