novosibpano@yandex.ru  

Примеры и идеи реализованные в krpano.


  • HTML5.

  • Рулетка.

    Рулетка.

    Щелкните для просмотра примера

    Измерение расстояний в пределах прямоугольной плоскости(хотспот). Изначально нужно знать размеры измеряемой плоскости(длина и высота стены и т.д.) Плоскость можно подогнать под плоскости стен, пола и т.д. Этого достаточно для того что бы измерить растояние от раковины до умывальника, понять войдет шкаф в угол или нет, какой длины нужны гардины. Точность измерения зависит от расстояния до предметов, чем они ближе, тем точнее измерение.




    Адаптивная сетка.

    Реализация идеи распределения при изменении размера элементов или при изменении размеров окна. Можно изменить элементы, присвоить им изображения и назначить действия и мы получим бар миниатюр.

    Щелкните для просмотра примера




    Анимация хотспотов и слоев.

    Создайте колебательное движение слоя или или хотспота.

    Щелкните для просмотра примера

    Это код для запуска анимации колебательного движения .

    <action name="wobble" scope="local" args="attribute, min, max, time">
    	set(local.vverh, false);
    	calc(cal,'caller.' + attribute);
    	setinterval(calc('merc_' + caller.name), get(time), 
    			if(vverh,tween(get(cal),get(max),get(time)); set(vverh,false);
    				,
    				tween(get(cal),get(min),get(time)); set(vverh,true);
    			);
    		);
    </action>

    Например при загрузке слоя запишите onloaded="wobble(scale,0.5,1,1);" будет изменяться масштаб от 0.5 до 1 за 1 секунду.




    Пин код к двери.

    Откройте дверь.

    Щелкните для просмотра примера

    Пройти через дверь можно только если ввести пин код. Подобрать пин код невозможно , т.к. он формируется случайно после того, как будет найден вариант получить его.




    Нарезка картинки из хотспотов.

    Найдите 4 смайлика.

    Щелкните для просмотра примера

    Используя экшн "for" можно создать плоскость из хотспотов в виде нарезанной картинки, задать им какое либо действие на наведение, щелчек и т.д. Я использовал этот код в виртуальном туре-квесте, где под каждым квадратиком пряталось число от 0 до 15 (с использованием генератора случайных чисел). Открытое число являлось процентом скидки на услуги в салоне красоты ).




    Пример использования генератора случайных чисел

    Стаканчики.

    Щелкните для просмотра примера

    Этот пример создан из хотспотов. Для реализации я использовал операнд random который выдает случайные числа, поэтому угадать в каком стаканчике будет шарик вы сможете, если вы угадаете какое число выдаст этот операнд.




    Пазлы

    Это простенькая игра в пазлы, при старте запускается секундомер. Вам нужно перетащить куски панорамы на свои места, если место правильное, картинка "залипает". Лучше раскройте на полный экран, это не просто, но возможно ).
    В этом примре показана возможность позиционирования хотспотов к заданным местам в панораме.

    Щелкните для просмотра примера




    Вращение предметов

    Реализация кода для вращения предметов.

    Щелкните для просмотра примера




    Свадебная панорама

    Использование фотогалереи.

    Щелкните для просмотра примера