Find us on Google+ سییتم های تعاملی - رسانه های تعاملی - پیور دیتا: اکتبر 2012

۷ آبان ۱۳۹۱

تعریف flosc و روش کار کردن با آن



flosc یک سرور جاوا ست که توسط Ben Chun نوشته شده و قادر به برقراری ارتباط با اپلیکیشن هایی که از پروتکل
Open Sound Control - OSC استفاده میکنند است . مثل PureData، Max/MSP, Reaktor , EyesWeb.
همینطور قابلیت برقراری ارتباط با Macromedia Flash ورژن ۵ به بالاتر و در نسخه های بالاتر آن یعنی محصولات Adobe FLash را با استفاده از ویژگی های XMLSochet در فلش را دارا میباشد.
نام flosc ترکیبی از نام های flash و OSC است.
flosc همانند یک درگاه مابین OSC و Flash عمل میکند ، و اجازه ارسال پیغام در هر دو جهت را میدهد.
این موضوع بسیاری از ترکیبات قدرتمند، پلت فرم های قابل برنامه ریزی برای انیمیشن های با کیفیت بالا ، صدا ، ویدئو ، و تولید برنامه های تعاملی را امکان پذیر میسازد.
flosc قادر به دریافت چند گانه ورودی های همزمان از اتصالات OSC و Flash Client ها میباشد و همچنین میتواند پیام های چند گانه به Flash Clients ارسال کند ، اما هیچ گونه مسیر یابی انجام نمیدهد .
اینطور تصور کنید که مانند یک دروازه یا پل ارتباطی بین دنیای UDP از OSC و دنیای TCP از Flash XMLSockets باشد.
این فرایند دو طرفه است، flosc می توانید در هر دو جهت داده ارسال و دریافت کند ،بنابرین ارتباطات بین برنامه های کاربردی OSC به فلش و بالعکس جاری خواهد بود.


نصب و طریقه استفاده 
از آنجا که این برنامه توسط جاوا نوشته شده ، بروی تمام سیستم عامل هایی که جاوا (و بدیهی ست هم فلش)را ساپورت میکنند کار میکند، مانند نسخته های مختلف سیستم عامل ویندوز 98/2000/XP/Vista/7 ، لینوکس و macOSX
فایل ها را در هر جایی که مایلید کپی کنید ، فقط مطمئن شوید که Java runtime environment ورژن ۱.۱ یا بالاتر نصب شده باشد . (تمام ورژن های OS X به همین صورت خواهد بود ، بنابراین آن زندگی شما را آسان می سازد، اگر شما بر روی مک هستید)



اجرای flosc در ویندوز
فایل فشرده حاوی flosc را در یک مسیر Unzip کنید (که آن را <floscDir> خواهیم نامید)
که داخل آن تمام کلاس های flosc و یک مثال قابل استفاده از فلش موجود میباشد.
یک فایل متنی بسازید و آنرا gateway.bat بنامید ، و داخل آن متن زیر را قرار دهید :


<drive di installazione>     ( c: , d: , ... درایو جاییست که فایل ها در آنجا نصب شده اند ، به عنوان مثال)
cd <floscDir>                  ( \programmi\flosc\ مسیر کامل ، به عنوان مثال )
set CLASSPATH= <نام درایو><floscDir>
ipconfig
Java Gateway oscPort FlashPort


oscPort نام پورتی ست که سرور بسته های OSC را دریافت خواهد کرد و FlashPort جاییست که client Flash به آن متصل خواهد شد ، به صورت پیشفرض oscPort برابر با 1250 و FlashPort برابر با 3000 خواهد بود .
اکنون با ۲ بار کلیک بروی gateway.bat سرور روشن میشود و یک پنجره دستور Dos یا Dos Prompt باز باقی خواهد ماند برای نمایش عملیات انجام شده .

این مراحل انجام کار توسط Batch File ها (یا فایل های دسته ای) است که برای اجرای flosc در ویندوز قابل استفاده است

اجرای flosc در Linux و MacOsX 
داخل home فولدر flosc.zip را unzip کنید (که حاوی فولدر دیگری داخل آن با نام flosc میباشد)
دستورات زیر را در terminal مطابق زیر وارد کنید و در انتهای هر کدام کلید ارسال یا return را بزنید

– cd
– cd flosc
– chmod 775 gateway.command

اکنون با کلیک بروی gateway.command یک پنجره سیاه از terminal باز خواهد شد که بدان معناست که سرور در حال اجراست.

استفاده بلافاصله از flosc در کار
پوشه flosc موجود در فایل zip فقط برای اجرای سریع و نمایشی از عملکرد flosc بدون هیچ گونه ویرایشی و تغیری در ساختار آن ساخته شده است.

این پوشه را در مسیر زیر کپی کنید :

- Windows users: c: \
- Mac, Linux: in home


2 مرتبه روی فایل gateway.bat (ویندوز) و یا gateway.command (لینوکس و مک) کلیک کنید ،
این فایل از قبل برای اجرای سرور flosc با تنظیمات پیشفرض :
  • پورت ۱۲۵۰ برای پیغام هایی که قصد دارند به فلش ارسال بشوند
  • پورت ۳۰۰۰ برای پیغام های قابل ارسال برای برنامه های خارجی نظیر pd

پیکربندی شده است .


دانلود
شما می توانید همه چیز را، از جمله فایل هایprecompiled class و یک نمونه از Flash client را از لینک زیر دریافت کنید :


همینطور شما میتوانید کل پروژه را در اینجا مشاهده کنید

https://github.com/benchun/flosc


مجوز ها
flosc کاملا متن باز میباشد و هر کسی میتواند کد های آن رو دست کاری کند و آن را آنطور که میخواهد گسترش دهد .

سایت های مفید
سایت رسمی
آموزش ها
فروم یا انجمن

پیکر بندی  flosc در  flash 
برای اجازه دادن به یک actionscript جهت برقراری ارتباط با یک flosc ضروری ست که تابع زیر را داخل آن اضافه کنیم :

//connessione a OSC
connect();
_root.onEnterFrame = function () {
varFlash=varInputOSC;
...
...
};
//alla fine disconnetti da OSC
disconnect ();

varFlash یک متغیر ورودی در فلش است که از  سرور flosc خوانده میشود ، بنابراین داده ای هست که میخواهیم به فلش برسد .
بنابرین ضروری ست که توابع و متغیر هایی که ارتباط را مدیریت میکنند  به صورت صحیح و دقیق وارد شوند. 

داخل فایل CambioColoreOsc_cs3.fla (پیوست شده)  یک مثال یافت میشود که میتوانید از آن کد ی که برای کنترل actionscript استفاده میشود برای فلش خودتان استخراج کنید .
 قسمت اول آن مربوط میشود به قسمتی که قبلا در بالا توضیح دادیم ، سایر قسمت های ضروری ۳ قسمت هستند : 

۱-  تابع اتصال "() connect"

// *** create a new socket and attempts to connect to the server
function connect () {
mySocket = new XMLSocket();
mySocket.onConnect = handleConnect;
mySocket.onClose = handleClose;
mySocket.onXML = handleIncoming;
if (!mySocket.connect("127.0.0.1", "3000")) trace("connectionFailed");
else trace("CONNESSO");
}

جایی که شما لازم است که IP سرور flosc را مشخص کنید مشاهده کنید  (127.0.0.1 و یا  localhost )
و پورت برای برقراری ارتباط (همان تنظیمات انجام شده در flosc که برابر با 3000 میباشد)


۲- تابع "()parseMessages"
function parseMessages(node) {
if (node.nodeName == "MESSAGE") {
    oscMess.messaggio=node.attributes.NAME;
for (var child = node.firstChild; child != null; child=child.nextSibling) {
        if (child.nodeName == "ARGUMENT") {
            oscMess.value=child.attributes.VALUE;
if (oscMess.value >Number(-2147483648)) {
        switch (oscMess.messaggio){
        case "/posx":
        posizionex=oscMess.value;
        break;
        case "/posy":
        posizioney=oscMess.value;
        break;
        case "/col":
        colore=oscMess.value;
        break;
        default:;
        }// fine switch
                   }//fine if
            }
        }
}
else { // look recursively for a message node
    for (var child = node.firstChild; child != null; child=child.nextSibling) {
        parseMessages(child);
    }
}
}
- سوئیچ (به صورت پررنگ برجسته شده در کد بالا) مهم ترین بخش آن است ، در حقیقت همان جاییست که پیغام  OSC وارد شونده  به flash  تفسیر میشوند و اینجاست که لازم است رشته های پیغام تشخیص داده شوند ،
همانند مثال : "col/" ,  "/posx/" , "/posy/"
هر کدام از اینها یک رشته دلخواه است ، که میتواند به جای این هر چیز دیگری باشد اما باید فقط ۲ شرط داشته باشد :

  • باید با کاراکتر / شروع شود 
  • باید دقیقا همان چیزی باشد  که در  اپلیکیشن OSC (به عنوان مثال اپلیکشن PD , Eyesweb) برای ارسال پیغام به flash استفاده کردید. 


در مثالی که آورده شده ، اطلاعات مربوط به رنگ میخواهد انتقال داده شود ، به اینصورت که در اپلیکیشن OSC پیغامی وجود دارد که در خروجی یک بسته با رشته (شناسه) col/ ارسال میکند ، که در صورتی در سوئیچ فلش استفاده خواهد شد که دقیقا با همان نام رشته یعنی col/ صدا شود 

نکته : رشته های (پیغام های OSC) مختلفی مورد استفاده قرار میگیرند ، برای ورودی (flash) داده های مختلف ، مربوط به اطلاعات گوناگون . مانند : مختصات x , مختصات y , رنگ ، سطح ، وسعت و غیره. 

نکته : در این روش ، در actionscript فلش ، خواندن و تفسیر (کامپایل) کردن هر گونه داده ای  که از یک اپلیکیشنی که استاندارد OSC را ساپورت میکند امکان پذیر است.

در آخرین نسخه flosc یعنی 0.3.1 سوییچی که باید ویرایش کنید داخل تابع  () ParseArguments میباشد ، 
اما روش همان روش گفته شده در بالا میباشد 


flosc و  PureData

اکنون ببینیم چگونه  یک patch ساده در PD ساخته میشود ، که بطور مثال با فلش ارتباط برقرار میکند!

flosc و  PureData
3 قسمت اصلی وجود دارد: 

1- send <مقدار> <متغیر>
یک پیغام OSC میسازد با فرمت  از (متغیر و مقدار) 
2- connect <IP><porta> 
اکنون این پیغام با پارامتر اول درخواست میکند (در قسمت sendOSC) به host  متصل شود ، و با پارامتر دوم پورت مورد نظر را انتخاب میکند . برای شروع مکالمه میبایست با این پیغام این ارتباط را برقرار کنید .   
3- sendOsc

انجامعملیات ارسال  پیام  

همانطوری که در پارامتر های اتصال مشاهده میکنید ، در قسمت host از آدرس localhost  (جایی که سرور flosc را درخواست میکند) بنابراین همان کامپیوتر محلی میباشد که PD و Flash همزمان با هم روی ان کار میکنند .
در قسمت پورت از 1250 استفاده شده که همان تنظیمات انجام شده در flosc است .
و پیام رشته “col”, “/posx” o “/posy/” است. 
و به این ترتیب یک داده از PD به flash ارسال میشود.

از flash به بیرون

در Flash :
 سومین تابع اضافه شده به actionscript که sendOSC نامیده میشود (name, arg, destAddr, destPort)
به جای name نامه متغیر (رشته) برای ارسال (مثل قبل به عنوان مثال "col/" , ... )
arg مقدار قابل ارسال میباشد ، destAddr آدرس ip  سرور flosc و destPort نام پورتی ست برای برقراری ارتباط (در این مورد ، 3000 پورت فلش است)

در مثال آورده شده این تابع وارد

la _root.onEnterFrame = function (){…}
با این پارامتر ها 
sendOSC("/colore",c1_color.getRGB(),"127.0.0.1","3000");


در Puredata :

  • dumpOSC بروی پورت 3000 در حالت انتظار میماند (یا بروی هر پورت دیگری که از قبل مشخص کرده ایم)
  • Oscroute انجام مسیریابی پیام ها بر اساس نام متغیر، پیام های ناشناس به آخرین خروجی ارسال میشوند .

dumpOSC

نکته بسیار مهم : توجه داشته باشد که در این مدل از ارتباط ، پورت اتصال دقیقا همانی خواهد بود که چه برای فلش یا هر اپلیکیشن OSC دیگر از قبل تعریف کردید ! ( در اینجا ما از پورت 3000 استفاده کردیم)

نکته : داده های ورودی فرستاده شده توسط فلشهمیشه یک رشته است ، به همین خاطر  پس از آن استفاده از بلوک [atoi] برای  تبدیل کردن داده به یک عدد صحیح  و تفسیر آن لازم است .


بلوک های بعدی برای تبدیل یک عدد 24 بیتی (مربوط به رنگ و ارسال شده از فلش) مورد استفاده قرار میگیرند 
در 3 عدد مختلف مربوط به سه مولفه رنگ RGB.
در حقیقت ، یک  رنگ ۲۴ بیتی (مانند مثال در متغیر val32 ) در باینری با ۸ بیت نمایش داده شده : 


Val24 = rrrrrrrrggggggggbbbbbbbb

برای تقسیم به ۳ مولفه رنگ ، لازم است که از عملگر  AND (&&) و RIGHT SHIFT (<<) استفاده کنیم .

R = Val24 >> 16 = rrrrrrrr
G = (Val24 >> 8) AND 11111111 = gggggggg
B = Val24 AND 11111111 = bbbbbbbb

(<<) یک عملگر انتقال به راست میباشد و عدد وارد شده را به با افزودن 0 در سمت چپ آنرا به سمت راست می راند.
مثال  (Es: 1001 >> 2 = 0010)  

در نهایت  تبدیل ۳ مولفه RGB  با طیف [0-255] با اعدادی از [0,1] (باینری).

عملگر AND  &&


فایل های مورد نیاز :

۶ آبان ۱۳۹۱

روشهای برقراری ارتباط توسط OSC در PureData

استفاده از بلوک های sendOsc و  dumpOsc
تصویر (۱)
استفاده از بلوک های sendOsc و  dumpOsc
تصویر (۲)

۲ روش برای برقراری ارتباط توسط OSC در Pure Data وجود دارد که عبارت است از :



۱- استفاده از بلوک های sendOsc و dumpOsc
استفاده از بلوک های udpsend - udpreceive و packOSC - unpackOSC
تصویر (۳)
(مطابق تصویر ۱ و ۲ )
















۲ - استفاده از بلوک های udpsend و udpreceive
و بلوک های  packOSC و unpackOSC

(این روش تنها راهی ست که با Synapse-Kinect کار میکند )
استفاده از بلوک های udpsend - udpreceive و packOSC - unpackOSC
تصویر (۴)

( تصویر۳ و ۴  )







routeOSC مورد استفاده برای ارائه انواع پیغام های   OSC در درگاه های خروجی 

مختصری درباره OSC


OSC چیست ؟
OSC مخفف Open Sound Control یک پروتکل برقراری ارتباط (برای تبادل اطلاعات از نوع عددی) بین برنامه هاست ، 
قابلیت حرکت در مسیر شبکه را داراست ، بنابراین میتواند در بین کامپیوتر ها با با فواصل زیاد از طریق اتصال شبکه ارتباط برقرار کند
نکته :
-  در مسیر اینترنت ایجاد یک VPN ضروری خواهد بود . 
-  OSC یک فرمت اطلاعاتی شبیه MIDI ست ، اما سریعتر و انعطاف پذیرتر 
-  هر برنامه یی که قصد فرستادن یک داده را دارد باید IP کامپیوتر مقصد و پورتی که  تا دریافت اولین داده در حالت انتظار میماند را بشناسد 
- اگر ۲ برنامه روی یک کامپیوتر بخواهند با هم ارتباط برقرار کنند IP ما 127.0.0.1 و یا دستور localhost خواهد بود .

اجزای تشکیل دهنده :
داده معمولا از ۲ بخش واژه و مقدار تشکیل میشود :
واژه : واژه رشته یی  از کاراکتر هاست که باد از ' / ' قرار میگیرد : به عنوان مثال
/pippo
مقدار : مقدار عدد صحیح که قصد دارید در برقراری ارتباط ارسال کنید : به عنوان مثال
/pippo 15

OSC  توسط برنامه های زیادی نظیر Reactvision (Kinect) , Synapse استفاده شده است . 

۳ آبان ۱۳۹۱

زبان برنامه‌نویسی تصویری


زبان برنامه‌نویسی تصویری (ویژوال) (VPL) به آن دسته از زبان‌های برنامه‌نویسی گفته می‌شود که روند برنامه‌نویسی در آن‌ها به جای اینکه به صورت متنی باشد، به صورت تصویری است. در برنامه‌نویسی تصویری از عبارات تصویری و نمادهای گرافیکی برای برنامه‌نویسی استفاده می‌شود. بیشتر زبان‌های برنامه‌نویسی تصویری بر پایه ایده "جعبه‌ها و پیکان‌ها" هستند. در این روش از جعبه‌هایی به عنوان اشیای صفحه‌ای و پیکان‌ها یا خطهایی برای ارتباط دادن این جعبه‌ها به هم استفاده می‌شود.

مراحل برنامه‌نویسی [ویرایش]

در یک زبان برنامه‌نویسی تصویری مراحل برنامه‌نویسی بسیار شبیه زبان‌های برنامه‌نویسی متنی است. به این معنی که در این زبان‌ها نیز تعریف متغیرها، تخصیص مقدار به آن‌ها، عبارات شرطی، توابع و ... وجود دارند اما برای بیان آن‌ها از "جعبه‌ها و پیکان‌ها" استفاده می‌شود. مثلا تخصیص عدد یک به متغیری صحیح به نام Test با کاربرد دو جعبه و یک پیکان به صورت زیر انجام می‌شود. در زبان‌های متنی ترتیب اجرای خطوط برنامه از بالا به پایین است اما در زبان‌های تصویری پیکان‌ها بیان می‌کنند که کدام دستور باید اول انجام شود و کدام دستور پس از آن و الی آخر.
                                 _________          __________
                                 |   Test  |<========|   1   |
                                 |_______|         |_________|
برای فرستادن پیام معروف Hello World در این زبان‌ها معمولاً نیاز به ساختن دیاگرام زیر است. ساختن این نمودار نیز کاملا به صورت تصویری امکان‌پذیر است (نیاز به باز کردن یک یا دو پنجره در محیط برنامه‌نویسی و چند کلیک است).
                       __________________                      ___________________
                       |   Sample Dialog   |<====Alert Dialog====|  Hello World   |
                       |________________|                     |___________________|
منبع